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と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のプラグインを追加する際に使用。ここに記述することでプラグインが実行されます |
/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 | 開発用のサーバー(GraphQLサーバーも)が立ち上がります。ページの変更が即時適応されるので、開発に最適です 。 |
| start | Run the gatsby develop command to set up a development server |
| build | サイト公開用のコードがビルドされます。 |
| serve | ビルドされたコードをサーブしてくれるコマンド。サイト公開最終確認をこのコマンドで出来ます。 |
| clean | キャッシュを削除します。開発用のサーバーで上手く表示されないなどの不具合があった場合は、このコマンドを試してみるのがお勧めです。 |
追記:MITライセンスを追加しました。
ちなみにgatsby-starter-tricycleという名前は三輪車のように簡単で誰でも乗りこなせるスターターにしたい想いと3カラムのデザインを引っかけて名付けました。
フィードバックやご意見・ご質問などどしどしお送りください。心待ちにしております。
LighthouseのPageSpeed Insightsスコア貼っておきます。
Gatsbyとwebpackとtailwindcssの構成なので爆速です。もちろんReactの効果も発揮します。
ユーザー補助の項目はいずれ時間があるときに対処する(予定)です。