Githubリポジトリ

使用技術

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

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

方法

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

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

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

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

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

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

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

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

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

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