Video summary (in bullet points) of Creating a Blog with Hugo and Github in 10 minutes by Ryan Schachte

Setup

  1. Create two repository:
    1. One for our Hugo code, your development repo, we will be calling this the dev repo
    2. Another for the deployed static rendered webpages, the production repo: <name_of_the_site>.github.io, we will be calling this the prod repo

Hugo Stuff

  1. I will be installing Hugo in Windows 10, using chocolatey: choco install hugo-extended
  2. clone the dev repo and cd into that
  3. Create the hugo site there with hugo new site <name_of_the_site> [0]
  4. cd into the newly created <name_of_the_site> directory
  5. Selecting a theme
    1. From your web browser, choose a theme from here: https://themes.gohugo.io/
    2. Follow the instructions to install the theme [1]
  6. Edit the hugo.toml file:
baseURL = "https://anyfactor.github.io/"
languageCode = "en-us"
title = "Anyfactor's blog"
theme = "fuji"

I am using the fuji theme

  1. Development preview: hugo server
  2. Creating a new post: hugo new posts/<name_of_post>.md
  3. Edit the markdown blog post. Remove draft: true from the metadata section. Add the tags and description metadata.

Deployment

  1. Adding the production site repo:
    1. Have atleast one commit on the prod repo for further future commits. You can clone the repo, run touch README.md and push the main branch.
    2. On the dev repo add the prod repo as a submodule: git submodule add -b main <prod_repo_url> public. [2]
    3. The above command will bring the main branch of the prod_repo to the public directory
    4. The public directory will contain the rendedred static webpages.
    5. When you render the static webpages the prod_repo contents will be written.
    6. Then you can push rendered static webpages to the web.
  2. To generate the static files into the public directory: hugo -t fuji. -t stands for theme.
  3. cd into the public directory where prod repo website lives. Git add → commit → push to publish the new site.
  4. cd back into the previous (/root) directory. Git add → commit → push the dev repo.

Notes

[0] Create site first then add git

Create the site first, then inti the git repo there.

[1] Installing Fuji Theme [Repo]

  • Adding the theme: git submodule add https://github.com/dsrkafuu/hugo-theme-fuji.git themes/fuji
  • Summary splitting. Add the summary section then add <!--more--> then the main content : https://github.com/dsrkafuu/hugo-theme-fuji#-notice
  • Sample post metadata:
title: "Setting up Hugo"
date: 2023-07-01T23:06:13+06:00
description: "Creating a new hugo site using Ryan Schachte's tutorial"
tags: ['hugo']

[2] master vs main

I need to declare the master branch here as my prod repo is older.