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にクローズされました