部署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增加like Button
  8. hexo NexT主題版更心得

參考資料

官方example

Hosting on GitLab.com with GitLab Pages