How to Build Blog With Hugo on Github

Hugo on your MacOS

Setting github

create a repo named blogs for store hugo programes.
Create another repo named echowings.github.io to host websit.
generate ssh key and regist it on github settings.

Install hugo

1
2
 
brew install hugo

Create a blog site.

1
2

hugo new site blogs

init git

1
2
3
4
5
6
7
8
9

cd blogs
git init
#Add remote repo. 
git remote add origin git@github.com:echowings/blogs.git
#Add a theme for your hugo.
git submodule add -b master https://github.com/xianmin/hugo-theme-jane.git themes/jane
cp -r themes/jane/exampleSite/content ./
cp themes/jane/exampleSite/config.toml ./

Test hugo at local.

1
2
   
hugo server

You can access http://localhost:1313 to test your blog in local.

Change configure

Modifiy vi config.toml

 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
36
37
#Change URL
baseURL = "https://blog.stevedong.com"

#Change Title
title = "Steve Dong - A System Administrator's Blog"

#Change theme to jane
theme = "jane"

#How many pages will be displayed on homepage.
pageinate = 15

# Display how many pages will be displayed on archive page.
archive-paginate = 50

#RSS limite.
rssLimit = 50

#google analytics related
googleAnalytics= "UA-xxxxxxxx-X"

# Chang author
name = "Steve Dong"

 # Commit the meanu "External Link"
 #[[menu.main]]
 #  name = "MyGitHub"
 #  weight = 50
 #  url = "https://echowings.github.com"
 
 #Change Site creation time
 
 [params]
 	since = "2018"
 	
	logoTitle= "Steve Dong"
	keywords = ["network", "devops', "System Administrator"]

Add syntax highlight

vi config.toml

add

1
2
3
4

pygmentsCodefences = true #高亮markdown的代码块
pygmentsCodefencesGuessSyntax = true #高亮markdown中没有标注语言的代码块
pygmentsStyle = 'manni' #高亮主题

Deploy your blog to github

Add repo of blog website.

1
2
3
4
 
git submodule add --force -b \ 
  master git@github.com:echowings/echowings.github.io.git public  
  

Run hugo to generate your blog website.
1 2
hugo server

publish your website

1
2
3
4
5

cd public
git add.
git commit -m "YOUR COMMIT MESSAGE"
git push origin master

Backup your hugo blog to github

1
2
3
4
5

cd ..
git add.
git commit -m "YOUR COMMIT MESSAGE"
git push origin master

Add a comment

Since theme jane has support utterances, we just need to enable utterances apps in github and configure it in config.toml in hugo.

Create a repo to storage comment. like “blogcomment”.
enable utternaces apps.
1. click utterances app
2. Auth utterances to your github repo “blogcomment”.
edit blogs/config.toml and append follow lines.

[params.utteranc] enable = true repo=“echowings/blogcomment” issueTerm=“pathname”

1
2
3
4
5
6
7
8
9

### Download git and rebuild blog environment


``` zsh
git pulll git@github.com:echowings/blogs.git

#if public already exsited  run `rm public`
git submodule add --force -b master git@github.com:echowings/echowings.github.io.git public

Hugo on your MacOS

Change configure

Add syntax highlight

Deploy your blog to github

Add a comment

Reference