Create and Setup your blog repository on GitHub

  • Blog sites hosted on GitHub usually have the repo name USERNAME.github.io

Locally setting up our blog site with Hugo

  • Get a local copy of a GitHub repository using the git clone command
  • Initialise a blog site with hugo using the hugo new site command
  • Add a blog theme as a submodule using the git submodule add command and configure the theme by editing the config.toml file

Push our Hugo site to GitHub

  • Local changes are saved and tracked using the git add and git commit commands
  • The remote repository on GitHub is synced with a local repository using git push. The reverse sync is achieved with git pull.
  • A Pull Request can be opened and merged in the GitHub browser interface

Automating Website Deployment

  • Continuous Deployment of a website involves rebuilding and republishing the site with every change
  • GitHub Action workflows are YAML files that contain triggers, jobs and steps that are performed automatically. GitHub automatically detects these files in the .github/workflows folder.

Generating Blog Content

  • Files to be included in the site, without modification, should be placed under the static folder
  • New content is generated with the hugo new command
  • Hugo automatically generates title, date and draft frontmatter for content
  • External content is embedded into posts using shortcodes

Closing Remarks

  • We’ve setup a repository on GitHub with a Hugo site template and a theme via a git submodule
  • We’ve added a Continuous Deployment pipeline that automatically builds our website and publishes it to GitHub Pages whenever we merge a change, using GitHub Actions as a vendor
  • We’ve created a new post with Hugo and added content, including updating our profile picture and embedding content from external sources using shortcodes
  • The theme can be changed by running a new git submodule add command, but the configuration file will need updating