Build and Deploy a Static Site in a Container Using Hugo
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
Login as root
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.