
ブログをNuxtJS/Milligram/Zeitでリニューアルしました
ブログをリニューアルしました!🎉
何回やっても楽しいので、もはやこれからは「ブログのリニューアルが趣味」と言う事にしました😇
なんでリニューアルしたの?
色々あるのですが、
- Hugoを使っていたけど、普段仕事で使っているNuxtJSに切り替えたかった
- Netlifyよりも速い環境を知ってしまった
- 単純にデザインに飽きた
と、こんな感じです。
技術スタック
Hugo -> NuxtJS
Hugo(というかgo)のサクっと静的サイトを生成できる環境もすごく良かったのですが、ちょっとこういうカスタマイズしたいなぁと思った時に、やっぱ慣れている言語の方がいいなぁと思うようになってしまいました。
Rubyの静的サイトジェネレーターは微妙にカスタマイズが大変なのが多いし、やっぱ最近頻繁に書いているNuxtJS(vue)にしようかなと。新しいことやった時は仕事に使えるし。
というわけでNuxtJSで作ることにしました🕺
mdファイルはあるのでそれらをjson化(processmd)し、vueで呼び出すJAMStackっぽい構成にしました。
Bulma -> Milligram
CSSフレームワークはとにかく軽量を目指したので、Milligramを採用しました。
結局PurgeCSSで使用していないスタイルはゴソっと削除するのですが、ミニマルなデザインにしたかったので、最初から薄いのでいいかなと。
初めてMilligramを使ってみましたが、シンプルなサイトを作るならこれで十分ですね。navbarだけは欲しいところだけど。
Netlify -> Zeit
今回のリニューアル動機の一つにNetlifyよりも速い環境を知ってしまったというのがあります。
Netlifyは神サービスです。
- GitHubのリポジトリをリンクして、サクっとbuildしてくれる
- Formが数文字書くだけで実装できる
- JAMStackにする時に簡単にWebhookでビルドとかできる
- A/Bテストをブランチ毎に作れる
などなど、静的サイトを運営するなら最初に検討する素晴らしすぎるホスティングサービスです。
しかし、最近Google Firebaseを使う機会があったのですが、その時に「Firebaseの画像の配信、めっちゃ速いじゃん!」と知ってしまったのです。
CDN込みでGoogle Firebase(FirebaseはFastly使ってるみたいだけど)と比べると、Firebaseの方が速いです。ハッキリと分かるくらいに。ここまで違うかぁ……。
JAMStackな構成で、画像を含むコンテンツ部分をWordpressとかContentfulとかで取得するなら関係ないかもしれません。
「サクっと作ったりForm使ったりするならNetlifyだけど、自分でパフォーマンスを意識して色々書けるからFirebaseかなぁ」と思っている時にZeitに出会ってしまいました😍
元々名前だけは聞いた事あったのですが、試しにデプロイしてみたところ、めっちゃ速い。~~サラマンダーより、ずっとはやい!!~~。これはいい!!
これはデプロイも簡単だし、かっこいいし、速いし、なんか遊ぼうと思ったらfunction機能もあるし、かっこいいし、あとかっこいいので、これはZeitを使うしかないと。
Formとかコンテンツ部分は別ホストでーというケースなら、今まで通りNetlifyにお世話になります🙇
というわけで、ドメインの向きも変えて、無事リニューアルしました。
軽くシンプルを目指して作ったので、カテゴリーページなどもありませんが、もし自分が欲しくなったら書こうかなw
それでは。