How to Host a Free Site - Part 4

· Read in about 3 min · (586 words) ·
go go111 hugo

Part 4 - Use Hugo To Create Site

Want to rev up that site now to look more stylish and professional? Not sure you have the chops or the time? Have no fret, Hugo is here!

Hugo Spelled Out In Gophers

Hugo is a website framework used to generate a static site from templates. Unlike other frameworks like WordPress or Wix that dynamically build a page with each visitor’s request, hugo does that heavy lifting before the site is deployed. That translates into a faster site that is cheaper to host and can be hosted anywhere!

Tutorial Steps Outlined:

  • Hugo
    • Setup Hugo Locally
    • Download Hugo Theme
    • Customize Theme
    • Build Site

Hugo Setup

Follow the install steps listed on hugo’s site for your machine.

For instance on Windows, follow the steps here exactly.

You should end up with a C:\Hugo\bin folder containing three files and the location has been added to your environment PATH.

Test out the setup in a new command window and make sure you are ready to proceed with hugo help to confirm it works.

Hugo Themes

Browse through the vast assortment of free Hugo themes to find that perfect custom site.

For instance, this site is using the Hugo Bootstrap Premium theme with additional customization.

Further information about theme install and use can be found in Hugo’s documentation here.

Once you have located the theme you’d like to use, click the «Download» button on the theme’s page.

Customize Theme

In this tutorial series, we are going to use the minimal-academic theme for you to follow along with.

First start by opening VSCode to our gopher folder used in previous tutorial ‘C:\yourPathHere\gopher.

In lower window, select the “Terminal” view.

  • Keyboard shortcut: Ctlr + j will open or close the terminal window.
  • The terminal should default to the current gopher directory. If not, cd into it.
  • Create a themes folder and cd into it.
  • Rok un git clone https://github.com/jhu247/minimal-academic.git: 1

Produces content inside the themes folder: 2

With the theme now inside our project’s folder, we are ready to cook with oil!

  1. Copy config.toml from exampleSite folder inside \themes\minimal-academic to gopher project’s root folder. 3
  2. Edit config.toml as follows:
    • Update title - title="Gopher Site".
    • Update theme - theme="minimal-academic".
    • Customize with any other personal information as desired.
  3. Create a new folder at the root - static and then another new folder inside that - img. Then save a new avatar and hero image inside /static/img/ by creating:
    • portrait.jpg
    • hero.jpg
  4. Create a new folder at the root - content. Copy the content from the /theme/exampleSite/ folder for some temporary content to tweak later.
  5. Copy .md from exampleSite and tweak as desired.

Build Site

The two key commands we will use are:

# Build the static site into the public folder:
hugo

# Run hugo server and develope with live reload:
hugo server

# Running hugo server with the --watch and --verbose flags makes development much faster and debugging much easier.
hugo server --watch --verbose

The theme has to be specified in the config.toml for the above commands to work.

# Theme to use (located in /themes/THEMENAME/)
theme = "hugo-bootstrap-premium"

If not explicitly set, then you will have to add -t theme-name-here to both commands.

Changes are render on the fly with LiveReload as you develop.

Sometimes your browser will cache resources to improve performance, so your changes will not appear. To get around this, on Chrome, control + click the refresh button and it will do a hard fetch of resources.

Hugo Magic Gif

Next Step

Coming soon in this tutorial series is «Part 5 - Deployment Automation».

Latest Posts
Tutorials
tag