前言

  • 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>


參考: