hexo を使ったブログ構築の学習過程は、自分の経験のまとめとしてのみ使用され、チュートリアルとしては使用されません。主にブログを github 上に構築することに焦点を当てています。ここには、自分がブログを構築する際に遭遇したいくつかの問題が含まれていますが、全体的ではありませんが、大体の理解が得られます。
前言#
もし皆さんがhexoについて知りたい場合は、hexoの公式ドキュメントを見てみてください。ここでは主に純粋なチュートリアルに焦点を当てています。以下のブログ構築は主に Windows で行われ、構築にはNodeJSとgitが必要です。CSDN で検索すると詳細なチュートリアルがたくさん出てきます。最初にgithubアカウントを準備する必要がありますが、初めて git をインストールする場合は注意が必要です。できれば包括的なチュートリアルを見つけて、一歩ずつ進めるのが良いでしょう。これらの手順は私が書いていないが言及されているもので、私の文末の参考資料にリストします。
実践操作#
Github アカウント#
GitHub アカウントを作成し、新しいリポジトリを作成します。リポジトリ名は必ずname.github.ioの形式で書く必要があります。name は自由に変更できます。public を選択し、リポジトリを作成します。
hexo のインストール#
- コンピュータのターミナルを開き、以下のコードを入力します：
npm install -g hexo-cli
- hexo のバージョンを確認します：
hexo -v
- この時点でブログを作成します。私のブログは D:\Blog の下にインストールされていますが、皆さんも好きなディレクトリを選んで構いません（myblog はブログ名で、変更可能です）。
hexo init myblog
- ブログに入ります。
cd myblog
- npm をインストールします。
npm install
- 静的ファイルを生成します。
hexo g
- ローカルテストを行います。
hexo s
これで簡単なブログが完成しました。
テーマのインストール#
hexo ブログの公式サイトには多くのテーマがあり、github 上で hexo テーマを直接検索することもできます。最も好きなテーマを選んでください。私は volantis テーマを使用しています。以下の手順は D:\Blog\myblog で行います。
- ターミナルを開いてブログに入り、テーマをダウンロードします。
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/Volantis
- 依存パッケージをインストールします。
npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts
- ブログディレクトリ（D:\Blog\myblog）内の設定ファイル
_config.ymlを開き、以下のコードを見つけます：
## Themes: https://hexo.io/themes/
theme: landscape
landscape を volantis に変更します。
- 次に、テーマの変更が難しくなります。使用するテーマのドキュメントを見て、提示された内容に従って変更します。
Github へのデプロイ#
- 前のステップのディレクトリ内の設定ファイル
_config.ymlを開き、以下のコードを見つけて変更します：
deploy:
type: git
repo: git@github.com:wangyunzi/wangyunzi.github.io.git（リポジトリのアドレス、下の図を参照）
branch: master（ブランチ）
- プラグインをインストールします：
npm install hexo-deployer-git --save
- git のインストール手順はすでにスキップされているため、デフォルトでインストールが成功していると仮定します。ローカルとリモートはすでにデプロイされていますので、次に以下のコマンドを入力してキャッシュファイル
db.jsonと生成された静的ファイル public をクリアします。
hexo clean
- サイトの静的ファイルをデフォルト設定の public フォルダに生成します。
hexo g
- サイトを設定したリポジトリにデプロイします。
hexo d
- 記事を作成します。
hexo new post 第一篇文章
上記のコードを入力すると、source フォルダ内の post に「第一篇文章」という md ファイルが作成され、内容を記述できます。
- 記事の提出は、デプロイとほぼ同じで、以下のコードを順に入力します：
hexo clean
hexo g
hexo d
これで、ブログの設置がほぼ完了しました。
github と vercel へのデプロイ#
後にブログが増えていく中で、name.github.io を使い続けるのが難しいことに気づきました。具体的な原理は説明できませんが、2 つのこのようなブログを設置することもできることがわかりましたが、少し複雑なので、思い切って諦めました。そのため、ファイルを github に push し、github と vercel をリンクさせることにしました。これにより、vercel は name.vercel.app のような無料のドメインを提供してくれます。vercel では無数のブログを持つことができ、これが私が vercel を徐々に好きになった理由です。最後に、github に push せずに直接 vercel に push することもできることがわかりました。これは非常に良い方法で、私の末尾の参考文献で見つけることができます（この部分は見るか見ないか選べます）。
- 同様に、新しいブログを作成します。プライベートでも公開でも構いませんが、できればプライベートに設定することをお勧めします。
- ブログを初期化すると、ブログディレクトリに
.gitファイルが追加されます。
git init
- 次に、以下のコードを入力します。これはリポジトリに初めて push する手順です：
git add ..
git commit -m "first commit"
git remote add origin git@github.com:wangyunzi/a.git
git branch -M master
git push -u origin master
git remote 部分には自分のリポジトリの ssh を入力します。これは前のステップで言及したもので、「first commit」は他の名前に変更できます。これはコミット名を示し、コミット後にリポジトリで見ることができます。
- 今後、ブログを変更したり記事を提出したりする場合は、以下の手順を直接入力できます：
hexo clean
hexo g
git add ..
git commit -m "first commit"
git branch -M master
git push -u origin master
- 上記の手順でブログを github に保存したので、次に vercel と直接接続します。ログイン時に github アカウントを使用すると便利です。新しいプロジェクトを作成します：
- 先ほど作成した github ブログをインポートします。
- 名前を入力します。この名前はあなたのウェブサイトの前半部分の名前です。例えば、私のブログの URL は yunzi.vercel.app で、vercel 上のプロジェクト名は yunzi です。次に deploy をクリックし、数分待つと「congratulation」と書かれたページが表示され、成功を示します。プロジェクトのホームページに戻ります：
- URL を開いてみると、他の人がこの URL を開くとあなたのブログが見えるようになります：
vercel への直接デプロイ#
参考文献にはすでに比較的完全な記事がありますが、手順に従っているときにいくつかの小さな問題が発生しました。主に私の実際の操作が彼のものと少し異なっていたため、私の全体の手順を整理するために新しい hexo ブログのデモを作成しました😂😂。
- まず vercel をインストールします。
npm install -g vercel
- hexo の静的ファイルを生成します。
hexo g
- チュートリアルでは public フォルダに移動することが求められていますが、その操作を行うとエラーが発生したため、ブログディレクトリで以下の手順を直接行います。コードを入力します：
vercel
直接enterをクリックします。前回は github でログインしたため、以下の選択肢は使用していませんが、試してみたい方は試してみてください。次に、ブラウザに github アカウントでログインするページが表示されます。表示されない場合もありますが、次に以下のような画面が表示されます：
これらのコードをゆっくり分析します。success は github でのログイン成功を示し、ローカルブログファイル test をアップロードするかどうかを尋ねられます。直接 enter をクリックすると、vercel アカウントにアップロードするかどうかを尋ねられます。私の vercel アカウント名は wangyunzi で、既存の vercel プロジェクトにアップロードするかどうかを尋ねられます。私はこのプロジェクトを vercel で作成していないため、直接 n（NO）と入力します。すでに作成している場合は、enter を続けてプロジェクト名を尋ねられます。これは上記の手順と同じで、URL の名前です。次に、enter を押し続け、少し待つと：
この画像は、私がアップロードに成功したことを示しています。次に、vercel ページで確認してみましょう：
私のブログは成功裏にアップロードされており、リンクをクリックすると私のブログが表示されます！
- 以下のコードを順に入力して記事を公開します：
hexo cl
hexo g
vercel --prod --confirm
まとめ#
以上が私の hexo を使ったブログ構築の過程です。今ではこれらの手順を非常にスムーズに操作でき、問題に直面することはありませんが、当初の私は一つのステップを実行するたびにエラーが発生し、連続してエラーが表示されることがよくありました。ブラウザで開くウェブページの数は、論文を書くときに開くページよりも多かったです😪。本当に「一把辛酸泪」です。これからも hugo を使ったブログ構築や notion を使ったブログ構築の過程をゆっくり記述していきたいと思います。実際、私にとってこれらのブログの手順は非常に混乱しており、一つのエラーが発生するたびにインターネットで検索するという状態でした。正常で完全な手順がなかったため、今は振り返りのプロセスとしても機能しています。将来忘れたときに振り返ることができるように。最後に自分に言いたいのは、デモ用に作成したリポジトリやスクリーンショットを削除するのをゆっくりと行い、記事を書き終えた後、デスクトップがスクリーンショットで埋まっている様子は本当に美しいということです。
また会いましょう！