GitHub Pagesを使った自前無料ブログの作り方(Hexo)

本文の前に

この記事はまどれーぬさんの公開された記事ゼロからわかる！GitHub Pagesを使った自前無料ブログの作り方（Jekyll）からインスパイアを受けています。ぜひ読んでみてください。とてもわかり易くまとまっています。

※今回の記事はLinux(Ubuntu)で操作を行っています。それ以外のOSをお使いの方は少しやり方が異なる場合があります。ご了承ください。

この記事でわかること

• HexoというNode.js.製の静的サイトジェネレーターを使ったサイトの制作方法

• Github Pagesでの公開方法

余談と事前準備

余談ですがなぜJekyllではなくHexoを使うのかについてです。理由は唯一つ

私がRubyを使ったことがなくJSのほうが使いやすかったから

これだけです(笑)

はい、では事前に準備するものです

• PC(今回はLinuxを使用しています)
• GitHubアカウント
• テキストエディタ(今回はVSCodeを使用しています。)

環境構築

ではまずNode.jsとHexoの環境構築をしていきましょう。

まずはNode.jsです。こちらの記事を参考にしてみてください。

そして次はYarnというパッケージ管理システムをインストールしていきます。
コンソールに

curl -o- -L https://yarnpkg.com/install.sh | bash

と入力してください。

最後の方に export PATH~という文字列があるのでそれをコピーして実行してください。そうするとPATHが通り、yarnを使用することができるようになります。

次に今回の目的であるHexoをインストールしていきます。

コンソールに

yarn global add hexo-cli

と打ち込んでください。

ディレクトリを作成します。

hexo init {ファイル名}

作成されたディレクトリに移動して、モジュールをインストールします

cd {ファイル名}
yarn install

サーバーを起動します。

hexo server

http://localhost:4000/ にアクセスするとページが表示されます。

ここまでできれば環境構築は完了です。

初期設定

ブログの詳細な設定は_config.ymlで行います。

ここではブログタイトルや言語、URLの設定などを行います。テーマ設定やGitへのデプロイ設定などもここで行います。

テーマ選びと設定

では、今度は好きなテーマを設定してみましょう。今回はicarusというテーマを設定していきます。テーマに関してはこちらにまとまっています。

ほとんどのテーマには独自の設定項目が存在するためHexoと別に管理する必要があります。そのためにgitのsubmoduleという機能を使用します。

まずは既存のテーマをForkしていきましょう。

icarusテーマのGithubページです。こちらの右上にForkというボタンがあるのでクリックしてください。そうするとリポジトリをForkすることができます。Forkが完了するとページが切り替わると思います。自身のForkができたら再びLinuxのコンソールに戻り、作成したディレクトリに移動します。そして

git submodule add {フォークしたリポジトリのURL} themes/{テーマ名}

を入力します。そうするとtheme/{テーマ名}にフォークしたリポジトリが追加されます。

Hexoのテーマ設定を行う

作成したディレクトリの_config.ymlに設定を行っていきます。私の場合テーマ名をtheme-icarusにしたので

theme:theme-icarus

と設定をしました。

テーマの詳細設定

では今度はテーマの詳細設定を行っていきます。theme/{テーマ名}の_config.ymlに設定を書いていきます。
少し長いのでGithubのURLを貼っておきます_config.yml

記事を書く

さぁではお待ちかね記事を書いていきましょう！と、その前に少し設定をしなければなりません。
Hexoのルートディレクトリの_config.ymlのpost_asset_folderという設定をtrueにします。
これをしないと記事内に画像を埋め込むのが面倒になります。
次に記事を管理するフォルダを作っていきます。

hexo new {記事の名前}

これで記事の画像などの管理フォルダと記事のmarkdownファイルが作成されます。

markdownファイルはこんな感じです。

では細かいところを説明していきます。
一番上の部分

---
title: タイマーアプリを作ってみた
date: 2020-03-26
tags:
---

この部分は記事のタイトル、更新日時、タグなどの概要を設定する部分です。
この部分はレイアウトとしてhexo newを打ったときに同時に生成されます。
そして重要なポイント<!--more-->というタグについて説明します。
このタグはHexo独自のタグであり、これを設定しないと記事一覧ページで全文が表示されてしまいます。
moreタグあり

moreタグなし

このようになってしまうのでmoreタグはとりあえず付けておきましょう。（中にはmoreタグに対応していないテーマもあるのでmoreタグに対応しているかもテーマを選ぶ基準にするといいと思います。）

GitHub Pagesを使って全世界に公開

Gitへのデプロイ設定

こちらの記事にとても良くまとまっているのでご覧ください。

終わりに

お疲れさまでした！これでブログを作って公開する環境を整えることができましたね！
これからは記事を書いたら

hexo deploy

で公開することができます。