Selecting the Tool to Develop This Blog

Introduction

By these days there are a lot of approaches you can adopt to develop blogs and websites in general. We have options like Next.js or Astro, which are two of the fully featured and that gives you the entire control of your project. And we also have options like Wordpress, a CMS which allow you to ignore technical details for you to could focus on website content. In this article I will show you how I conceptualized this blog for you to could learn from my experience.

Static sites generator

As a pasionate software engineer, I always like to analize different approaches and try to always develop the best possible solution. Even though this sounds good, you probably agree with me when I tell you that this is the reason why many times projects are not finished, and mainly for this reason I decided to use a static sites generator (SSG) to develop this blog. But, what is an SSG?

An SSG is a tool that generates websites (HTML, CSS and Javascript) before a user visits it. I mean, Wordpress, for example, saves its articles in databases and every time you access to the website it loads them from the database to show you their content. SSGs embed the articles (mainly generated in Markdown) in the static files generated for the website.

Now that we understand about SSGs, let see which advantages they bring to the table:

• Performance. Because pregenerated HTML files are delivered instantly through a CDN (not always, but this is how it should be), the website speed is quite fast
• Security. Because there is no data processing in the backend side (this is not completely true, but most of it), the possible attacks are pretty reduced
• Scalability and easy deployment. Serving static files is pretty easy, you can use services like Github Pages or S3 Buckets to achieve this.

Selecting the static site generator

Now we have to select our SSG, and there are plenty of them out there, so you should choose carefully. I selected Hugo, an SSG powered by Golang (along with Typescript my two favorite programming languages), which makes building websites fun and fast, and this is, among some other features, thanks to its templates ecosystem. In this link you can take a look at all templates available in the Hugo ecosystem, which are pretty customizable. I selected this one mainly because of its design and the integrations with third party services it has available.

Depending on which technologies you are most familiar with, you may want to consider Gatsby, an SSG powered by React. In case you prefer Vuejs, you may use Nuxt.js or Gridsome. When taking your decision, I encourage you to think mainly in the one which allows you to develop your blog in the fastest and more customizable way.

Thanks to my decision I can assure you that it took less than two days from the moment I decided to create the blog until I launched it, and for this type of websites which are not complex, time to develop them is pretty important.

Features of the template I selected

Besides design, you should consider whether the template you select (in Hugo’s case) has available the integrations you will need for your blog. Below are some of the integrations I used:

• Google Analytics (website analytics)
• Gitalk (comments feature)

For you to understand the importance about integrations, below I show you the only code I added to integrate my website with Google Analytics:

[params.analytics]
  [params.analytics.google]
    id = "GOOGLE_ANALYTICS_APP_ID"

Downsides

As I always say, nothing is perfect, everything has its ups and downs, and here I will share with you the downsides I have found in this approach.

Comment

To me, is pretty important that people who visit the blog could comment on it, and this is precisely one of the downsides I found. As you should know, in order for the users to be able to comment on each post, your website can’t be a fully static site and this is because those comments must be stored in a database. Because of this, I had to delegate this feature in one of the third party integrations that offers the template I selected

This integration is Gitalk, a solution that allows you to store your posts comments as issues in a Github repository. In this way, you don’t need to maintain a database, but the downside is that users need to Login into their Github account. I hope this won’t be a problem for most visitors because of this blog is mainly about software engineering and cloud architecture. Actually, if you made this far, you should leave me a comment, it will really help me to keep sharing content 😂.

Newsletter

One of the functionalities I would like to implement not so far, is a newsletter, and at that time I will decide in which way I will implement this. For sure I will try to maintain the development speed and design that offers this template, but offering a positive user experience.

See you soon

This is all for now, in the next post I will show you how I deployed this static site using S3 Buckets and Cloudfront Distributions. If you consider that this content might be useful for your friends and colleagues, share it, it will help me a lot.