部署HEXO到GitLab Page

前言

比較不同的是,使用他的ci做到自動化,則需要再多一個.gitlab-ci.yml就好!其實官方文件已寫的相當清楚,照著做就可以成功了

若對Git不熟悉,建議先閱讀過Git基礎設定,了解Git使用方式

部署方法

HEXO環境都建置完畢後,在本機端hexo s都沒問題的話,接下來就是準備上線了!

設定.gitignore

先在根目錄新增一個.gitignore,排除不需要上傳的東西

1
2
3
4
5
node_modules/
.DS_Store
db.json
package-lock.json
thumbs.db

若您採用的主題是採用next的話,則需要再到\themes\next\.gitnore做些調整,若不是的話此步驟可跳過。

若您自己有安裝其他hexo套件的話(比如fancybox),根據這篇issue:3rd-party libs must be installed from script,next主題本身會ignore掉所有套件,只保留本身所需。所以需要把自己有另外使用的套件也加上去,否則後續gitlab自動化部署時,會造成套件沒上傳上去,會出現找不到套件,導致網頁無法正常渲染,打開來會是只有背景,其他都是一片白的情況

  1. 打開檔案\themes\next\.gitnore

  2. \themes\next\source\lib底下有安裝的套件目錄,全部新增進去。記得前面要加!,表示不省略

1
2
#以fancybox為例,若有安裝多個next plugin,則全部都要加進來
!source/fancybox/*

折騰了我一天才找到原因~_~

設定.gitlab-ci.yml

由於官方的.gitlab-ci.yml是比較早期的寫法,這一塊就不能完全照抄了!

本篇假定您已閱讀過為什麼我推薦hexo部署到Gitlab,打算採取一樣的一站式作法

若有不同需求,請依自己狀況調整

基本上整體結構如下,沒什麼特別需求的話,應該都通用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
image: node:9.10.0 #當初電腦上是裝這個版本,有試過改成較新版也可運行。若版號差距大時,可以試試拉高版本看看gitlab支援了沒

pages:
script:
- npm install
- ./node_modules/hexo/bin/hexo clean
- ./node_modules/hexo/bin/hexo generate
- ./node_modules/hexo/bin/hexo deploy # 若閱讀次數採leanCloud的話,需要加上deploy抓閱讀次數
artifacts:
paths:
- public
cache:
paths:
- node_modules
key: project
only:
- master

設定readme.md

gitlab預設會抓根目錄的readme.md,顯示關於這個專案的介紹。其實不新增也無所謂,畢竟只是自用的blog,不會有人想要folk

裡面打上自己想要的內容就行

可以再裡面寫上目前使用的hexo版本、主題版本。便於以後版更blog系統時,可以有個參考依據,不必再去翻package.json

1
2
3
4
5
site: https://blog.typeart.cc

Version:
hexo: 3.7.1
theme/next: 6.2.0

在gitlab上新建project

Gitlab新增Project

Project name輸入 <<您的帳號>>.gitlab.io

Visibility Level公開(public)私人(private)都可以

若有設定leanCloud閱讀次數的話,建議採私人(private),畢竟為了方便會將username及password寫在_config.yml

push HEXO Blog

1
2
3
git add .
git commit -m "我的blog上線拉!"
git push -u origin master

靜待幾分鐘後,在網址列輸入https://<<您的帳號>>.gitlab.io

您的blog上線拉!

如果有問題的話,則需要到gitlab ci自動化去看哪裡出錯了

假如很不幸地

您的blog上線失敗拉!

到project左邊的CI/CD>Pipelines,這裡可以看到每次自動化部署的log

  1. 點到中間stages那個綠色✔或紅色✘
  2. 選第一個test的✔
  3. 再點pages
    則可以看到完整的指令流程,看看哪個環節出錯了吧!

建議閱讀順序

  1. 為什麼我推薦hexo部署到Gitlab
  2. HEXO基礎配置教學
  3. Git基礎設定
  4. 部署HEXO到GitLab Page
  5. Gitlab使用自訂域名搭配Cloud Flare免費升級成https
  6. hexo NexT主題增加AdSense
  7. hexo NexT主題版更心得

參考資料

官方example

Hosting on GitLab.com with GitLab Pages