文 / 西打藍 Siddharam
前導
現在的發文平台很多，不論會不會程式都能輕易的上手。
而人人皆有的 Facebook、Line、Youtube、IG，它們主要用處還是在於導流。而 Blogger、WordPress 則較為正式，Medium 版型固定。 但因為 wordpress.com 用起來的彈性不高，而 wordpress.org 費用頗高的關係，我才選擇速度極快的 hugo。
在使用前，我曾思考過，是否要從頭到尾自己架設呢？
在我腦中有三個方案，第一個，是將所有資料存入 Firebase 的 Realtime Database 裡面，只要做好 html 模板後，不同文章就塞不同的資料進去就好， 但發現 SEO 是個問題，所以就被排除掉了。
第二是我自己純粹用 html 把一篇篇文章塞入，但發現這要做標籤、分類、搜尋太麻煩。第三當然就是用 Webpack 或 Gulp 來幫我做標籤、分類的工作，但有點懶。
因此對我來說，找平台的要求就是幫我做好架構，尤其是標籤、分類、搜尋，而設計、交互的彈性要夠大，能夠讓我自行調整。hugo 就是我的最大公約數。
如果是有程式基底的人，hugo 使用起來會較為順暢。我大約花了兩天時間才熟悉結構，其中最需要花費時間研究的就是 Go Template 語法。那我們就進入主題吧。
實戰開始
在開始前，先確認有下列安裝：
IDE（Visual Studio Code）
npm
git
安裝
打開你的編輯器（Visual Studio Code、Atom），切換到任意空資料夾後，開啟終端機並切換到該資料夾目錄，開始 Hugo 實作。
1. 安裝 Hugo
npm install hugo* 如果是 mac 的話，可以使用
brew install hugo2. 安裝 Hugo 環境
npm new site newsite* 其中的 newsite 是資料夾名稱，可以自定義。
3. 切換目錄
cd newsite實作
1. 建立文章
hugo new post01.md* md 檔會在 /content 中顯示。
2. 新增樣式模板
cd themesgit clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git* Hugo 官方網站提供許多樣式模板，上述模板是該頁使用的。
3. 回到 newsite 目錄，並啟動 Hugo server
cd newsitehugo server --theme=hugo_theme_pickles --buildDrafts在瀏覽器中開啟：http://localhost:1313 就能進入首頁。
hugo server 支援 hot reload，任何 html、css、js 修改經儲存後，都能即時顯示。
* --theme=hugo_theme_pickles 是指定樣式套用 hugo_theme_pickles 模板。
* --buildDrafts 表示草稿也能被看見。
4. build
hugo* 你就會看到 /public 有了可佈署檔案。
觀念
我們當前的目錄結構，包含數個資料夾：
/archetypes
/content
/data
/layouts
/public
/resources
/static
/themes
/config
而我們最常使用到的資料夾有 /content /layouts /public /statics /themes 。
/content 是儲存 md 檔的地方，md 是 markdown 的縮寫，現在你所看到的文章內容與樣式，就是在 md 檔中撰寫而成，而可調整的相關配置如下：
title: "用 Hugo 建立部落格 / 網站，每步都有詳細教學"
subtitle: "Wordpress、Blogger 以外的第三方案，設計彈性更高，並且免費，適合願意學寫程式的人。"
description: "自從去年學了程式，並開始工作以後，就有想建立部落格，寫下工程師日常的想法。在看了多數人推薦的 Wordpress 與 Google 的 Blogger 後，有了一些比較......"
date: 2019-04-19
author: "Siddharam"
cover: ""
image: ""
tags: ["教學", "Hugo", "部落格"]
categories: ["技術筆記" ]
keywords:
- 教學
- Hugo
- 部落格
draft: false
上述配置好後，會需要相對應的 Go Template 來使用，你可以在 themes 裡面的 /layouts 中找到相關模板語法，例如：
<meta name="title" content="{{ .Params.title }}" />
<meta property="og:title" content="{{ .Params.title }}" />
<meta property="twitter:title" content="{{ .Params.title }}" />
<meta name="title" content="{{ .Site.Params.title }}" />
<meta property="og:title" content="{{ .Site.Params.title }}" />
<meta property="twitter:title" content="{{ .Site.Params.title }}" />
/layouts 從上述例子，可以看出它是撰寫模板語法的地方，除了可自定義配置外，還能寫基本的 function、變數。模板包括 list、homepage、Taxonomy、partials、single 頁面。
/public 是 build 後的資料夾，可以將之放在 Firebase Hosting 或是 GitHub Page 進行佈署。
/static 放置圖片、js、css 等檔案的資料夾。
/themes 放置設計模板。
/config 是 hugo 默認的站點配置文件。
baseURL = ""
languageCode = "en-us"
title = "Siddharam"
theme = "hugo-theme-cleanwhite"
[taxonomies]
tag = "tags"
category = "categories"
series = "series"
* 建議在本地測試時，baseURL 先預設為空值。* 有了 taxonomies 的預設，在各個 md 檔才能使用標籤、分類功能。
* 其中的 theme 表示預設的設計模板，有了它，就只需要
hugo server 就能讓 server 套用該樣式模板運行。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com