Githubリポジトリ

使用技術

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にデプロイしているデモサイト

サポートしている機能

MDA(Reactコンポーネントを埋め込めるMarkdown形式のファイル)での記事執筆
MDAのfrontmetter
タグクラウド機能(frontmetterに記載)
カテゴリー機能(frontmetterに記載)
tailwindcss
記事一覧表示
パンくずリスト機能
3カラムのリキッドレイアウトの完全レスポンシブデザイン

Git clone

方法

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

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

ディレクトリ構造

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

/src/ directory 説明

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の使用を推奨します。

使用方法

Gatsby command list

command	explanation
develop
start	Run the gatsby develop command to set up a development server
build	Execute the gatsby build command and output the source code for publishing the site
serve	Run the gatsby serve command and set up a server to check the source code output for publication
clean	Execute the gatsby clean command to delete the cache. If you use this command when you change the directory or file structure or when a cache-related error occurs, the error will be resolved.

このソフトウェアの再配布・改変・商用利用はご自分の責任の範囲で自由です。
このソフトウェアを使用して受けた損害に対して制作者自身は一切の責任を持ちません。

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

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

LighthouseのPageSpeed Insightsスコア貼っておきます。

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

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

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