CMSと静的サイトジェネレーターとJamstackとわたし

Webコーダーからフロントエンジニアにおれはなる！
と、思ってから数年…いつのまにか歳だけ食って、お仕事激減しているやまだです(＝ﾟωﾟ)ﾉ

いや、もうねコロナ以降在宅ワークブームだかなんだかで、Webデザイナーが多すぎて飽和状態なんです。インボイスも始まって、なんとなーくインボイス登録者の方がお仕事頼まれやすいのかな？とか。

かといって、もうガツガツ仕事するほどお金も必要ないし、でもでもなんとかWebに携わる仕事であと10年は食って行きたい…そんなお年頃なワケですw

と、前置き長くてすみません。

Webコーダーからフロントエンジニアへの道

手始めに、静的サイトジェネレーター（SSG）Eleventy（11ty）でリンク集作ってみた。

なぜ、JamstackじゃなくてSSGにこだわるのか。
私のクライアントはほぼほぼ、個人事業主や小規模事業者なため大掛かりなシステムで予算も取れず、しかも管理・運用もできません。WordPressの更新すら「え、また？」って顔されるレベル。

CMSと静的サイトジェネレーターとJamstackと、まぁサイトの作り方が多様化されて、ただのWebコーダーじゃ食って行けないのです(´･ω･`)

なぜEleventy（11ty）を選んだか

GatsbyはGraphQLとGatsby APIを学ぶ必要があって、正直めんどくさい。
Hugoは速いって評判だけど、Go言語のテンプレート記法が独特すぎて挫折。

で、たどり着いたのがEleventy（11ty）。

理由は単純。

  • Shopifyで開発された「Liquid」が使える
  • JavaScriptベースだから馴染みやすい
  • Nunjucksも使える（これがまた便利）
  • 設定がシンプル

わたし、マークアップの観点から、HTMLいじれないDIVだらけのノーコード系サイトいじるの嫌いなんです～。その点、11tyはHTML書ける人間にとって、めちゃくちゃ親和性が高い。

トライ＆エラーの繰り返し

エラー出るたびに、ChatGPT先生に聞きながらようやく理解したw

もう、コピペとかで動かすような事してるといつまでたっても覚えられないので、一つ一つ理解しながら進めることにした。遅いけど、これが結局近道。

SSG使わなくても、LPとか2、3ページとかなら手打ちの方が早いんですけど、さすがにページ数が多くなるとメンテナンスや修正などの時しんどくなるので。

実際に作ったサイトの裏側

https://ymd3.net/
https://ymd3.net/vue.html

使った技術：

  • WordPress REST API
  • Nunjucks
  • JSON
  • Javascript
  • Eleventy (11ty)

ポイントは、microCMSじゃなくてWordPressをヘッドレスCMSとして使ってること。

クライアントはいつも通りWordPressの管理画面から更新するだけ。それが11tyで静的化されたリンク集やお知らせにも反映される。WordPressのREST APIからJSONデータを引っ張ってきて、11tyで静的サイトとして吐き出す。

新しいCMSの使い方を覚えてもらう必要もないし、microCMSの月額費用も発生しない。既にあるWordPressを活かしながら、フロントだけ最新技術で軽量・高速化する。

これ、小規模事業者には最高の構成だと思う。

で、デプロイはどうしてるか

本来なら、Netlify + Eleventy (11ty) で自動ビルド・自動デプロイするのが王道。
GitHubにプッシュしたら自動でビルドされて、CDNで配信される。かっこいい。

でも私がやってるのは、ローカルでビルド → SFTPでアップ。

Netlify？使ってない。 （英語でよくわからないのが正直なところ）
ローカルで eleventy コマンド叩いて、生成された _site フォルダを、FileZillaでポイッとアップ。

これの何が悪いんだ。

  • 既存のレンタルサーバー使える
  • 追加コストゼロ
  • いつものワークフロー
  • クライアントに説明しやすい

GitOpsとかCI/CDとか、そういうのは大規模チーム向け。

個人事業主のサイトに、そんな仕組み要らない。

SFTPでいい。 動けば正義。
技術ブログには書かれないけど、これがフリーランスのリアル。

結局、何が大事なのか

「フロントエンジニアにおれはなる！」は、正直もう諦めかけてる。
でも、Web・SNS運用、集客の方にシフトするって決めてから、少し気が楽になった。

技術は手段であって、目的じゃない。
クライアントが求めてるのは、

  • 集客できるサイト
  • 更新しやすいサイト
  • 維持費が安いサイト

これを実現するために、SSGも使うし、WordPressも使うし、場合によってはペライチだって使う。
流行りの技術を追いかけるんじゃなくて、クライアントにとって無理がない形で、新しい技術を取り入れる。

既存資産を活かす。 学習コストをかけない。 ランニングコストを抑える。 説明しやすい構成にする。技術のコレクターになるんじゃなくて、クライアントの課題を解決できる人間になる。

とことんユーザー目線、クライアントファースト。

（あ、でもVue.jsとNuxtはちょっと触ってみたい。技術的好奇心は捨てられないw）

Eleventyドキュメント
https://www.11ty.dev/

参考にしたサイト
https://www.codegrid.net/series/2019-11ty/（一部有料）
https://developer.mamezou-tech.com/11ty/11ty-intro/
https://kinsta.com/jp/blog/eleventy/#eleventy