Using CI/CD to make this blog?

2nd post? So soon?

Yes. And it’s to talk about some pretty important information, since you know we out here writing blogs! Or rather, we are writing blogs in a funny way. Now, the method’s I’ve applied can be used to write a blog using GitHub Pages. And I won’t be going into that, because I’m pretty sure five thousand other people have covered that method, all of whom will be easily searchable. Probably.

Who am I kidding, that’s not important. But either way time to yap!

The making of a Static Blog

So, the usual method of making a blog this way is to write the templating yourself, most SSGs (Static Site Generators) support writing templates, dynamic routing based on content and all sorts.. For this blog I used Astro which can also function as more than an SSG and handle doing it non-statically with SSR. Which is honestly, pretty impressive stuff, there’s a couple methods that can be used for writing astro pages and such, but I ended up just using a template and default .astro files. But I really do like how it follows the methodology you’d use to write an SPA but is designed around full site generation. I could see myself creating a full dynamic site with this framework in the future at some point!

While Astro powers generation of the site from the markdown files I put in, there’s a few extra parts involved. That’s where CI/CD comes in. You can use GitHub Actions to do similar on GitHub Pages, but my setup is as follows:

  1. Private repo on my selfhosted Gitea instance on a VPS
  2. Hosted version of git-pages on a VPS
  3. Gitea Workflow to build then upload to my git-pages instance. Uses the standard pnpm actions with a git-pages action

If anyone wants to replicate this setup for git-pages I may write a blog post on that, the documentation isn’t incredible as of writing but it was’nt particularly hard to collect all the needed pieces between the repo, the unfinished docs site and the git-pages-cli repo.

With that setup all taken care of it is as simple as writing a post locally in a markdown formatted file, commiting and pushing and suddenly my blog post is live and it’s all setup as needed without any complex site logic! Simple as that!

Or…

The comments.

Yeah, so there is a final component to a blog I felt I needed, and this did introduce a little complexity, more on that later. Firstly, I should mention that I wanted to do something like Disqus, but self-hosted. Why self-hosted? Because Disqus is a bloated mess and I wanted something I could tinker with and edit. This led me to a couple options:

  1. Commentio
  2. Isso
  3. Cusdis

Now of these options, initially I was leaning away from Isso, this is because it’s not super pretty and didn’t look easy to style. Then I checked out both of the other options and found they weren’t actively being maintained. This was a problem for me as while I am a tinkerer I do not want to spend my time maintaining a comment system if the js/backend breaks in 4 years (Docker helps mitigate this but still). I still may migrate to Cusdis at some point because of this, but I noticed a lot of forming issues. While Isso hasn’t had a release in 2 years it is being worked on and it is rather small and efficient. Thus I ended up with Isso. There have been other soltuions I’ve seen but requiring no auth with basic moderation just feels right for this blog.

Thus, did I setup the docker container, config it to enable the features and markdown I wanted, set it to use Gravatar. Add the script to my blog posts and then I was done.

Or…

Nightmare 1: (Mis)Configuration Woes

So this is a little bit of a self-report but my config when I was done looked a little like this (redacted for obvious reasons):

[general]
dbpath = /db/comments.db
host = https://tobi.furryarmp.it/
notify = smtp
gravatar - true
gravatar-url = https://www.gravatar.com/avatar/{}?d=identicon&s=55
[server]
listen = http://localhost:8080/
[admin]
enabled = true
password = [redacted]
[markup]
renderer = mistune
[markup.mistune]
plugins = strikethrough, subscript, superscript, spoiler
[moderation]
enabled = true
[guard]
enabled = true
ratelimit = 2
direct-reply = 3
reply-to-self = false
require-author = false
require-email = false
[smtp]
username = [redacted]
password = [redacted]
host = [redacted]
port = 465
security = ssl
to = t0w0bi@drgn.rocks
from = Pit Comments! <comments@furryarmp.it>
timeout = 10

Did you noticed the mistake?

If you haven’t (the syntax highlighting makes me look stupider ok?) I’m about to get into it:

For some reason, I failed to noticed that the gravatar variable was set with a - not a =. And boy, this went on for hours. It was very funny when I finally saw the cause at the end. I actually tried different Isso commits, checked the GitHub issues, I genuinely, genuinely was pulling my hair out and considered leaving avatars off entirely because of this. I am genuinely still in shock after a whole day that this was the issue.

Thank god I noticed, because I do love having my little avatar in the comments :3.

Nightmare 2: Cascading Style Sheets#

