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.
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
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