📷
Gatsby,Tailwind,TypeScriptで写真ブログを作る
写真ブログを作ったきっかけ
- Reactでプログラムを勉強中
- Gatsbyが爆速という噂
- Nuxt.jsで作った写真紹介用のポートフォリオが激重
- starterキットが充実しておりサクッと立ち上がるらしい
- amsterdamというGatsbyテーマがとても良い
これらの理由から、写真ブログをサクッと作りたいな と考えました。
ただ、折角ですので、
- TypeScriptで作る
- Tailwind CSS面白そう！
- amsterdam カッコ良いのだけれど、色くらいしかカスタマイズ出来ないしなぁ
ということも考えた結果、gatsby-typescript-tailwind からスタートし、amsterdamみたいな写真ブログを作るすることにしました(無謀)。
結果
やはりというか、なかなかamsterdamのようにはいかず、今のところこれが自分の限界ですわ。
工夫したポイント
- 個別の記事でNext/Prevにプレビューを表示する(唯一amsterdam的な部分)
- 各タグの一覧から個別記事を開いた時は、タグ一覧の記事のみNext/Prevできるようにした
- 画像のアスペクト比をみて縦長の場合、画像の幅を狭くして縦がPC画面内になるべく収まるようにした
- オリジナル画像のダウンロードボタンを付けた
- ノートアイコンを付け、記事部分がある場合だけ表示できるようにした
今後の課題
- アクセス解析を設置する
- タグ一覧を作成する
- JSが残っているのでTypeScript化を進める
- modalの（幅）がしっくり来ないので見直す
感想
Gatsbyを使ってしっかり作った？初めてのサイトになります。
（ポートフォリオはstarter kitをほぼそのまま利用）
まず、GraphQLを初めて使うことになったので、どのようにデータを取得して、どうページに反映させるのか、わかるのにしばらくかかりました。
また、TypeScriptも勉強し始めたばかりなので、どういう型を書けば良いのか、Googleの検索結果を彷徨いました。
そして、gatsby-node.js がどのようにコールされ、その際に各ページを作る流れがわかるにも苦労しました。
色々苦労はしましたけど、gatsbyは、静的サイト作成でさまざまな工夫がされており非常に有力な選択肢と感じました。
tailwindで一番良いと思ったのは、レスポンシブデザインの対応です。非常に簡単。
例えば、lg:...で1024px以上の画面の場合属性を設定できます。デザインを適用したい部分に直接書くのは、そのモジュールに集中できるのでアリだと思います。
うまくテーマを使いこなせたら効率よくデザインもできる気がします。
これからも、Gatsby + TypeScript + Tailwind CSS の組み合わせで色々試行錯誤したいです。
Discussion