Ultimate guide to build your own blog

Before you start

All hugo commands should be run in the root level

Build Hugo Blog Locally

Step 1: Install hugo && git

For Mac user:

1
2

brew install hugo
brew install git

Step 2: Create a new site

1
2

hugo new site myblog
cd myblog

Step 3: Add a theme

You can find Hugo themes Here

In this case I use LoveIt theme as my example

1
2

git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

Step 4: Basic Configuration

Copy config.toml content from example site to your config.toml

You can make your own changes in config.toml file

Step 5: Create your first post

1

hugo new posts/my-first-post.md

In .md file, set:

1

draft: false

Command above will generate a my-first-post.md file under the path: ./content/posts

You should always use hugo new posts/file.md to create new files

Step 6: Host the Website Locally

1

hugo serve

Go to http://localhost:1313

Step 7: Build the Website

Run:

1

hugo

After you run the hugo command above, you will see content created under public folder in your blog folder

Upload your code to GitHub

1. Create a new repo on GitHub

If you want to deploy on GitHub page:

Create a repo named your-github-username.github.io

For example:

My GitHub username is code-panda-x My repo will be named code-panda-x.github.io

2. Git Initialiaztion

1
2
3
4
5

git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-github-username/your-repo-name.git
git push -u origin main

Whenever you make changes in your blog folder

Run :

1

hugo

Above code will update corresponding changes to public folder

Then run:

1
2
3

$ git add .
$ git commit -m "add blog post"
$ git push

You can use git status to check your changes

1

$ git status

Deploy on Netlify

Add netlify.toml file to your blog:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.93.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.93.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.93.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.93.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

[[redirects]]
from = "/npmjs/*"
to = "/npmjs/"
status = 200

1. Sign in Netlify with GitHub account
2. Add new site - Import an existing project
3. Select your GitHub repo
4. Your site will be pubished with a netlify domain

Customize Domain

1. Purchase your domain at Godaddy.com or namecheap.com
2. Netlify Configuration Domains - Custom domains - Add custom domain - Enter your purchased domain

DNS Management

Add:

1. Type: A Name: @ Value: 75.2.60.5 (Netlify’s load balancer IP address)
2. Type: CNAME Name: www Value: your-url.netlify.app

Deploy on GitHub Page

Your site will be published on your-github-username.github.io

Customize Domain

1. Purchase your domain at Godaddy.com or namecheap.com
2. GitHub Page Configuration Settings - Code and automation - Custom domain - Enter your purchased domain

DNS Management

Add:

1. Type: A Name: @ Value: 185.199.108.153
2. Type: CNAME Name: www Value: your-github-username.github.io

Error Messages and Solutions

1

    Building sites … ERROR 2019/11/30 09:22:03 Failed to read Git log: fatal: your current branch 'master' does not have any commits yet Built in 135 ms

In config.toml:

Set enableGitInfo = true

1

Error: module "xxx" not found; either add it as a Hugo Module or store it in "/home".: module does not exist

In config.toml:

Set themesDir = "themes"