HexoとReactとSassとGitHub Pagesで勝ち組になる
2018/01/24静的サイトジェネレーターというものを使ってブログを作り直し、無事勝ち組になりました。ありがとうございました。
かれこれ5日間ブログを書き続けている。
— 七十 (@sititou70) 2018年1月7日
まだ負け組だった頃の僕
以前のブログは オレオレCMS を使っていた。全部クライアントサイドで動くWebアプリケーションだ。
そのアプリケーションには、ブログのエントリを管理する方法が無かった。手動でエントリのリンク集を作成する必要があった。
辛いのでHexo（ヘキソと読んでいる）という静的サイトジェネレーターに移行してみた。
引っ越し手順
- 以前のエントリをHexoに引っ越す
- 以前のテーマをHexoで作り直す
- デプロイ
以前のエントリをHexoに引っ越す
基本的にはNode.jsのスクリプトを書いただけ。以前のエントリの情報を元にHexo用のファイルを生成する。
オレオレCMS上にあったアプリたちは、Githubにリポジトリを新たに作って、ブログと分離した。
ここまで2日くらい。
以前のテーマをHexoで作り直す
Hexo自体触るのが初めてなので、まずはチュートリアルを無難にこなす。公式ではないが良いチュートリアルがあった。
Create an Hexo Theme - Part 1: Index Create an Hexo Theme - Part 2: Other Pages Create an Hexo Theme - Part 3: Comments, Analytics and Widgets
あとは雰囲気でフルスクラッチ。
React + Sass
Hexoのテーマといえば、EJSとStylusで作るのが王道だ。だが今回はReactとSassを用いた。
EJSとはJavaScript製のHTMLテンプレートエンジンだ。PHPはHTMLにコードを紛れ込ませて、動的にページを生成する。同じようにEJSは、HTMLの中にJSを紛れ込ませる。個人的にテンプレートエンジンよりはJSXでページを生成したほうがマシなので、Reactを採用した。
StylusとはSassとかの仲間である（雑）。Stylus、良いと思う。けどSassが使えるなら、わざわざStylusを学ぶ理由が見つからなかったので、またの機会に。
Reactでブログの構造を記述する。Hexoからエントリに関する情報等を受け取り、ページを生成する。Sassでページのスタイルを定義する。
hexo-renderer-react hexo-renderer-sass
小ネタ集
ページャ
Hexoのpaginatorヘルパーを使う。HTMLを生成するので、スタイルを当てていけば良い。便利。
OGP
同じくHexoのopen_graphヘルパーが使える。記事の内容に合わせていい感じのOGPヘッダを生成してくれる。便利。
シンタックスハイライト
よくわからない。ソースコードはHexoによって謎のHTML構造に変換される。別にhighlight.jsとか導入してもいいがめんどくさい。デフォルトのテーマに則ってhighlight.stylをSassに直して組み込んだ。
Webフォント
font-awesomeとかtypeface-mplus-1pとか自前で使いたい。素直にnpm scriptsで./sourceディレクトリにつっこむ。パスの問題もsedコマンドとかで強引に解決した。
コメント機能
disqusというサービスを用いることで、静的ページにコメント機能をつけることができる。適当に設置する。
独自の404ページ
GitHub Pagesでは、/404.htmlが404時に参照される。Hexoでこのようなファイルを生成するには、HTMLファイルの先頭に次のように記述する。
---
permalink: /404.html
layout: false
---permalink: /404.htmlにより、ファイルの生成されるパスを指定できる。
layout: falseにより、Hexoによるgeneraterの生成処理を無効にできる。
またhexo new page 404とすると、404という名前の固定ページが生成されるので、ここに404ページ関連のソースを突っ込むと良さそう。
以上。ここまで6日くらい。
デプロイ
最終的なリポジトリの構成は次のようになった。
GitHub Pagesへのデプロイはhexo-deployer-gitにより標準でサポートされる。_config.ymlでデプロイ先のリポジトリの設定を済ませれば、hexo deploy -gでデプロイされる。
たまにうまくいかないときは、hexo cleanするとよかった。
URL問題
URLの互換性問題がある。以前のブログエントリへのURLは、https://sititou70.github.io/?e=memo20170901のようになっていた。
どれもトップページを指しているだけで、特にリンクが切れているわけではないので、このまま放置することにする。
残念ながら、 今までのリンクが全て切れて、404ページへのアクセスが急増する ということにはならない。
引っ越ししてみて
つかれた。まんぞく。
