タイトルの通り、はてなブログからHexo仕立てのブログに引っ越しました。

前々からはてなブログ重いなーと思っていたのと、今までweb周りちゃんと触ってきたことなかったので、ちょっと勉強がてらhexoに移管してみました。

なぜHexoにしたか

なぜHexoにしたかと言うと一番自分の目的である「ブログを自分で作る」に一番合っていそうだったから。

他にもGatsby, Jekyll, HUGO, VuePressあたりが候補にあったのですが、いずれも学習コスト高そう or ブログ作るのには向いていなさそうというのが却下の背景です。

「ブログを自分で作る」にも、色々度合いがありそうですが、まあなんとなく調べた感じ、参考にできそうな記事も多そうだったのもオマケ的にHexoを選択した理由になっています。

立ち上げまでの道のり

ここで立ち上げまでの道のりをおさらい。

事前学習

実はHTMLとかCSSとかほっとんど触ったことなかったので、念の為Progate使ってHTML/CSS周りの入門をしました。入門と言いつつ、面白くなってHTML & CSS, Sass, JQuery, JavaScriptのコースを完走したので、結構ここで時間がかかりました。

• https://prog-8.com/languages/html
• https://prog-8.com/languages/es6
• https://prog-8.com/languages/jquery
• https://prog-8.com/languages/sass

ボリュームがありそうに見えますが、結構スイスイと進めるので、初めてみるとあっという間に終われますよ。上記のコースを完了した上で、Hexoを使って既存のテーマをベースに自分好みのブログが立ち上げられました！

Hexoでのブログの立ち上げ

Hexo自体の設定は色々な方がブログなどで説明している通りですが、以下のような流れになります。

1. Node.js及びnpmの設定 with nodebrew

$ nodebrew setup                                   
$ nodebrew install-binary latest
$ nodebrew list
v13.12.0
$ nodebrew use v13.12.0

1. hexoのinstall

$ npm install -g hexo

1. hexoによるblogの立ち上げ

$ hexo init

私は以下の記事を参考にしながら立ち上げました。

はてなブログの記事の移行

はてなブログからの移行に関しては以下のcliツールを利用させてもらいました。使い方はREADME.mdに記載されている通りなので割愛します。

ただし、上記ツールでエクスポートしただけだと、若干hexoのフォーマットが異なるので、自前でpython scriptを書いて、フォーマットを修正する必要がありました。スクリプトについては余裕があったら後日githubに載っけたいと思います。

ドメイン取得

最初はgithub pagesでも使って運用しようかと思いましたが、せっかくなので自前でドメインを用意しました。使ったのはGoogle Domains。Googleブランドの安心感と、このあと説明するNetlifyでのホスティングと合わせて、その他ブログで運用実績が確認できたので、Google Domainsにしました。

こちらは説明するまでもなく、Google Domainsに行って好きなドメイン名を入れて、末尾を選択するだけ。お値段も年間1000円くらいから購入できるので、良心的ですね。

Netlifyでの運用

ホスティングは巷で話題の(?)Netflifyを使ってみました。Githubと組み合わせることでCI/CDなパイプラインも簡単に作れてしまうので、とっても便利です。

やるべきことはNetlifyのアカウントを作って、Githubと連携して、上記で立ち上げたhexoブログのGithubのrepositoryを指定するだけ。細かい手順などは以下の記事なんかが参考になりました。

あとはNetlifyがrepositoryのソースコード変更に応じて、ブログを更新してくれます。簡単ですね。

まとめ

実際に立ち上げたhexoのブログがこのブログ自身になるわけですが、特にトラブルこともなく、すんなりと自前のブログを立ち上げることができました。フレームワークって偉大だなあ。本当に。

せっかく自分好みのブログを立ち上げられたので、これからもガンガン記事を載せていきたいと思います。