Build tech blog with Jekyll Chirpy template
Summary
In this post, I will introduce the various options I explored
and the pros and cons I encountered while building a tech blog.
I will also explain why I ultimately chose the combination of Jekyll + Chirpy template.
My Criteria
The criteria I considered when choosing a platform and template for a tech blog were as follows.
- Must support Markdown natively.
- The design has to be visually appealing.
- The Table of Content should appear on the right side, and it would be great if it highlighted when scrolling.
- Comment functionality should be natively supported.
- If it’s a one-time payment, I don’t mind it being a paid option.
- There must be a wide variety of custom templates available for blogs.
- The template should be actively maintained.
- Migration should be easy.
- There should be a tag section for posts, and when clicking on each tag, the related posts should be sorted and displayed.
Tech Blog Platform Options
Below are the platforms I experimented with to build a tech blog,
along with their pros and cons based on my criteria.
WordPress
There’s a domain-provided model (https://wordpress.com) and the option to set up a self-hosted version.
I had already purchased a domain that I wanted to run on AWS (wonhee.net), and I could easily launch a pre-optimized WordPress environment with AWS Lightsail.
While WordPress offers many plugins and is user-friendly, the fact that documents are stored in a database makes migration inconvenient.
I felt that a simple yet powerful Markdown-based static site generator would be more suited for a tech blog,
so I discontinued using WordPress during customization process.
Pros
- Can be built using a domain-provided model.
- If you have server knowledge, you can run it on cloud providers like AWS, Azure, or GCP.
Cons
- Not Markdown-based.
- Too heavy for a tech blog.
- Documents are stored in a database, making migration cumbersome.
Ref
VitePress
This is a solution that my company uses as a document generator.
Since it’s now being used for all official Vue documents, it’s trustworthy.
The design is clean, and it’s actively being developed, which made it appealing.
However, since it’s specialized for document sites, customizing it for a blog seemed necessary.
While some blog-customized solutions were available as open source, they didn’t quite meet my expectations.
Pros
- Actively being developed.
- The design is clean and well-made.
- Easy to customize if you know Vue.
Cons
- Optimized for document sites, not well-suited for blogs.
Ref
Hugo
We also use Hugo in the company as a document generator.
It has a fast build speed, and changes are instantly reflected.
While there are multiple blog templates available,
I couldn’t find a template that matched my needs when compared to Jekyll.
Pros
- Fast build speed.
- Immediate content reflection, making it easy to work with.
Cons
- The number of templates is significantly less compared to Jekyll.
Ref
Jekyll (+ Chirpy theme)
Since Jekyll is officially supported by GitHub Pages,
I found many useful templates on the https://github.com/topics/jekyll-theme page.
Previously, deploying Jekyll or similar platforms to GitHub Pages required complex configuration.
But nowadays, GitHub Actions makes deployment easier, reducing setup hassles.
Among the various templates, I chose the https://github.com/cotes2020/jekyll-theme-chirpy template,
which satisfied all my criteria. I’m very happy with its design and features.
Pros
- GitHub provides a ready-made GitHub Actions example for deploying Jekyll, so you just need to use it.
- Meets all the criteria mentioned in my criteria.
- A wide variety of blog-related templates are available.
- The design is beautiful.
Cons
- It’s based on Ruby, so some knowledge of the Ruby ecosystem is needed for customization.
Ref
Conclusion
Although I ended up choosing Jekyll + Chirpy theme,
Gatsby, a React-based platform, seems to be gaining popularity.
For now, I’ll run my tech blog in its current form, but I might explore Gatsby if changes are needed in the future.