Gatsby-starterを作ったので仕組みとか使い方を説明させてください！ gatsby-starter-tricycle

Githubリポジトリ

https://github.com/tatsuoNakano/gatsby-starter-tricycle

## 使用技術
- Gatsby -v 5.12.2
- Babel
- Webpack
- Postcss
- GraphQL
- React
- material tailwind
- node.js -v 20.11.0
- tailwindcss
- MDX
- markdown
- HTML
- CSS
- Javascript
- Git
- Github
- Webstorm

備考:一年前に作ったので,nodeやGatsbyのバージョンが少し古いかもしれません。動かないじゃないか！などの苦情はGithub上でお願いします。一様、おま環では動作確認が取れました。エラーなくビルドも通りました。

## netlifyにデプロイしているデモサイト

https://famous-sunburst-567368.netlify.app/


## サポートしている機能
+ MDA(Reactコンポーネントを埋め込めるMarkdown形式のファイル)での記事執筆
+ MDAのfrontmetter
+ タグクラウド機能(frontmetterに記載)
+ カテゴリー機能(frontmetterに記載)
+ tailwindcss
+ 記事一覧表示
+ パンくずリスト機能
+ 3カラムのリキッドレイアウトの完全レスポンシブデザイン
+ モバイルファースト(モバイル画面で一番見栄えが良くなるように作成)

## インストール方法
方法

gitとnode.jsとgatsby.jsが元々インストールされた環境にて
任意のディレクトリに移動し

~~~ 
git clone https://github.com/tatsuoNakano/gatsby-starter-tricycle.git
~~~

## ディレクトリ構造


| directory/file    | explanation                                       |
| ----------------- | ------------------------------------------------- |
| /post/            | <br>MDXの記事を置く場所                                   |
| /src/             | 主にソースコードを編集する場所                                   |
| /public/          | Gatsbyがビルドを行った際にビルドコードが出力される位置。この内容をサイトを公開する際に公開する |
| /gatsby-config.js | Gatsbyのプラグインを追加する際に使用。ここに記述することでプラグインが実行されます      |


## /src/ directory 説明


| directory/file | explanation                                                                                                                                                                    |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| /component/    | Reactのコンポーネントを配置するディレクトリ                                                                                                                                                       |
| /hooks/        | SEO関連のコンポーネントを置くディレクトリ                                                                                                                                                         |
| /image/        | <br>アイコンやプロフィール画像など、サイト内で共通に使用される画像を置くディレクトリ。                                                                                                                                  |
| /static/       | faviconやwebpackによって処理されたくないファイルを置く場所                                                                                                                                           |
| /tamplate/     | Gatsbyの特殊なディレクトリ。gatsby-node.jsでダイナミックに作成されたページを受け付け、このディレクトリ内のファイルの指示に従ってページを出力する。                                                                                            |
| /style/        | CSSおよびTailwind CSS関連のファイルが配置されるディレクトリ。global.cssでtailwindcssを上書きしているため、global.cssに書く場合、通常のCSSが適用されます。しかし、tailwindcssのコンセプト的にはお勧めされませんので、あまり使用しない方が良いです。スタイリングにはtailwindcssの使用を推奨します。 |



## 使用方法
# Gatsby command list

| command | explanation                                                                                                                                                                                     |
| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| develop | 開発用のサーバー(GraphQLサーバーも)が立ち上がります。ページの変更が即時適応されるので、開発に最適です  。                                                                                                                                                                                              |
| start   | Run the gatsby develop command to set up a development server                                                                                                                                   |
| build   | サイト公開用のコードがビルドされます。                                                                                                           |
| serve   |ビルドされたコードをサーブしてくれるコマンド。サイト公開最終確認をこのコマンドで出来ます。                                                                                               |
| clean   | キャッシュを削除します。開発用のサーバーで上手く表示されないなどの不具合があった場合は、このコマンドを試してみるのがお勧めです。|


追記:MITライセンスを追加しました。


ちなみにgatsby-starter-tricycleという名前は三輪車のように簡単で誰でも乗りこなせるスターターにしたい想いと3カラムのデザインを引っかけて名付けました。

フィードバックやご意見・ご質問などどしどしお送りください。心待ちにしております。

## LighthouseのPageSpeed Insightsスコア貼っておきます。![lighthous.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3990962/e48b38e1-f562-5304-28de-8db4e0e724b9.png)

Gatsbyとwebpackとtailwindcssの構成なので爆速です。もちろんReactの効果も発揮します。

ユーザー補助の項目はいずれ時間があるときに対処する(予定)です。