GatsbyJSには、gatsby-source-filesystemというライブラリがあります。
これの凄いところは色々なソースファイルをGraphQLでまとめてに管理できるところです。
ソースファイルとしては
+ Qiita
+ Wordpress
+ Netlify CMS
+ AirtTable
+ CSV
+ Markdown
+ Excel
とか色々なモノを同じように扱えます。
これが最高に便利でイケています。
僕は、/src/フォルダ以下にはコード以外のモノを入れたくないと思う病ですので
今回は、imageのソースファイルを/contents/images/に変更したいと思います。
この章は基本的にgatsby-source-filesystemはdefalt starterに入っているので必要ありません。
npm install --save gatsby-source-filesystem
これでgatsby-source-filesystemがインストールされました。
次にconfigをいじっていきます。
gatsby-config.jsはこのようになっていると思います。
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
],
}
ここの
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
ここがimageのgatsby-source-filesystemの設定です。
ここを
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/contents/images`,
},
},
にかえてimageフォルダをcontentsフォルダにコピーしてみましょう。
そしてgatsby developとコマンドを打ってみましょう。エラーが出ます。
Error: icon (src/images/gatsby-icon.png) does not exist as defined in gatsby-config.js. Make sure the file exists rela tive to the root of the site.
これは
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
のiconが悪さをしています。
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `contents/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
に修正してみましょう。
バッチリ出来ましたね。
第8回 | GatsbyJSのサイトをデプロイする。GitHubへリポジトリを反映する |
第9回 | GatsbyJSのサイトをデプロイする。Netlifyにデプロイする |
第10回 | GatsbyJSのgatsby-source-filesystemを使う |
第11回 | GatsbyJSでMarkdownで記事の一覧を表示させよう |
第12回 | GatsbyJSでMarkdownの記事を表示させよう |
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント