自分のブログを持ちたいが資金がない初心者と小学生の自分に向けて書かれたもの
前言#
独立したブログの時代は過ぎ去り、多くの人々が大きなプラットフォームで自分の文章を発表し始めています。
これらのプラットフォームのトラフィックは、ブロガーたちに収益をもたらすことができます。
しかし、自分のブログを持つことは、それが自分だけのものであり、自分自身で一歩一歩構築していく必要があることを意味します。
例えば、記事の言語、インターフェースのレイアウト、機能の数、検索エンジンのインデックスなど、すべてを少しずつ改善する必要があります。
最後に、自分のウェブサイトが一歩一歩成長していくのを見ると、心の中に誇りと安堵の感情が湧いてきます。
この記事を読んでいるすべての人が、学生であれ他の人であれ、自分だけのブログを持ち、その内容を心を込めて構築できることを願っています。
ここでの引用は、一般的に注意事項であり、読む前に注意を払うことを忘れないでください。
言及されるもの#
- Hexo
- 静的ブログ
- Serverless（サーバーレス）
- GitHub Pages
- Hexo テーマ
ステップ#
Node.js のインストール#
Node.js とは何ですか？
Node.js は Chrome V8 エンジンに基づく JavaScript 実行環境で、イベント駆動型の非同期 I/O モデルを使用し、JavaScript をサーバーサイドの開発プラットフォームで実行できるようにします。これにより、JavaScript は PHP、Python、Perl、Ruby などのサーバーサイド言語と同等のスクリプト言語となります。
—— 百度百科
上記の引用は無視して、本文を読んでください。
まず、Node.js 公式サイト にアクセスしてインストーラーをダウンロードします。
LTS（長期サポート版） を選択してダウンロードしてください。最新のテスト版を選んでも問題ありませんが、いくつかのバグに遭遇する可能性があります。
Windows システムの場合、ダウンロードしたインストーラーの拡張子は .msi であるべきです。
macOS では
.pkg拡張子Linux タブの右側の小さなバツ
ダウンロードしたインストーラーを開き、エンターキーを押し続けます（最初に契約に同意する必要があります）。
インストーラーのインストールが完了したら、コマンドラインまたはターミナルを開き、node と入力します。
返された内容がインストールしたバージョンと一致すれば、インストールは成功です。
その後の操作はすべてターミナルで行います。
Node.js のインストールが成功すると、デフォルトで
npmパッケージマネージャーが付属します。これは後で使用します。その正式名称は
Node Package Managerで、スマートフォンのアプリストアのように理解できます。
国内で npm を使用すると非常に遅くなるため、taobao ミラーソースに切り替えることを検討できます。
npm config set registry https://registry.npmmirror.com
Node.js をインストールした後、yarn をインストールできます。Facebook が提供する、npm よりも高速なパッケージマネージャーです。
npm install -g yarn
Git と GitHub#
Git のインストール#
Visual Studio Code、略して VS Code
現在最も強力で使いやすいエディタで、軽量で高速です（
宇宙一のエディタ）。ただし、VS ではなく、VS は Visual Studio を指し、統合開発環境（IDE）です（
初心者向け：ソフトウェア開発用のもの）。これのサイズは VS Code よりもはるかに大きいです。
（マイクロソフトの製品は素晴らしい）
まず VS Code をインストールします。これにより、Git をインストールする際に VS Code をデフォルトのエディタとして設定できます。
Windows 10 / 11 ユーザーは、Microsoft Store（新しいバージョン）からダウンロードできます。
Git はオープンソースの分散バージョン管理システムで、Linus Torvalds（Linux の作者でもあります）によって Linux 開発を管理するために開発されました。
簡単に言えば、バージョン管理ツールです。例えば、デザイナーが第三版のポスターをデザインしたが、クライアントが第一版が良いと言った場合、Git を使用して迅速に最初のバージョンに戻ることができます。
あなたは、Git に変更の状態を伝えるだけで、各バージョンを圧縮パッケージとして保存する必要はありません。これにより、便利でスペースを大幅に節約できます。
Git をダウンロードしてインストールします。速度が遅い場合は、国内のソフトウェア配布サイトを試してみてください（大手企業のものを探してください。例えば、Tencent など、高速ダウンロードのようなものは選ばないでください）。
GitHub に登録#
この部分は、自分のコンピュータでテストが完了し、オンラインにデプロイすることを考えたときに戻ってくることができます。
字義通りに見ると、GitHub は Git と密接に関連しています。
Gitは Bing 翻訳で愚か者を意味し、Hubはハブを意味します。したがって、GitHub は
「愚か者のハブ」の意味（大雲（取り消し線））です。GitHub は世界最大のオープンソースプロジェクトとコードホスティングサイトであり、多くの開発者が交流するプラットフォームでもあります。また、世界最大の
同性愛者の出会い系サイトでもあります。そのコードホスティングの実装は、上記の Git に基づいています。
GitHub アカウントを登録します（全て英語で翻訳はありませんが、理解するのは難しくありません。最も一般的なオプションを覚えておけば大丈夫です。また、公式ドキュメントには中国語の翻訳があります）。
登録時の英語の ID は、使用できる無料ドメイン名のプレフィックスになります（例えば、私の GitHub ID は Big-Cake-jpg なので、使用できる無料ドメインは big-cake-jpg.github.io です）。
なぜこの翻訳がないものを毎日開くことができないのか？
一般の人々にとって、初めてウェブサイトを構築する際、サーバーやドメインを購入するための資金がないかもしれません。
しかし、GitHub は GitHub Pages という無料サービスを提供しています。
ユーザーはこのサービスを利用して静的サイトをデプロイできます。
右上の + をクリックして New repository を選択するか、左側のサイドバーの緑のボタンをクリックして新しいリポジトリを作成します。
リポジトリ作成ページ。ここでは同名のリポジトリがあるため作成できません。
リポジトリ名は、上の図のように ユーザー名.github.io の形式にする必要があります。ユーザー名は英語で、大文字と小文字は区別しなくても構いません。
なぜこのリポジトリ名を使用する必要があるのか……
自分のドメインを持っていない場合、これを行うことで GitHub Pages がそれをあなたの専用ドメインとして使用できます。もちろん、自分のドメインがある場合は、それをバインドできます。
Create repository をクリックします。
Hexo のインストール#
- GitHub：https://github.com/hexojs/hexo
- 公式ドキュメント は理解力が高い（
国語 90 点以上）ので、公式ドキュメントを読むこともできます（私は理解できませんが）。
Hexo は、Node.js に基づく迅速でシンプルで強力なブログフレームワークで、GitHub にホスティングされており、良好なエコシステムを持っています。これを使用すると、静的ページを迅速に生成でき、他の人のテーマやプラグインを使用したり、自分でカスタマイズしたりできます。
他の一般的なブログフレームワークには WordPress や Typecho などがありますが、これらは通常、自分のサーバーを購入する必要があり、静的に GitHub Pages にデプロイすることはできません。もちろん、機能と柔軟性は大幅に向上します。
静的サイトのもう一つの利点は、アクセス速度が通常より速いことです。
静的サイトジェネレーターには VuePress などもありますが、これらは主にドキュメント作成用に特化されており、ブログのテーマや解決策は少なくなります。
まず、好きな場所にフォルダーを作成し、好きな名前を付けて、そのフォルダーを右クリックして Git Bash Here を選択します。
開いたターミナルで次のコマンドを入力します。
npm install hexo-cli -g
install：インストール
hexo-cli：hexoのターミナルツールで、後で使用するテンプレートファイルを生成します。
-g：グローバルインストール、つまりコンピュータのどこでも使用できます。
次に入力します。
hexo init あなたの GitHub ユーザー名.github.io
hexoは、以前にhexo-cliパッケージをインストールしたため、hexoコマンドを使用できるようになりました。
initはブログテンプレートを初期化し、後のパラメータは新しく作成されるフォルダーの名前で、リポジトリ名と一致させることをお勧めします。
cd あなたの GitHub ユーザー名.github.io
npm install
# または
yarn install
hexo server
server は Hexo にローカルテストサーバーを起動するように指示します。これにより、ブラウザで localhost:4000 にアクセスして結果を見ることができます。
Ctrl + C を押してローカルサーバーの実行を停止します。
これで、サイトの基本的なフレームワークが構築されました。
サードパーティの Hexo テーマを使用する#
Hexo がデフォルトで提供するテーマは hexo-theme-landscape です。
スタイルはシンプルで機能が少ないため、ほとんどの人はデフォルトテーマを使用しません。
ここでは、云游君 のテーマ hexo-theme-yun を使用します。
このサイトのテーマは hexo-theme-yun です。
もちろん、Themes｜Hexo で他のテーマを探すこともできます。例えば、hexo-theme-next など。
テーマのダウンロード#
ターミナルに入り、以前初期化したブログフォルダーのパスにいることを確認します（以下、Hexo ディレクトリと呼びます）。次に、次のコマンドを実行します。
「知っていますか？」は VS Code で直接ターミナルを開くことができます。
yarn add hexo-theme-yun # npm install -g hexo-theme-yun
注意：hexo-theme-yun は v1.8 から npm パッケージ配布を使用しているため、ドキュメントの手順に従って設定移行を行う必要があります。
Hexo 設定の編集#
Hexo フォルダーを右クリックし、「VS Code で開く」を選択します。この後の操作はすべてこの作業ディレクトリにいることを前提とします。
以前の初期化操作で作成された Hexo フォルダー内には _config.yml ファイルがあります。
これは Hexo の設定ファイルで、設定｜Hexo で各設定オプションの意味を確認できます。
このファイル内で theme フィールドを見つけ、後ろの landscape を yun に変更します。
後ろの
yunは選択したテーマに応じて設定します。例えば、hexo-theme-nextを使用する場合、後ろのフィールドをnextに設定します。一般的に、テーマは使用文書でどのレンダラーを使用しているかを明示します。
例えば、
hexo-theme-yunは pug と stylus レンダラーを使用し、Hexo に付属するものは一般的に ejs と stylus ですので、下記のコマンドを入力して不足しているレンダラーをインストールする必要があります。
npm install hexo-renderer-pug hexo-renderer-stylus
# 問題が発生した場合は、yarn インストールを試してみてください。
上記の手順を完了したら、再度 hexo server を使用してテストサーバーを起動し、新しいページを確認できます。
テーマ設定のカスタマイズ#
初回起動時にはテーマのデフォルト設定が使用されるため、必ずしもあなたの好みに合うとは限りません。
そのため、自分のニーズに応じてテーマをカスタマイズできます。
テーマのデフォルト設定ファイルは source/テーマ/_config.yml にあります。
ただし、このファイルを直接変更すると、将来のテーマの更新が面倒になります。
一般的に、テーマの使用文書にはこのような状況の解決策が示されます。
例えば、hexo-theme-yun はユーザーにブログのルートディレクトリに _config.yun.yml を新しく作成するように指示します。
より多くの設定オプションについては、テーマのドキュメントを参照してください。
サイトの静的ファイルを生成してデプロイする#
静的ファイルの生成#
ここまでの作業はすべてローカルで行われており、あなたはブログをオンラインにしたくてたまらないかもしれません。
ここで GitHub Pages の出番です。
# 静的ファイルを生成
hexo generate
# 短縮形は hexo g
実行が完了すると、Hexo ディレクトリ内に public フォルダーが作成され、その中に先ほど生成した静的ファイルが格納されます。
リモートリポジトリとの関連付け#
次に、次のコマンドを実行して Git リポジトリを初期化します。
git init # 一度だけ実行すれば大丈夫です。
デプロイの前に、Hexo 作業ディレクトリのバックアップブランチを作成することをお勧めします。
git checkout -b hexo
完了後、すべての作業は hexo ブランチで行われます。
hexo-deployer-git プラグインをインストールします。
npm install hexo-deployer-git
Hexo 設定ファイル _config.yml （テーマのではありません）に次のように設定します。
deploy:
type: git
repo: あなたが以前に作成したリポジトリのリンク # 例えば：https://github.com/Big-Cake-jpg/big-cake-jpg.github.io
branch: master # デフォルトで master ブランチを使用
message: Hexo 静的コンテンツの更新 # このデプロイ更新の説明をカスタマイズできます。
保存してデプロイします。
初回デプロイ時には GitHub アカウントのパスワードが必要になる場合があります。パスワードを入力してもアスタリスクは表示されませんが、パスワードは入力されています。
hexo deploy
# 短縮形は hexo d
Git のプッシュが完了するのを待った後、GitHub で リポジトリ => Settings => Pages を順に開きます。
ブランチを選択します（通常は master）、クリックして save します。
数秒待つと、https://あなたの GitHub ユーザー名.github.io を開くとオンラインの効果が確認できます。
Hexo 作業区のバックアップと自動デプロイ#
Hexo 作業区のバックアップ#
上記の方法は、生成された静的ファイルをクラウドにデプロイしただけです。
異なるデバイスで執筆するためや万が一に備えて、Hexo 作業ディレクトリも GitHub リポジトリにバックアップするべきです。
# 一度だけ実行すれば、リモートリポジトリとの接続が確立されます。
git remote add origin https://github.com/あなたのユーザー名/あなたのユーザー名.github.io.git
VS Code では便利な操作があり、右側の「ソース管理」タブに変更したすべてのファイルが表示されます。
上部の入力ボックスに、今回変更した作業区のファイルなどを入力し、前のチェックマークを押すことでローカル Git リポジトリにコミットできます。
その後、最下部の青いバーにある二つの矢印の「変更を同期」ボタンをクリックして Hexo 作業区を GitHub にプッシュします。
自動デプロイ#
時間が経つと、この方法は不便であることに気づくでしょう。他のデバイスでリポジトリを再度プルする必要があり、もしスマートフォンやタブレットを使用している場合は、ただ見ているだけになるでしょう。
そこで、継続的インテグレーションサービスが必要です。
本文では GitHub Actions を使用します。リポジトリのトークンを持っているため、追加の設定は不要で、直接
secrets.GITHUB_TOKENを使用できます。
Hexo 公式ドキュメントを参考にすることもできますし、私の gh-pages.yml をそのままコピーすることもできます。
branchの値を自分が Hexo 作業区を保存しているブランチ名に変更し、algoliaフィールドを削除することを忘れないでください。
もちろん、Netlify や Vercel などのサードパーティサービスを使用することもできます。
完了後、あなたの個人ブログは基本的に構築されました。テーマをカスタマイズしたり、執筆を始めたりできます。
執筆を始める#
記事#
次のコマンドを入力することで xxx.md ファイルを新しく作成できます。
hexo new post xxx
記事にタグ / カテゴリを追加する#
Hexo の Front-matter を理解する必要があるかもしれません。
---
title: 自分の Hexo ブログを構築する方法を手取り足取り教えます
date: 2021-12-04 16:45:10
tags:
- GitHub
- Hexo
- ブログ
categories:
- 大きなケーキのおすすめ
---
あなたの記事の内容
ページ#
Hexo ではカスタムページを使用することができます。例えば、source フォルダー内に新しい HTML を作成して執筆することができます。
または、次のコマンドを実行してページを新しく作成することもできます（Markdown ですが、Markdown 内に直接 HTML を書くこともでき、同様にレンダリングされます）。
hexo new page xxx
FAQ#
動画を投稿する予定はありますか？#
予定はありません。コンピュータが家族に取り上げられ、触らせてもらえません QWQ
また、動画制作は手間がかかり、記事の方が相対的に簡単です。
自分のドメインをバインドしたい（#
まず、ドメインを持っている必要があります。
ドメインを CNAME で あなたの名前.github.io に解析します（もちろん A レコードを直接 GitHub Pages の IP に設定することもできます）。
source フォルダー内に CNAME ファイル（拡張子なし）を新しく作成し、あなたのドメインを記入します。
その後、一度デプロイすれば完了です。
もし後でこのファイルを削除すると、その後のデプロイにはそれを含まないため、リモートリポジトリ内の CNAME が上書きされます。
备案#
国内のサービス（CDN など）を使用するには、备案（ICP 备案）が必要です。
ここでの备案は、国内のウェブサイトのフッターに表示される「京 ICP 备 xxxxxxxxxx 号」などのことを指します。
しかし、国内の备案は、必ず人の国内サーバーを持っていることが求められ、購入時の期間は最低でも 3 か月以上である必要があります。
注意が必要な点：
ドメインが备案できることを確認してください（
moeなどのドメインは备案できません）。コメントセクションを閉じる。
注釈には
交流という言葉を含めない。ホームページには他のウェブサイトへの直リンクを含めない。
法律を遵守すること（当然です）。
あなたはウェブサイトを一時的にオフラインにして、备案が成功した後に再度オンラインにすることもできます（その後、時折再確認が行われますが、相対的に緩やかです）。
サービスプロバイダーの备案手順に従って、一歩一歩進めてください。
ICP 备案番号を取得した後、フッターにはその番号を明確に表示し、https://beian.miit.gov.cn にリンクを貼る必要があります。
最後に#
個人ブログは、ノート、思い出、創作、開発経験、生活など、さまざまな用途に使用できます。
何年後かに再びそれを開いて、自分が書いた内容を見返すと、思い出が次々と蘇り、なんと素晴らしいことでしょう。
皆さんのブログが成功裏にオンラインになり、多くの思い出を抱え、自分の人生を支え、さらに遠くへ進むことを願っています。