Hexo環境構築からデプロイまで

2024-10-14 Hexo

どうも
今回はHexoの環境構築からHexoプロジェクトのデプロイまで行う記事を書きます。

目次

訂正

本記事の作成したリポジトリ名で”test-blog.github.io”と指定してますが、
test-blog部分をGithubユーザーIDにしないとダメそうです。
(デプロイ後、デザインテーマに問題が発生しました。)
test-blog部分はご自身のGithubユーザーIDに脳内変換してください。

今回の記事の環境

・Windows(こちらは11)
・node.js(v20.17.0)
・GitHubアカウント
・Git(こちらはバージョン2.43.0を使用)
・PowerShell(コマンドプロンプトでもいいですが、今回はPSで)
・vscode

前提条件

・今回はnode.jsをインストール済みとします。
インストール方法がわからなかったら、”nodejs インストール windows”
とググればいろいろ出てきますので、そこからインストールしてください。


・Githubも同様にアカウントは作成してください。
・GitコマンドをPowerShellで使えるようにしてください。

0.ブログ作成場所まで移動

・PowerShellでcdコマンドでHexoプロジェクト作成したい場所まで行きます

1.Hexoインストールからプロジェクト作成

・npmコマンドでHexoをインストールします

1
npm install -g hexo

・Hexoプロジェクトを作成します。今回はmyblogという名前にします。 
1
hexo init myblog
・cdで移動し必要なモジュールをインストールします 
1
2
cd myblog
npm install

プロジェクト作成後はこんなフォルダ構成になっています

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
PS D:\wk_develop\nodejs\myblog> ls


    ディレクトリ: D:\wk_develop\nodejs\myblog


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/10/14      4:43                .github
d-----        2024/10/14      4:44                node_modules
d-----        2024/10/14      4:43                scaffolds
d-----        2024/10/14      4:43                source
d-----        2024/10/14      4:43                themes
-a----        2024/10/14      4:43             89 .gitignore
-a----        2024/10/14      4:48          95723 package-lock.json
-a----        2024/10/14      4:43            641 package.json
-a----        2024/10/14      4:43              0 _config.landscape.yml
-a----        2024/10/14      4:43           2547 _config.yml

・serveコマンドでローカル環境でサーバー起動する

1
hexo s

下記が表示されればサーバー起動します。 
1
2
3
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
ブラウザのURL入力欄にhttp://localhost:4000/ を入力すれば 下記の画像のようにブログが見れます。

alt


ところで
-pオプションを使用するとポート番号を指定することができます。
(例としてポート番号5000でサーバー起動)

1
hexo s -p 5000

また、-iオプションでIPアドレスも指定できるらしいですが
なんかエラーが吐かれたので今回は省略。

2.リポジトリ作成からGitHubPages設定

・GitHubのHome画面で新しくリポジトリを作成します
alt


・リポジトリ名を入力し”Add a README file”をチェック入れてリポジトリ作成ボタンを押下します。
※リポジトリ名は”GitHubユーザーID”.github.ioにしてください
alt


・リポジトリのSettingsタブをクリックして左メニューのPagesをクリックし、
Branch欄を”None”から”main”に変更します。(mainになっていればスキップ)
alt


・ここで５分ー10分程待ってください。
リポジトリ作成後にすぐGitHub Pageが作られないそうです。
(推測ですが何度かリポジトリ作成したりアカウント作り直して判明しました(疲れた))


・しばらくしたら画像のようになっています。
赤枠のボタン押下したら作成されたページに飛べます。
alt
・実際に作成したGithub Page
alt


・リポジトリのCode画面に遷移して赤枠をクリックしてSSHをコピーします。
alt

・設定ファイル(_config.yml)を以下を例に変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Site
title: Hexoブログつくってみたよ #ブログのタイトル
subtitle: 'さぶたいとるー' #ブログのサブタイトル
author: もう一人のボク #作成者
language: ja #言語(日本はja)
timezone: 'Asia/Tokyo' #タイムゾーン(日本なのでAsia/Tokyo)

# URL
url: https://djmegane-blog.github.io/ #ブログのURLです "GitHubの名前".github.ioにしてください

# Writing
post_asset_folder: true #trueにかえて記事作成の時にフォルダも作成するようにしましょう

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: 'git@github.com:djmegane-blog/djmegane-blog.github.io.git' #先ほどコピーしたSSH
  branch: main

ex.一度もコミットしたこと無ければ鍵設定(したことあれば3にスキップ)


・GitHubに１度もpullやcommitしたこと無い場合、SSHキーを作成する必要があります。 一度、鍵を作成するフォルダに移動します。 
1
cd ~/.ssh

以下のコマンドで鍵を作成します。

1
ssh-keygen -t rsa

以下の３メッセージが表示されます。 それぞれ、鍵名(このままEnterを押してください)、パスフレーズ、パスフレーズの再入力を入力してください。 (パスフレーズはパスワードのようなものなので後に入力しますので覚えておいてください) 
1
2
3
4
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/(username)/.ssh/id_rsa):このままEnter
Enter passphrase (empty for no passphrase):パスフレーズ
Enter same passphrase again:パスフレーズの再入力
すると鍵フォルダに２ファイルが作成されます。

alt


・ファイル(id_rsa.pub)をテキストエディタで開き、内容をコピーします。


・GitHubのアカウント設定画面に遷移します。URLから鍵設定画面に飛べます。
https://github.com/settings/ssh/new


・赤枠部分を入力、Nameは適当で良いかと思います。
Key欄に先ほどコピーした鍵内容を貼り付けてください。
入力したら”Add SSH key”ボタンを押下します。

alt

鍵が作成されました。
alt


・cdコマンドでHexoのプロジェクトフォルダに移動してください。


・PowerShellで以下の２コマンドでGitのアカウントを指定してください。

1
2
git config --global user.name "GitHubユーザーID"
git config --global user.email "GitHub登録時のメールアドレス"

3.デプロイ

いよいよGitHubPageにデプロイです。
・デプロイするためのモジュールをインストールします。
(PowerShellに入力)

1
npm install hexo-deployer-git --save

キャッシュファイルを削除してからデプロイします。 以下の２コマンドをPowerShellに入力し、先ほどの鍵のパスフレーズを入力してEnter 
1
2
hexo clean
hexo deploy --generate

"INFO Deploy done: git"と表示されればデプロイされました。 数分経ってみてから先ほどのコンフィグファイルのURL欄で設定したURLを ブラウザで表示してみましょう。

alt

お疲れ様でした。

今回の記事のオススメ曲

beatmania 4thMIXからこの曲を知りました。
まさかFULL曲あるとは思いませんでした。
やっぱりHOUSEはいいですね。


では、また次回。

#Hexo #ブログ #node.js #GitHub