XserverでDNSのAレコードを変更

• サーバーパネルのDNSレコード設定から変更
• DNSレコード一覧のAレコードを変更
• GitLab PagesのIP 35.185.44.232 を設定
• TXTレコードを削除

GitLabのPagesの設定でカスタムドメインを設定

• Settings->Pages->New Domainで取得したドメインを入力

GitLabのPagesの設定でTXTレコードの生成

• ドメイン入力欄でCreateすると「Pages Domain」ページへ
• Verification statusが unverified になっているはず
• その下に TXTレコードのホスト名と設定値が記載されているので、それぞれコピー

XserverのDNS設定でTXTレコードを編集

• サーバーパネルのDNSレコード設定から追加
• GitLab Pagesでコピーしたドメインと設定値をもとにTXTレコードを追加

App Storeからフィットネスアプリを開くと同期された

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

Hexo

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

GitLab Pages

• 使いやすかった
• 普段はソースコードの管理にGitHubを利用してるので、最初はGitHub Pagesを使おうとした
• ブログ資材（Hexoと記事（非公開含む））の管理を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