After years of wanting to build my blog, here it is finally. The first post of this blog will be a quick description on how I’ve built it.
Choose the tech stack
My primary requirements were:
- Blog posts should be written in markdown
- The blog should be hostable with only static content
With these two requirements, a list of obvious contenders was:
- Hugo
- Jekyll
- Astro
- Gatsby
- Eleventy
| Hugo | Jekyll | Astro | Gatsby | Eleventy | |
|---|---|---|---|---|---|
| Language | Go | Ruby | JavaScript | JavaScript | JavaScript |
| Year | 2013 | 2008 | 2021 | 2015 | 2021 |
| Build Speed | Very Fast | Fast | Fast | Moderate | Fast |
| Ecosystem | Large | Large | Growing | Large | Growing |
I wanted to have a framework in the Javascript ecosystem. And from this, the two best were, in my opinion, Astro and Eleventy. I finally settled for Astro as it seems to have a slightly bigger community and more features.
Build it
Then came the normally hard part, building the blog from the ground up. I think the value comes more from the content than the tech side of the blog. Moreover, I have a lot of more interesting projects on the shelf. So I decided not to start from scratch and instead start with an existing Astro theme. I settled for this one: astro-paper.
5min later my blog was up and running on my laptop. After some customization, here it is. All the source code is freely available here: github.com/cyprieng/cyprien.io.
Comments
I’ve added comments to the blog posts using Giscus. It’s free, open source, and doesn’t require any server.
Hosting
I use Cloudflare Pages to host the blog. It’s very convenient as it automatically detects push on the main branch, builds it, and deploys it. It also provides a preview environment that deploys automatically my dev branch. And the cherry on the cake it’s completely free.
Analytics
I have wondered for a long time if an analytics is necessary for a blog. I think it’s not, but I really like to have a basic understanding of who comes here, even if I should not care about this.
So I set up Goatcounter as my analytics. It’s free, simple and respectful of personal data.
Performance and accessibility
I’ve made significant efforts to optimize performance, although there’s always room for improvement:
Tested with pagespeed.web.dev
I’ve also checked the accessibility using these two Chrome extensions:
I’m also proud of the site’s environmental impact:
Tested with websitecarbon.com
License
The LICENSE for this kind of project is a bit tricky, here is mine: LICENSE. All the files in the content directory (ie the blog posts) are under CC BY 4.0. And all the other files are freely usable by anyone under the MIT license. Like this, all the technical parts can be used by anyone, but the content cannot be copied without attribution.
Why colophon in the url?
Colophon comes from the publishing world.
From Wikipedia:
In publishing, a colophon is a brief statement containing information about the publication of a book such as an “imprint” (the place of publication, the publisher, and the date of publication).
And I learned about it from this blog post.
Notice an issue or have an idea?
Your feedback is valuable! If you notice any issues (typos, broken design, etc.) or have suggestions for improvement, please:
- File an issue on GitHub
- Contact me directly via email (link in the footer)