このブログはテンプレートエンジン、HEXOを使って構築されています。

今回、ブログを作るにあたって、何となく WordPress 使いたくないなぁという気持ちがありました。
それは、

• 管理画面あちこち触るのが面倒
• 環境構築が面倒
• 機能多すぎ
• アセット管理しにくい
• ロード時間
• そもそも Wordpress 得意じゃない

みたいな理由です。

https://www.staticgen.com/ で見たところ、上位の HEXO がjsでかつejs, pug でテンプレート開発できるので触りやすそうということで決めました。

静的サイトジェネレータ

改めて、「静的サイトジェネレータ」って何？ という話をするなら、ブログシステムで通信して動的に取得するところをあらかじめ全部静的に生成しちゃって静的サイトとしてつくっちゃおうぜ！というものです。

なのでロード時間の短縮が期待できるのと、管理画面なし、簡素な作りになります。
記事は基本的にマークダウンで書きます。好きなエディターでサクサク書けるのも魅力です。画像はディレクトリを指定した普通のHTMLサイトと変わりない管理方法です。Git でソースを管理できるのも、大きな魅力！

事始め

npm で hexo のCLIツールをインストールします。node.js を入れていない場合は入れておいてください。

公式参照。
https://hexo.io/

npm install hexo-cli -g

初期化。

hexo init blog

作成したディレクトリに移動して、

cd blog

インストール。

npm install

起動！

hexo server

デフォルトでは http://localhost:4000/ でローカルサーバーが動いています。アクセスして、ブログが表示されているのを確認してみましょう。

設定

みんな大好き設定です。

設定は _config.yml にまとめます。title, description, author など適当に埋めていきます。

初期設定で重要そうなところは以下。

• 15行目付近、url: と root: は公開する予定のものを記入。
  • もし、自前サーバーのサブディレクトリに設置する場合、パスのルートが異なっているので動かなくなります。
• 37行目付近、post_asset_folder: をチェック。
  • デフォルトでは画像が一つのディレクトリにまとめられます。
  • 1記事ごとにディレクトリを立てたい場合は、post_asset_folder: true に。

一旦このくらいで。

投稿

ターミナルで以下を実行。

hexo new how-to-make-post

/source/_posts 内に how-to-make-post.mdと、 /how-to-make-post というディレクリができているかと思います。

これで生成されたマークダウンファイルを編集していきましょう。もちろん、既存のマークダウンファイルをコピーして編集でも問題ないです。

画像の挿入

画像の挿入は独自の記法が用意されています。

post_asset_folder: false の場合

ディレクトリイメージ

source/
├── _posts
│   └── hello-world.md
└── images
    └── image.png

![alt](/images/image.png) のように記入します。

これで<img src="/images/image.png" alt="alt"> のタグが生成されます。

post_asset_folder: true の場合

ディレクトリイメージ

source/
└── _posts
    ├── hello-world
    │   └── image.png
    └── hello-world.md

{% asset_img image.png alt %}

のように記入します。↑と同じタグが生成されます。

公開

github pages に公開する方法は色々と情報があると思うので、今回は自前サーバーに公開する段取りを。
サブディレクトリに公開する場合は上述の _config.yml での設定を忘れずに行ってください。

公開前に

今まで hexo serever ではビルドされたデータを見ていました。なので、手元にはまだない状態です。

hexo generate

で静的サイトを生成します。/public 以下がサイトになります。これをアップロードします。

deploy

hexo deploy

というコマンドが用意されていて、_config.yml の中でホスト名などなど入力します。詳細は
https://hexo.io/docs/deployment.html#Rsync 参照。

hexo deploy -g

というオプションをつけると、hexo generate をしてからデプロイしてくれます。

パスワードは hexo deploy を実行した際に聞かれるので、_config.ymlに書かなくていいんですが、個人的にはホスト名やユーザー名を Git に置いとくのもあまり好きではないので、npm script をつかって実行させたいと思います。

package.json にscriptsを追加します。
以下のようなイメージです。

  "hexo": {
    "version": "3.3.7"
  },
  "scripts": {
    "generate": "hexo generate",
    "rsync": "rsync -auvz ./public/ username@hostname:/var/www/html/*",
    "deploy": "npm-run-all -s generate rsync"
  },

generate に hexo generate を登録しておき、 rsync にrsyncコマンドを登録して、直列で処理します。

npm install npm-run-all --save-dev

で直列処理するためのnpm-run-allをインストールしておきます。

rsync コマンドをこのまま書いてしまうと結局ユーザー名とホスト名を載せる事になるので、ここをssh configで何とかします。ただ、このあたりの事を書き始めると hexo からかなり離れてしまうので別記事で。

最後に

一旦 hexo でのブログ構築の基本の基本だけおさらいしてみました。次回はカスタマイズを中心に、

• テーマ変更、作成
• 複数の投稿者の設定
• browsersync 導入

などを扱いたいと思います！