Vercel＋GitHubでHexoブログを素早く構築する
基本操作
グレーの枠でチェックが入っている項目、つまりあなたのGitHubを選択し、Selectボタンをクリックします。次にGitHubをクリックし、GIT SCOPEでHexoを保存したいユーザーを選択し、REPOSITORY NAMEにHexoを保存したいリポジトリ名を入力し、Create private Git Repositoryオプションにチェックを入れます。このオプションはリポジトリをプライベート（非公開）に設定し、他人から見えなくするものです。その後Continueボタンをクリックし、何も変更せずにそのままDeployをクリックします。自動でビルドが完了するのを待ちます（3分以内に完了します）。無料のサブドメインが発行され、一時的に使用できます（回収はされませんが、本番利用は推奨しません）。
デプロイが完了すると、先ほど入力したリポジトリと連携されます。リポジトリに何か変更があると、自動的に同期してデプロイされます。全工程は約5分で完了します。
次は、応用編としてテーマのカスタマイズや記事の執筆に進みます。
応用編
ローカルでの編集
環境準備
- Windows OS のコンピューター
- Git for Windows
- Node.js ≥ v12
- NPM
- Hexo
環境のインストール
すでにインストール済みの方はこの手順をスキップしてください。また、動作確認が不要な場合もスキップして構いません。
本チュートリアルの環境は Windows 10 20H2 をベースにインストールを行います。
Git（必須。動作確認が不要な場合でも必ずインストール）
Windows で Git を使用するには、Git for Windows が必要です。ダウンロードしてインストールしてください（公式サイトのダウンロードが遅いと感じる場合は、淘宝 NPM ミラー からダウンロードできます）。
ここでは このリンク からダウンロードした Git-2.25.0-64-bit.exe を使用し、すべてデフォルト設定でインストールします。
インストールの確認
エクスプローラーの右クリックメニューまたはスタートメニューから Git Bash を開きます。コマンドラインインターフェースが起動します。ローカルでのHexo編集は、この環境でHexoシステムが正常に動作するかどうかを確認しながら行います。
Git Bash を開き、以下のコマンドでバージョンを確認します。
node -v
npm -v
上記のように表示されれば、環境のインストールは成功です。
Hexo
Hexoは、高速でシンプルかつ効率的なブログフレームワークです。
Git Bash を開き、以下のコマンドを実行してHexoをインストールします（Enterキーを押した後、しばらく待つ場合があります。ここでは 100秒 待ちました）。
npm install -g hexo
+ hexo@{{バージョン番号}} と表示されればインストール成功です。
GitHub ＆ SSHキー （このセクションは FlyingSky からの転載です）
GitHub にアクセスしてアカウントを作成してください（メールアドレスの確認を忘れずに行ってください）。
Git Bash を開き、以下のコマンドを実行します。
ssh-keygen -t rsa -C "{{あなたのメールアドレス}}"
Enterキーを3回連続で押すと、ユーザーディレクトリに公開鍵と秘密鍵を含むディレクトリが生成されます（通常は C:/Users/{{あなたのユーザー名}}/.ssh/ です）。
このディレクトリを開き、id_rsa.pub ファイルを見つけます。お好みのバイナリテキストエディタ（メモ帳など）で開き、内容をコピーします。GitHub -> Settings -> SSH and GPG keys -> New SSH key（つまり このリンク）に移動します。
コピーした内容を Key に貼り付け、Title には好きな名前を入力し、保存（Add SSH Key）をクリックします。
Gitの設定
以下のコマンドを実行します。
git config --global user.name "{{あなたのGitHubユーザー名}}"
git config --global user.email "{{あなたのGitHub登録メールアドレス}}"
成功の確認
Git Bash を開き、以下のコマンドを実行します。
ssh -T git@github.com # ここでのメールアドレスは変更しないでください
Are you sure you want to continue connecting (yes/no)? と表示されたら、yes と入力してEnterキーを押します。
Hi {{あなたのGitHubユーザー名}}! You've successfully authenticated, but GitHub does not provide shell access.
このメッセージが表示されれば設定成功です。
これでローカル環境の設定が完了し、編集が行えるようになります。
ローカルでの編集
Gitコマンドを使用して、GitHubに保存されているリポジトリをローカルにクローンします。
git clone https://github.com/{{ユーザー名}}/{{リポジトリ名}}.git
注意：プライベートリポジトリをクローンするには、GitHubのアカウントとパスワードの入力が必要です。
クローンが完了したら、テーマを変更したり、記事を書いたりできます。
テーマの変更
デフォルトのテーマで問題ない場合は、このセクションをスキップしてください。
ここでは SumiMakito/hexo-theme-Journal を例に説明します。
Hexoサイトのディレクトリで Git Bash を開き、以下のコマンドを実行してテーマをインストールします（待機が必要です）。
git clone {{テーマのGitファイルアドレス}} themes/{{テーマ名}}
例：
git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal
ダウンロードが完了したら、_config.yml の theme: landscape を theme: {{テーマ名}} に変更し、hexo g を実行して再生成します。
何か問題が発生した場合は、hexo clean を実行して public ディレクトリの内容をクリーンアップし、その後再生成して公開します。
プラグインのインストール
Hexoサイトのディレクトリで Git Bash を開き、以下のコマンドを実行します。
hexo new '{{記事名}}'
実行後、source_posts` ディレクトリに {{記事名}}.md` ファイルが作成されます。お好みのバイナリテキストエディタ（メモ帳など）でこのファイルを開くと、Hexoがデフォルトでヘッダー情報を生成しています。
ファイルの内容構成は以下の通りです。
---
title: {{記事名}}
date: {{記事の日時}}
categories: {{記事のカテゴリ}}
tags: {{記事のタグ [tag1,tag2,tag3]}}
description: {{記事の概要}}
---
{{記事本文}}
記事の内容は Markdown 構文に対応しています。
テスト実行
記事の作成やテーマのインストールが完了したら、以下のコマンドを実行してテストできます。
hexo g -s
コマンド入力後、localhost:4000 にアクセスして正常に動作するか確認します。
Hexoブログのデプロイ
前の手順で正常に動作したら、Git Push を使用してGitHubにプッシュし、Vercelが自動的に取得してデプロイします。Pushの方法がわからない場合は、GoogleやQiita、Zennなどで類似のチュートリアルを検索してください。この記事の最後にPushのチュートリアルを簡単に記載しますが、詳細ではないため、ご自身で学習されることをお勧めします。
CloudStudio での編集
環境と準備
- CloudStudio アカウント https://cloudstudio.net/
- Hexo
環境のインストール
CloudStudioの登録方法についてはここでは説明しません。
Codingにログインしたら、左側のメニューからCloudStudioを見つけ、認証後、新しいワークスペースを作成 をクリックし、Node.Jsを選択します。名前は任意で、コードソースは「空」を選択します。
作成が完了したら、そのワークスペースに入り、ターミナルをクリックして新しいターミナルを作成します。以降の作業のほとんどはターミナルで行います。
インストールの確認
ターミナルで以下のコマンドを入力します。
node -v
npm -v
両方ともバージョンが表示されれば、CloudStudioでのクラウド編集を開始できます。
</center>
Hexo
Hexoは、高速でシンプルかつ効率的なブログフレームワークです。
ターミナルを開き、以下のコマンドを実行してHexoをインストールします。
npm install -g hexo
+ hexo@{{バージョン番号}} と表示されればインストール成功です。
GitHub ＆ SSHキー
まず、パスが RemoteWorking になっているので、ファイルの保存先を root 内に変更する必要があります。
以下のコマンドを実行します。
cd /root
フォルダを開き、root フォルダ内に移動します。
ターミナルで以下のコマンドを入力します。
ssh-keygen -t rsa -C "{{あなたのメールアドレス}}"
Enterキーを3回連続で押すと、ユーザーディレクトリに公開鍵と秘密鍵を含むディレクトリが生成されます（通常は C:/Users/{{あなたのユーザー名}}/.ssh/ です）。
このディレクトリを開き、id_rsa.pub ファイルを見つけます。お好みのバイナリテキストエディタ（メモ帳など）で開き、内容をコピーします。GitHub -> Settings -> SSH and GPG keys -> New SSH key（つまり このリンク）に移動します。
コピーした内容を Key に貼り付け、Title には好きな名前を入力し、保存（Add SSH Key）をクリックします。
Gitの設定
以下のコマンドを実行します。
git config --global user.name "{{あなたのGitHubユーザー名}}"
git config --global user.email "{{あなたのGitHub登録メールアドレス}}"
成功の確認
Git Bash を開き、以下のコマンドを実行します。
ssh -T git@github.com # ここでのメールアドレスは変更しないでください
Are you sure you want to continue connecting (yes/no)? と表示されたら、yes と入力してEnterキーを押します。
Hi {{あなたのGitHubユーザー名}}! You've successfully authenticated, but GitHub does not provide shell access.
このメッセージが表示されれば設定成功です。
これでローカル環境の設定が完了し、編集が行えるようになります。
CloudStudio での編集
次に、Gitコマンドを使用して、GitHubに保存されているリポジトリをCloudStudioにクローンします。
git clone git@github.com:ユーザー名/リポジトリ名.git
注意：プライベートリポジトリをクローンするには認証が必要です。https://github.com/settings/tokens/new にアクセスして、フル権限のトークンを生成し、CloudStudioに送信して認証を行うことができます。
クローンが完了したら、テーマを変更したり、記事を書いたりできます。
テーマの変更
デフォルトのテーマで問題ない場合は、このセクションをスキップしてください。
ここでは SumiMakito/hexo-theme-Journal を例に説明します。
cd /{{Hexoが存在するディレクトリ}}
以下のコマンドを実行してテーマをインストールします（待機が必要です）。
git clone {{テーマのGitファイルアドレス}} themes/{{テーマ名}}
例：
git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal
ダウンロードが完了したら、_config.yml の theme: landscape を theme: {{テーマ名}} に変更し、hexo g を実行して再生成します。
何か問題が発生した場合は、hexo clean を実行して public ディレクトリの内容をクリーンアップし、その後再生成して公開します。
プラグインのインストール Hexoが存在するディレクトリに移動します。
cd /{{Hexoが存在するディレクトリ}}
ターミナルで以下のコマンドを入力します。
npm install hexo-deployer-git --save
記事の作成 Hexoが存在するディレクトリに移動します。
cd /{{Hexoが存在するディレクトリ}}
ターミナルで以下のコマンドを入力します。
hexo new '{{記事名}}'
実行後、source_posts` ディレクトリに {{記事名}}.md` ファイルが作成されます。ファイルをクリックすると、Hexoがデフォルトでヘッダー情報を生成しています。
ファイルの内容構成は以下の通りです。
---
title: {{記事名}}
date: {{記事の日時}}
categories: {{記事のカテゴリ}}
tags: {{記事のタグ [tag1,tag2,tag3]}}
description: {{記事の概要}}
---
{{記事本文}}
記事の内容は Markdown 構文に対応しています。
Hexoブログのデプロイ
ローカルでのテスト実行ができないため、直接Pushします。通常、テーマやプラグインに問題がなければ、直接Pushしてデプロイしても問題はありません。Pushの方法がわからない場合は、GoogleやQiita、Zennなどで類似のチュートリアルを検索してください。この記事の最後にPushのチュートリアルを簡単に記載しますが、詳細ではないため、ご自身で学習されることをお勧めします。
GitHub Push
ここではコードのみを提供します。具体的な状況については、ご自身で学習される必要があります。GitコマンドはLinuxコマンドと同様に、非常に奥が深いものです……。
git status
git add .
git status
git commit -m 'コメント'
git branch -m master
git push -f origin master
通常、初回のプッシュでは、この一連のコマンドを実行する前に、git add を一度実行する必要があります。
もちろん、IDEソフトウェアを使用して制御することもでき、非常に便利です。
おわりに
さて、今回の長編Hexoデプロイチュートリアルは以上です。今後、状況に応じて修正を加える可能性があります。
参考にした資料：
- 让我们用 GitHub Pages 搭建一个 Hexo 站点 方法の参考
- 超详细 Hexo+Github Page 搭建技术博客教程【持续更新】 新しい記事の書き方
- 史上最详细 “截图” 搭建 Hexo 博客并部署到 Github
hexo g -sのコード - 如何将 cloud studio 的代码提交到 Git 的其他平台 頭が混乱した
この記事を完成させるのに役立ったもの：
- 一杯の水
- 一杯の牛乳
- GitHub Proxy Github プロキシ高速化
- 平均4分の曲を50曲
上記の内容に誤りがあった場合は、Googleでの深い学習や、私が参考にした資料を参照してください。