網站的建置流程與沿革

前言

此網站最初建立於 2019 年夏，並採用 Icarus 作為網站的主題，頁面甚是美觀。網站建立之目的乃在於記錄進行各項資訊相關工作之流程，以及新學到的知識，同時亦有意藉此空間記錄生活中有趣之事物，然而無奈各種事情繁雜，不得空閒加以管理，而使此一空間逐漸荒廢。2022 年 2 月，新春之際，藉著有限的時間，將此一空間進行更新，並換上新的主題，象徵一元復始、萬象更新，希望若得浮生半日閒，可在此空間，盡情發揮。

開發環境： WSL2 on Windows 10 (Ubuntu)
IDE: Visual Studio Code
代碼倉庫: GitLab
靜態網站產生器: Hexo
主題: Butterfly

將 Git 更新至最新版本

添加 Git 的 ppa 至 Ubuntu 套件庫

1	sudo add-apt-repository ppa:git-core/ppa

更新套件庫清單並更新目標套件

1 2	sudo apt update sudo apt upgrade

採用 Node Version Manager 於 Ubuntu 系統中安裝 nodejs

先安裝或更新 nvm （個別使用者安裝），網站初建置時，最新版本為 v0.39.1 ，後續視需求升級

1	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh \| bash

使用前需要先 source

1	source ~/.bashrc

查看哪些 Node 版本可供使用

1	nvm list-remote

安裝 v16.13.2 LTS 版本 (建置時最新版本)

1	nvm install lts/gallium

查看安裝版本

nvm list

若安裝不同版本可用 nvm use 進行切換，如下所示

1	nvm use v16.13.2

安裝 Hexo

透過 npm 安裝 Hexo

1	npm install -g hexo-cli

建立文章管理專案

以模組化的方式，建立一個獨立的專案，管理撰寫的文章，以便在未來進行遷移或更新時，簡化匯入文章的程序，並降低資料丟失的風險。

先於 GitLab 上建立一名爲 Website Articles（可自行命名）的 Project（代碼倉庫），並在本地建立一資料夾

1	mkdir Articles

進入文章資料夾

1	cd Articles

將資料夾連結 GitLab 上的代碼倉庫

1
2
3

git init
git remote add origin [email protected]:帳戶名/website-articles.git
git add .

導入先前建立的文章，或新建新的文章，再執行

1 2	git commit -m "任何想填的信息" git push -u origin master

此時已將文章推送至 GitLab 代碼倉庫，以後撰寫的文章推到倉庫即可

主要博客專案的建立

切換回家目錄

cd ..

先於 GitLab 建立名爲 帳戶名.gitlab.io 的 project，並在本地建立一個資料夾進行存放，以 BlogGen 爲例

1 2	mkdir BlogGen cd BlogGen

初始化 Hexo 相關檔案

hexo init

初始化 git 並連結 GitLab 上的代碼倉庫

1
2
3

git init --initial-branch=main
git remote add origin [email protected]:帳戶名/帳戶名.gitlab.io.git
git add .

將 Hexo 基本檔案推送至主代碼倉

1 2	git commit -am "Initial commit" git push origin main

以 submodule 方式的方式拉取 theme（佈景主題）：

以 submodule 的方式管理佈景主題，未來原作者更新時方便拉取更新主題，並且保有客製化主題的彈性。

以使用 Butterfly 主題爲例，先從 GitHub 拉取佈景主題至 themes/butterfly 資料夾

1	git submodule add -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安裝 Butterfly 主題所需之渲染套件

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

設定使用 Butterfly 主題

1	hexo config theme butterfly

啟動 Hexo server 測試網站及主題是否正常載入

hexo s

測試無誤後，推送至主代碼倉

1 2	git commit -am "Add jerryc127 Butterfly theme" git push origin main

於根目錄中建立 Butterfly 主題之個人設定檔，避免主題更新時遺失設定

1	cp themes/butterfly/_config.yml _config.butterfly.yml

推送個人設定檔至主代碼倉

1
2
3

git add .
git commit -am "Add custom theme config file"
git push origin main

以 submodule 方式的方式拉取文章：

將原有的 source 資料夾重新命名

1	mv source source.old

拉取先前建立之文章倉庫

1
2
3

git submodule add [email protected]:帳戶名/website-articles.git source
cd source
git checkout master

推送新 source 至主代碼倉

1
2
3

git add .
git commit -am "Add custom source module for articles"
git push origin main

微調：

修改博客目錄（BlogGen）下之 .gitmodules 檔案，找到 [submodule "source"]，將 url 修改如下

plaintext

...

[submodule "source"]
path = source
url = ../website-articles.git

...

如此一來可方便之後 CI 的自動化部署
再將修改後的檔案推送至主代碼倉

1
2
3

git add .
git commit -am "Modified gitmodule to fix source url"
git push origin main

配置 CI 於 GitLab 上進行部署

於博客目錄下新增 .gitlab-ci.yml 內容如下

yml

image: node:16-alpine # use nodejs v16 LTS (建置時較新版本)
cache:
  paths:
    - node_modules/

before_script:
  - npm install hexo-cli -g
  - npm install

pages:
  script:
    - hexo generate
  artifacts:
    paths:
      - public
  only:
    - main

variables:
  GIT_SUBMODULE_STRATEGY: recursive # 以 submodule 進行管理須添加此行

推送所有變更及 `.gitlab-ci.yml` 至 GitLab 以進行部署

將所有變更推送至方才建立之 帳戶名.gitlab.io 倉庫

1
2
3

git add .
git commit -am "Add gitlab-ci.yml"
git push -u origin main

此時進入專案的頁面，於左側邊欄點選 CI / CD，並選取 Pipelines 應該可見部署成功

部署成功後，即可進入 https://帳戶名.gitlab.io 查看自己建立的博客

參考資料：

Hexo Docs
Butterfly
jerryc127/hexo-theme-butterfly
在gitlab上搭建hexo博客 - huangjj27’s blog
部署HEXO到GitLab Page