Build and Deploy a Static Site in a Container Using Hugo

Wed, 27 Jul 2022 02:04:06 +0000

Why a Container?

Well I need some excuse to use my recycled homelab server. There are some more practicle reasons as well. It gives me the ability to develop remotely from all the PCs on my network by remoting in. I can deploy the site on my local network to test on various platforms!

Why Hugo?

I chose it because it generates super simple sites that I can easily maintain. Jekyll looks pretty interesting and can generate more complex sites with plugins. Maybe that will be attempt #2

Prerequisites

A workable knowledge of linux and the command line
Ability to figure out what directory you need to be in
Some kind of hypervisor to create containers
Knowledge of git
A github account to to version control and host the site

Container Setup

Ceate a new LXC container (I chose unbuntu 20.04)

The apt package manager that comes with Unbuntu has an ancient version of Hugo
So I end up installing brew to get the latest version

Add new user and password, Add to sudoers, Set the login shell

useradd <username>
passwd <username>  
adduser <username> sudo
chsh -s /bin/bash <username>

Open a new ssh session with your new username

Update the container

apt update
apt upgrade

Install curl

apt install curl

Install git and configure

apt install git
git config --global user.name "Firstname Lastname"
git config --global user.email "your@mail.com"
git config --list

Install brew - Optional depending on your package managers version of Hugo

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Hugo

brew install hugo

Create your site

Create new Hugo site

hugo new site thisismysitename

Add a theme – I cloned the Repo instead of adding it as a submodule

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

You should probably use this and add it as a submodule

git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/terminal

Copy the example site to the root dir of the site project

cp -r themes/terminal/exampleSite/* .

Build the site from project root

hugo -t terminal

To host it on your local network

hugo server --bind 0.0.0.0 --baseURL http://yourip:portnumber

Congo Rats! We have a boiler plate site.

From here on out modify as you wish.

Setting up GIT

Create two repositories on github.

Repo 1 (Deployment)

Github has a feature which will automatically host and deploy sites
Setup the github site using the github.io nomenclature
EX) mszczeblewski.github.io
This repo will hold all the files dumped to /public which is the built site

Repo 2 (Source Control)

This repo will be holding your source
In the project root update the url in config.toml so it points to your github.io page

Check out my github for an example on how I set it up

To Dos, Watch Outs

Still in the process of learning git version control
A few things I could have done better:
Ended up nesting my deployment repo within my source repo. Hugo allows you to change the /public directory where the built site is dumped. I also did not add my theme as a git submodule and it is not properly version controlled. I will have to go back and clean up both these issues.

LXC on MSzczeblewski