Building a website using Hugo and Hosting it on GitHub Pages

Building a website using Hugo and Hosting it on GitHub Pages

October 26, 2023
Development, Tutorials
markdown, development

Installations #

  • Install Git - Link
  • Install Hugo - Link

Configuration #

  • To create a new Hugo website, run:
hugo new site mynewsite
  • then cd to the directory
cd mynewsite
  • Initialize the site as a git repository
git init
  • Choose the hugo theme that suits you.
    Hugo offer a selection of themes developed by the community. This site for example was built using Hugo-Book.
  • Add the theme as a submodule
# For example:
git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book
  • Add the theme to your site configuration file
# Could be config.toml OR config.yaml OR hugo.toml OR hugo.yaml
echo "theme = 'hugo-book'" >> config.toml
  • You will be able to see a first version of your website locally by running:
hugo server --minify
  • Edit your configuration file
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
Theme ConfigurationGuidelines
Themes' publishers offer guidelines to configure your webiste in accordance to the theme. Check your theme publisher page on hugo themes or their theme github repo for guidance and help.

Hosting on Github Pages #

  • On your project settings, go to Pages. You’ll be able to see your site’s link.
  • Choose a Build and deployment source (Github actions OR deploy from branch).
  • You can also choose to publish it on a custom domain.
  • Edit your configuration file
baseURL = 'https://username.github.io/repository'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'hugo-book'

Other Great Tools For Building Static Websites #