what is hugo anyway?


this is what the official documentation has to say:

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

and what would this firebase be?


firebase is a free serverless backend provided by google. it will allow us to host our website for free and (optionally) to connect a custom domain.

installing everything


if you are on debian or ubuntu run

sudo apt update && sudo apt upgrade
sudo apt install git hugo
curl -sL firebase.tools | bash

for arch-based distributions run

sudo pacman -Syu git hugo nodejs npm
npm install -g firebase-tools

for other operating systems check the hugo and firebase cli docs

getting started with hugo


to create the skeleton of our website we just need to run the following commands which will create a directory named “andreafeletto.com” with everything we need inside it and move us into said directory

hugo new site andreafeletto.com
cd andreafeletto.com

looking at the content of the root directory we see the following tree

.
├── archetypes/
├── content/
├── data/
├── layouts/
├── resources/
├── static/
├── themes/
└── config.toml

these are the most important directories and files:

  • archetypes: contains files which are copied when we create a new post
  • content: contains a directory tree of markdown files which are the content of our website
  • themes: contains the themes, of which only one must be chosen
  • config.toml: the main configuration file, which we will soon edit extensively

we then need to get a theme for our website, in this case terminal. to do this we can clone the theme repository into the themes directory

git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal

we will then edit config.toml according to the theme's documentation. this is what we get (after changing some of the default values):

baseurl = "https://andreafeletto.com"
languageCode = "en-us"
theme = "terminal"
paginate = 5

[params]
  contentTypeName = "blog"
  themeColor = "orange"
  showMenuItems = 3
  showLanguageSelector = false
  fullWidthTheme = true
  centerTheme = true

[languages]
  [languages.en]
    languageName = "english"
    title = "andrea feletto"
    menuMore = "more"
    readMore = "read more"
    readOtherPosts = "other posts"

    [languages.en.params.logo]
      logoText = "andrea feletto"
      logoHomeLink = "/"

    [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "movies"
        name = "movies"
        url = "/movies"
      [[languages.en.menu.main]]
        identifier = "contacts"
        name = "contacts"
        url = "/contacts"

this is the meaning of the first four lines (which should be enough for now):

  • baseurl: url of the website once published
  • languageCode: main language in the format “lang-state”
  • theme: name of the directory inside themes/ we choose to be our theme
  • paginate: number of posts listed per page

making some changes


deploying to firebase