anz blog

ブログを引っ越しを画策(すでに移行を始めてるなう)

ざっくりまとめ。

  • ghost.io から引っ越しを企む
  • 静的サイトジェネレータで構築するかと思い立つ
    • Metalsmith採用
  • 見せられるぐらいにはできてきた 🎉

です。

現状(というか元の話?)

元はghostでかいています。
ちなみにその前は tumblr で書いてたのだけれど、
tumblr から引っ越した理由は、記事内に js を埋め込むことができなくなったからでした。
tweet の埋め込みとかができなくなったりで快適に書くにはなかなか致命的😇

なぜ引っ越しを?

tumblr 時代のように明確な理由がわるわけじゃなくて
なんとなくのプチストレスと触ってみたいこととが重なった結果ですかね。

ghost 2.0 のエディタが僕には不評

リッチなエディタになったのだけれど、マークダウンでサクッとかければいいだけの僕にはちょっと...ね。
さらにマークダウンで書き始めるまでに1ステップ増えた
(ので、ghost 側からとしたら機能増やしたらエディタをそのまま使ってっほしいんでしょうね)
ってか、それ(マークダウンでサクッと書きたい)だったら ghost 使い続ける意味はぶっちゃけ無いな(とこの時に思っちゃう)

ghost の更新が迫っている

年間契約($228/year)を結んでいるのだけれど、それが2月できれる。
使い続けることに動機はあまりないかなと思っていたので、今がその時なのか!?と...(笑)

静的サイトジェネレータ気になる

ちょい前から、触っときたいよな〜とか思ってて、
Swift ばっか(たまに Unity)だしすこし違うことも触りたい欲が高まっていた。

とま、こんな感じで脱ghostを決意したわけです。
(サイトジェネレータで構築に行き詰まったら ghost を使い続けるかも(笑))

どこに引っ越そうかな?

はてなブログ?...
いや、ghost 使い始める時にも却下したじゃないか。いまさらそういうわけには
っていうか、静的サイトジェネレータ触りたいって思っていたのだし、これでしょ!

どのジェネレータを使おうか

Jekyll は聞いてるが他にもあるんでしょう?ってことで軽くググると

みたいのがよく出てくる感じでした。

Hugo は golang 製らしいのが特徴っぽいですよね。
もっとも推しポイントはビルドとかもろもろがちょっぱや!というところですか。
(ページが増えて来た時にその差が顕著にでそう)
でも golang かー。install したぐらいで全然さわってないな。
それを良しとするか否か...ここで詰まって挫折したら身も蓋もないから今回は見送ろうっていうことで落選

Hexo は結構よさげでした。
ブログに特化しているっていう紹介もありましたし、必要そうな機能はプラグインで追加できるらしいし...
ただせっかくならもすこしゴリゴリ構築してみたいな(整いすぎてる感?)...という謎動機が働いて落選

Gatsby は React ベースというのが特徴であとは、SPA も対応してるということらしい。
SPA か...特に必要としていないので。ブログには不向きだと思いますし。ということで落選
(いや対応してるってだけで、かならず対応しろというわけではないのだけれど(笑))

Jekyll はメジャー過ぎて(僕でも聞いたことがあったぐらいなので)なんかひかれなかった。

Hugo / Hexo でめちゃなやんでたのだけれど、
もすこしStaticGenでウィンドウショッピングをしていたところ、 ちょっと目についたのが Metalsmith というもの (単に響きがいいな!って。。ジャケ買いよくするマンの本領発揮🤤)

node で動かすもので、Metalsmith 本体ではほぼなにもできなくって、
必要に応じてプラグインを追加することでひとつひとつ機能が追加できるというもの。
(マークダウンでかけるプラグイン。記事をリストで扱えるようにするプラグイン。レイアウトを設定するプラグイン...など、全てはプラグイン)
これが手間だけど程よく自分なりにカスタムできそうな感があって良いかも...
なにより、あまり使ってる事例をが出てこない!(日本語で)
という、ghost を使いだす時にも出てきたアマノジャックの登場により採用してみました(笑)

構築話とかは長くなりそうなので、思い立てば別で書きます(多分)

ホスティングは...?

成果物は静的サイトなので、ファイルさえあげられればどこでもいいのだけれど...。
候補に上がったのはいかの3つ

Github Pages はすでにページ作っちゃってるので、同じとこ使うのはつまらないので却下。
netlify は Github なんかにプッシュしたら自動でデプロイしてくれるし、Metalsmithもサポート(ガイドがある)してたりでだいぶいい感じ。
Firebase はいまさら紹介するまでもなく...netlify とどっちかで netlify のほうが便利なのだけれど、
Firebase のほうがでべろっぱっぽいね?っていうことでこっちを採用しました。

デザインを変える(多分)

ghost と tumblr 時代で同じデザインでやってたので、
いい加減飽きてきたしこれを機に変えようと...

今回はオレンジ基調で。前回が左右にわけてたので、今回は上下で。
CSS ではベンダープレフィックスはほぼつけてないので、古いブラウザとかだったら死んでるかも?
一応最新の Chrome と Safari では確認してるけれど...狐もサポートはしたいと思っているので、メインで使ってる方なにか発見したら教えてください。

display: grid でベースの枠組みしてるので、それ対応してないブラウザだったら...😇
ってかこういう便利なものがいつの間にかできてたのですね。
tumblr 時代とか ghost 時代なんかは bulma とか pure とか使っていたのだけれど、
そもそもグリッドデザインを手軽に構築したいから採用してたので、
grid なるものがてきた今(いや、いつ出来たのかは把握してないけど)、要らないかな!?とか思って今回は CSS フレームワーク的なのは何も採用していない。

後、初めて、Sassをガッツリ触った気がする。
ガッツリと入っても機能を使いこなせてる気はあまりしないけど。
でも、色定義したり mixin とかしたり便利さは個人的には堪能しました

サイトのフッター

これはうるおいらんどを訪れた時に見かけて
「これいいな〜」っておもったのでパクらせてもらった🙏
最初は広大な領域が出来るのだし、せっかくだからアプリとかの宣伝でもしようかと思っていたのだけれど、
特に今は宣伝したいの無いな...ってことで、今の形に落ち着きました。

進捗

こんな感じで、一応の公開できるぐらいには出来上がってきました。
(ので、報告とテストを兼ねてこの記事を書いてます)
あとは何事もなければ本格的に使いだします。

ghost にあげてた記事はアクセスできなくなるだろうから、それも持ってくる予定(結構めんどいので挫折する可能性もある
裏側(サイトマップとかRSSとか)が全然できてないのでそれらも対応する。。
どっちもそれ用のプラグインがあることは確認はしている(が、1回2回ぐらいは詰まると思う😭経験則)

こんな感じでノリで引っ越すことやるので、いい加減ドメイン設定したほうがいいかもしれんな🤔

参考

静的サイトジェネレーターHugoの良いとこ悪いとこ | MF KESSAI TECH BLOG
Hexoでローカルに静的なブログを作ってみて基本構成を把握する | Qookie Tech
React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita
Metalsmith 最初の一歩 | seinolab
この方も ghost から Metalsmith に移行してて勝手に親近感湧いてる(笑)