Setup Blog Hugo

Step by step Setup Hugo Blog

終於從 ghost 搬來 Hugo 啦

1. Setup github page: project

https://androchentw.github.io/blog-hugo/

1

git clone https://github.com/androchentw/blog-hugo.git

2. Install Hugo

• Hugo - Quick Start
• Host on GitHub

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

brew install hugo
hugo new site blog-hugo
cd blog-hugo
git submodule add https://github.com/androchentw/blog-theme.git themes/beautifulhugo
echo 'theme = "beautifulhugo"' >> config.toml

hugo new posts/hello_world.md

# to preview at http://localhost:1313/
hugo server -D 

# to build static page
hugo -D

3. Setup GitHub Action

• 深入但不淺出，如何用 github actions 自動發佈 gh-pages
• 從零開始: 用github pages 上傳靜態網站 About GitHub Pages

4. Add Comment Block - utterances

2022-11-19 Added.

• blog-theme: 3f81f19

• blog-hugo: d47f631

• GitHub - utterances

• 如何在hugo上安裝utterances?

• Hugo 插件 Utterances 用法

References

1. 將部落格從 Wordpress 轉換到 Hugo
2. ghostToHugo
3. Hugo - Front Matter
4. Hugo - Archetypes
5. Hugo - URL Management
6. Hugo 加入 Google Custom Search 站內搜尋功能
7. 如在 Github Pages 建立 Hugo 靜態網站
8. 我的 Hugo 工作流程

2023-04-15 i18n 作法記錄

• url = {lang}/post. 預設中文: /blog-1, /en/blog-1, /ja/blog-1
  • ✅ 改用 url:, 而非 url: => 正確! 有 {lang}/{post}
  • ❌ 改用 slug, 而非 url: => 會變這樣 http://localhost:1313/post/life/blog/blog-1
• 每篇 post 正確要有類似 “翻訳：繁體中文・English”
  • ✅ 把 en/ 放到 post/en/ 跟 zh-tw 對齊 => 正確! 有 “翻譯”

Ref

1. Hugo 官網
   1. Multilingual Mode
   2. URL Management
      1. multilingual site
   3. Sections
   4. Archetypes
   5. 在每一篇 md 裡有指定的 type: post
   6. Taxonomies
   7. Add Sub Menu in Hugo Website
   8. Lists of Content in Hugo
2. Theme - Beautifulhugo (我使用的)
   1. blog-theme
   2. Locales - zh, zh_Hant, zh_Hant_TW
3. Hugo 論壇
   1. zh-tw

其他相關

• 科技旅程半年報 - 重拾手沖咖啡與生活儀式感
• ProgramMur 程序猿碎念 - 技術分享 Redefine + 電子報
• 重新定位 Blog 內容
• 深入瞭解 Hugo Blog 目錄結構
• Add Series Taxonomy to Beautiful Hugo Theme
• 自架部落格 - 使用 Ghost 並設定自己的域名