用 Hugo 和 Github Pages 構建個人部落格

大步點點發表於2022-05-13
GoGithub

個人部落格是展示自己經歷或成就的理想場所。把個人簡歷、一些非常酷的小專案或生活體驗寫到部落格裡是一種非常棒的感覺。

一些喜歡寫部落格的小夥伴肯定想過，要是有一個屬於自己的部落格網站就好了。

所以，本篇文章的目的就是和大家分享一種自己動手搭建部落格的方案：Hugo + Github pages

介紹

在動手搭建之前，有必要給小夥伴們介紹 Hugo 和 Github pages 分別是什麼。

Github 想必大家不陌生了，它是全球最大的同性網站。託管個人、團隊或組織的專案。

Hugo 是一個用 Golang 寫的靜態網站生成器，非常簡單、高效，而且易於擴充套件。你可以用它更換不同的主題，生成靜態部落格網站，配合 Github pages，全球各地的網友都可以訪問到你的網站。

以下的站點用 Hugo 和 Github pages 搭建，下面介紹部署過程。

step1. 申請一個 Github 倉庫

1. 註冊 Github

如果已有賬號，直接登入

2. 瞭解 Github page 建立過程

進入 Github Pages 官網，瞭解建立過程。

3. 建立倉庫
  1. 點選 Github 右上角頭像旁邊的 "+"，
  2. 點選 New repository 進入建立倉庫頁面

  3. 輸入倉庫名稱，如下圖:

    注意：倉庫名的格式為 <username>.github.io，username 是你 Github 的賬號名。

  4. 點選頁面最下方的 Create reporitory 即建立成功
  5. 訪問 https://<username>.github.io 看看是否能夠訪問成功

step2. 安裝 Hugo

Hugo 有多種安裝方式，具體怎麼安裝要看你的電腦系統。

Hugo 官網安裝指南

我的電腦是 win10 系統，可以下載 exe 檔案直接安裝即可，也可以下載原始碼編譯安裝。

這裡 win10 原始碼編譯過程：

  1. 克隆檔案到本地

    $ git clone https://github.com/gohugoio/hugo.git

  2. 安裝

    $ cd hugo
$ go install

  3. 編譯成 exe 檔案

    $ go build -o hugo.exe main.go
  4. 將 hugo.exe 新增到環境變數中
    將 hugo.exe 移動到你想放入的檔案中，例如我將該檔案放到 D:\software\Hugo\bin 檔案中，在系統變數 path 中新增該目錄即可

  5. 測試 Hugo

    $ hugo version
hugo v0.94.0 windows/amd64 BuildDate=unknown

step3. 構建本地站點

1. 新建 Hugo 站點

進入你想存放 Hugo 的目錄，執行以下命令：

# blog 是站點名稱
$ hugo new site blog

新建成功後，進入 blog 目錄，可以看到目錄結構：

目錄解析：

  • config.toml: 我們需要更改的配置檔案
  • content: 存放所有的部落格文章
  • static: 儲存靜態檔案，例如背景圖片，徽標，CSS，JS 等。此目錄中的檔案將直接複製到 /public 中。該資料夾的優先順序高於主題下的 /static。
  • themes: 存放下載的主題
  • archetypes: 儲存的.md 模板檔案，其優先順序高於 theme 檔案下的 /archetypes 檔案。
  • layouts: 存放 .html 模板，優先順序高於 theme 資料夾下的 /layouts 資料夾
  • public: 在執行 hugo 命令後，生成的靜態檔案存放的目錄

step4. 選擇 Hugo 主題

進入Hugo 主題官網，選擇一個你喜歡的主題。

以 KeepIt 主題為例。

執行以下命令：

$ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git

下載完成後，修改 config.toml 檔案，修改之前的內容如下

# blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"

我們進入剛剛下載的主題 Github 倉庫，進入 exampleSite 檔案中，可以看到開發者已經給我們提供裡示例，可以直接複製過來。

複製過來的部分內容如下：

baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"

注意：將 [your github username] 改成你的 Github 使用者名稱。

step5. 建立第一個部落格

安裝過程完成了，現在終於可以建立我們的第一個部落格了。

$ cd blog
$ hugo new about.md

注意：需要去掉 about.md 檔案中的 draft=true，否則站點無效。

測試站點：

$ hugo server

在瀏覽器中輸入 http://localhost:1313，回車，頁面將我們剛剛下載的主題顯示出來了。

step6. 部署到 Github

前面的安裝和測試都是準備工作，我們的目的是將 markdown 語法生成靜態檔案，併發布到我們剛剛申請的倉庫中。

執行如下命令：

$ cd blog
$ hugo

進入 public 目錄，我們看到 Hugo 幫我們生成了一大堆靜態檔案。

現在我們把這些靜態檔案推送到在 step1 申請的 stridedot.github.io 倉庫中

$ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main

重新整理 Github 倉庫，可以看到檔案已經推上去了。
到現在，我們的站點已經成功釋出。
在瀏覽器中輸入 https://stridedot.github.io，看到的頁面跟我們在本地的一摸一樣。

以上即是建立個人部落格的整個過程，感興趣的小夥伴們趕緊試試吧！！！

相關文章