Creating a website using Hugo and GitHub Pages

Step 1: Install Hugo

sudo apt install hugo

Step 2: Create a New Site

hugo new site daily-log

The above will create a new Hugo site in a folder.

Step 3: Add a Theme

See themes.gohugo.io for a list of themes to consider.

First, download the theme from GitHub and add it to your site’s themes directory

Step 4: Add Some Content

You can manually create content files (for example as content/<CATEGORY>/<FILE>.<FORMAT>) and provide metadata in them, however, you can use the new command to do a few things for you (like add title and date):

hugo new posts/my-first-post.md

Edit the newly created content file if you want, it will start with something like this:

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

Drafts do not get deployed; once you finish a post, update the header of the post to say draft: false. More info here.

Step 5: Start the Hugo server

Now, start the Hugo server with drafts enabled:

▶ hugo server
                   | EN
+------------------+----+
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0
Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Navigate to your new site at http://localhost:1313/

Step 6: Site Configuration

Open up config.toml in a text editor:

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "log"

Replace the title above with something more personal. Also, if you already have a domain ready, set the baseURL. Note that this value is not needed when running the local development server.

Step 7: Creating a deployment script

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
git commit -m "msg"

# Push source and build repos.
git push origin main

Step 7: Go to git.com/your repo/settings/page

Step 7: GitHub Pages

Your GitHub Pages site is currently being built from the master branch. Then refresh your page, in Your site is published row will look like this:

Then you can view your page like this:

Thanks for gathering!!