Vercel+GitHubを使用してHexoブログを迅速に構築する

基本操作#

選択した灰色の枠内の内容、つまりあなたの GitHub を選択し、Select ボタンをクリックし、次に GIT SCOPE で Hexo を保存したいユーザーを選択し、REPOSITORY NAME に Hexo を保存したいリポジトリ名を入力し、Create private Git Repository オプションにチェックを入れます。このオプションは、そのリポジトリをプライベートリポジトリに設定し、他の人には見えなくします。次に Continue ボタンをクリックし、何も変更せずに直接 Deploy をクリックし、自動的に構築が完了するのを待ちます。3 分以内に完了し、無料のサブドメインが配布され、一時的に使用できます（回収されませんが、使用は推奨されません）。

::: gallery

:::

デプロイが完了すると、あなたが記入したリポジトリにバインドされます。一度リポジトリに何か変更があれば、自動的に同期デプロイされます。全プロセスは約 5 分でデプロイが完了します。

次は進階的な遊び方、テーマのカスタマイズや記事の執筆です。

進階的な遊び方#

ローカルの変更#

環境の準備#

Windows オペレーティングシステムのコンピュータ
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 を押した後、しばらく待つ必要があります。私はここで 100s 待ちました）：

npm install -g hexo

+ hexo@{{バージョン番号}} と表示されれば、インストール成功です。

GitHub & SSH キー（この部分は FlyingSky からの引用です）

GitHub に行き、あなたのアカウントを登録します（メールアドレスの確認をお忘れなく）。

Git Bash を開き、以下のコマンドを実行します：

ssh-keygen -t rsa -C "{{あなたのメールアドレス}}"

3 回 Enter を押すと、最終的にユーザーディレクトリに公開鍵と秘密鍵などのデータを含むディレクトリが生成されます（通常は 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 [email protected] # このメールアドレスは変更しないでください

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 の方法がわからない場合は、百度や CSDN、ブログ園に類似のチュートリアルがあります。この記事の最後に Push のチュートリアルを書きますが、詳細には触れませんので、自分で百度で学ぶことをお勧めします。

CloudStudio の変更#

環境と準備#

CloudStudio アカウント https://cloudstudio.net/
Hexo

環境のインストール

ここでは CloudStudio の登録方法は教えません。

Coding に入ったら、左側で CloudStudio を見つけ、認証後、新しいワークスペースを作成 をクリックし、Node.Js を選択し、任意の名前を付け、コードのソースを空にします。

新しいワークスペースが完成したら、その空間に入り、ターミナルをクリックし、新しいターミナルを作成します。次のほとんどの内容はターミナルで完了する必要があります。

インストールの確認

ターミナルに以下の内容を入力します。

node -v
npm -v

両方のバージョンが表示されれば、CloudStudio での変更を開始できます。

Hexo

Hexo は高速でシンプルかつ効率的なブログフレームワークです。

ターミナルを開き、以下のコマンドを実行して Hexo をインストールします。

npm install -g hexo

+ hexo@{{バージョン番号}} と表示されれば、インストール成功です。

GitHub & SSH キー

まず、パスが RemoteWorking であることがわかりますが、ファイルの保存パスを root に設定する必要があります。

次のコマンドを実行します。

cd /root

フォルダを開いて root フォルダに入ります。

ターミナルに以下を入力します。

ssh-keygen -t rsa -C "{{あなたのメールアドレス}}"

コピーした内容を Key に貼り付け、Title に好きな名前を入力し、保存（Add SSH Key）をクリックします。

Git の設定

以下のコマンドを実行します：

git config --global user.name "{{あなたの GitHub ユーザー名}}"
git config --global user.email "{{あなたの GitHub 登録メールアドレス}}"

成功の確認

Git Bash を開き、以下のコマンドを実行します：

ssh -T [email protected] # このメールアドレスは変更しないでください

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 [email protected]:ユーザー名/リポジトリ名.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 の方法がわからない場合は、百度や CSDN、ブログ園に類似のチュートリアルがあります。この記事の最後に 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 プロキシ GitHub 代理加速
平均 4 分の歌 50 曲

以上の内容に誤りがあれば、百度で深く学ぶか、私が参考にした資料を参考にしてください。

この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://fmcf.cc/posts/technology/Hexo_on-_Vercel