Hexoを使用して個人ブログを構築する #02 GitHubでホスティング

新しいリポジトリを作成#

新しいリポジトリ

y0ngb1n.github.ioという名前のリポジトリを作成します。形式は<username>.github.ioです。

GitHub は私たちにサブドメイン<username>.github.ioを提供します。プロジェクトにGitHub Pages機能を有効にすると、http(s)://<username>.github.io/<projectname>でアクセスできます。これにより、各プロジェクトにプロジェクト表示の Pages を追加できます。「<username>.github.ioという名前のリポジトリを新しく作成すると、GitHub はそのリポジトリを私たちの個人ホームページにルーティングし、http(s)://<username>.github.ioでアクセスできます。

ソースコードをコミット#

リポジトリページの指示に従って操作します：

# gitリポジトリを初期化
git init

# バージョン管理を行う
git add .

# コミット
git commit -m ":tada: init hexo"

# リモートリポジトリ（GitHub）アドレスを追加
git remote add origin https://github.com/y0ngb1n/y0ngb1n.github.io.git

# コードをプッシュ
git push -u origin master

プロセス中にアカウントのパスワードを入力するように求められ、プッシュが成功した後、リポジトリページを更新すると、私たちがコミットしたソースコードが表示されます。

リポジトリのホームページ

GitHub Pages 機能を有効にする#

まず Hexo を使用してコンパイルします：

# キャッシュをクリア（オプション）
hexo clean

# コンパイル
hexo g

次に、hexo-deployer-gitプラグインを使用してデプロイします：

# プラグインをインストール
npm install hexo-deployer-git

_config.ymlを変更します：

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: gh-pages

ここではSSHプロトコルを使用します。Git プロトコルのみが使用でき、HTTPS プロトコルではエラーが発生します。SSHについては「SSH で GitHub に接続する」や「SSH の原理と応用（一）：リモートログイン」を参照してください。

次にデプロイを行います：

hexo d

デプロイが成功すると、リモートリポジトリにgh-pagesブランチが自動的に作成されます。

404 デプロイに問題が発生した#

本来はgh-pagesブランチをデプロイする予定でしたが、結果的にmasterブランチしかデプロイできませんでした。私たちのmasterブランチにはindex.htmlファイルがないため、ホームページにアクセスすると 404 エラーが発生しました。

確認したところ、私たちのリポジトリがサブドメイン方式を使用しているため、GitHub Pages はmasterブランチのみをデプロイでき、選択することができません。名前を別のもの（例えばblog）に変更すると、どのブランチをデプロイするかを選択できるようになります。

私が考えた解決策は 2 つあります：

ブランチ戦略を調整する：
- master：コンパイルされた静的リソース
- source：ブログのソースコード
リポジトリ名を変更する（例えばblog）：
- 利点：github-pages のデプロイ戦略を調整できる
- 欠点：サブドメインで直接アクセスできなくなり、/blogのサフィックスを追加してアクセスする必要があります（カスタムドメインで解決可能）

ここでは、私は解決策 1（ブランチ戦略の調整）を選択します：

# すべてのブランチを表示
$ git branch -a
  ls
* master
  remotes/origin/master

# *まずリポジトリ設定でgh-pagesをデフォルトブランチに設定します（そうしないとmasterブランチを削除できません）

# ローカルのmasterブランチの名前をsourceに変更
$ git branch -m master source

# リモートのmasterブランチを削除
$ git push --delete origin master
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         master

# 新しいsourceブランチをアップロード
$ git push origin source
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      source -> source

次に_config.ymlを変更し、コンパイルされた静的ファイルをmasterブランチにデプロイします：

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: master

変更が完了したら、hexo dを実行してコンパイルデプロイを行い、リモートリポジトリに新しいmasterブランチが表示されるまで、コマンドは次の通りです：

$ hexo d
INFO  Deploying: git
INFO  .deploy_gitフォルダーをクリアしています...
INFO  publicフォルダーからファイルをコピーしています...
INFO  拡張ディレクトリからファイルをコピーしています...
On branch master
nothing to commit, working tree clean
remote:
remote: GitHubで'master'のプルリクエストを作成するには、次のリンクにアクセスしてください：
remote:      https://github.com/y0ngb1n/y0ngb1n.github.io/pull/new/master
remote:
Branch 'master'は、'[email protected]:y0ngb1n/y0ngb1n.github.io.git'のリモートブランチ'master'を追跡するように設定されました。
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      HEAD -> master
INFO  Deploy done: git

この時点でgithub-pagesはmasterブランチの更新を検出し、デプロイを更新します。この時、https://y0ngb1n.github.io/にアクセスすると、ついに期待していた Hexo ブログページが表示されます。

y0ngb1n.github.io

ブランチ戦略を調整したため、現在sourceブランチが私たちの主ブランチとなり、設定でsourceをデフォルトブランチに設定し、リモートリポジトリからgh-pagesブランチを削除します。

# リモートのgh-pagesブランチを削除
$ git push --delete origin gh-pages
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         gh-pages

これで大成功です！

GitHub だけが無料でホスティングできるのですか？

もちろん、他のプラットフォームでもこのような Pages 機能を提供しています。例えば：

Aben Blog