Closed21
Gatsby + TypeScript + Tailwindcssでブログ作る
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
ゴール
Gatsby + TypeScript + Tailwindcssのブログを公開する
個人のblogをmarkdownで書きつつ、zennの記事も表示できるようにしたい
参考にしたブログ
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
やること
アプリケーション
gatsby cliのインストールgatsby cliのデフォルトpacakge managerをyarnに変更gatsby starter blog からプロジェクト作るtypescript導入eslint, prettierの導入tailwindcssの導入デザイン当てる- zennの記事情報を取得する
ロゴ依頼記事のタイトルからOGPを自動生成するreadmeの更新github actionsでCI設定しとく- 無限スクロールの実装
デプロイ環境
お名前でドメインとるnetlifyの無料sslとかやる
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
issueに書くこと
tsconfigでbaseurl使いたいシンタックスハイライト部分のレスポンシブ対応できてない
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
参考
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
gatsbyのdefalut starterをtypescript用にしたstarter
このstarterを拡張していけばよき?
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
gatsby typescript tailwindcssのstarterもある
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
普通にstarter-defaultで初めて
plugin入れてく感じでもよきなぁ
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
ドメイン取得はお名前.comにして、netlifyで無料ssl設定すればよきかなぁ
Google Domains良さそう
参考にした手順
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
npmじゃなくてyarn使いたかったらcliのconfigを変更すればいけるらしい
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
gatsbyのtypescript化の記事
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
gatsbyでeslint prettierを入れる
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
tailwind cssをgatsbyに入れる手順
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
google font入れる
結局FontSource入れることにした
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
CSS modulesはgatsbyではデフォルトで使える
ただ使う時は
import * as styles from "./layout.module.css"
のようにアスタリスクを使ってimportして別名をつける
css modulesをimportすると型エラーが発生するので型定義しておく
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
ローカルネットワーク内でスマホでの動作確認したい場合
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
いろんなロゴが見れる
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
シンタックスハイライトのテーマを変える
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
faviconジェネレーター
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
OGP画像の自動生成
![nus3](https://res.cloudinary.com/zenn/image/fetch/s---K0FxmDX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/377a196371.jpeg)
実装したい機能とかまだあるけどissueに残したのでclose!
このスクラップは2021/09/29にクローズされました