Jamstackなブログ

2021/01/09

ブログといえばサーバーサイドCMSのWordPressというイメージが多いと思いますが,本ブログはJamstackなVuePressでお送りしております。
最近,Reactの勉強もしているのでVuePressからGatsbyに乗り換えようかなーという気持ちが少し(かなり?)出てきました。

そもそもJamstackって?

JavaScript + APIs + Markup = Jam
上記のようなアーキテクチャのことです。
フロントとバックエンドが切り離され,バックエンドの処理はAPIsで行います。
本ブログはJamstackにお送りしているといいましたが実際はAPI使ってないからJamstackではないのかもしれません。

メリットとしては…

  • 早い → ビルドして静的コンテンツとしてデプロイするので,早いです。
  • 安い → サーバーレスなのでサーバー費がかからない。NetlifyやGithubPages,Firebase Hostingなどのホスティングサービスの無料枠でも十分事足りる(規模にもよるけど)
  • うまい → 静的サイトジェネレーターなどで開発体験向上。サーバーサイドがマイクロサービス化でき,攻撃される表面が減少するのでセキュリティ面でも優位。

実際に使ってますけど,WordPressのときと違ってVSCode上で記事を書くことができ,バージョン管理もGitが使えるし,Githubにプッシュされたのをトリガーにビルド→デプロイしてくれるし(CI/CD)なので,エンジニアがブログ始めるならJamstackは選択肢に入れるべきじゃないかなと思います。

静的サイトジェネレーター

知らなかったけど結構たくさんあります。
Next.jsとかNuxtとかは静的サイトジェネレーター(SSG)がメインではなさそうですけど。。。

Next.js

Githubのスター数的には一番人気。
言語はJS
テンプレートはReact
Reactでサーバーサイドレンダリング(SSR)したいときに使うというイメージがあったけどSSGでも使えるんですね。

Hugo

Githubのスターでは2番目の人気。
言語はGo
テンプレートもGo
JamstackだからSSGもJSだと思ってたけど違うんですね。

Gatsby

Githubのスターでは3番目の人気。
言語はJS
テンプレートはReact
気になってる。
いろんな面で速さを売りにしてるっぽいけどどうなんだろうか。

Jekyll

Githubのスターでは4番目の人気。
言語はRuby
テンプレートはLiquid
Ruby詳しくないんでなんとも言えないけどLiquidテンプレートの名前は聞いたことある気がする。
聞いたことあるだけだから結果何もわからない。

Nuxt

Githubのスターでは5番目の人気。
言語はJS
テンプレートはVue
Nest同様,SSRのイメージ。
あ,でも一回SPAモードでサービス作ったな(未完放置)

Hexo

Githubのスターでは6番目の人気。
言語はJS
テンプレートはEJS,Pug,Haml,Swig,Nunjucks,Mustache,Handlebars,Twig,Marko
使えるテンプレート数がエグい。

VuePress

Githubのスターでは10番目の人気。
言語はJS
テンプレートはVue
現在仕様していますが,割とマイナーですw
困りごとあって調べても記事少ないです。。。

ホスティングサービス

あまり詳しくないのでどんなのがあるかだけ。
僕はNetlify使ってます。

  • Netlify
  • Now
  • Firebase Hosting
  • (Github pages)

Gatsby使ってみたい

最近Vueは全く触っておらず,Reactの勉強してるからReactのほうが好きになってきました。
単純接触効果ですかねw
あと,やっぱり使ってる人が多いので何をするにしても参考記事が多いというのはやはりメリットだと思います。
VuePressは記事少ない。。。

あと,これはこじつけですけど,最近記事数が増えてきたからかビルドに時間がかかっているような気がしています。
Gatsbyビルドも早いらしいじゃん?

ということで今後Gatsbyへ移行していくためにちょこちょこやっていこうと思います。
それではまた明日。


書いた人: こへ
音楽と漫画と読書とアニメとスノボが好き。多趣味でいろんなことに興味有ります。 誰しもが一度は使った事があるもののIoT開発をしてます。
Twitterフォローお願いします。