GitHub Pagesリポジトリの初期設定

GitHubでは、各プロジェクトが独立したGitリポジトリに対応します。新しいプロジェクトを開始するには、まずリポジトリを作成します。ダッシュボードから「New repository」を選択し、リポジトリ名に alice.github.io（aliceは実際のGitHubユーザー名に置き換えてください）を入力してリポジトリを生成します。

リポジトリ作成後、SSH経由でのアクセスを有効にするために公開鍵を登録します。SSHキーの設定が完了したら、以下のコマンドで接続テストを行います。

$ ssh -T git@github.com
Hi alice! You've successfully authenticated, but GitHub does not provide shell access.

次に、ローカル環境にリポジトリをクローンし、初期ファイルを追加します。

$ git clone git@github.com:alice/alice.github.io.git
$ cd alice.github.io/
$ cat <<EOF > index.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Alice's Tech Blog</title></head>
<body><h1>Hello, GitHub Pages!</h1></body>
</html>
EOF
$ git add index.html
$ git commit -m "Initial commit for GitHub Pages"
$ git push origin main

※ 近年のGitHubではデフォルトブランチが main になることが多い点に注意してください。数分待機した後、http://alice.github.io/ にアクセスすることで、デプロイされたページを確認できます。

Hexoフレームワークの導入と初期化

静的サイトジェネレーターであるHexoを導入します。Node.jsがインストールされている環境で、以下のコマンドを実行してCLIツールと本体をインストールします。

$ npm install -g hexo-cli
$ mkdir my-blog && cd my-blog
$ hexo init .
$ npm install

インストールが正常に完了したか確認するために、バージョン情報を出力します。

$ hexo version

ローカルサーバーを起動して、初期状態のサイトを表示してみましょう。

$ hexo generate
$ hexo server

ブラウザで http://localhost:4000/ を開くと、Hexoのデフォルトテーマが適用されたサイトが表示されます。

サイト設定のカスタマイズ

サイトの挙動はルートディレクトリにある _config.yml で制御します。主要な設定項目を以下にまとめます。

サイト基本情報とURL設定

パラメータ	説明	デフォルト/例
title	サイトのタイトル	My Tech Blog
url	サイトのベースURL	https://alice.github.io
root	ルートディレクトリ	/
permalink	記事のパーマリンク構造	:year/:month/:title/
language	サイトの言語設定	ja

ディレクトリとレンダリング設定

パラメータ	説明	デフォルト
source_dir	ソースファイル（記事など）の格納先	source
public_dir	ビルド後の静的ファイル出力先	public
skip_render	レンダリングを除外するパス（glob対応）	-

デプロイメントの設定

GitHub Pagesへ自動デプロイを行うためのプラグインを導入し、設定ファイルに追記します。

$ npm install hexo-deployer-git --save

_config.yml の最下部にある deploy セクションを以下のように編集します。

deploy:
  type: git
  repo: git@github.com:alice/alice.github.io.git
  branch: main

また、Gitのユーザー情報をグローバルまたはローカルで設定しておきます。

$ git config --global user.name "alice"
$ git config --global user.email "alice@example.com"

設定後、以下のコマンドでビルドとデプロイを同時に実行できます。

$ hexo clean && hexo deploy

新規記事の作成

記事は source/_posts/ ディレクトリ内にMarkdownファイルとして作成します。ファイルの先頭にはFront-matter（YAML形式のメタデータ）を記述します。

---
title: HexoとGitHub Pagesの連携について
date: 2023-10-25 10:00:00
tags:
  - Hexo
  - GitHub
categories:
  - Web Development
---

ここに記事の本文を記述します。Markdownの構文が利用可能です。

応用編：テーマの変更とカスタムドメインの適用

テーマの適用

Hexoは豊富なテーマをサポートしています。好みのテーマをリポジトリからクローンし、themes ディレクトリに配置します。

$ git clone https://github.com/hexojs/hexo-theme-landscape.git themes/custom-landscape

その後、_config.yml の theme パラメータを変更し、再ビルドします。

theme: custom-landscape

$ hexo clean && hexo generate

カスタムドメインのバインディング

独自ドメイン（例: alice-blog.com）を使用する場合、まずドメインレジストラでDNS設定を行います。AレコードをGitHub PagesのIPアドレス（例: 185.199.108.153 など）に向け、CNAMEレコードを alice.github.io に設定します。

次に、Hexoの source ディレクトリ直下に CNAME という拡張子なしのファイルを作成し、ドメイン名を記述します。

$ echo "alice-blog.com" > source/CNAME

最後にサイトを再デプロイします。

$ hexo deploy

GitHubリポジトリの「Settings」>「Pages」セクションでカスタムドメインが認識され、SSL証明書の発行が完了すれば、独自ドメインでのアクセスが可能になります。DNSの反映には最大で数時間かかる場合があります。