Hugo is an open-source, fast, and modern static site generator is written in golang where you write your content in Markdown, which is a massive plus for me since I use obsidian for my note-taking.

Cloudflare Pages is a free way to host and auto-build your site when pushed to your GitHub. Cloudflare sites come with built-in SSL, 500 builds a month. That should be plenty for most it comes to 16 Git pushes a day.

The only thing that will cost is buying a domain, Cloudflare will give you a free one (https://yourSite.pages.dev/), but I would suggest buying one.

In this step-by-step tutorial, we will be going through how to install Hugo with the hello-friend theme, set up a site with Cloudflare Pages, and make a simple post.

Installing Hugo

Arch sudo pacman -S hugo Ubuntu sudo apt install hugo If you’re using mac or windows, check out the official install guide

Creating your Hugo site

By running the following command, you will generate a folder that got the Hugo website generator in it. I’m just going to use the home folder.

hugo new site YOUR-BLOG

Adding site to your GitHub

  1. make a new repo
  2. run the create repo commands from git in your YOUR-BLOG folder
  3. vim .gitignore
  4. paste into the .gitignore file:
# Created by https://www.toptal.com/developers/gitignore/api/hugo,visualstudiocode
# Edit at https://www.toptal.com/developers/gitignore?templates=hugo,visualstudiocode

### Hugo ###
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json

# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux

# Temporary lock file while building
/.hugo_build.lock

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets

# Local History for Visual Studio Code
.history/

# Built Visual Studio Code Extensions
*.vsix

### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide

# Support for Project snippet scope
.vscode/*.code-snippets

# Ignore code-workspaces
*.code-workspace

# End of https://www.toptal.com/developers/gitignore/api/hugo,visualstudiocode

the ignore file is made from gitignore.io

Adding gitmodules file (important for Cloudflare pages)

  1. vim .gitmodules
  2. add to file: (you have to change it depending on the theme you pick)
[submodule "themes/hello-friend"]
    path = themes/hello-friend 
    url = https://github.com/panr/hugo-theme-hello-friend

Choose a theme.

Now you want to pick your theme. You can find plenty of choices on Hugo’s theme site https://themes.gohugo.io I will be using the hello-friend in this install

cd ~/YOUR-BLOG
git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
git submodule add -f https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend

The config is on the theme page hello-friend

You can edit the site by vim, nano or VScode I would suggest opening the site in VScode and editing from there. You will probably jump between files when first setting up the site.

Open up your config.toml and paste the default config file found on hello-friend. After saving it, you can start up the site with: hugo serve -D -D flag makes your draft pages show up on the site while editing

Now you can make some changes to the config.toml file, and changes should happen in real-time when you save it.

baseurl = "https://nygard.io"
languageCode = "en-us"
theme = "hello-friend"
paginate = 5

[params]
  # dir name of your blog content (default is `content/posts`).
  # the list of set content will show up on your index page (baseurl).
  contentTypeName = "posts"

  # OS theme is the default when not provided, but you can force it to "light" or "dark"
  defaultTheme = "dark"

  # if you set this to 0, only submenu trigger will be visible
  showMenuItems = 4

  # Show reading time in minutes for posts
  showReadingTime = false

  # Show table of contents at the top of your posts (defaults to false)
  # Alternatively, add this param to post front matter for specific posts
  # toc = true

  # Show full page content in RSS feed items
  #(default is Description or Summary metadata in the front matter)
  # rssFullText = true

[languages]
  [languages.en]
    title = "Nygard.IO"
    subtitle = ""
    keywords = ""
    copyright = "Copyright © 2022 Odin Nygaard"

    menuMore = "Show more"
    writtenBy = "Written by"
    readMore = "Read more"
    readOtherPosts = "Read other posts"
    newerPosts = "Newer posts"
    olderPosts = "Older posts"
    minuteReadingTime = "min read"
    dateFormatSingle = "02-01-2006"
    dateFormatList = "02-01-2006"
    # leave empty to disable, enter display text to enable
    # lastModDisplay = ""

    [languages.en.params.logo]
      logoText = "Nygard.IO"
      logoHomeLink = "/"
    # or
    #
    # path = "/img/your-example-logo.svg"
    # alt = "Your example logo alt text"

    [languages.en.menu]
      [[languages.en.menu.main]]
        identifier = "about"
        name = "About"
        url = "/about"
      [[languages.en.menu.main]]
        identifier = "showcase"
        name = "Showcase"
        url = "/showcase"

Creating your first post

There are two main ways to make a post

  1. Make a markdown file in your posts folder and manually put the Front matter in the file
  2. Use Hugo’s built-in command hugo new posts/firstPost.md If the site is up and running, it should refresh immediately and add the page.

Use a simple markdown file or use a folder struckture called page bundles

  1. Make a yourPost.md file and put everything in that
  2. Make a folder yourPost with index.md, photos, and other resources for that post
    Hugo folder with page bundle structure and single file structure

Now let’s look into changing some settings in the markdown post file. The same syntax work for both structures. The setting for the posts is also called Front matter. Again, there are many variables to choose from, and I will go through the ones I use the most.

  • description: Put the post’s caption underneath the headline. It’s optional since you can use the <–mo re–> in the post itself to split where the caption ends
  • slug: Is the last segment of the URL
  • tags: are the # tag
  • cover: is the path to the cover image, more info here
  • draft: change to false to make the page live
---
title: hugo site
# description: hugo site
slug: hugo
cover: "img/test.jpg"
date: 2022-06-28T08:09:15+02:00
draft: true
tags:
- Hugo
- blog
- website
---

  

If you're looking for an excellent way to backup or share your dotfiles, using bare git is a simple and quick way to keep your dotfiles up to date.

<!--mo re-->
# remove space so it --more--
  

blah blah blah

The website structure in the content follows the directory structure if your posts/howto/yourpost.md or posts/howto/yourpost/index.md both would get the url http://YourSite.com/posts/howto/yourpost

Cover image when using page bundles

To choose a cover image when using the page bundles Use these front matters:

---
useRelativeCover: true
cover: hugo.img 
coverAlt = "hugo"
coverCaption = "Image Credit to [hugo](https://hugo.io)

---

Now that you have the site configured and a post on it, you can generate the website inside your website folder. Use the command hugo -v -v is for verbose in case of an error. Your site is in your public folder.

Uploading your page to github 

cd ~/yourSite
git add .
git commit -m "fist post"
git push

Adding your domain to Cloudflare

Make an account, and when on the dashboard, follow the instruction

  1. Website > add site
  2. put your domain in and add a site
  3. select the Free plan
  4. click next to get through the process
  5. You will eventually get to a page that has some nameservers
  6. on Namecheap domain list > manage (the domain), then change the nameserver to custom DNS and type in the nameserver you got from Cloudflare

Making your Cloudflare page

  1. On the main dashboard, go to Pages > create a project > connect to git, then follow the step and add the repo of your website
  2. Make a project name and select the branch to use. I’m just using the main branch
  3. Framework = hugo
  4. Build command =hugo
  5. Build output public
  6. Now, you want to add an environment variable (Version 0.101.0 was the latest.