ニッパチニッキ

データが飛んだので、WordPressからGatsbyJSへの移行を決意

自業自得なんですが、悲しいかな、WordPressのデータが全部飛びました。

あまりに辛くて泣いていたら、プログラミング教えてくれている先生が「GatsbyJSっていうのがあるよ」と教えてくれました。

• マークダウン記事からページを生成できる（ログイン不要で楽）
• 静的なページを生成してくれるので表示が早い（重要）
• GitHub経由でデプロイできるから ログが残る（超重要）

失意の底にいたので、「めっちゃいいじゃん！」と飛びつき作成を始めました。

取り組み時点の自分のプログラミングレベル

• 本格的にプログラミングの勉強を始めてから8ヶ月くらい
• モバイルアプリ開発（Swift）とWeb開発（React.js）を勉強
• どちらの言語も基本ならわかる程度
• アプリ開発経験はなし

実装したい機能

• ニュースサイトみたくしたい
• 最新記事だけはトップページに大きく出す
• その他の記事はカテゴリごとに最新5記事を表示

途中でつまづいたこと一覧

• チュートリアルとか英語読むのしんどかった時 Gatsby公式チュートリアルやったよ
• GraphQLでのデータ生成
• styled-componentを使ってのデザイン

GatsbyJS公式 Styled Components

styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指す記事)

• 画像にスタイルを適用 styled-components公式 やり方再確認
• マークダウンファイルに紐づけた画像からパスを取得しヘッド画像として表示する
• ブログトップに記事一覧を画像付きで表示する（オプション指定してなかった）

Gatsby で記事のトップ画像を設定

• GraphQLでデータ生成時のソートを2種類選択 GatsbyJS公式 GraphQL Query Options Reference
• TwitterカードとSEO GatsbyJSで作ったブログのページタイトル生成処理とSEOについて Gatsby: SEO対策（Twitterカードなどmetaタグ設置）
• 記事目次の追加 GatsbyJSブログの記事に目次を追加した
• 記事抜粋（excerpt）が失敗する gatsby-transformer-remark
• Adsenseの導入 GatsbyでAdsenseを表示する方法