The Vision: A Low-Maintenance, High-Performance Personal Site

When I decided to start this blog, I had a few key goals in mind. I wanted a site that was:

  • Fast: Performance is crucial for user experience and SEO.
  • Easy to manage: I wanted to focus on writing, not on complex server maintenance.
  • Free or low-cost: As a student, keeping expenses down is a priority.
  • Automated: The process of publishing new content should be as seamless as possible.

After some research, I settled on a JAMstack (JavaScript, APIs, and Markup) approach, which led me to the combination of tools I’m using today. Here’s a breakdown of how they all fit together.

1. Hugo: The Static Site Generator

At the core of my setup is Hugo, an incredibly fast static site generator written in Go. Here’s why I chose it:

  • Blazing Speed: Hugo can build a complete site in milliseconds. This means that when I’m developing locally, I can see my changes instantly.
  • Markdown-Based: I can write all my posts in Markdown, a simple and intuitive markup language. This allows me to focus on the content without getting bogged down in complex formatting.
  • Powerful Theming: Hugo has a robust theming system. I’m using the popular PaperMod theme, which I’ve customized with my own colors, fonts, and layouts.

2. Git & GitHub: Version Control and Content Hub

All of my site’s code and content is stored in a Git repository, which is hosted on GitHub. This provides several advantages:

  • Version Control: Every change I make is tracked. If I ever make a mistake, I can easily roll back to a previous version.
  • Centralized “Source of Truth”: GitHub acts as the central hub for my entire website. All of my content lives here, and it’s the trigger for the automated deployment process.
  • Collaboration: While it’s just me for now, using Git and GitHub makes it easy to collaborate with others in the future.

3. Netlify: Automated Build and Deployment

This is where the magic happens. Netlify is a platform that automates the process of building and deploying my site. Here’s how it works:

  1. I connect my GitHub repository to Netlify.
  2. Whenever I push a new commit to my master branch on GitHub, Netlify is automatically notified.
  3. Netlify then runs the hugo command to build my site.
  4. Once the build is complete, Netlify deploys the new version of my site to its global CDN (Content Delivery Network).

This entire process is automated and takes less than a minute. All I have to do is write a new post and push it to GitHub, and Netlify handles the rest.

4. Buttondown: Simple and Effective Newsletters

To connect with my readers, I wanted to offer a newsletter. I chose Buttondown for its simplicity and generous free tier.

  • Easy Integration: Buttondown provides a simple HTML form that I was able to drop directly into my Hugo theme.
  • Markdown-Friendly: Just like Hugo, Buttondown supports Markdown, which makes writing newsletters a breeze.
  • Focus on Privacy: Buttondown is a privacy-focused service, which is important to me.

5. Giscus: Comments Powered by GitHub Discussions

For the comments section, I wanted a solution that was open-source, privacy-friendly, and didn’t require visitors to create an account on a third-party tracking service. Giscus was the perfect fit.

  • Built on GitHub Discussions: Giscus uses GitHub Discussions as a backend. When someone leaves a comment on a blog post, it’s actually creating a new discussion thread in a GitHub repository I’ve designated for comments.
  • Developer-Friendly: Since my site is already so integrated with GitHub, this felt like a natural extension. It keeps all the “meta” content related to my blog (the code, the content, and the comments) in the same ecosystem.
  • No Ads, No Tracking: Giscus is completely free, open-source, and doesn’t inject any ads or tracking scripts into my site.

Conclusion: A Powerful and Flexible Setup

By combining these services, I’ve created a powerful and flexible platform for my blog. The entire workflow is automated, allowing me to focus on what’s most important: creating content.

This setup is a great example of how modern web development tools can be used to create high-performance websites with minimal cost and maintenance. If you’re thinking about starting your own blog, I highly recommend exploring a similar JAMstack approach.