This blog post will talk about how I created my first-ever blog website, and you are currently reading the first post of it. It is hosted on GitHub Pages and uses GitHub CI extensively.
Before creating this website by hand, I hesitated with the Hey.com blog hosting service. The one advantage is that exposing your thoughts online will not take a week the first time. Sending an email will publish your post.
However, there is a reason why I didn't choose world.hey.com for my blog: I don't want to be locked in on this platform, and code highlighting needs to be supported.
fn main() {
println!("That's so much better than world.hey.com...");
}So, I decided to take inspiration from Utterances and use issues to display articles on my blog. The first message of an issue labeled as article is displayed on my blog. Note that I am the only one having triage rights, I can label any issue as an article, even someone else's issue and it will be correctly displayed on my blog with the right profil picture and name. Whenever an issue is edited, GitHub triggers the CI and generates the static HTML pages. The GitHub iOS app is excellent for editing issues with markdown, adding links, images, code blocks...
It was a great surprise how easy it was to make this blog alive. The GitHub API is so complete and easy to use. As I am building the static page generation in Rust, I used the octocrab library for easiness. The most exciting part was that GitHub exposes a complete HTML document of the content of your issues, especially exposing the code blocks' tokens with the proper syntax highlighting. The Starry Night library was quite helpful in generating the colors for these tokens!
Once I retrieved the issue HTML content, I used the Askama templating library to generate the static pages. Pages are accessible via the snake case-encoded issue title. But one new issue just raised: Whenever I update the article's title, it will break the page link. I read on the internet and discovered that creating HTML redirection pages was possible. Cool, right?! The GitHub API also exposes the renaming events. I used those events to generate the redirection static pages from every previous issue title to the current one!
Now, it's time to make it pretty. I used Bootstrap because I wanted to avoid learning a new CSS tool and because I find it better to use boring technology when it perfectly does the job. By using version 5.3, you even got dark/light mode out of the box. However, Bootstrap is extensive, and I needed to use PurgeCSS to remove more than 224ko of unused CSS rules. By doing so, I achieved 100% on every performance gauge of the Google Pagespeed website 👌
This blog website is available on GitHub. Host it under your GitHub account and have a pretty blog website. Create issues and edit them to see them alive. There are some improvements to make, like using the repository description as the meta description used by the search engines or fixing some issues I got with the images backed-up by camo or replacing the ...@ references with links from the author bio text