自分のブログを持ちたいが資金がない初心者と小学生の自分に向けて書かれた
前書き#
独立したブログの時代は過ぎ去り、多くの人々が大きなプラットフォームで自分の記事を発表し始めています。
これらのプラットフォームのトラフィックは、ブロガーたちに収益をもたらすことができます。
しかし、自分のブログを持つことは、それが自分だけのものであり、自分自身で一歩一歩構築していく必要があることを意味します。
たとえば、記事の言語、インターフェースのレイアウト、機能の数、検索エンジンのインデックスなど、すべてを少しずつ改善する必要があります。
最後に、自分のウェブサイトが一歩一歩ここまで来たのを見て、心の中に誇りと安堵の感情が湧いてきます。
この記事を読んでいるすべての人が、学生であれ他の人であれ、自分だけのブログを持ち、その内容を心を込めて構築できることを願っています。
ここでの引用は一般的に注意事項であり、読む前にいくつかの点に注意してください。
言及されるもの#
- 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 は Visual Studio を指し、統合開発環境（IDE）です（
初心者向け：ソフトウェア開発用）。これのサイズは VS Code よりも大きいです。
（マイクロソフトの製品は素晴らしい）
まず VS Code をインストールします。これにより、Git をインストールする際に VS Code をデフォルトのエディタとして設定できます。
Windows 10 / 11 ユーザーは Microsoft Store（新しいバージョン）からダウンロードできます。
Git は Linus Torvalds（Linux の作者でもある）によって開発されたオープンソースの分散バージョン管理システムです。
簡単に言えば、バージョン管理ツールです。たとえば、デザイナーが第三版のポスターをデザインしたが、クライアントが第一版が良いと言った場合、Git を使用して迅速に最初のバージョンに戻ることができます。
変更の状態を Git に伝えるだけで、各バージョンを圧縮ファイルとして保存する必要はありません。これにより、便利で大幅にスペースを節約できます。
Git をダウンロードしてインストールします。速度が遅い場合は、国内のソフトウェア配布サイトを試してみてください（大手企業のものを探してください。高速ダウンロードのようなものは選ばないでください）。
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 备案を指し（国内のウェブサイトのフッターに表示される「京 ICP 备 xxxxxxxxxx 号」など）、国内のサーバーを持っている必要があります。購入期間は最低でも 3 か月以上です。
注意が必要な点：
ドメインが备案できることを確認する（
moeなどのドメインは备案できません）コメントセクションを閉じる
备注说明 に
交流の文字を含めないホームページに他のウェブサイトへの直リンクを含めない
法律を遵守する（もちろん）
ウェブサイトを一時的にオフラインにし、备案が成功した後に再度オンラインにすることもできます（その後も時折チェックが行われるため、相対的に緩和されます）。
サービスプロバイダーの备案手順に従って進めてください。
ICP 备案番号を取得した後、フッターにその番号を明確に表示し、https://beian.miit.gov.cn にリンクを貼る必要があります。
最後に#
個人ブログは多くの用途に使用できます。たとえば、ノート、思い出、創作、開発経験、生活などです。
何年後かに再びそれを開いて、自分が書いた内容を見返すと、思い出が次々と蘇り、なんと素晴らしいことでしょう。
皆さんのブログが成功裏にオンラインになり、自分の多くの思い出を抱え、自分の人生を歩んでいけることを願っています。