使用 Hugo 撰寫部落格

本章介紹如何在套用hugo做好一個自己的部落格網站．並上傳github

2020.09 更新：因為找不到主題可以將文章標題透過階層式瀏覽，所以後來改用hexo（就是現在這邊網站用的樣式），使用上部署也較hugo方便，本篇紀錄當時的hugo建立留存．

建立部落格前可以先分別上hexo/hugo官網查看主題效果，看自己喜歡哪一種再建立．
hexo教學文請看：使用Ｈexo 撰寫部落格

Step 1: 安裝Hugo

開啟終端機，依序執行下列指令：

* brew install hugo 
//macOs 須先安裝Homebrew
* hugo version 
//確認安裝成功版本
Hugo Static Site Generator v0.69.0/extended darwin/amd64 BuildDate: unknow
* hugo new site **website-hugo**
* cd **website-hugo**
// 新增網站，粗體可以自命名，安裝完會新增該資料夾

Step 2: 新增主題

https://themes.gohugo.io/
hugo網站有很多可以選擇與查看效果
進入該主題的github/README 可以看安裝步驟執行
基本執行：git submodule add https://github.com/alex-shpak/hugo-book themes/book
//這樣就會在website-hugo/themes/新增主題

Step 3: 編輯 config.toml

這檔案與整體網站設定有關

baseURL = “https://xxx.github.io/"
languageCode = “zh-tw”
title = “xxx Blog”

#domain設定 xxx改成你的GitHub帳號名稱
根據主題不同這檔案也可能會有更多不同設定
ex: 設定主題 theme = “ananke”

Step 4: 新增文章

hugo new posts/my-first-post.md
新增預設檔案在以下位置採用markdown編寫
content//.

title: “My First Post”
date: 2019-03-26T08:47:11+01:00
draft: true //是草稿是否改成false可被發布

可以根據主題新增：
tags: [“hugo”, “web”]
summary: “The summary image should be a custom one”
summaryImage: “summary_2.jpg”
resources:

src: summary_2.jpg
圖片新增
將圖片放置在website-hugo/static/images
文章內可用相對路徑新增

Step 5: 啟動本地server

hugo server -D
Web Server is available at http://localhost:1313/
Press Ctrl+C to stop
記得結束務必按不然下次啟動會佔用

Step 6: 產生靜態檔案

Ｄ參數代表要不要輸出草稿文章
Build static pages

hugo -D

將會生成./public/ 資料夾，
每次編輯完要記得更新，之後發布的時候也要上傳

Step 7:githug網站上傳

新增兩個repo
xxx.github.io (xxx改成自己的帳號名稱)
website-hugo 上述的site名稱

上傳public資料夾

cd public
git init
git remote add origin https://github.com/xxx/xxx.github.io.git
git add .
git commit -m “Initial commit”
git push -u origin master

上傳整個website-hugo資料夾

cd ../
git init
git remote add origin https://github.com/xxx/website-hugo.git
git add .
git commit -m “Initial commit”
git push -u origin master

開啟https://xxx.github.io/ 等個幾分鐘會看到結果

Nagi's 程式筆記