ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

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

Blog

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

ちなみに、本記事の内容を調べて試してみたのは、はてなブログからの移行先を探しているからです。Markdown記法の対応具合が微妙なのがつらい、ひじょーにつらい。

本記事の内容です。

前提条件

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

インストール

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

npm install -g hexo-cli

ブログを作成

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

hexo init [Webサイト名]

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

npm install

記事を作成

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

hexo new [記事名]

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

テーマを適用

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

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

テーマのダウンロード後、_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://koki-nakamura22.github.io/test-hexo-blog/

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

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

_config.ymlを編集

_config.ymlに存在する下記5項目を編集します。 - url - root - type - repo - branch


urlおよびrootは、下記のように
urlはhttps://[GitHubのユーザ名].github.io/[リポジトリ名]/を、
rootは/[リポジトリ名]/
を指定してください。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://koki-nakamura22.github.io/test-hexo-blog/
root: /test-hexo-blog/


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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/koki-nakamura22/test-hexo-blog.git
  branch: master

GitHub Pagesの設定

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

デプロイ

これで最後です。
作成したWebサイトディレクトリのルートで下記コマンドを実行し、Hexoで作成したWebページをデプロイします。

hexo deploy -g

オプションに「-g」を付けているのは、デプロイ時に静的ファイルの生成も一緒に行いたいためです。

ここまで作業が終わったら、実際に作成したurlへアクセスし、Hexoで作成したものが表示されるかを確認してみましょう。


テーマ

一覧

hexo.io

個人的おすすめテーマ

参考にしたページ