How I built this website (part I)

Intro

I built this site to keep some thoughts written somewhere but also as an exercise. Although I’ve work many years as a Linux SysAdmin (or maybe because of that) I didn’t want a full blown CMS, with database, web server, php, backend administration and so on.. I wanted something simple and easy to maintain, cheap and free (as in freedom).

CMS like WordPress generate pages dynamically, making database calls, running code interpreters like php, etc.. everything in real time when you want to access a page. Static content generators on the other hand, generate content ahead of time, so when users access a page all the server needs to do is send them a static page. That is better for performance and also for security (no code exploits, sql injections, etc.).

How do static generators work?: You feed them markdown and they will generate markup (html), applying a template and a sytle or theme, easy-peasy.

Setup

First of all, install Hugo package for you OS/distro (apt, pacman, brew..) or download from https://gohugo.io/

Go to the directory where you want to create you new web site, and generate the basic directory structure with:

hugo new site

You’ll need a theme. You can find lots of them at https://themes.gohugo.io/. Then you download one manually or clone it with git (in my case I choosed PaperMod):

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Then you can edit the config file of the site: config.toml (this can be a yaml or a toml file), to personalize your site, changing some fields and choosing a theme (wich you’ve previously downloaded).

baseURL: "https://examplesite.com/"
title: ExampleSite
paginate: 5
theme: PaperMod

Generate you first post with (you can also create the file manually):

hugo new posts/my-firts-post.md

Then you can edit this post. The first part of the file is a header where you can set some fields (title, date, author..). You can also add tags and categories which will help to organize and find content.

---
title: "How I built this website (part I)"
date: 2022-03-17T01:08:10+01:[00](00)
draft: false
author: Alfons Soriano

categories: 
- SysAdmin
tags: 
- web
- hosting
---

## Intro
I built this site to keep some thoughs written somewhere but also as an exercise.

Finally, you can preview your post by running the Hugo internal web server on localhost:

hugo server

You will be able to see the content by pointing your browser to http://localhost:1313

If you like the content you can generate the static files (the output will be in ./public directory by default).

hugo -D

..or you can push everything somewhere and let the magic happens, as we will see in part II of this post.

Intro#

Setup#

Intro

Setup