基本操作#
選択した灰色の枠内の内容、つまりあなたの 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 "{{あなたのメールアドレス}}"
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.
このメッセージが表示されれば、設定が成功したことを示します。
これでローカル環境の設定が完了し、変更を行うことができます。
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