Hugo教學:部落格網站
什麼是Hugo?是一個用 Go 語言編寫的靜態站點生成器,使用Hugo與Git來建立個人部落格。
以下分為兩部分介紹:本地建立檔案、部署到 GitHub。
本地建立檔案
1.先安裝hugo,按照官網的步驟執行安裝(window、Mac都有寫)
2.用cmd在想要的路徑,建立網址的資料夾之後進入,例如:hugo_blog
hugo new site hugo_blog
cd hugo_blog
3.新增部落格主題,例如:hamburg為例
以下使用2種方式新增:
(1) 使用Git Clone,下載hamburg專案在themes/hamburg資料夾底下
git clone https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg
(2) 使用Git Submodule,新增連結hamburg專案在themes/hamburg資料夾底下,注意Submodule只有要使用而不是要開發,因為是使用別人做好的主題,我們不需要更改
git submodule add -f https://github.com/hauke96/hugo-theme-hamburg.git themes/hamburg
4.建立新文章,例如:檔名為my-first-file
hugo new posts/my-first-file.md
在時檔案會在content/posts
資料夾裡產生,此檔可使用任意文字編輯器打開markdown文件,將 draft 改成 false,文件內容任意更改。
以下為my-first-file.md內容:
---
title: "My First"
date: 2019-05-20T00:33:10+08:00
draft: false
---
測試部落格
5.編輯config.toml,baseURL改成你的github帳號名稱
baseURL = "https://coolgood88142.github.io/" #改成你github帳號名稱
languageCode = "zh-tw"
title = "我的第一個部落格" #標題可自行更改
theme = "hamburg" #主題名稱
6.本機測試
hugo server -D
執行後,在瀏覽器輸入網址http://localhost:1313
,可看剛建立的部落格網站
部署到 GitHub
1.在GitHub建立兩個repositories
在Github建立hugo_blog
和'your account'.github.io
(使用自己的GitHub帳號)
2.建立public資料夾,並連結GitHub 上自己帳號的repositories
git submodule add -f https://github.com/'your account'/'your account'.github.io.git public
這時public資料夾是新增連結而不是專案
3.執行Hugo指令
hugo
執行hugo
指令,自動產生編譯檔案新增public資料夾
4.將 public 資料夾上版到Github上自己帳號的repositories
cd public
git init
git remote add origin https://github.com/your account/'your account'.github.io.git
git add .
git commit -m "my-first-hugo"
git push origin master
5.回到上一層將hugo_blog資料夾連結到GitHub 上的hugo_blog
cd ..
git init
git remote add origin https://github.com/coolgood88142/hugo_blog.git
6.將hugo_blog資料夾上版
git add .
git commit -m "my-hugo-file"
git push origin master
上版後,在瀏覽器輸入自己帳號的網址http://'your account'.github.io
,會看到跟本機看到的部落格是一樣的。
備註
1.新增留言版,建立Disqus帳號,之後編輯config.toml
baseURL = "https://coolgood88142.github.io/"
languageCode = "zh-tw"
title = "我的第一個部落格"
theme = "hamburg"
[params]
disqus = "Kai88142"
disqus放你的Disqus帳號的Username
,在Disqus要先填資料時要在語言的部分,填哪種語言留言板就顯示哪種呈現,請在admin->Edit Settings->General裡的Language選擇Chinese,就可顯示中文樣式,目前Disqus沒有繁體中文只有簡體,先將就點用吧。
2.新增標籤,方便搜尋部落格資料
title: "My First"
date: 2019-05-20T00:33:10+08:00
draft: false
tags: ["First"]
參考資料:
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/540757/、
https://gohugo.io/getting-started/installing/、
https://themes.gohugo.io/hugo-theme-hamburg/、
https://gohugo.io/hosting-and-deployment/hosting-on-github/、