Static website generation with Hugo

Mon, 14 Oct 2019 16:55:21 +0100

Today I unveiled our new website! Thanks to Daniel for hosting. It’s powered by Hugo, a static website generator.

The best way to install (the latest version of) Hugo can be found here. In short, download the latest release and add the binary to your path.

Here’s how you can add your sessions to the site:

Speak to me if you don’t already have write permissions
Clone the repo:

git clone --recurse-submodules git@github.com:eidoom/computing-club-site.git

Navigate to the root directory of the repo locally

cd computing-club-site

Run a local Hugo server so you can check out your changes in realtime here with

hugo server

Make your new session page by running

hugo new sessions/NAME.md

Edit the metadata within the +++’s at the top using TOML notation and write the body of your page in Markdown at the bottom of the file

vim content/sessions/NAME.md

The metadata field cover should point at the cover image for your page. Add the image file to static/img along with any other images (or other media files) you include. Note that the path should not include static as the contents of static are put into the root of the compiled website. So for a cover image at static/img/COVER.png, the metadata field cover should be the path "img/COVER.png".

Stage your changes:
If you want to push the newly compiled website, first generate the updated static website by running

hugo

then

git add .

Or if you want to push your changes to the source without pushing the compiled website, just

git add content/sessions/NAME.md static/img/PHOTO.png

and any other media files you included

Then finally push your changes to the remote repo

git commit -m "MESSAGE"
git push

and you’re done!

Have a look at the source for this page if you like. The Hugo docs are also pretty good.

html on Computing Club

Static website generation with Hugo