How I Built My Corner of the Web

After years of wanting to build my blog, here it is finally

The first post of this blog will be a quick description of how I built it.

Choosing the Tech Stack

When deciding how to build this blog, my primary requirements were:

1. Blog posts should be written in Markdown for simplicity and portability.
2. The blog should consist solely of static content, making it lightweight and easy to host anywhere.

With these criteria, I identified several popular static site generators as potential candidates:

• Hugo
• Jekyll
• Astro
• Gatsby
• Eleventy

I was particularly interested in frameworks from the JavaScript ecosystem. This narrowed my choice to Astro and Eleventy. I finally chose Astro as it offers more built-in features and is slightly more popular.

Building the Blog

Next came the challenge of building the blog. Since I wanted to focus on the content rather than the technical details, I decided not to reinvent the wheel. Instead, I started with a pre-existing Astro theme: astro-paper.

In just five minutes, the blog was up and running on my local machine. After tweaking it to suit my needs, here it is!
The source code is freely available here: github.com/cyprieng/cyprien.io.

Adding Comments

To allow you to interact with posts, I integrated comments using Giscus. It’s:

• Free and open source.
• Easy to integrate without needing a server.
• Powered by GitHub Discussions, avoiding vendor lock-in.

Hosting the Blog

I chose Cloudflare Pages for hosting because:

1. It automatically builds and deploys changes whenever I push to the main branch.
2. It offers preview environments for the development branch.
3. It’s completely free for my use case.

Analytics

While analytics might not be critical for a blog, I’m curious to have basic visitor trends. I opted for Goatcounter. It’s:

• Free.
• Lightweight and respectful of user privacy.
• Can be self-hosted easily (with a simple Dockerfile hosted on a hetzner server with kubernetes).

Performance and Accessibility

Optimizing performance and accessibility was a key goal. Here are some highlights:

• Performance testing:
  Tested with pagespeed.web.dev.

• Accessibility testing:
  I used these tools to ensure accessibility compliance:

  • WAVE Evaluation Tool
  • axe DevTools

• Environmental impact:
  
  Tested with websitecarbon.com.

License

The LICENSE for this kind of project is a bit tricky, here is mine: LICENSE. The license is split in two parts:

• Blog content: Licensed under CC BY 4.0.
• Technical components: Licensed under MIT License.

This split licensing allows others to freely use the technical parts while requiring attribution for the content.

Why “colophon” in the URL?

A colophon is a term from publishing. According to Wikipedia:

In publishing, a colophon is a brief statement containing information about the publication of a book, such as its place of publication, publisher, and date.

I discovered this term from this blog post and found it fitting for a post about the blog itself.

Feedback and Suggestions

Your feedback is invaluable! If you notice any issues or have suggestions, you can:

1. File an issue on GitHub.
2. Contact me directly via email (link in the footer).