HexoとGitLab Pagesでブログ公開

なんでHexoとGitLab Pagesを使ったのか？

Hexo

  • markdownファイルから静的ファイルを生成してくれる
  • Node.jsで動くから、ちょうどNode.jsに興味があった

GitLab Pages

  • 使いやすかった
  • 普段はソースコードの管理にGitHubを利用してるので、最初はGitHub Pagesを使おうとした
  • ブログ資材（Hexoと記事（非公開含む））の管理をPrivateリポジトリでしつつGitHub Pagesでブログを公開するのができなかった

PrivateリポジトリでGitHub Pagesを公開できない

全体の流れ

  1. GitLab Pagesでプロジェクト作成
  2. ローカルへClone
  3. （Hexoのインストールし直し）
  4. 記事追加
  5. GitLabへPushしてビルド＆デプロイ→ブログ記事が公開される

GitLab Pagesでプロジェクト作成

  • Hexoを使って静的ファイルを生成して、GitLab Pagesへデプロイするプロジェクトの雛形がある
  • GitLab Pagesで雛形使ってプロジェクトを作成すればGitLab CIのビルド・デプロイ設定まで可能
  • あとは、markdownファイルを作成してPushすればGitLab Pagesへのデプロイされる

参考

https://www.gitlab.jp/blog/2020/06/29/how-to-use-gitlab-pages/

Hexoのインストールし直し

Hexoのバージョンに注意

  • ^3.2.0はダメ
    • 生成されたファイルが空ファイルだった
    • GitLab でHexoテンプレート使って作成したプロジェクトだと^3.2.0 だったので更新が必要
  • ^7.0.0-rc1にしたらちゃんと使えた

参考

https://github.com/hexojs/hexo/issues/4268#issuecomment-1171330627

コマンド

1
2
yarn remove hexo
yarn add hexo

記事追加

Hexoの使い方

  • 記事は /source/_posts に置く
  • /source/_draft 置いた記事は公開されない気がするけど、ちゃんと調べてない

ローカル環境での確認

  • yarn hexo server でWebサーバ起動して表示確認ができる（静的ファイルは生成されない）

ビルド

  • デフォルトでは yarn hexo generate でpublicディレクトリへ静的ファイルが生成できる
  • このディレクトリをデプロイすれば良い

その他

  • _config.ymlでビルドしたファイルの出力先など指定可能

GitLabへPushしてビルド＆デプロイ

設定ファイル

/.gitlab-ci.yml

設定内容

  • nodeのバージョンとかyarnに変更したりした
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
image: node:18

cache:
  paths:
    - node_modules/

before_script:
  - yarn global add hexo-cli
  - test -e package.json && yarn install
  - yarn hexo generate
  - pwd
  - ls -al

pages:
  script:
    - yarn hexo generate
  artifacts:
    paths:
      - public
  only:
    - master