Blog

ポートフォリオサイトを制作しました:)
夏頃から何度か着手しては中断を繰り返し、年末にまとまった時間を取れたことでようやく（ひとまずの）完成に漕ぎつけました。長かった…！
本ブログでは、Astroなどの学習記録と、Shopifyの技術知見を主に投稿してゆく予定です。

本サイトの技術構成について

フレームワークはAstroとtailwind、ブログのCMSにはNewtを利用しています。ホスティングはNetlifyです。日頃のShopifyテーマ実装では主にLiquid（＋SCSS＆JavaScript）を書いているので、それ以外の言語とも親しんでおきたいなと、今回Astroに初挑戦してみました。
2021年にGatsby、2023年にEleventyと触れてきましたが、取っつきやすさではAstroが一番かもしれません。まだ触りはじめたばかりなので、勉強も兼ねてあれこれ試行錯誤してゆこうかと思います。ひとまず次はタグ分類の実装から！

デザイン面

Webデザインは専門外ではあるものの、元々が個人サイト作りを切っ掛けにHTMLに触りはじめた人間なので笑、今回はデザインも楽しんでみました。シンプルさを重視しつつ、名刺のような雰囲気が出るように要素配置を工夫しています。多分モバイル端末から見る方が分かりやすいかな……
配色は、SNSなどで長らく利用しているアイコン写真を元に抽出した色から、アイボリーとグリーンを採用しました。ちょっとクラフト紙っぽさも出せていたら嬉しいところ。
当初はFigmaでワイヤーフレームを引いていたんですが、途中からまどろっこしくなってデザインと実装ほぼ同時並行になりましたね…。

Astro × Newt CMS

AstroとNewt CMSの連携にあたっては、Newt公式のチュートリアルがとても役立ちました。Astro以外にもさまざまな言語別に導入チュートリアルがあって手厚い！
上記チュートリアルはあくまでも導入であり、解説されている機能も最低限なので、タグやページャーの実装にはドキュメント上のNewt APIクエリパラメータチュートリアルを当たると良いです。
（GatsbyではGraphQLであれこれすることが多かったので新鮮な感じ）

なお、もっとも解説が充実しているのはNext.jsで、公式からブログ実装スターターも提供されています。
言語の違いはあれど構成はかなり参考になるので、今後、タグ分類やアーカイブを実装する際はこちらのスターターを参照しようと思います。Astro×Newtのスターターも探したらどこかにある…かな？