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ライセンスを追加しました。