Hexo Webhook 自動デプロイメント

Hexo とは？

Hexo は高速、簡潔、かつ効率的なブログフレームワークです。 Hexo は Markdown（または他のマークアップ言語）で記事を解析し、数秒で美しいテーマを使って静的ページを生成します。

本記事の対象環境：

パブリックサーバー1台
Hexo で生成したサイトをホスティングする Git プラットフォーム（Github または自前の Git リポジトリ）
ローカルで Hexo が実行可能であること

パブリックサーバーがない場合は、本記事の サーバー設定 部分を無視し、代わりに Github Page などの他のプラットフォームのサービスを利用してください。ただし ローカル設定 部分は同じです。

本記事で採用するサイト構築方法：

ローカルで記事を作成し、作成後に hexo でサイトをビルドし、git push で github リポジトリにアップロードします。push が完了すると、github は webhook を通じてパブリックサーバーに通知を送り、サーバーは通知を受け取ったら自動的にサイトを clone して nginx リバースプロキシのサイトディレクトリに配置します。

パブリックサーバー側では neurocoda/gitrigger:latest コンテナを使って webhook 通知の受信と git clone を自動化します。

Git プラットフォーム設定

コードリポジトリを作成します。

ローカル設定

Nodejs のインストール

各OSのインストール方法はこちら：https://hexo.io/zh-cn/docs/

私はローカルは Ubuntu です：
https://github.com/nodesource/distributions に従って：

curl -fsSL https://deb.nodesource.com/setup_23.x -o nodesource_setup.sh
sudo -E bash nodesource_setup.sh
sudo apt-get install -y nodejs

インストールの確認：

node -v

Hexo-cli のインストール

npm install -g hexo-cli

Hexo リポジトリの作成

hexo init <folder>
cd <folder>
npm install

Git の設定

SSHキーの作成：

ssh-keygen

公開鍵の取得：

cat /root/.ssh/id_ed25519.pub

取得した公開鍵を選択した Git プラットフォームに追加します。

Github: https://github.com/settings/keys

Hexo に Git を追加

Hexo ルートディレクトリで：

プラグインのインストール：

npm install hexo-deployer-git --save

vim _config.yml

下部で、リポジトリ情報を追加：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: [email protected]:neurocoda/Hexo.git
  branch: main

サーバー設定

ファイアウォール設定

ファイアウォールを開放：

ufw allow 22
ufw allow 80
ufw allow 443

ファイアウォールを有効にして状態を確認：

ufw enable
ufw status

Nginx, Docker のインストール

ソースの更新：

apt update
apt upgrade -y

docker-compose, nginx, python3-certbot-nginx のインストール：

apt install docker-compose nginx certbot python3-certbot-nginx

nginx が正しく動作していることを確認：

systemctl status nginx

SSH キーの設定

リポジトリがプライベートの場合は、SSHキーの設定が必要です：

SSHキーの作成：

ssh-keygen

公開鍵の取得：

cat /root/.ssh/id_ed25519.pub

取得した公開鍵を選択した Git プラットフォームに追加します。

Github: https://github.com/settings/keys

Webhook の設定

リポジトリで webhook を設定：

サービスの起動

docker-compose.yml を作成：

vim docker-compose.yml

以下の内容を記入：

version: '3.8'

services:
  hexo:
    image: neurocoda/gitrigger:latest
    container_name: hexo
    restart: unless-stopped
    ports:
      - "127.0.0.1:7890:5000"
    environment:
      REPO_URL: "[email protected]:neurocoda/Hexo.git"
    volumes:
      - /root/.ssh/id_ed25519:/root/.ssh/id_rsa:ro
      - /var/www/sites:/clone_data

docker-compose.yml があるディレクトリで up コマンドを実行：

docker-compose up -d

コンテナの状態を確認：

docker ps -a

状態が Up ならコンテナは正しく動作しています。（ここでは他のサービスもあるため、見た目が異なる場合があります）

コンテナのログを確認：

docker logs hexo

リバースプロキシの設定

nginx.conf を編集：

vim /etc/nginx/nginx.conf

リバースプロキシを追加：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}

http {
    ##
    # Basic Settings
    ##
    sendfile on;
    tcp_nopush on;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # My Server
    ##

  server {
      server_name neurocoda.com;

      root /var/www/sites/Hexo;
      index index.html index.htm;

      location / {
          try_files $uri $uri/ =404;
      }

      location ~* \.(?:css|js|jpg|jpeg|png|gif|ico|svg|webp)$ {
          try_files $uri =404;
          expires 30d;
          add_header Cache-Control "public";
      }

      error_page 404 /404.html;
      location = /404.html {
          root /var/www/sites/hexo;
      }
  }

    server {
        listen 80;
        server_name webhook.neurocoda.com;

        location / {
            proxy_pass http://127.0.0.1:7890;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }

    ##
    # SSL Settings
    ##
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##
    gzip on;

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##
    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

# mail {
#     # See sample authentication script at:
#     # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#     # auth_http localhost/auth.php;
#     # pop3_capabilities "TOP" "USER";
#     # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#     server {
#         listen     localhost:110;
#         protocol   pop3;
#         proxy      on;
#     }
#
#     server {
#         listen     localhost:143;
#         protocol   imap;
#         proxy      on;
#     }
# }

設定を変更したら、構文エラーを確認：

nginx -t

nginx 設定をリロード：

systemctl reload nginx

DNS レコードが正しく設定されていることを確認：

SSL の設定

SSL を設定：

certbot --nginx

指示に従って情報を入力

certbot によって変更された nginx.conf の構文が正しいか確認：

nginx -t

nginx 設定をリロード

systemctl reload nginx

同期テスト

ローカルの Hexo ディレクトリで：

hexo clean & hexo g & hexo d

実行が完了したらサーバーにアクセスすると、問題なければウェブページが表示されているはずです。

よくある問題

権限の問題

chmod 755 /var/www/sites/Hexo
chown -R www-data:www-data /var/www/sites/Hexo