It’s an idea to open a blog, but writing regularly is a challenge. And above all, what subject shall I discuss after a first introductory post? Finally, I thought it might not be a bad idea for you to present how this site is working, and therefore this blog.

It’s an idea to start a blog, but writing regularly is a challenge.

And more importantly, what topic to write about after a first introductory post?

Finally, I thought it might not be a bad idea to introduce you to how this site, and therefore this blog, is working.

I’ll present you my system in three parts:

  • which tools I use to build my site,
  • the hosting service,
  • the publishing flow.

A CMS? Which CMS?

I don’t want a complex system. My site is not complex and a simple static site generator seems to be the best option.

On my previous sites, I used the Jekyll generator. But the internal organization of the files is not necessarily the easiest. For example, I’d like to be able to organize a publication as a simple folder that bundle the source document in Markdown and the images and resources associated with it.

That’s why I choosed another site generator instead: Hugo!

Very similar to Jekyll in principle, it allows to organize the publications according to my preference. The page template format remains familiar and it is even possible to extend the possibilities of Markdown by defining specialized tags, shortcode.

The tool is fast to generate a site, which is a small bonus.

Of course, it integrates a server that observes all the modifications on your project. An ideal solution in the development phase of the site theme or content editing.

Hosting

At the risk of repeating myself, my site is not complex and it contains a minimum of heavy media. For a static hosting, there are many solutions.

I choosed Netlify.

Why?

To begin with, Netlify offers a free service tier that is largely satisfactory for most of my needs. And if those increase, it will be easy to migrate to a paid option.

But if hosting the content produced by Hugo is essential, it was also important to be able to build an automatic publishing flow. And for that, Netlify can build my site as soon as I publish an update to my content.

So it’s time to talk about my publishing workflow.

The publishing workflow

An diagram of my publication flow

Source code and contents

The content of my site is divided into two parts:

  • the theme used for the publication;
  • the content of the site itself.

Normally, the theme is imported from an independent package. But as this is my personal site, I didn’t try to make it as modular as possible. I don’t intend, for the moment, to publish the code of this theme. So it is stored in the same Git repository, with the content of the site.

So, I have a Git repository containing both my contents and the Hugo theme used.

When I finish writing an article, I validate my modifications in the main branch of my Git repository and I publish them on the main repository hosted by GitLab.

Automated publishing

There are several ways to automate the generation of the site by Hugo. But Netlify proposes a particularly well adapted system in the form of a publishing mechanism able to integrate with different tools, including Hugo.

This is the system I use.

Netlify is notified when my repository is updated as soon as my code is updated on GitLab. It triggers the publishing process, which will call Hugo to generate my site in its final form.

Hugo will produce the content of the site, the stylesheets, the scripts, and organize everything in a folder that will be directly hosted by Netlify.

And here it is, my site is updated and directly published, in a few seconds or few minutes.

That’s it for this first article about my website. See you in the next episode.