JSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみた

最近ホットだけど日本での知名度が若干低いプロジェクトにgatsbyがあります。
ご存知でしょうか？
2019年のOctoverseを見ると、Fastest growing open source projects by contributorsの第8位にgatsbyjs/gatsbyがあります。
今回はそんなgatsbyのstarter(wordpressのテーマみたいなの)を自作していきます。

今回の目的

デザインに専念できる環境を作成していきましょう。
私自身のデザイナーとしての能力が低くて現時点でいいデザインを作ることは難しいですが、だれでもカスタマイズできる状態で公開するところまでこぎつけます。

デザインに集中できるだけの基本的な後ろ側を作れることをゴールとします。

コンセプトとデザインを仮決める

こんな感じのブログにしましょう。
starterの名前とコンセプトはhinoiri(日の入)。

行間がおかしいとか、なんかずれてるとか突っ込みどころ満載の設計図ですが、テーマ作成の際に直します。

色一覧

背景色１：ネイビー。#000030。夜の帳をイメージ。
背景色２：群青。#023457。暮れかけの夜をイメージ。
テキスト：薄紫。#B0D0FF。ただの白ではイメージに合わないので青みを強くした。
強調色１：オレンジ。#F37F00。太陽
強調色２：太陽の周りの赤。#D33422。

正直納得いってないので後で変えます。

基礎となるgatsby starterを選ぶ

今回は一から作るのではなく、gatsby-starter-defaultというgatsby-starterをもとに製作していきます。

gatsby-starter-defaultはgatsby-starterの中でもっともシンプルなものです。

プラグイン、テーマを追加

• gatsby-theme-blog-core
• gatsby-plugin-sitemap
• gatsby-plugin-google-fonts
• gatsby-plugin-sass

gatsby-theme-blog-core

今回はblogを作る予定なので、gatsby-theme-blog-coreを採用。

また、gatsby-theme-blogから重要そうなコードを移植します。
gatsby-theme-blogはstyleに影響を与えてしまうためそのままの採用はしません。

src/components/およびsrc/gatsby-theme-blog-core/components内に必要なコードを移植します。

結構面倒くさいですが、ソースコード読んで良しなにお願いします。

その他のプラグイン

• 素のCSSではきつくなる（予定）のでSCSSを採用。
• フォントをきれいにしたいいためgatsby-google-fontsを採用（ただし重くなる）
• gatsby-plugin-sitemapはとりあえず採用

実運用するといろいろ不足があると思いますが、いったんはこれで。

scssを適用

src/
  assets/
    scss/
  components/
    gatsby-theme-blog-core/

今回は上記ディレクトリ構成で。
どこからでも使うscssは、src/assets/scss/内に配置し、init.scssで一括して呼び出せるように変更。
各コンポーネントごとのscssはmoduleとして各jsファイルと一緒に配置します。

サンプルページ作成

様々なHTMLタグが出てくるmdファイルを作成し、実際に試してみます。

まあ、こんなものかな？

公開

githubにpushしてリポジトリを公開状態にすれば終わりです。

実際に使えるか試してみましょう。

gatsby new project-name https://github.com/aimof/gatsby-starter-hinoiri

demoページ作るほどの価値がこのstarterにまだない気がしたので、デモはなし。
しっかりしたstarterを作れれば公式で紹介してもらえる可能性もあるようです。

まとめ

gatsby触ってみましたが、フロント面白いです。
デザインについては並行して学習中です。

なぜかgatsbyの知名度が日本では若干低い気がするので盛り上がっていくとよいですね