Build my first blog by Hugo and Github, auto deploy by Travis <1>
前言
- Hugo 是個快速產生靜態網站的工具,golang開發,快速有效,有很多theme可以支援
- Github 是個工程師必備良藥,也支援Pages服務,就是靜態網頁,所以將Hugo建好的靜態網頁直接上傳到Github是很合適的組合,而且是免費又快速,還不用自己維護,這世界怎麼有這麼佛心的服務
- Travis 是第一次接觸,大概瞭解了一下這是個提供高度自動化工具,只要寫個簡單的腳本,就可以支援很多自動化工作,剛好又高度整合Github。據說功能不僅止於此,有機會可以來做一些更複雜有趣的事情
安裝 Hugo
mac使用者如果已經安裝brew的話,只要輸入以下指令即可安裝Hugo
brew install hugo
目前最新的版本應該是 0.56.3
建立部落格
開啟Terminal,只要輸入底下的指令,Hugo馬上會在blog這個目錄下產生所有需要的資源和程式碼
Hugo new site blog
修改 config.toml
接著開始做一些修改,首先進入目錄中需要修改config.toml,最重要的是新增theme,Hugo的生態系有相當多的theme,你可以選擇你喜歡的加入,底下是我的第一版的設定:
baseURL = "https://chimerakang.github.io/"
languageCode = "en-us"
defaultContentLanguage = "zh-tw"
title = "Chimera's Blog"
theme = "terminal"
paginate = 5
[Author]
name = "Chimera"
[params]
contentTypeName = "posts"
themeColor = "green"
showMenuItems = 2
# set theme to full screen width
fullWidthTheme = false
# center theme with default width
centerTheme = false
[languages]
[languages.en]
title = "Walking with cybersoul"
subtitle = "A easy, wishper for programmers"
keywords = ""
copyright = ""
menuMore = "Show more"
readMore = "Read more"
readOtherPosts = "Read other posts"
[languages.en.params.logo]
logoText = "Terminal"
logoHomeLink = "/"
[languages.en.menu]
[[languages.en.menu.main]]
identifier = "about"
name = "About"
url = "/about/about"
[[languages.en.menu.main]]
identifier = "posts"
name = "Posts"
url = "/posts"
[languages.zh-tw]
title = "漫步在數位靈魂之中"
subtitle = "對工程師的輕鬆小語"
keywords = ""
copyright = "Chimera"
menuMore = "看更多"
readMore = "讀更多"
readOtherPosts = "讀其他的貼文"
[languages.zh-tw.params.logo]
logoText = "首頁"
logoHomeLink = "/"
[languages.zh-tw.menu]
[[languages.zh-tw.menu.main]]
identifier = "about"
name = "關於我"
url = "/about/about"
[[languages.zh-tw.menu.main]]
identifier = "posts"
name = "貼文"
url = "/posts"
安裝 Theme
接著你需要把theme安裝起來,首先可以使用底下兩個指令抓回來
You can also clone it directly to your Hugo folder:
git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
If you don’t want to make any radical changes, it’s the best option, because you can get new updates when they are available. You can also include it as a git submodule:
git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
我是採用第一種做法,因為接下來可能需要修改套件,修改theme之後,push commit到github時不會有警告訊息跳出,單純簡單多了
每個Theme都有一些不一樣的特性,只要稍微看一下每個作者寫的介紹應該可以很快上手
發佈第一則貼文
終於要開始發廢文了!!很簡單,照著以下指令即可發文
hugo new posts/first.md
Hugo就會在content/posts/下面產生一個first.md這個檔案 此時什麼都不需要做什麼,在輸入底下的指令:
hugo server
此時如果沒有錯誤的話,Hugo會將所有網站處理好,並開始運行一個web service,此時開啟網頁輸入 : “localhost:1313” 應該就可以看到你的廢文了
此貼文有點長,先告一段落,接下來要開始介紹如何發佈到Github
Build my first blog by Hugo and Github, auto deploy by Travis <2>