使用 Hugo 快速搭建個人部落格

心智極客發表於2019-10-14
Go

Hugo,號稱是世界上最快的靜態網站生成工具，由 Go 語言開發，除了速度快之外，本身的使用也非常的簡單。

安裝

Mac 下的安裝

$ brew install hugo
$ hugo version // 是否安裝成功
$ hugo --help

生成部落格

建立網站

$ hugo new site ihuangmx.github.io

目錄結構

由 hugo 生成的部落格的基本目錄如下

  • archetypes - 預定義看板，在這類，你可以定製你生成的部落格的基本模板。
  • content - 網站的所有內容都儲存在這裡
  • data - 儲存站點可使用的配置檔案
  • layouts - 自定義的模板
  • public - 生成的可直接部署的部落格
  • static - 靜態檔案，比如你站點需要用到的 logo、頭像等

目錄的話，其實用到的地方不多，一般人只需要按照預設的主題來就行。

安裝主題

生成網站之後，首先要做的就是下載 主題，通常有兩種方法。

第一種是下載所有主題，簡單粗暴

$ cd ihuangmx.github.io
$ git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

第二種是下載感興趣的主題

$ cd themes
$ git clone https://github.com/spf13/hyde
$ git submodule add https://github.com/jacobsun/hugo-theme-cole  // 或者

使用主題

我們以 hugo-pacman-theme 為例簡單的介紹。

安裝主題

$ cd themes
$ git clone https://github.com/coderzh/hugo-pacman-theme.git --depth=1

按照需要配置主題頁面，我自己的簡單配置如下

BaseURL = "http://ihaungmx.github.io/"
LanguageCode = "zh-CN"
HasCJKLanguage = true
Title = "心智極客"
Theme = "hugo-pacman-theme"
pygmentsStyle = "default"
pygmentsUseClasses = true

[Author]
  Name = "心智極客"

[outputs]
  home = [ "RSS", "HTML" ]

[outputFormats] 
  [outputFormats.RSS]
    mediatype = "application/rss"
    baseName = "feed"

[Params]

  BottomIntroduce = "個人微信"
  Subtitle = "Never But Better"
  Imglogo = "img/logo.jpg"
  AuthorImg = "img/wechat.jpg"
  DateFormat = "2006年01月02日"
  MonthFormat = "2006年01月"
  FancyBox = false

  [Params.Disqus]
    ShortName = "huangmingxian"

  [Params.Strings]
    Search = "搜尋"
    PageNotFound = "你訪問的頁面不存在"
    ShowSideBar = "顯示側邊欄"
    HideSideBar = "隱藏側邊欄"
    Categories = "分類"
    Archive = "歸檔"
    Tags = "標籤"
    Rss = "RSS 訂閱"
    TableOfContents = "文章目錄"

[Menu]
  [[Menu.Main]]
    Name = "首頁"
    URL = "/"
    Weight = 1
  [[Menu.Main]]
    Name = "關於"
    URL = "/about"
    Weight = 2

配置裡面對應的素材需要放到 static 目錄下面

static
└── img
    ├── logo.jpg
    └── wechat.jpg

配置裡面有一個「關於」頁面，需要手動生成下

$ hugo new about.md

建立文章

首先，我們生成第一篇文章

$ hugo new post/first.md

生成的文章內容如下

---
title: "First"
date: 2019-06-03T17:10:40+08:00
draft: true
---

該文章的預設模板是根據 archetypes 目錄下的 default.md 來的，可以自己修改模板，比如，修改文章的時間格式

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ now.Format "2006-01-02"  }} 
draft: false
categories: [] 
tags: []
toc: false
---

再次生成部落格文章

$ hugo new post/second.md

生成的文章內容變成了

---
title: "Second"
date: 2019-06-03 
draft: false
categories: [] 
tags: []
toc: false
---

生成最終網站

生成靜態部落格並在本地檢視

$ hugo server

預設的話，只會顯示 draft 為 false 的文章。

伺服器是實時更新的，只要你的內容發生了變化，本地伺服器會實時更新變化後的內容，也可以設定成不實時更新

$ hugo server --watch=false

hugo server 並不會生成真正的站點，一般在部署之前，需要執行 hugo 命令生成 public 站點

$ hugo

增加分類

增加分類的方法非常簡單，只需要修改配置檔案

[Menu]
   [[Menu.Main]]
    Name = "隨筆"
    URL = "/categories/隨筆"
    Weight = 1
   [[Menu.Main]]
    Name = "技術"
    URL = "/categories/技術"
    Weight = 2
   [[Menu.Main]]
    Name = "關於"
    URL = "/about"
    Weight = 3

文章增加對應的分類即可

---
title: "Second"
date: 2019-06-03 
draft: false
categories: ["隨筆"] 
tags: []
toc: false
---

部署到 Github

只需要將 public 部署到 github 即可。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章