Closed21
Gatsby + TypeScript + Tailwindcssでブログ作る

ゴール
Gatsby + TypeScript + Tailwindcssのブログを公開する
個人のblogをmarkdownで書きつつ、zennの記事も表示できるようにしたい
参考にしたブログ

やること
アプリケーション
gatsby cliのインストールgatsby cliのデフォルトpacakge managerをyarnに変更gatsby starter blog からプロジェクト作るtypescript導入eslint, prettierの導入tailwindcssの導入デザイン当てる- zennの記事情報を取得する
ロゴ依頼記事のタイトルからOGPを自動生成するreadmeの更新github actionsでCI設定しとく- 無限スクロールの実装
デプロイ環境
お名前でドメインとるnetlifyの無料sslとかやる

issueに書くこと
tsconfigでbaseurl使いたいシンタックスハイライト部分のレスポンシブ対応できてない

参考

gatsbyのdefalut starterをtypescript用にしたstarter
このstarterを拡張していけばよき?

gatsby typescript tailwindcssのstarterもある

普通にstarter-defaultで初めて
plugin入れてく感じでもよきなぁ

ドメイン取得はお名前.comにして、netlifyで無料ssl設定すればよきかなぁ
Google Domains良さそう
参考にした手順

npmじゃなくてyarn使いたかったらcliのconfigを変更すればいけるらしい

gatsbyのtypescript化の記事

gatsbyでeslint prettierを入れる

tailwind cssをgatsbyに入れる手順

google font入れる
結局FontSource入れることにした

CSS modulesはgatsbyではデフォルトで使える
ただ使う時は
import * as styles from "./layout.module.css"
のようにアスタリスクを使ってimportして別名をつける
css modulesをimportすると型エラーが発生するので型定義しておく


ローカルネットワーク内でスマホでの動作確認したい場合

いろんなロゴが見れる

シンタックスハイライトのテーマを変える

faviconジェネレーター

OGP画像の自動生成

実装したい機能とかまだあるけどissueに残したのでclose!
このスクラップは2021/09/29にクローズされました