Hexoブログを構築しましょう。高速、シンプル、効率的、個人ブログをゼロコストで構築できます。Hexo + GitHub Pages + Cloudflare Pages完全ガイド

この記事では、Hexoフレームワークを使用して個人ブログを構築し、それをデプロイする方法について詳しく説明します。GitHub ページとクラウドフレアページ。主な内容は次のとおりです。

環境準備: Node.jsとGitをインストールする
GitとGitHubの設定：SSHキーを設定し、GitHubリポジトリを作成する
Hexoプロジェクトの初期化: Hexoをインストールして新しいブログを作成する
GitHub Pages にデプロイ: デプロイ設定を構成し、静的ファイルをプッシュします
展開先Cloudflareページ: GitHubリポジトリに接続して自動的にデプロイする
基本的な使用方法: 新しい記事の作成、ローカルでのプレビュー、更新の公開

このチュートリアルは、個人ブログをすぐに構築したいけれど、あまりお金をかけたくないという方に最適です。Hexo、GitHub、Cloudflareの無料サービスを利用すれば、効率的で簡潔なブログサイトを簡単に作成できます。

1. 準備

ドメイン名(不要無料のドメイン名を使用することもできます。GitHub.ioまたはページ.dev割り当てられたドメイン名でもOKです）
GitHub（しなければならないGitHubアカウントを登録する必要があります）
クラウドフレア（不要ブログをCFのCDNにデプロイして高速化するには、Cloudflareアカウントを登録する必要がありますが、GitHub.io割り当てられたドメイン名）

2. ソフトウェアサポート

ノード（しなければならない）
ギットしなければならない）
VSコード（不要これは、優れたプログラミング習慣を身につけるのに役立つ軽量のコードエディタです。

2.1. Nodeのインストール

Nodeの公式サイトを開き、お使いのシステムに合ったNodeインストールプログラムをダウンロードしてください。そうでない場合、インストールに問題が発生する可能性があります。ダウンロードアドレス：https://nodejs.org/en
ダウンロード後、インストールしてください。インストールにはデフォルトのディレクトリを使用できます。C:/プログラムファイル/nodejs/
インストールが完了したら、インストールが成功したかどうかを確認します。キーボードでWin + Rを押し、CMDと入力し、Enterキーを押してCMDウィンドウを開き、実行します。ノード -vコマンドを実行し、バージョン情報が表示されればインストールは成功したことを意味します。
npmソースを修正します。npmは様々なモジュールをダウンロードします。デフォルトでは国内サーバーからダウンロードするため、速度が遅くなります。Huawei Cloudミラーソースに設定することをお勧めします。コマンドプロンプトウィンドウを開き、以下のコマンドを実行してください。 npm config レジストリの設定 https://mirrors.huaweicloud.com/repository/npm/

2.2. Gitをインストールする

現在のシステムに適した Git をダウンロードするには、公式 Web サイトにアクセスしてください。https://git-scm.com/downloads
ダウンロード後、Git を安全にインストールできます。インストールにはデフォルトのディレクトリを使用することをお勧めします。C:/プログラムファイル/Git
コンピュータの左下にある[スタート]をクリックすると、Git コマンド、Gitバッシュ、Git GUI。
- Git コマンド これはWindowsのコマンドラインのコマンドスタイルです
- Gitバッシュ これは Linux システムのコマンドスタイルです (推奨)
- Git GUIグラフィカルインターフェースです（初心者にはお勧めしません）

3. Gitキーを設定してGithubに接続する

一般的なGitコマンド

git config -l //すべての設定を表示 git config --system --list //システム設定を表示 git config --global --list //ユーザー（グローバル）設定を表示

3.1. ユーザー名とメールアドレスを設定する

git config --global user.name "ユーザー名" git config --global user.email "メールアドレス"

合格git config -l 構成が成功したかどうかを確認します。

3.2. Githubに接続するための公開鍵を設定する

次のコマンドを実行して、コンピュータをGithubに接続するために使用するSSH公開鍵を生成します。 ssh-keygen -t rsa -C "あなたのメールアドレス"

ヒントキーを保存するファイルを入力してください直接続ける初心者がキーを設定することはお勧めしません。

次に、Cドライブのユーザーフォルダ内の.sshフォルダを開くと、次のファイルが表示されます。

id_rsa秘密鍵
id_rsa.pub公開鍵

上の画像の公開鍵をメモ帳で開きますid_rsa.pub、内容をコピーし、github で ssh キーの設定を開始します。
GitHub への SSH キーの設定
GitHubに入り、右上隅のアバターをクリックして選択します設定設定ページに入り、 SSHキーとGPGキー好きな名前を付けて、公開鍵を入力してください鍵あのコラム。
接続をテストするには、次のコマンドを入力します。
```
ssh -T git@github.com
```
最初の接続では接続を続行しますか（はい/いいえ/[指紋]）？、入力はいあなたはできる

アカウントへの接続に関する情報が表示され、すべてが完了し、環境の準備が完了したことが示されます。

3.3. GitHub.ioリポジトリを作成する

クリック+ボタンを選択新しいリポジトリ、作成する<ユーザー名>.github.io倉庫。
リポジトリ名の形式は次のようになります。<ユーザー名>.github.io （注：プレフィックスはブログのプレビューに必要なユーザー名である必要があります。倉庫名は後で変更できます）
表示設定を選択する必要があります 公共 最初の展開チェック問題を容易にするには、 リポジトリを作成する ただ作るだけ

4. Hexoブログを初期化する

ブログのソースコードを保存するフォルダを作成します（ここで選択したパスは次のとおりです）D:/Hexoブログ）フォルダを右クリックして、ここでGit Bashを開く
存在するGit バッシュHexoをインストールするには次のコマンドを入力します
```
npm install -g hexo-cli && hexo -v
```
インストール後、ヘキソ-vインストールが成功したことを確認します。
Hexo プロジェクトを初期化し、関連する依存関係をインストールします。
```
hexo init ブログ-デモ cd ブログ-デモ npm i
```
プロジェクトを初期化した後、ブログデモ構造は次のとおりです。

ノードモジュール: 依存パッケージ
足場: 記事生成用のテンプレート
ソース: 記事を保存するために使用されます
テーマ：テーマ
.npmignore: 公開時に無視するファイル（無視可能）
_config.landscape.yml: テーマ設定ファイル
config.yml: ブログ設定ファイル
パッケージ.json: プロジェクト名、説明、バージョン、実行および開発情報

入力ヘキソ cl && ヘキソ sプロジェクトを開始する
ブラウザを開き、アドレス「http://localhost:4000/」を入力します。次の画面が表示されれば、ブログが正常に構築されたことになります。

5. 静的ブログをGitHub Pagesにマウントする

hexo-deployer-gitをインストールする

npm インストール hexo-deployer-git --save

改訂 _config.yml 書類
blog-demo ディレクトリ内の _config.yml ファイルは、Hexo フレームワーク全体の設定ファイルです。このファイル内のほとんどの設定を変更できます。詳細については、公式の設定説明を参照してください。
設定の最後の行を変更し、リポジトリを自分のGitHubプロジェクトアドレスに変更し、ブランチを主要メインブランチを表します (インデントに注意してください)。
ヤムル
```
デプロイ: タイプ: git リポジトリ: git@github.com:cmliussss2024/cmliussss2024.github.io.git ブランチ: main
```
設定を変更したら、次のコマンドを実行してコードを GitHub (Hexo トリプルコンプレックス) にデプロイします。
```
// Git BASH ターミナル hexo clean && hexo generate && hexo deploy // または // VSCODE ターミナル hexo cl; hexo g; hexo d
```

ヘキソクリーン: 以前に生成されたファイルを削除します。ヘキソcl略語。
ヘキソ生成: 静的記事を生成するには、ヘキソg略語
ヘキソデプロイ：記事を展開するには、ヘキソd略語

注: デプロイ時にユーザー名とパスワードの入力を求められる場合があります。

もし現れたら デプロイ完了、デプロイメントが成功したことを意味します。

2 分待ってからブラウザを開いてアクセスすると、ブログの内容が表示されます。

6. 静的ブログをCloudflare Pagesにマウントする

存在する 労働者とページ 選択 ページ の Gitへの接続
次に、ブログリポジトリに対応するGitHubアカウントにログインします。
クリック保存して展開するその後、デプロイメントが完了するまで待ちます。
ヒント成功しました！プロジェクトは次の地域に展開されました: グローバルその後、ブラウザで cmliussss2024-github-io.pages.dev にアクセスすると、ブログの内容が表示されます。

また、<ユーザー名>.github.io倉庫はプライベート私設図書館
独自のドメイン名をお持ちの場合は、ここで独自のカスタムドメインをバインドできます。

使い方

新しいブログ投稿を作成する

hexo new これは新しいブログ投稿です

次にテキストエディタで編集します_posts/これは新しいブログ投稿です.mdの内容はOKですが、マークダウンフォーマットの書き込み。
詳しい使用方法については、 https://hexo.io/zh-cn/docs/writing

記事を編集して保存した後、次のコマンドを使用して、プレビュー用のローカルページ http://localhost:4000/ を生成できます。

// Git BASH ターミナル hexo cl && hexo s // または // VSCODE ターミナル hexo cl;ヘクソス

確認後、以下のコマンドを使用してローカルの記事を GitHub リポジトリにプッシュします。

// Git BASH ターミナル hexo cl && hexo g && hexo d // または // VSCODE ターミナル hexo cl;ヘキソg;ヘキソD

VSCODEターミナルは初回実行時にエラーを報告します

PowerShellを管理者として開き、次のコマンドを入力します。

パワーシェル

Set-ExecutionPolicy リモート署名

参考文献

https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/

謝辞

https://github.com/hexojs/hexo

5/5 - (1票)

無料のHexoブログ、高速、シンプル、効率的、個人ブログの構築に費用はかかりません