HexoとGitHubとCloudflareでブログ運用「初期設定編」
ブログをHexoとGitHubとCloudflareで運用することにしたので、その初期設定方法を紹介します。
VisualStudioCodeのインストールと設定
概要
静的サイトジェネレーター（SSG）でサイトを構築するには、プログラムコードを入力・作成する必要があります。
SSGの一つであるHexoも、CSSで見た目を設定したり、MarkdownやHTMLで投稿記事を書くので、ある程度プログラムコードを書きやすい環境が必要です。
プログラムコードは、Windowsの標準機能である「メモ帳」でも入力・作成可能ですが、メモ帳は白い画面に黒文字を入力するだけの機能しかなく、コードミスを検出したり、コードを自動で色分けするといった機能はありません。
こうした機能を持つ、「VisualStudioCode（VSCode）」を利用する方が楽です。
VSCodeは、Microsoft社が提供する無償のコードディタです。
インストール
公式サイトからダウンロードします。
インストール作業は、特に難しくはないはずですので、説明は省略します。
日本語化
Windowsの「スタート」ー「Visual Studio Code」をクリックすれば、起動します。
左側のサイドバーにある「Extensions」のアイコンをクリックします。
表示された検索窓に「Japanese」と入力し、候補表示のうち、「Japanese Language Pack for Visual Studio Code」をクリックします。
「install」をクリックします。
インストール後、右下の「Restart」ボタンをクリックします。
以上で、VSCodeが日本語化されます。
Hexoのインストールとサイト構築
概要
Hexoは、静的サイトジェネレーターの１つです。
静的サイトジェネレーターとは、Webサイトを作成するソフトウェアと言えるでしょう。
静的サイトジェネレーターの対局にあるのが、WordPressというソフトウェアで動的なサイトを作成します。
静的サイトジェネレーターとWordPressの違いは、色々ありますが、簡単に言うと、静的サイトジェネレーターは高速に表示できるサイトを作成しますが、複雑な処理をするサイトには向いていません。WordPressは、比較的に表示速度が遅いが、色々な処理をサイト内に盛り込むことができます。
Hexoは、台湾人が開発したプログラムで、中国語でのフォーラムへの書き込みや解説サイトが多いことからも台湾人・中国人に人気のあることが分かります。
Hexo以外の静的サイトジェネレーターとしては、Hugo、Jekyllなどが日本でよく使われているようです。
インストール
Hexoのインストールと設定は、公式ドキュメントのとおりです。
Gitのインストール
公式サイトからダウンロード・インストールします。
インストールされたら、「スタート」の「Git」からGitBashをクリックします
ユーザー名とメールアドレスを登録します。やり方はググりましょう。
Node.jsのインストール
公式サイトからダウンロード・インストールします。
インストールの際に、デフォルトで「Add to Path」にチェックが入っているはずです。外さずにそのままにしてインストールしてください。
Hexoのインストール
上記の２つをインストールしたら、いよいよHexo本体のインストールです。
VSCodeを起動します。
「CTRL+@」を押すと、ターミナルが表示されます。
ターミナルに下記のコードを入力（または、コピペ）します。
1 | npm install -g hexo-cli |
エンターキーを押して、しばらく待つとインストールが完了します。
確認
Hexoの公式サイトでは、Node.jpの最新バージョンを推奨しています。（2023年7月現在では、Hexo6.2に対して、Node.jsの要件は12.13.0以上、推奨は18.5.0）
HexoおよびNode.jsのバージョン確認は、コマンドラインに「hexo version」と入力すれば確認できます。
サイトの構築
公式サイトに従ってサイトを構築していきます。
データを保存するフォルダを作成と、初期設定サイトの構築
「スタート」ー「Windows Powershell」ー「Windows Powershell」を開きます。
目的のフォルダ（新規フォルダを作成する既存フォルダ）に移動します。
| 📌Powershellでの移動方法など |
|---|
|
目的のフォルダに移動したら、フォルダ「myfolder」を作成し、サイトを構築するため、下記のコードを入力します。
1 | hexo init myfolder |
これで「myfolder」というフォルダが作成されたうえ、Hexoの初期設定によるサイトが構築され、そのデータが格納されました。
サイトが構築されているかを確認
VSCodeを起動します。
「CTRL+K」「CTRL+O」とキーを押すと、「フォルダを開く」のダイアログが表示されるので、上記で作成した「myfolder」に移動し「フォルダーを選択」をクリックします。
「CTRL+@」をキー入力し、「ターミナル」を表示し、次のコードを入力します。
1 | hexo server |
ターミナルに表示される最後の行にあるリンク「http://localhost:4000/」を「CTRL」を押しながらクリックします。
ブラウザが起動し、ローカルサーバーで構築されたWebサイトが表示されます。ローカルサーバーなので、インターネット上に閲覧できません。
ターミナルに戻って、「CTRL+C」とキー入力すると、ローカルサーバーが終了します。ブラウザも閉じましょう。
GItHubに紐づけ
PCにあるフォルダ（ローカルリポジトリ）をGitHub（リモートリポジトリ）に紐づけ
まず、GitHubにリポジトリ（リモートリポジトリ）を作ります。
ブラウザでGitHubにログインします。
右上の「＋」をクリックし、「New repository」をクリックします。
「Repository name」に「myblog」と入力します。
２段下にある「public」を「private」に切り替えます。
一番下の「Create repository」をクリックします。
これで完了ですが、ブラウザはこのままにしておきます。
PCの「myfolder」をGitHubの「myblog」に紐づけ
VSCodeのターミナルに次のコードを入力し実行します。
1 | git init |
GitHub画面上の少し下にある「…or push an existing repository from the command line」に書いてある３つのコードのうち２つを１つずつ、VSCodeのターミナルにコピペして実行します。
1 | git remote add origin https://github.com/XXXXXXXX/YYYYYYY.git |
VSCodeの左側メニュー３つ目の「ソース管理」をクリックし、「メッセージ」に任意の文字を入れて、「コミット」をクリックします。
「Branchの発行」をクリックします。
ブラウザに戻って、更新してみると、データがアップロードされているはずです。
ホスティングサービス「Cloudflare」に接続（デプロイ）
Cloudflare公式サイトにHexoをデプロイする方法が記載されていますので、それにしたがって接続します。
デプロイ方法
まず、Cloudflareにログインします。
左側メニューのうち「Worker&Pages」をクリックします。
ページ右側に表示される「Create application」をクリックします。
タブを「Pages」に切り替えます。
下の方に表示される「Connect to Git」をクリックします。
GitHubリポジトリのうち、「myblog」をクリックします。
右下の「Begin setup」をクリックします。
「Project name」と「Production branch」は、そのままにしておく。
「Framework preset」は、「None」のままにしておく。
「Build command」に「hexo generate」と入力します。
「Build output directory」に「public」と入力します。
「Path」は、空欄のままにしておく。
「Environmental variables」の「variable name」には「NODE_VERSION」と入力します。
「Value」には、「18.14」と入力します。
右下の「Save & Deploy」をクリックします。
60秒ほど待つとデプロイが完了し、右下の「Continue to project」がアクティブになるので、クリックします。
以上で完了です。
| 📌失敗（エラー）になった場合 |
|---|
|
確認
ブラウザを起動します。
アドレスに下記を追記します。
1 | myblog.pages.dev |
サイトが表示されれば成功です。
ドメインサービス「XseverDmain」の独自ドメインを適用
独自ドメインを取得
まず、XserverDomainにログインします。
右上のログインをクリックします。
E-mailアドレスとパスワードを入力します。
右上のドメイン取得をクリックします。
取得したいドメインを入力し、検索します。
ドメインが取得可能であれば、手続きを進めます。
今回は、「myblog999.com」というドメインを取得したとしましょう。
なお、ネームサーバーは、後から変更できるので、エックスサーバー（標準）のままで良いです。
Cloudflareで設定
Cloudflareにログインします。
左側メニューの「Workers&Pages」をクリックします。
自分のサイト「myblog」をクリックします。
タブ「Custom domains」をクリックします。
「Setup a custom domain」をクリックします。
「myblog999.com」と入力し、「続行」をクリックします。
「DNS移行を開始」をクリックします。
「myblog999.com」と入力し、「続行」をクリックします。
Freeプランを選択します。
DNSレコードの追加になったら
- タイプ：CNAME
- 名前：myblog999.com
- ターゲット：myblog999.pages.dev
として、この他は初期状態のままにしておきます。
保存をクリックします。
数分待ちます。
Cloudflare Nameserversという箇所にType欄に「NS」と記載がある横のValue欄の値（２行あるはず）を表示し、コピーします。
XserverDomainで設定
XserverDomainにログインします。
ネームサーバー設定を開き「その他のサービスで利用する」を選択し、コピーした値を貼り付けます。（２行ある場合は、それぞれコピペします。）
Cloudflareで再度設定
Cloudflareにログインします。
カスタムドメイン画面で、設定をアクティブにします。
数分待つと完了します。