I hate CSS. I hate CSS. I hate CSS.

Isso feels dated in it’s styling, but also the things it uses. A lot of isso’s styling would be smoother if it was designed around flexboxes like most of the internet is. And yet it is not. And since I cannot display comments offline. This left me with one option to customize the styling just enough into what you see today. Repeatedly rapidly push out blog updates to test styling choices.

Below is a screenshot of how many commits this ended up being.

You can see my slow descent into insanity.

Git commits featuring humurous descriptions such as "Final Pam" and "UNDO UNDO"

And in the end this is the styling overrides I ended up with:

/* Isso Customization */

/* Override the variables in root */
main {
  --isso-primary-text-color: var(--color-text);
  --isso-secondary-text-color: var(--color-text-secondary);

  --isso-border: 1px solid rgba(229, 229, 227, 0.2);
  --isso-box-shadow-color: rgba(229, 229, 227, 0.1);
  --isso-hover-color: #DECEDE;

  --isso-link-hover-color: var(--color-link-hover);
  --isso-link-text-shadow-color: #DECEDE;

  --isso-input-background-color: #fff;
  --isso-input-outline-color: #3584e4;

  --isso-button-background-color: #ddd;
  --isso-button-border: 1px solid #ccc;
  --isso-button-hover-background-color: #ccc;
  --isso-button-active-background-color: #bbb;

  --isso-preview-border-color: #f0f0f0;
  --isso-preview-box-shadow-color: #888;
  --isso-preview-background: repeating-linear-gradient(
            -45deg,
            #f8f8f8,
            #f8f8f8 10px,
            #fff 10px,
            #fff 20px
  );

  --isso-pre-color: #4d4d4c;
  --isso-pre-background-color: #eee;
  --isso-pre-border-color: #ddd;

  --isso-comment-divider-color: rgba(229, 229, 227, 0.1);
  --isso-page-author-suffix-color: #DBA2D8;
  --isso-target-fade-background-color: #eee5a1;
}

/* All margins and padding are default 0 in my blogs styling so account for that this is for the comments + comment footer bit to be away from the avatars (55px = avatar size) otherwise they overflow onto the 2nd line in a wierd way. */
.isso-text p {
  margin-left: 0.95em;
  padding-left: 55px;
}

.isso-comment-footer {
  margin-left: 0.95em;
  padding-left: 55px;
}

/* Add margin back to add spacing to these elements */
.isso-author {
  margin-right: 0.5rem;
}

.isso-page-author-suffix {
  margin-right: 0.5rem;
}

/* Remove the spacer, it's ugly in my font. */
span.isso-spacer {
  display: none;
  width: 0;
}

/* Fix spacing and attempt a min-width, left in cause I'm lazy. */
.isso-votes {
  margin-right: 0.25rem;
  min-width: 2rem;
}

/* It looks a little off being aligned with no votes */
.isso-no-votes > * > .isso-comment-footer .isso-upvote {
  margin-left: 1.25em;
}

/* Remove whitespaces by setting font-size to 0 as these are svgs */
.isso-upvote {
  font-size: 0;
}

.isso-downvote {
  font-size: 0;
}

/* Rounded avatar. */
.isso-avatar img {
  border-radius: 20%;
}

In case anyone wants to do anything similar, using Isso and a similar layout.

I’m actually quite a fan of the “lo-fi” style it ended up with, it matches my blog almost perfectly! It feels just right even.

Silly Small Note

While trying to Publish this post I actually ran into an issue.

An error linking to an astro page about pnpm requiring sharp to be manually installed for image processing.

Yeah. I had to edit my workflow.yml to install sharp, it was a pretty funny issue all things considered.

Conclusion.

Somehow, even comments self-hosted became a nightmare. Though moderation if people actually read this could be a problem, so don’t comment too much ok? And I CAN AND WILL NOT APPROVE YOUR COMMENTS AS I SEE FIT I AM YOUR OVERLORD. With that power trip over, please comment responsibly, if you do. And please make use of Gravatar, it will make me feel pretty!

Oh wait, a conclusion?

Yeah, I’ll do that. So in conclusion a self-hosted blog was pretty cool to put together. Despite the teething issues I’ve really enjoyed the process (I actually implemented Pagination on posts today but it won’t be seen for a while probably.) Making the parts from a template myself genuinely has made me super attached to this and while I may not commit to regular updates, I hope I can be amusing for the people that do read.

Oh I might add an author Written By bit to posts later. Even though I’m the only writer.

No Promises.

Note: Comments use Gravatar if you have one set to your email!