April 18, 2019

Hugo 建立部落格 / 網站,詳細教學

Wordpress、Blogger 以外的第三方案,免費,適合願意學寫程式的人。


文 / 西打藍 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 hugo

2. 安裝 Hugo 環境
npm new site newsite
* 其中的 newsite 是資料夾名稱,可以自定義。

3. 切換目錄
cd newsite

實作


1. 建立文章
hugo new post01.md
* md 檔會在 /content 中顯示。

2. 新增樣式模板
cd themes
git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
* Hugo 官方網站提供許多樣式模板,上述模板是該頁使用的。

3. 回到 newsite 目錄,並啟動 Hugo server
cd newsite
hugo 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 套用該樣式模板運行。




閱讀量




聯絡與合作


有文字採訪、網站開發,或是諮詢需求,皆可以來信詢問。在關於下方有作品參考。

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: aaa24295234@gmail.com

訂閱: