Hexo + GitHub Pagesでブログを作成する方法

Hexo

初回発表日: 2022-05-26

文章文字数: 708

本記事では、Hexo + GitHub Pagesの組み合わせでブログ環境を構築する方法について説明します。
上から順番に読んでいただくと、ブログを作成できるような流れになっています。

本記事の内容です。

前提条件
インストール
ブログを作成
記事を作成
テーマを適用
ローカルでサーバ起動
GitHub Pagesへデプロイ
ゴール
GitHub上でブログ用のリポジトリを作成
_config.ymlを編集
GitHub Pagesの設定
デプロイ
参考にしたページ

前提条件

GitHubアカウント作成済み
Node.jsインストール済み
Gitインストール済み

インストール

下記コマンドを実行します。コマンドを実行するディレクトリはどこでも良いです。

npm install -g hexo-cli

ブログを作成

ブログを作成したいディレクトリで下記コマンドを実行します。
[Webサイト名]には、好きな名前を入力してください。

hexo init [Webサイト名]

その後、作成したWebサイトのディレクトリへ移動し、下記コマンドを実行します。

npm install

記事を作成

記事を作成するには、作成したWebサイトディレクトリのルートで下記コマンドを実行します。 [記事名]は、好きな記事名を入力してください。
また、この時に拡張子は指定しないように注意です。

hexo new [記事名]

すると、source/_posts下に記事のMarkdownファイルが作成されますので、後は自由に編集します。

テーマを適用

本記事内では、hexo-theme-materyを適用します。
最初に作成したWebサイトディレクトリのルートで下記のコマンドを実行し、GitHubからthemesディレクトリへテーマをダウンロードします。

git clone https://github.com/ppoffice/hexo-theme-icarus themes/hexo-theme-matery

テーマのダウンロード後、_config.ymlの

theme: landscape

の右側をダウンロードしたテーマ名に変更します。
今回はhexo-theme-icarusを適用するので、下記の通り変更します。

theme: hexo-theme-icarus

テーマの一覧を確認できるページや個人的におススメしたいテーマについては、本記事最後に記述します。

config.ymlの設定が終わったら上書き保存し、後述する方法でサーバを起動します。
初回時はテーマのディレクトリ内でconfig.ymlが作成されるだけでサーバが起動しない事があるので、その場合は再度サーバを起動してください。

ローカルでサーバ起動

作成したWebサイトディレクトリのルートで下記コマンドを実行します。

hexo server

また、下記のように「-p [ポート番号]」とオプションを付けると、そのポート番号で起動することが可能です。

hexo server -p 12345

ローカルで公開されているページへアクセスするには、上記コマンド実行時に表示される下記urlへアクセスしましょう。

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

GitHub Pagesへデプロイ

ゴール

今回は、GitHub Pagesのサブディレクトリで公開する。
例:下記URLにてブログを公開。
https://github.com/Aihuu08/Aihuu08.github.io

GitHub上でブログ用のリポジトリを作成

静的ファイルを公開するためのリポジトリを作成します。
今回は「test-hexo-blog」という名前のリポジトリを作成します。

config.ymlを編集

config.ymlに存在する下記項目を編集します。
type、repoおよびbranchは、下記のように
typeはgitを、
repoは「GitHub上でブログ用のリポジトリを作成」で作成したリポジトリを、
branchは使用するbranch (大体の場合はmasterで良いと思います。) を、それぞれ指定してください。

deploy:
  type: 'git'
  repo: https://github.com/Aihuu08/Aihuu08.github.io.git
  branch: master

GitHub Pagesの設定

「GitHub上でブログ用のリポジトリを作成」で作成したリポジトリのページを開き、下記の設定を行います。
Settings -> GitHub PagesのSourceでmaster branchを選択 (大体の場合はmaster branchだと思います。)
実際の画面を確認しながら作業を行いたい方は、下記ページを参考にするとわかりやすいです。
https://tech.qookie.jp/posts/hexo-deploy-github-pages-fast/