├── README.md ├── appendix ├── b-300.txt ├── b-301-outboundlink.txt ├── b-301.txt ├── c-302.txt ├── c-303.txt ├── d-305.txt ├── d-306.txt ├── d-307.txt ├── d-308.txt ├── d-309.txt ├── e.txt ├── f.txt ├── image.js └── index.js ├── base ├── README.md ├── base-about.html ├── base-blog-pagenation.html ├── base-blog.html ├── base-blogpost.html ├── base-index.html ├── favicon.ico ├── images-baseblog │ └── eyecatch.jpg ├── images-blogpost │ ├── cake.jpg │ ├── color.jpg │ ├── cup.jpg │ ├── eat.jpg │ ├── everyday.jpg │ ├── grape.jpg │ ├── herb.jpg │ ├── juice.jpg │ ├── lemon.jpg │ ├── orange.jpg │ ├── red.jpg │ ├── sandwich.jpg │ ├── season.jpg │ ├── spice.jpg │ ├── spice01.jpg │ ├── taste.jpg │ └── variation.jpg ├── images │ ├── about.jpg │ ├── berry.jpg │ ├── beverage.jpg │ ├── fruit.jpg │ ├── grain.jpg │ ├── hero.jpg │ ├── icon.png │ ├── logo-w.svg │ ├── logo.svg │ ├── pattern.jpg │ └── wave.svg ├── readme.txt ├── style.css └── thumb.jpg ├── contentful-data ├── blog-ja-JP.json ├── images.ctfassets.net │ └── 3dnmggslovad │ │ ├── 15AdhLKCMVemyX79c3Yxux │ │ └── 8c60ba89e3fab8d450f5135818cb8d90 │ │ │ └── grape.jpg │ │ ├── 2SptzTdwOg1i89C0VtRG1x │ │ └── 2c40e77848856ca155afd1ca8e505eb5 │ │ │ └── cake.jpg │ │ ├── 2X7R2UaCmSwp7ieQ9E3B2M │ │ └── ea2ba015b55f85595eca36ca0ca90d85 │ │ │ └── juice.jpg │ │ ├── 3qMxdYRUtOR8BbgyOFUyXs │ │ └── 3b6d338769a93dee915078c1df1eec4a │ │ │ └── season.jpg │ │ ├── 3rIClgXySnbTnEtTjP8qe9 │ │ └── fbf63bb9cdae1d07abd8d0b509863aa2 │ │ │ └── red.jpg │ │ ├── 4F53BIrp5dXm6lcN4XQs2i │ │ └── d19f1c54edbbc2ac3174fa6bb2963b76 │ │ │ └── lemon.jpg │ │ ├── 4zzo4MB31R5TfOxiTwK4fv │ │ └── d4ca7a6f6a08d65372a6eb64b7f961d9 │ │ │ └── color.jpg │ │ ├── 55kO2gjuM0ebfH2roDWHG9 │ │ └── 4c4cf95610b687c371aaec5421dd1a0a │ │ │ └── spice01.jpg │ │ ├── 5ImY9jSrdQtR3EGUVwgsOb │ │ └── ab2856cbcd0ff27abfd6b0b0b741db96 │ │ │ └── eat.jpg │ │ ├── 5nfOxrZdkGMKV7phDfML9Y │ │ └── 749f4f5c0abd31bc28f732fcb36c5a02 │ │ │ └── cup.jpg │ │ ├── 6MygBnbgrTO9rBpRIfH2YZ │ │ └── 2f2bdaba57270e32c64e430e183cf769 │ │ │ └── herb.jpg │ │ ├── 7BReL3LWmztZiqGJd37M9p │ │ └── e6c9f3f6dd4754a3b34b39a4436aea56 │ │ │ └── variation.jpg │ │ ├── 7xY25JEE3X5OZe0arIjxrj │ │ └── 01931ae7aea3d4a7246ae46009b01fe8 │ │ │ └── sandwich.jpg │ │ ├── QhJetkjS2sCLyuoqciTNI │ │ └── 3bd6d54339b53fe572bf6f5c874a36ed │ │ │ └── everyday.jpg │ │ ├── Vjo1EFe1mAIGb9WVxKb2t │ │ └── d47ea2ac1f418f8ab66de2e0cb76f9b9 │ │ │ └── spice.jpg │ │ ├── WsSENdrhtzQW2BS8xiLaJ │ │ └── 7be7dd88ec2d6360495a03b4fa7efa7e │ │ │ └── orange.jpg │ │ └── e5ixSiAhiLPW1zCBkLDpJ │ │ └── d7dff8751881b021b3d07d939d422efc │ │ └── taste.jpg └── importConfig.json ├── gatsby-v4.pdf ├── microCMS ├── README.md ├── import │ ├── api-blogpost.json │ ├── api-category.json │ ├── input-blog.csv │ └── input-category.csv ├── microCMS-gatsby-v4.pdf ├── mysite-microcms-gatsby-v4 │ ├── .gitignore │ ├── .prettierignore │ ├── .prettierrc │ ├── README.md │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── footer.js │ │ │ ├── header.js │ │ │ ├── layout.css │ │ │ ├── layout.js │ │ │ └── seo.js │ │ ├── images │ │ │ ├── about.jpg │ │ │ ├── berry.jpg │ │ │ ├── beverage.jpg │ │ │ ├── fruit.jpg │ │ │ ├── grain.jpg │ │ │ ├── hero.jpg │ │ │ ├── icon.png │ │ │ ├── logo-w.svg │ │ │ ├── logo.svg │ │ │ ├── pattern.jpg │ │ │ └── wave.svg │ │ ├── pages │ │ │ ├── 404.js │ │ │ ├── about.js │ │ │ └── index.js │ │ └── templates │ │ │ ├── blog-template.js │ │ │ ├── blogpost-template.js │ │ │ └── cat-template.js │ ├── static │ │ ├── favicon.ico │ │ └── thumb.jpg │ └── yarn.lock └── readme.txt ├── mysite-part1 ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── gatsby-config.js ├── package.json ├── src │ ├── components │ │ ├── footer.js │ │ ├── header.js │ │ ├── layout.css │ │ ├── layout.js │ │ └── seo.js │ ├── images │ │ ├── about.jpg │ │ ├── berry.jpg │ │ ├── beverage.jpg │ │ ├── fruit.jpg │ │ ├── grain.jpg │ │ ├── hero.jpg │ │ ├── icon.png │ │ ├── logo-w.svg │ │ ├── logo.svg │ │ ├── pattern.jpg │ │ └── wave.svg │ └── pages │ │ ├── 404.js │ │ ├── about.js │ │ └── index.js ├── static │ ├── favicon.ico │ └── thumb.jpg └── yarn.lock ├── mysite-part2-gatsby-v4 ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── package.json ├── src │ ├── components │ │ ├── footer.js │ │ ├── header.js │ │ ├── layout.css │ │ ├── layout.js │ │ └── seo.js │ ├── images │ │ ├── about.jpg │ │ ├── berry.jpg │ │ ├── beverage.jpg │ │ ├── fruit.jpg │ │ ├── grain.jpg │ │ ├── hero.jpg │ │ ├── icon.png │ │ ├── logo-w.svg │ │ ├── logo.svg │ │ ├── pattern.jpg │ │ └── wave.svg │ ├── pages │ │ ├── 404.js │ │ ├── about.js │ │ └── index.js │ ├── templates │ │ ├── blog-template.js │ │ ├── blogpost-template.js │ │ └── cat-template.js │ └── utils │ │ └── useContentfulImage.js ├── static │ ├── favicon.ico │ └── thumb.jpg └── yarn.lock ├── mysite-part2 ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── package.json ├── src │ ├── components │ │ ├── footer.js │ │ ├── header.js │ │ ├── layout.css │ │ ├── layout.js │ │ └── seo.js │ ├── images │ │ ├── about.jpg │ │ ├── berry.jpg │ │ ├── beverage.jpg │ │ ├── fruit.jpg │ │ ├── grain.jpg │ │ ├── hero.jpg │ │ ├── icon.png │ │ ├── logo-w.svg │ │ ├── logo.svg │ │ ├── pattern.jpg │ │ └── wave.svg │ ├── pages │ │ ├── 404.js │ │ ├── about.js │ │ └── index.js │ ├── templates │ │ ├── blog-template.js │ │ ├── blogpost-template.js │ │ └── cat-template.js │ └── utils │ │ └── useContentfulImage.js ├── static │ ├── favicon.ico │ └── thumb.jpg └── yarn.lock ├── readme.txt └── setup.pdf /README.md: -------------------------------------------------------------------------------- 1 | # Webサイト高速化のための
静的サイトジェネレーター活用入門 2 | 3 | ## GatsbyJSで実現する高速＆実用的なサイト構築 4 | 5 | ![Webサイト高速化のための 静的サイトジェネレーター活用入門](https://ebisu.com/github/gatsbyjs-book.jpg) 6 | 7 | **ダウンロードデータ** 8 | 9 | 特典PDFや、本書で作成するプロジェクトデータ、使用する画像素材、インポート用のコンテンツデータなどを収録しています。サンプルの作成方法などについては、本書を参照してください。 10 | 11 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 12 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 13 | 14 | 15 | --- 16 | 17 | **最新情報については本Githubの[ Wiki ](https://github.com/ebisucom/gatsbyjs-book/wiki)を参照してください。** 18 | 19 | --- 20 | 21 | ## ■ サポートPDF 22 | 23 | ### ▼ gatsby-v4.pdf 24 | 25 | * Gatsby v4 に対応する際の注意点と、「gatsby-source-contentful v6」と「new Gatsby image plugin」に対応する方法をまとめたPDFです。 26 | 27 | 28 | 29 | ## ■ 特典PDF 30 | 31 | ### ▼ セットアップPDF： setup.pdf 32 | 33 | * 開発環境の準備などについてまとめたPDFです。 34 | 35 | 36 | ### ▼ microCMS対応ガイド： microCMS-gatsby-v4.pdf 37 | 38 | * ブログの記事管理にヘッドレスCMSのmicroCMSを利用する方法をまとめたPDFです。 39 | * 「microCMS/」フォルダに収録しています。 40 | * 詳しくはフォルダ内のreadme.txtを参照してください。 41 | 42 | 43 | 44 | ## ■ 収録データ 45 | 46 | ### ▼ プロジェクトデータ 47 | 48 | フォルダ | 内容 49 | ------------- | ----- 50 | mysite-part1/ | 第１部で完成させるサンプルのプロジェクトデータ。 51 | mysite-part2/ | 第２部で完成させるサンプルのプロジェクトデータ。 52 | mysite-part2-gatsby-v4/ | gatsby-v4.pdfに対応したプロジェクトデータ。 53 | 54 | 55 | 56 | 57 | ※プロジェクトデータをそのまま利用する場合、各フォルダのルートで 58 | 59 | ``` 60 | yarn install 61 | ``` 62 | 63 | を実行してください。 64 | 65 | 66 | ### ▼ ベース＆画像データ 67 | 68 | データ | 内容 69 | --------------------- | ----- 70 | base/ | ベースとなるページ（HTML & CSS）を収録。 71 | base/images/ | 第１部で使用する画像ファイル。 72 | base/images-blogpost/ | 第２部で使用する画像ファイル。 73 | base/favicon.ico | P.50で使用するファビコン。 74 | base/thumb.jpg | P.165で使用するサムネイル画像。 75 | 76 | 77 | ### ▼ インポートデータ 78 | 79 | データ | 内容 80 | --------------------- | ----- 81 | contentful-data/ | インポート用のContentfulのデータです。 82 | 83 | 84 | ### ▼ APPENDIXのコード 85 | 86 | | | コード | ページ | 87 | |--|-------------------------------- | ----------| 88 | |A | /appendix/image.js | P.297 | 89 | | | /appendix/index.js | P.298-299 | 90 | |B | /appendix/b-300.txt | P.300 | 91 | | | /appendix/b-301.txt | P.301 | 92 | | | /appendix/b-301-outboudlink.txt | P.301 | 93 | |C | /appendix/c-302.txt | P.302 | 94 | | | /appendix/c-303.txt | P.303 | 95 | |D | /appendix/d-305.txt | P.305 | 96 | | | /appendix/d-306.txt | P.306 | 97 | | | /appendix/d-307.txt | P.307 | 98 | | | /appendix/d-308.txt | P.308 | 99 | | | /appendix/d-309.txt | P.309 | 100 | |E | /appendix/e.txt | P.310-313 | 101 | |F | /appendix/f.txt | P.314-315 | 102 | 103 | 104 | ----------------------------------------------- 105 | 106 | ## ■ ご利用にあたって 107 | 108 | 本書に記載されている内容や本ダウンロードデータの運用によって、いかなる損害が生じても、株式会社マイナビ出版および著者は責任を負いかねますので、あらかじめご了承ください。 109 | 110 | （c）2021 エビスコム / マイナビ出版 111 | -------------------------------------------------------------------------------- /appendix/b-300.txt: -------------------------------------------------------------------------------- 1 | { 2 | resolve: `gatsby-plugin-google-analytics`, 3 | options: { 4 | trackingId: `UA-XXXXXXXXX-X`, 5 | }, 6 | }, 7 | -------------------------------------------------------------------------------- /appendix/b-301-outboundlink.txt: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { OutboundLink } from "gatsby-plugin-google-analytics" 3 | 4 | export default () => ( 5 | 6 | 詳しくはこちら 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /appendix/b-301.txt: -------------------------------------------------------------------------------- 1 | { 2 | resolve: `gatsby-plugin-google-analytics`, 3 | options: { 4 | trackingId: `UA-XXXXXXXXX-X`, 5 | head: true, 6 | respectDNT: true, 7 | exclude: [`/cat/**`, `/test/`], 8 | }, 9 | }, 10 | -------------------------------------------------------------------------------- /appendix/c-302.txt: -------------------------------------------------------------------------------- 1 | `gatsby-plugin-sitemap`, 2 | -------------------------------------------------------------------------------- /appendix/c-303.txt: -------------------------------------------------------------------------------- 1 | { 2 | resolve: `gatsby-plugin-sitemap`, 3 | options: { 4 | output: `/sitemap.xml`, 5 | createLinkInHead: true, 6 | exclude: [`/cat/**`, `/test/`], 7 | query: ` 8 | { 9 | site { 10 | siteMetadata { 11 | siteUrl 12 | } 13 | } 14 | allSitePage { 15 | nodes { 16 | path 17 | } 18 | } 19 | }`, 20 | serialize: ({ site, allSitePage }) => { 21 | return allSitePage.nodes.map(node => { 22 | return { 23 | url: `${site.siteMetadata.siteUrl}${node.path}`, 24 | changefreq: `weekly`, 25 | priority: 0.5, 26 | } 27 | }) 28 | }, 29 | }, 30 | }, 31 | -------------------------------------------------------------------------------- /appendix/d-305.txt: -------------------------------------------------------------------------------- 1 | { 2 | resolve: `gatsby-plugin-feed`, 3 | options: { 4 | query: ` 5 | { 6 | site { 7 | siteMetadata { 8 | title 9 | description 10 | siteUrl 11 | site_url: siteUrl 12 | } 13 | } 14 | } 15 | `, 16 | feeds: [ 17 | { 18 | serialize: ({ query: { site, allContentfulBlogPost } }) => { 19 | return allContentfulBlogPost.edges.map(edge => { 20 | return Object.assign( 21 | {}, 22 | { 23 | title: edge.node.title, 24 | description: edge.node.content.fields.description, 25 | date: edge.node.publishDate, 26 | url: `${site.siteMetadata.siteUrl}/blog/post/${edge.node.slug}/`, 27 | } 28 | ) 29 | }) 30 | }, 31 | query: ` 32 | { 33 | allContentfulBlogPost( 34 | sort: { order: DESC, fields: publishDate }, 35 | ) { 36 | edges { 37 | node { 38 | title 39 | id 40 | slug 41 | publishDate 42 | content { 43 | fields { 44 | description 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | `, 52 | output: `/rss.xml`, 53 | title: `Essentials RSS Feed`, 54 | }, 55 | ], 56 | }, 57 | }, -------------------------------------------------------------------------------- /appendix/d-306.txt: -------------------------------------------------------------------------------- 1 | exports.onCreateNode = ({ node }) => { 2 | console.log(node.internal.type) 3 | } -------------------------------------------------------------------------------- /appendix/d-307.txt: -------------------------------------------------------------------------------- 1 | exports.onCreateNode = ({ node }) => { 2 | if (node.internal.type === `ContentfulBlogPost`) { 3 | console.log(node) 4 | } 5 | } -------------------------------------------------------------------------------- /appendix/d-308.txt: -------------------------------------------------------------------------------- 1 | exports.onCreateNode = ({ node }) => { 2 | if (node.internal.type === `contentfulBlogPostContentRichTextNode`) { 3 | console.log(node) 4 | } 5 | } -------------------------------------------------------------------------------- /appendix/d-309.txt: -------------------------------------------------------------------------------- 1 | const { documentToPlainTextString } = require("@contentful/rich-text-plain-text-renderer") 2 | 3 | exports.onCreateNode = ({ node, actions }) => { 4 | const { createNodeField } = actions 5 | 6 | if (node.internal.type === `contentfulBlogPostContentRichTextNode`) { 7 | createNodeField({ 8 | node, 9 | name: `description`, 10 | value: `${documentToPlainTextString(JSON.parse(node.content)).slice( 11 | 0, 12 | 70 13 | )}…`, 14 | }) 15 | } 16 | } -------------------------------------------------------------------------------- /appendix/e.txt: -------------------------------------------------------------------------------- 1 | 2 | ▼ P.310 3 | 4 | font-family: 'Montserrat Alternates', sans-serif; 5 | 6 | 7 | ▼ P.311 8 | 9 | import { Helmet } from "react-helmet" 10 | 11 | 12 | 16 | 17 | 18 | 19 | ▼ P.311 20 | 21 | import "typeface-montserrat-alternates" 22 | 23 | 24 | ▼ P.312 25 | 26 | { 27 | resolve: `gatsby-plugin-prefetch-google-fonts`, 28 | options: { 29 | fonts: [ 30 | { 31 | family: `Montserrat Alternates`, 32 | variants: [`400`, `700`], 33 | }, 34 | ], 35 | }, 36 | }, 37 | 38 | 39 | ▼ P.313 40 | 41 | { 42 | resolve: `gatsby-plugin-prefetch-google-fonts`, 43 | options: { 44 | fonts: [ 45 | { 46 | family: `Montserrat Alternates`, 47 | variants: [`400`, `700`], 48 | }, 49 | { 50 | family: `Noto Sans JP`, 51 | variants: [`400`, `700`], 52 | subsets: [`japanese`], 53 | }, 54 | ], 55 | }, 56 | }, 57 | 58 | -------------------------------------------------------------------------------- /appendix/f.txt: -------------------------------------------------------------------------------- 1 | 2 | ▼ P.314 3 | 4 | import Img from "gatsby-image/withIEPolyfill" 5 | 6 | 7 | ▼ P.315 8 | 9 | /* IE11対応 */ 10 | @media (-ms-high-contrast: none), not all and (-ms-high-contrast: none) { 11 | .wave { 12 | width: 100%; 13 | height:0; 14 | padding-bottom: 16.8%; 15 | overflow: hidden; 16 | } 17 | 18 | .wave svg { 19 | position: absolute; 20 | height: 100%; 21 | width: 100%; 22 | left: 0; 23 | top:0; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /appendix/image.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { useStaticQuery, graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | export default props => { 6 | const { allImageSharp } = useStaticQuery(graphql` 7 | query { 8 | allImageSharp { 9 | nodes { 10 | fluid(maxWidth: 1600) { 11 | originalName 12 | ...GatsbyImageSharpFluid_withWebp 13 | } 14 | } 15 | } 16 | } 17 | `) 18 | 19 | return ( 20 |
21 | n.fluid.originalName === props.filename) 24 | .fluid 25 | } 26 | alt={props.alt} 27 | style={props.style} 28 | /> 29 |
30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /appendix/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | import Image from "../components/image" 5 | 6 | import Layout from "../components/layout" 7 | 8 | import SEO from "../components/seo" 9 | 10 | export default ({ data }) => ( 11 | 12 | 13 |
14 | 15 |
16 |

17 | There is no love sincerer than 18 |
the love of food. 19 |

20 |

食物を愛するよりも誠実な愛はない ― バーナード・ショー

21 |
22 |
23 | 28 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |

39 | Food Essence 40 |

41 |
42 |
43 | 44 |

フルーツ

45 |

FRUIT

46 |

47 | 甘くてすっぱくておいしい果実たち。 48 |
49 | 旬のフルーツを満喫します。 50 |

51 |
52 |
53 | 54 |

穀物

55 |

GRAIN

56 |

57 | 食事の基本となる穀物。 58 |
59 | 毎日の活動のエネルギー源になります。 60 |

61 |
62 |
63 | 64 |

飲み物

65 |

BEVERAGE

66 |

67 | リラックスするのに欠かせない飲み物。 68 |
69 | お気に入りの一杯はありますか？ 70 |

71 |
72 |
73 |
74 |
75 |
76 |

Photo

77 | 赤く熟したベリー 82 |
83 | 84 |
85 |
86 |

RECENT POSTS

87 |
88 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 89 |
90 | 91 |
92 | {node.eyecatch.description} 97 |
98 |

{node.title}

99 | 100 |
101 | ))} 102 |
103 |
104 |
105 | 106 | ) 107 | 108 | export const query = graphql` 109 | query { 110 | allContentfulBlogPost( 111 | sort: { order: DESC, fields: publishDate } 112 | skip: 0 113 | limit: 4 114 | ) { 115 | edges { 116 | node { 117 | title 118 | id 119 | slug 120 | eyecatch { 121 | fluid(maxWidth: 573) { 122 | ...GatsbyContentfulFluid_withWebp 123 | } 124 | description 125 | } 126 | } 127 | } 128 | } 129 | } 130 | ` 131 | -------------------------------------------------------------------------------- /base/README.md: -------------------------------------------------------------------------------- 1 | # 画像 2 | 3 | 4 | ## ■ 第１部で使用する画像 5 | 6 | ### ▼ Pixabayの画像 7 | 8 | * [Pixabay](https://pixabay.com/) 9 | * [Pixabay License](https://pixabay.com/service/license/) 10 | 11 | 12 | #### images/about.jpg 13 | https://pixabay.com/images/id-2278921 14 | 15 | #### images/berry.jpg 16 | https://pixabay.com/images/id-2023404 17 | 18 | #### images/beverage.jpg 19 | https://pixabay.com/images/id-1725835 20 | 21 | #### images/fruit.jpg 22 | https://pixabay.com/images/id-2271 23 | 24 | #### images/grain.jpg 25 | https://pixabay.com/images/id-2705179 26 | 27 | #### images/hero.jpg 28 | https://pixabay.com/images/id-1576409 29 | 30 | #### images/pattern.jpg 31 | https://pixabay.com/images/id-3177396 32 | 33 | 34 | 35 | ### ▼ その他の画像 36 | 37 | Created by EBISUCOM 38 | 39 | * images/icon.png 40 | * images/logo.svg 41 | * images/logo-w.svg 42 | * images/wave.svg 43 | * favicon.ico 44 | * thumb.jpg 45 | 46 | 47 | 48 | ## ■ 第２部で使用する画像 49 | 50 | ### ▼ Pixabayの画像 51 | 52 | #### images-blogpost/cake.jpg 53 | https://pixabay.com/images/id-1786311 54 | 55 | #### images-blogpost/color.jpg 56 | https://pixabay.com/images/id-1275551 57 | 58 | #### images-blogpost/cup.jpg 59 | https://pixabay.com/images/id-3032061 60 | 61 | #### images-blogpost/eat.jpg 62 | https://pixabay.com/images/id-3640553 63 | 64 | #### images-blogpost/everyday.jpg 65 | https://pixabay.com/images/id-2569257 66 | 67 | #### images-blogpost/grape.jpg 68 | https://pixabay.com/images/id-4495944 69 | 70 | #### images-blogpost/herb.jpg 71 | https://pixabay.com/images/id-2325722 72 | 73 | #### images-blogpost/juice.jpg 74 | https://pixabay.com/images/id-634364 75 | 76 | #### images-blogpost/lemon.jpg 77 | https://pixabay.com/images/id-1209309 78 | 79 | #### images-blogpost/orange.jpg 80 | https://pixabay.com/images/id-1995079 81 | 82 | #### images-blogpost/red.jpg 83 | https://pixabay.com/images/id-1519097 84 | 85 | #### images-blogpost/sandwich.jpg 86 | https://pixabay.com/images/id-1804457 87 | 88 | #### images-blogpost/season.jpg 89 | https://pixabay.com/images/id-553463 90 | 91 | #### images-blogpost/spice.jpg 92 | https://pixabay.com/images/id-563796 93 | 94 | #### images-blogpost/spice01.jpg 95 | https://pixabay.com/images/id-1868297 96 | 97 | #### images-blogpost/taste.jpg 98 | https://pixabay.com/images/id-690399 99 | 100 | #### images-blogpost/variation.jpg 101 | https://pixabay.com/images/id-2561 102 | -------------------------------------------------------------------------------- /base/base-about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESSENTIALS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | ESSENTIALS 20 | 21 |
22 | 23 | 29 |
30 |
31 | 32 |
33 |
34 | ブルーベリー＆ヨーグルト 35 |
36 |
37 | 38 |
39 |
40 |

ESSENTIALSについて

41 | 42 | 48 | 49 |
50 |

体に必要不可欠な食べ物についての情報を発信しているサイトです。「おいしい食材をおいしく食べる」をモットーにしています。特に力を入れているのが、フルーツ、穀物、飲み物の３つです。

51 | 52 |

公開している記事

53 | 54 |

これらについて、次のような記事やレシピなどを書いて公開しています。

55 | 56 |
    57 |
  • ヘルシーで美味しい料理の研究・レビュー・レシピ。
    • 58 |
  • 一人でも、家族や友人と一緒にでも楽しめる料理。
    • 59 |
  • ユーザー間のオープンなコミュニケーションを基盤とした情報。
    • 60 |
61 | 62 |

よく聞かれること

63 | 64 |

よく聞かれることなのですが、私たちはスタートアップではありません。私たちはまだスタートしたばかりで、より多くの人々が食べやすい食べ物がもたらす違いを発見できるように、成長しサービスを改善する機会を待っています。

65 | 66 |

気長にお付き合いいただければ幸いです。

67 |
68 |
69 |
70 | 71 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /base/base-blog-pagenation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESSENTIALS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | ESSENTIALS 20 | 21 |
22 | 23 | 30 |
31 |
32 | 33 |
34 |
35 |

RECENT POSTS

36 | 37 |
38 | 46 | 47 | 55 | 56 | 64 | 65 | 73 | 74 | 82 | 83 | 91 |
92 | 93 | 94 | 108 | 109 |
110 |
111 | 112 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /base/base-blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESSENTIALS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | ESSENTIALS 20 | 21 |
22 | 23 | 30 |
31 |
32 | 33 |
34 |
35 |

RECENT POSTS

36 | 37 |
38 | 46 | 47 | 55 | 56 | 64 | 65 | 73 | 74 | 82 | 83 | 91 |
92 |
93 |
94 | 95 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /base/base-blogpost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESSENTIALS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | ESSENTIALS 20 | 21 |
22 | 23 | 30 |
31 |
32 | 33 |
34 |
35 | アイキャッチ画像の説明 36 |
37 |
38 | 39 |
40 |
41 |

記事のタイトル

42 | 43 | 54 | 55 |
56 |

57 | 記事の本文です。記事の本文です。記事の本文です。記事の本文です。記事の本文です。 58 | 記事の本文です。記事の本文です。記事の本文です。記事の本文です。記事の本文です。 59 | 記事の本文です。記事の本文です。記事の本文です。記事の本文です。記事の本文です。 60 |

61 |
62 | 63 | 77 | 78 |
79 |
80 | 81 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /base/base-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESSENTIALS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | ESSENTIALS 20 | 21 |
22 | 23 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 |

There is no love sincerer than
the love of food.

38 |

食物を愛するよりも誠実な愛はない ― バーナード・ショー

39 |
40 |
41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 |

Food Essence

49 | 50 |
51 |
52 |
53 | 54 |
55 |

フルーツ

56 |

FRUIT

57 |

甘くてすっぱくておいしい果実たち。
旬のフルーツを満喫します。

58 |
59 | 60 |
61 |
62 | 63 |
64 |

穀物

65 |

GRAIN

66 |

食事の基本となる穀物。
毎日の活動のエネルギー源になります。

67 |
68 | 69 |
70 |
71 | 72 |
73 |

飲み物

74 |

BEVERAGE

75 |

リラックスするのに欠かせない飲み物。
お気に入りの一杯はありますか？

76 |
77 |
78 |
79 |
80 | 81 |
82 |

Photo

83 |
84 | 赤く熟したベリー 85 |
86 |
87 | 88 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /base/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/favicon.ico -------------------------------------------------------------------------------- /base/images-baseblog/eyecatch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-baseblog/eyecatch.jpg -------------------------------------------------------------------------------- /base/images-blogpost/cake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/cake.jpg -------------------------------------------------------------------------------- /base/images-blogpost/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/color.jpg -------------------------------------------------------------------------------- /base/images-blogpost/cup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/cup.jpg -------------------------------------------------------------------------------- /base/images-blogpost/eat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/eat.jpg -------------------------------------------------------------------------------- /base/images-blogpost/everyday.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/everyday.jpg -------------------------------------------------------------------------------- /base/images-blogpost/grape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/grape.jpg -------------------------------------------------------------------------------- /base/images-blogpost/herb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/herb.jpg -------------------------------------------------------------------------------- /base/images-blogpost/juice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/juice.jpg -------------------------------------------------------------------------------- /base/images-blogpost/lemon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/lemon.jpg -------------------------------------------------------------------------------- /base/images-blogpost/orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/orange.jpg -------------------------------------------------------------------------------- /base/images-blogpost/red.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/red.jpg -------------------------------------------------------------------------------- /base/images-blogpost/sandwich.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/sandwich.jpg -------------------------------------------------------------------------------- /base/images-blogpost/season.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/season.jpg -------------------------------------------------------------------------------- /base/images-blogpost/spice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/spice.jpg -------------------------------------------------------------------------------- /base/images-blogpost/spice01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/spice01.jpg -------------------------------------------------------------------------------- /base/images-blogpost/taste.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/taste.jpg -------------------------------------------------------------------------------- /base/images-blogpost/variation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images-blogpost/variation.jpg -------------------------------------------------------------------------------- /base/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/about.jpg -------------------------------------------------------------------------------- /base/images/berry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/berry.jpg -------------------------------------------------------------------------------- /base/images/beverage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/beverage.jpg -------------------------------------------------------------------------------- /base/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/fruit.jpg -------------------------------------------------------------------------------- /base/images/grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/grain.jpg -------------------------------------------------------------------------------- /base/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/hero.jpg -------------------------------------------------------------------------------- /base/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/icon.png -------------------------------------------------------------------------------- /base/images/logo-w.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /base/images/logo.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /base/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/images/pattern.jpg -------------------------------------------------------------------------------- /base/images/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /base/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/readme.txt -------------------------------------------------------------------------------- /base/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/base/thumb.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/15AdhLKCMVemyX79c3Yxux/8c60ba89e3fab8d450f5135818cb8d90/grape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/15AdhLKCMVemyX79c3Yxux/8c60ba89e3fab8d450f5135818cb8d90/grape.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/2SptzTdwOg1i89C0VtRG1x/2c40e77848856ca155afd1ca8e505eb5/cake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/2SptzTdwOg1i89C0VtRG1x/2c40e77848856ca155afd1ca8e505eb5/cake.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/2X7R2UaCmSwp7ieQ9E3B2M/ea2ba015b55f85595eca36ca0ca90d85/juice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/2X7R2UaCmSwp7ieQ9E3B2M/ea2ba015b55f85595eca36ca0ca90d85/juice.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/3qMxdYRUtOR8BbgyOFUyXs/3b6d338769a93dee915078c1df1eec4a/season.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/3qMxdYRUtOR8BbgyOFUyXs/3b6d338769a93dee915078c1df1eec4a/season.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/3rIClgXySnbTnEtTjP8qe9/fbf63bb9cdae1d07abd8d0b509863aa2/red.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/3rIClgXySnbTnEtTjP8qe9/fbf63bb9cdae1d07abd8d0b509863aa2/red.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/4F53BIrp5dXm6lcN4XQs2i/d19f1c54edbbc2ac3174fa6bb2963b76/lemon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/4F53BIrp5dXm6lcN4XQs2i/d19f1c54edbbc2ac3174fa6bb2963b76/lemon.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/4zzo4MB31R5TfOxiTwK4fv/d4ca7a6f6a08d65372a6eb64b7f961d9/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/4zzo4MB31R5TfOxiTwK4fv/d4ca7a6f6a08d65372a6eb64b7f961d9/color.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/55kO2gjuM0ebfH2roDWHG9/4c4cf95610b687c371aaec5421dd1a0a/spice01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/55kO2gjuM0ebfH2roDWHG9/4c4cf95610b687c371aaec5421dd1a0a/spice01.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/5ImY9jSrdQtR3EGUVwgsOb/ab2856cbcd0ff27abfd6b0b0b741db96/eat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/5ImY9jSrdQtR3EGUVwgsOb/ab2856cbcd0ff27abfd6b0b0b741db96/eat.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/5nfOxrZdkGMKV7phDfML9Y/749f4f5c0abd31bc28f732fcb36c5a02/cup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/5nfOxrZdkGMKV7phDfML9Y/749f4f5c0abd31bc28f732fcb36c5a02/cup.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/6MygBnbgrTO9rBpRIfH2YZ/2f2bdaba57270e32c64e430e183cf769/herb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/6MygBnbgrTO9rBpRIfH2YZ/2f2bdaba57270e32c64e430e183cf769/herb.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/7BReL3LWmztZiqGJd37M9p/e6c9f3f6dd4754a3b34b39a4436aea56/variation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/7BReL3LWmztZiqGJd37M9p/e6c9f3f6dd4754a3b34b39a4436aea56/variation.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/7xY25JEE3X5OZe0arIjxrj/01931ae7aea3d4a7246ae46009b01fe8/sandwich.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/7xY25JEE3X5OZe0arIjxrj/01931ae7aea3d4a7246ae46009b01fe8/sandwich.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/QhJetkjS2sCLyuoqciTNI/3bd6d54339b53fe572bf6f5c874a36ed/everyday.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/QhJetkjS2sCLyuoqciTNI/3bd6d54339b53fe572bf6f5c874a36ed/everyday.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/Vjo1EFe1mAIGb9WVxKb2t/d47ea2ac1f418f8ab66de2e0cb76f9b9/spice.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/Vjo1EFe1mAIGb9WVxKb2t/d47ea2ac1f418f8ab66de2e0cb76f9b9/spice.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/WsSENdrhtzQW2BS8xiLaJ/7be7dd88ec2d6360495a03b4fa7efa7e/orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/WsSENdrhtzQW2BS8xiLaJ/7be7dd88ec2d6360495a03b4fa7efa7e/orange.jpg -------------------------------------------------------------------------------- /contentful-data/images.ctfassets.net/3dnmggslovad/e5ixSiAhiLPW1zCBkLDpJ/d7dff8751881b021b3d07d939d422efc/taste.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/contentful-data/images.ctfassets.net/3dnmggslovad/e5ixSiAhiLPW1zCBkLDpJ/d7dff8751881b021b3d07d939d422efc/taste.jpg -------------------------------------------------------------------------------- /contentful-data/importConfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "spaceId": "xxxxxxxxxx", 3 | "managementToken": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 4 | "contentFile": "blog-ja-JP.json" 5 | } 6 | -------------------------------------------------------------------------------- /gatsby-v4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/gatsby-v4.pdf -------------------------------------------------------------------------------- /microCMS/README.md: -------------------------------------------------------------------------------- 1 | # microCMS対応ガイド（Gatsby v4対応版） ［ microCMS-gatsby-v4.pdf ］ 2 | 3 | ## ■ 収録データ 4 | 5 | ### ▼ プロジェクトデータ 6 | 7 | フォルダ | 内容 8 | -------------------------- | ----- 9 | mysite-microcms-gatsby-v4/ | microCMS-gatsby-v4.pdfに対応したプロジェクトデータ。 10 | 11 | 12 | ### ▼ インポートデータ 13 | 14 | フォルダ | 内容 15 | ----------------- | ----- 16 | import/ | インポート用のmicroCMSのデータです。 17 | 18 | 19 | ------------------------------------------------------ 20 | 21 | 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 22 | GatsbyJSで実現する、高速＆実用的なサイト構築 23 | 24 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 25 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 26 | -------------------------------------------------------------------------------- /microCMS/import/api-blogpost.json: -------------------------------------------------------------------------------- 1 | {"apiFields":[{"idValue":"mPj1Q6uO5","fieldId":"title","name":"タイトル","kind":"text","required":true},{"fieldId":"slug","name":"スラッグ","kind":"text","required":true},{"fieldId":"publishDate","name":"投稿日","kind":"date","required":true},{"fieldId":"content","name":"コンテンツ","kind":"richEditor","required":true,"richEditorImageSize":true},{"fieldId":"eyecatch","name":"アイキャッチ","kind":"media","required":true},{"fieldId":"category","name":"カテゴリー","kind":"relationList","required":true}],"customFields":[]} -------------------------------------------------------------------------------- /microCMS/import/api-category.json: -------------------------------------------------------------------------------- 1 | [{"fieldId":"category","name":"カテゴリー名","kind":"text","required":true},{"fieldId":"categorySlug","name":"カテゴリースラッグ","kind":"text","required":true}] -------------------------------------------------------------------------------- /microCMS/import/input-blog.csv: -------------------------------------------------------------------------------- 1 | "contentId 2 | ※空欄で構いません。特定の値を設定したい場合に入力してください。",title,slug,publishDate,content,eyecatch,category 3 | ,毎日のフルーツで爽やかさを加えて,everyday,2020-02-15T16:15+09:00,"フルーツには適度な甘みと酸味と爽やかさがあって、毎日食べても飽きません。パンやヨーグルトとの相性もばっちりです。朝食にたくさんのフルーツを取り入れてみると、いつの間にかたくさんのフルーツを食べるようになっていました。 4 | 5 | フルーツの旬を活かす 6 | 7 | 野菜と同じようにフルーツにも旬があります。ただ、地域によって旬の時期には違いがありますので、居住地域の旬を押さえておくのがおすすめです。 8 | 9 | 早い時期に手に入る果物はラズベリーとブルーベリーです。これらの果物は生で食べることも、乾燥させてデザートとして調理することもできます。少し甘くて酸味があります。また、ベリーから作るブルーベリーワインもあります。 次はイチゴですが、今年の前半はイチゴジャムが新鮮です。火を通さずそのまま食べるのがおいしいです。 10 | 11 | パンとの組み合わせもいろいろ試してみましたが、特にライ麦パンがとても気に入りました！　クリームとハチミツ、塩少々、バター少々に果物を加えるとペロッと食べられます。",(インポート非対応です),"参照先id1,参照先id2" 12 | ,スパイスの香りと刺激,spice,2020-02-03T14:00+09:00,"食事をさらにおいしくしてくれるのがスパイスです。その香りと刺激は、単調な料理にも大きなアクセントを加えてくれます。フルーツに合うスパイスもあります。 13 | 14 | 適切な割合のスパイスを使用すると、料理に豊かな味とよりエキゾチックな味を与えることができます。 15 | 16 | スパイスのブレンド 17 | 18 | シナモンやカルダモンは一般的なスパイスブレンドですが、必ずしも多くのレシピに含まれているわけではありません。他の一般的なブレンドには、ブラックペッパーとブラックカルダモンを含んだものなどがあります。 19 | 20 | スープやシチューはスパイスを組み合わせて調理されることが多く、スパイスをブレンドして調理されることもよくあります。 21 | 22 | その他のスパイス 23 | 24 | チリやネギもよく使われます。もっとスパイスを効かせたい場合は、コリアンダー、ローリエ、コショウ、クローブ、タイム、フェンネル、パセリなどの新鮮なスパイスを使ってみてください。 25 | 26 | 採れたてのスパイスはその香りも強烈です。",(インポート非対応です),"参照先id1,参照先id2,参照先id3" 27 | ,彩り鮮やかなオレンジの秘密,orange,2020-01-30T18:45+09:00,"遠目にもぱっと目につく鮮やかなオレンジ色。緑の木々の中でも、ショッピングセンターの一角でも、その色の鮮やかさは変わりません。オレンジ色にも細かな違いがあり、黄色よりだったり、ピンク味が強い種類もあります。 28 | 29 | 果実の色にも、黄色のもの、淡黄色のもの、オレンジ色のもの、緑色のものなどがあり、「柔らかい黄色」「柔らかいオレンジ」などと表現されることもあります。細かくは果実の種類によっても異なります。 30 | 31 | 色味の違いは味の違いにもつながっていて、その果物はとても甘い味がして、一部の人のお気に入りになっています。ほんのり柑橘系の香りもします。味は果物と果物と果物の組み合わせなのです。",, 32 | ,甘いものとフルーツの相性,cake,2020-01-25T22:15+09:00,"甘いデザートにはフルーツがよく合います。フルーツの爽やかな酸味が、甘いクリームやチョコレートとの相性バツグンだからです。パフェやケーキにも欠かせないものになっています。 33 | 34 | ケーキを作るには、クリームと同量の砂糖を混ぜ、計量カップの大きさに合わせて計量し、お好みで新鮮なフルーツを加えてよく混ぜ、クリームで飾り付けます。お皿に盛って、甘いフルーツ、イチゴ、バナナ、ブラックベリー、オレンジ、さらにはカラントも添えるといいでしょう。 35 | 36 | 特定の果物はスライスして、上から下に 1 枚ずつ重ねながら並べて、ホイップクリームを挟んでいくなど、細かくきれいに飾るのもおすすめです。",, 37 | ,カップケーキを焼くときのちょっとしたコツ,cupcake,2020-01-16T15:30+09:00,"家で手軽に作れるお菓子の定番といえばカップケーキ。ホットケーキミックスを使うと、本当に手軽に作れます。ちょっとしたコツを覚えれば、いろいろなアレンジを加えるのも簡単です。 38 | 39 | そんな家でおいしいカップケーキを作る方法をいくつか紹介します。 40 | 41 | 基本的なケーキでは、すでにミックスされたホットケーキミックスを手頃な価格でオンラインで見つけることができます。また、水で濡らした材料用の泡立て器（小麦粉、ベーキングパウダー、ベーキングソーダ）も必要です。どんな種類のホットケーキミックスでも、あなたが作っているレシピに合うでしょう。 42 | 43 | 手で混ぜる方法もあります。パワーがあればとても速くて、特別な道具はほとんど必要ありません。",, 44 | ,レモンがないときに代わりになるもの,lemon,2020-01-10T10:30+09:00,"レモンはいろいろな料理に使われます。ただ、なかなかレモンを常備しておくのは難しいものです。そんなときに代わりになるものはあるのでしょうか。 45 | 46 | 多くの国では、このタイプのレモンはレモン果汁として入手できます。できるだけ余計なものが入っていないものを選ぶとよいでしょう。地中海にはレモンの皮のような香りがする代替品もありますが、日本での入手は難しいです。 47 | 48 | レモンの皮があればそれを使うのもおすすめです。レモンの皮は甘くてオレンジの皮に近いものがあります。オレンジの花を使ったレモンレシピもおすすめです。どちらも、ボトルタイプの果汁よりも香りが抜群です。",, 49 | ,色とりどりのぶどう,grape,2019-12-24T12:30+09:00,"ぶどうには多種多様な品種があり、その色合いもカラフルです。最近ではスイーツに活用される大粒な品種も増えてきました。新鮮なぶどうを購入して、自分のレシピと組み合わせてもいいと思います。 50 | 51 | グレープ 52 | 53 | グレープ種は、小さくて切れ味の良いブドウです。テーブルブドウとほぼ同じ風味ですが、サイズが小さいので少し甘めです。新鮮なものがおすすめです。 54 | 55 | アロマグレープ 56 | 57 | 香りのよいブドウは、テーブルブドウより小さく、甘くてジューシーです。生食用のブドウよりもおいしいことがあります。食べやすい大きさに切っても美味しいです。",, 58 | ,チーズやパンといっしょに食べたい果物,eat,2019-12-10T15:30+09:00,"果物は甘いものとはもちろん、しょっぱいものとの相性も抜群です。チーズやパンといっしょに食べると、また違った味わいを楽しむことができます。 59 | 60 | 生の果物ではサラダが作れますし、そうでなくても新鮮に見える効果があります。フルーツを使ってパンなしでピザも作ることができます。 61 | 62 | 焼くのが好きな場合は、桃やブドウのような果物を使って味を引き立てるのもおすすめです。フルーツを使って焼くなら、メロンをスライスしてもいいかもしれません。パンやサンドイッチのトッピングに是非一度お試しください。",, 63 | ,穀物のバリエーション,variation,2019-12-03T11:00+09:00,"穀物のバリエーションは豊富です。お米や麦はもちろんのこと、トウモロコシや、キビ、アワ、ヒエなどもあります。 64 | 65 | 小麦は栄養価が高く、タンパク質や繊維に加え、多くのビタミンを含んでいます。種子は、タンパク質や炭水化物、繊維、ミネラルが豊富で、栄養価が高い穀物です。黒アワは、分解に強い細胞壁と炭水化物を持つ興味深い構造を持っています。 66 | 67 | さらに、豆類は栄養価が高く、栄養価も高いうえ、必須アミノ酸、繊維、タンパク質を含んでいますので、様々な食品の製造に有用なのです。",, 68 | ,どうしても甘いものが欲しくなるとき,taste,2019-11-27T16:45+09:00,"ダイエットなどをしていても、どうしても甘いものが欲しくなるときがあります。どうしても、背徳感に溢れる食べ物が欲しくなるのです。本当に変な感じです。 69 | 70 | これをもう少し簡単にしようとしています。まだまだダイエット中ですが、全体的には健康的に食事しています。２、３時間の沈黙の中で何かを食べるのは本当に幸せです。食べたいものは何でも食べますし、食べたくないものもあります。また何かを食べるのはちょっと刺激的なことでもあります。",, 71 | ,お手軽サンドイッチ,sandwich,2019-11-12T13:00+09:00,"いろいろな具材をお手軽に楽しめるのが、サンドイッチです。具材としては野菜はもちろん、果物もおすすめです。 72 | 73 | サンドイッチの作り方はいろいろあります。一番簡単なのは、野菜を混ぜてパンに塗る方法です。サンドイッチを作るときに加えるべき材料がいくつかあります。普通はマヨネーズを使います。マヨネーズには酢が入っているものもあれば、塩が入っているものもあります。マヨネーズの中には、香味のために加えることができるハーブが入っているものもあります。",, 74 | ,イチゴの色が赤いわけ,red,2019-11-02T10:30+09:00,"イチゴはとても鮮やかな赤い色をしています。この色を作り出しているのが「アントシアニン」です。ブルーベリーにも含まれており、赤や紫を構成します。 75 | 76 | 赤味の少ないブラックベリーはこの割合が非常に少なくなっています。 77 | 他にも赤カシス、ブルーベリー、ラズベリー、黒カシス、ブラックベリー、ブルーベリー、黒カシスなどがこのように作られています。 78 | 79 | この色素を植物の葉の緑を構成する色素と混ぜ合わせると、まるで植物が色で塗られたかのように見えるのです。",, 80 | ,ハーブの香りでひとやすみ,herb,2019-10-23T23:00+09:00,"ハーブの香りには、気持ちを落ち着かせたり、すっきりさせてくれる効果があります。 81 | 82 | ラベンダーとクミンの香りを楽しむなら、心を落ち着かせ、肉体をリラックスさせる力があることに気付くでしょう。さらに、ラベンダーとクミンの香りは、薬としても使用できます。 83 | 84 | お茶の葉の香りやミントの香りが好きな人は、ハーブが心を落ち着かせる力を楽しむことができます。紅茶の茶葉とミントの香りが、リラックスして爽やかでリラックスした気分にさせてくれます。",, 85 | ,フレッシュジュースが飲みたい,juice,2019-10-15T09:30+09:00,"生の果物や野菜を使ったフレッシュジュース。都会ではジューススタンドも増えてきましたが、地方ではなかなか出会うことができません。 86 | 87 | 身近にある果物や野菜からフレッシュジュースを作りたいのですが、スーパーで買えばそれほど難しくありません。 88 | 89 | 田舎の人たちは自分の庭でベリーを栽培できることを知っています。私も月に1回ぐらいは輸入ではなく自分で育てた果物や野菜を食べたいです。地元のベリーから新鮮なジュースを作りたいのですが、残念ながら今は手元にありません。",, -------------------------------------------------------------------------------- /microCMS/import/input-category.csv: -------------------------------------------------------------------------------- 1 | "contentId 2 | ※空欄で構いません。特定の値を設定したい場合に入力してください。",category,categorySlug 3 | ,飲み物,beverage 4 | ,穀物,grain 5 | ,フルーツ,fruit -------------------------------------------------------------------------------- /microCMS/microCMS-gatsby-v4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/microCMS-gatsby-v4.pdf -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/README.md: -------------------------------------------------------------------------------- 1 | # microCMS対応ガイド（Gatsby v4対応版） 完成サンプル 2 | 3 | 4 | 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 5 | GatsbyJSで実現する、高速＆実用的なサイト構築 6 | 7 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 8 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 9 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | siteMetadata: { 10 | title: `ESSENTIALS`, 11 | description: ` おいしい食材と食事を探求するサイト`, 12 | lang: `ja`, 13 | siteUrl: `https://********.netlify.app`, 14 | locale: `ja_JP`, 15 | fbappid: `XXXXXXXXXXXXXXXXXXXXX`, 16 | }, 17 | plugins: [ 18 | `gatsby-plugin-image`, 19 | `gatsby-transformer-sharp`, 20 | `gatsby-plugin-sharp`, 21 | { 22 | resolve: `gatsby-source-filesystem`, 23 | options: { 24 | name: `images`, 25 | path: `${__dirname}/src/images/`, 26 | }, 27 | }, 28 | `gatsby-plugin-react-helmet`, 29 | { 30 | resolve: `gatsby-plugin-manifest`, 31 | options: { 32 | name: `ESSENTIALS エッセンシャルズ`, 33 | short_name: `ESSENTIALS`, 34 | start_url: `/`, 35 | background_color: `#ffffff`, 36 | theme_color: `#477294`, 37 | display: `standalone`, 38 | icon: `src/images/icon.png`, 39 | }, 40 | }, 41 | `gatsby-plugin-offline`, 42 | { 43 | resolve: "gatsby-source-microcms", 44 | options: { 45 | apiKey: process.env.microCMS_API_KEY, 46 | serviceId: "essentials-blog", 47 | apis: [ 48 | { 49 | endpoint: "blog", 50 | }, 51 | { 52 | endpoint: "category", 53 | }, 54 | ], 55 | }, 56 | }, 57 | ], 58 | } 59 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | 3 | exports.createPages = async ({ graphql, actions, reporter }) => { 4 | const { createPage } = actions 5 | 6 | const blogresult = await graphql(` 7 | query { 8 | allMicrocmsBlog(sort: { fields: publishDate, order: DESC }) { 9 | edges { 10 | node { 11 | id 12 | slug 13 | } 14 | next { 15 | title 16 | slug 17 | } 18 | previous { 19 | title 20 | slug 21 | } 22 | } 23 | group(field: category___categorySlug) { 24 | totalCount 25 | fieldValue 26 | } 27 | } 28 | allMicrocmsCategory { 29 | nodes { 30 | category 31 | categorySlug 32 | categoryId 33 | } 34 | } 35 | } 36 | `) 37 | 38 | if (blogresult.errors) { 39 | reporter.panicOnBuild(`GraphQL のクエリでエラーが発生しました`) 40 | return 41 | } 42 | 43 | blogresult.data.allMicrocmsBlog.edges.forEach(({ node, next, previous }) => { 44 | createPage({ 45 | path: `/blog/post/${node.slug}/`, 46 | component: path.resolve(`./src/templates/blogpost-template.js`), 47 | context: { 48 | id: node.id, 49 | next, 50 | previous, 51 | }, 52 | }) 53 | }) 54 | 55 | const blogPostsPerPage = 6 //１ページに表示する記事の数 56 | const blogPosts = blogresult.data.allMicrocmsBlog.edges.length //記事の総数 57 | const blogPages = Math.ceil(blogPosts / blogPostsPerPage) //記事一覧ページの総数 58 | 59 | Array.from({ length: blogPages }).forEach((_, i) => { 60 | createPage({ 61 | path: i === 0 ? `/blog/` : `/blog/${i + 1}/`, 62 | component: path.resolve("./src/templates/blog-template.js"), 63 | context: { 64 | skip: blogPostsPerPage * i, 65 | limit: blogPostsPerPage, 66 | currentPage: i + 1, //現在のページ番号 67 | isFirst: i + 1 === 1, //最初のページ 68 | isLast: i + 1 === blogPages, //最後のページ 69 | }, 70 | }) 71 | }) 72 | 73 | blogresult.data.allMicrocmsBlog.group.forEach(node => { 74 | const catPostsPerPage = 6 //１ページに表示する記事の数 75 | const catPosts = node.totalCount //カテゴリーに属した記事の総数 76 | const catPages = Math.ceil(catPosts / catPostsPerPage) //カテゴリーページの総数 77 | 78 | Array.from({ length: catPages }).forEach((_, i) => { 79 | createPage({ 80 | path: 81 | i === 0 82 | ? `/cat/${node.fieldValue}/` 83 | : `/cat/${node.fieldValue}/${i + 1}/`, 84 | component: path.resolve(`./src/templates/cat-template.js`), 85 | context: { 86 | catid: blogresult.data.allMicrocmsCategory.nodes.find( 87 | n => n.categorySlug === node.fieldValue 88 | ).categoryId, 89 | catname: blogresult.data.allMicrocmsCategory.nodes.find( 90 | n => n.categorySlug === node.fieldValue 91 | ).category, 92 | catslug: node.fieldValue, 93 | skip: catPostsPerPage * i, 94 | limit: catPostsPerPage, 95 | currentPage: i + 1, //現在のページ番号 96 | isFirst: i + 1 === 1, //最初のページ 97 | isLast: i + 1 === catPages, //最後のページ 98 | }, 99 | }) 100 | }) 101 | }) 102 | } 103 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mysite-part2-gatsby-v4", 3 | "private": true, 4 | "description": "「Webサイト高速化のための 静的サイトジェネレーター活用入門」で作成するプロジェクトデータです", 5 | "homepage": "https://github.com/ebisucom/gatsbyjs-book", 6 | "author": "エビスコム - EBISUCOM (https://ebisu.com/)", 7 | "version": "1.2.0", 8 | "scripts": { 9 | "build": "gatsby build", 10 | "develop": "gatsby develop", 11 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 12 | "start": "npm run develop", 13 | "serve": "gatsby serve", 14 | "clean": "gatsby clean", 15 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 16 | }, 17 | "dependencies": { 18 | "@contentful/rich-text-plain-text-renderer": "^15.6.2", 19 | "@contentful/rich-text-types": "^15.6.2", 20 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 21 | "@fortawesome/free-brands-svg-icons": "^5.15.4", 22 | "@fortawesome/free-regular-svg-icons": "^5.15.4", 23 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 24 | "@fortawesome/react-fontawesome": "^0.1.16", 25 | "@imgix/gatsby": "^1.7.1", 26 | "gatsby": "^4.1.2", 27 | "gatsby-plugin-image": "^2.1.0", 28 | "gatsby-plugin-manifest": "^4.1.1", 29 | "gatsby-plugin-offline": "^5.1.1", 30 | "gatsby-plugin-react-helmet": "^5.1.0", 31 | "gatsby-plugin-sharp": "^4.1.1", 32 | "gatsby-source-filesystem": "^4.1.0", 33 | "gatsby-source-microcms": "^2.0.0", 34 | "gatsby-transformer-sharp": "^4.1.0", 35 | "html-to-text": "^8.1.0", 36 | "react": "^17.0.2", 37 | "react-dom": "^17.0.2", 38 | "react-helmet": "^6.1.0", 39 | "rehype-parse": "7.0.1", 40 | "rehype-react": "6.2.0", 41 | "unified": "9.2.2" 42 | }, 43 | "devDependencies": { 44 | "prettier": "2.2.1" 45 | }, 46 | "repository": { 47 | "type": "git", 48 | "url": "https://github.com/ebisucom/gatsbyjs-book.git", 49 | "directory": "mysite-part2-gatsby-v4" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, useStaticQuery, Link } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 6 | import { 7 | faTwitter, 8 | faFacebookSquare, 9 | faInstagram, 10 | } from "@fortawesome/free-brands-svg-icons" 11 | 12 | const Footer = () => { 13 | const data = useStaticQuery(graphql` 14 | query { 15 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 16 | childImageSharp { 17 | gatsbyImageData(quality: 90, layout: FULL_WIDTH) 18 | } 19 | } 20 | } 21 | `) 22 | 23 | return ( 24 | 72 | ) 73 | } 74 | 75 | export default Footer 76 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | const Header = () => ( 5 |
6 |
7 |
8 | 9 | 10 | 11 | ESSENTIALS 12 | 16 | 17 | 18 |
19 | 32 |
33 |
34 | ) 35 | 36 | export default Header 37 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Header from "../components/header" 4 | import Footer from "../components/footer" 5 | 6 | import "./layout.css" 7 | 8 | import "@fortawesome/fontawesome-svg-core/styles.css" 9 | import { config } from "@fortawesome/fontawesome-svg-core" 10 | config.autoAddCss = false 11 | 12 | const Layout = ({ children }) => ( 13 |
14 |
15 | 16 | {children} 17 | 18 |
20 | ) 21 | 22 | export default Layout 23 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Helmet } from "react-helmet" 3 | import { useStaticQuery, graphql } from "gatsby" 4 | 5 | const Seo = props => { 6 | const data = useStaticQuery(graphql` 7 | query { 8 | site { 9 | siteMetadata { 10 | title 11 | lang 12 | description 13 | siteUrl 14 | locale 15 | fbappid 16 | } 17 | } 18 | } 19 | `) 20 | 21 | const title = props.pagetitle 22 | ? `${props.pagetitle} | ${data.site.siteMetadata.title}` 23 | : data.site.siteMetadata.title 24 | 25 | const description = props.pagedesc || data.site.siteMetadata.description 26 | 27 | const url = props.pagepath 28 | ? `${data.site.siteMetadata.siteUrl}${props.pagepath}` 29 | : data.site.siteMetadata.siteUrl 30 | 31 | const imgurl = props.pageimg 32 | ? `${data.site.siteMetadata.siteUrl}${props.pageimg}` 33 | : props.blogimg || `${data.site.siteMetadata.siteUrl}/thumb.jpg` 34 | const imgw = props.pageimgw || 1280 35 | const imgh = props.pageimgh || 640 36 | 37 | return ( 38 | 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | 61 | export default Seo 62 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/about.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/berry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/berry.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/beverage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/beverage.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/fruit.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/grain.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/hero.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/icon.png -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/logo-w.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/logo.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/src/images/pattern.jpg -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/images/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Layout from "../components/layout" 3 | 4 | import Seo from "../components/seo" 5 | 6 | const NotFound = ({ location }) => ( 7 | 8 | 9 |

10 | お探しのページが見つかりませんでした 11 |

12 | 13 | ) 14 | 15 | export default NotFound 16 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { faUtensils, faCheckSquare } from "@fortawesome/free-solid-svg-icons" 9 | 10 | import Seo from "../components/seo" 11 | 12 | const About = ({ data, location }) => ( 13 | 14 | 22 |
23 |
24 | 28 |
29 |
30 |
31 |
32 |

ESSENTIALSについて

33 | 39 |
40 |

41 | 体に必要不可欠な食べ物についての情報を発信しているサイトです。「おいしい食材をおいしく食べる」をモットーにしています。特に力を入れているのが、フルーツ、穀物、飲み物の３つです。 42 |

43 |

44 | 45 | 公開している記事 46 |

47 |

48 | これらについて、次のような記事やレシピなどを書いて公開しています。 49 |

50 |
    51 |
  • ヘルシーで美味しい料理の研究・レビュー・レシピ。
    • 52 |
  • 一人でも、家族や友人と一緒にでも楽しめる料理。
    • 53 |
  • ユーザー間のオープンなコミュニケーションを基盤とした情報。
    • 54 |
55 |

56 | 57 | よく聞かれること 58 |

59 |

60 | よく聞かれることなのですが、私たちはスタートアップではありません。私たちはまだスタートしたばかりで、より多くの人々が食べやすい食べ物がもたらす違いを発見できるように、成長しサービスを改善する機会を待っています。 61 |

62 |

気長にお付き合いいただければ幸いです。

63 |
64 |
65 |
66 | 67 | ) 68 | 69 | export const query = graphql` 70 | query { 71 | about: file(relativePath: { eq: "about.jpg" }) { 72 | childImageSharp { 73 | gatsbyImageData(layout: FULL_WIDTH) 74 | original { 75 | src 76 | height 77 | width 78 | } 79 | } 80 | } 81 | } 82 | ` 83 | 84 | export default About 85 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/templates/blog-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Layout from "../components/layout" 4 | 5 | import Seo from "../components/seo" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { 9 | faChevronLeft, 10 | faChevronRight, 11 | } from "@fortawesome/free-solid-svg-icons" 12 | 13 | import { ImgixGatsbyImage } from '@imgix/gatsby' 14 | 15 | const BlogTemp = ({ data, location, pageContext }) => ( 16 | 17 | 22 |
23 |
24 |

RECENT POSTS

25 |
26 | {data.allMicrocmsBlog.edges.map(({ node }) => ( 27 |
28 | 29 |
30 | 39 |
40 |

{node.title}

41 | 42 |
43 | ))} 44 |
45 | 46 |
    47 | {!pageContext.isFirst && ( 48 |
  • 49 | 57 | 58 | 前のページ 59 | 60 |
    • 61 | )} 62 | {!pageContext.isLast && ( 63 |
  • 64 | 65 | 次のページ 66 | 67 | 68 |
    • 69 | )} 70 |
71 |
72 |
73 | 74 | ) 75 | 76 | export const query = graphql` 77 | query($skip: Int!, $limit: Int!) { 78 | allMicrocmsBlog( 79 | sort: { order: DESC, fields: publishDate } 80 | skip: $skip 81 | limit: $limit 82 | ) { 83 | edges { 84 | node { 85 | title 86 | id 87 | slug 88 | eyecatch { 89 | url 90 | width 91 | height 92 | } 93 | } 94 | } 95 | } 96 | } 97 | ` 98 | 99 | export default BlogTemp 100 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/templates/blogpost-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Layout from "../components/layout" 4 | 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 6 | import { faClock, faFolderOpen } from "@fortawesome/free-regular-svg-icons" 7 | import { 8 | faChevronLeft, 9 | faChevronRight, 10 | faCheckSquare, 11 | } from "@fortawesome/free-solid-svg-icons" 12 | 13 | import Seo from "../components/seo" 14 | 15 | import { convert } from "html-to-text" 16 | 17 | import { ImgixGatsbyImage } from "@imgix/gatsby" 18 | 19 | import unified from "unified" 20 | import parse from "rehype-parse" 21 | import rehypeReact from "rehype-react" 22 | 23 | const renderAst = new rehypeReact({ 24 | createElement: React.createElement, 25 | Fragment: React.Fragment, 26 | components: { 27 | h2: props => { 28 | return ( 29 |

30 | 31 | {props.children} 32 |

33 | ) 34 | }, 35 | img: props => { 36 | return ( 37 | 45 | ) 46 | }, 47 | }, 48 | }).Compiler 49 | 50 | const BlogpostTemp = ({ data, pageContext, location }) => { 51 | const htmlAst = unified() 52 | .use(parse, { fragment: true }) 53 | .parse(data.microcmsBlog.content) 54 | 55 | return ( 56 | 57 | 70 |
71 |
72 | 79 |
80 |
81 |
82 |
83 |

{data.microcmsBlog.title}

84 | 100 |
{renderAst(htmlAst)}
101 |
    102 | {pageContext.next && ( 103 |
  • 104 | 105 | 106 | {pageContext.next.title} 107 | 108 |
    • 109 | )} 110 | {pageContext.previous && ( 111 |
  • 112 | 116 | {pageContext.previous.title} 117 | 118 | 119 |
    • 120 | )} 121 |
122 |
123 |
124 | 125 | ) 126 | } 127 | 128 | export const query = graphql` 129 | query($id: String!) { 130 | microcmsBlog(id: { eq: $id }) { 131 | title 132 | publishDateJP: publishDate(formatString: "YYYY年MM月DD日") 133 | publishDate 134 | category { 135 | category 136 | categorySlug 137 | id 138 | } 139 | eyecatch { 140 | url 141 | width 142 | height 143 | } 144 | content 145 | } 146 | } 147 | ` 148 | 149 | export default BlogpostTemp 150 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/src/templates/cat-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Layout from "../components/layout" 4 | 5 | import Seo from "../components/seo" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { 9 | faChevronLeft, 10 | faChevronRight, 11 | } from "@fortawesome/free-solid-svg-icons" 12 | 13 | import { ImgixGatsbyImage } from '@imgix/gatsby' 14 | 15 | const CatTemp = ({ data, location, pageContext }) => ( 16 | 17 | 22 |
23 |
24 |

CATEGORY: {pageContext.catname}

25 |
26 | {data.allMicrocmsBlog.edges.map(({ node }) => ( 27 |
28 | 29 |
30 | 39 |
40 |

{node.title}

41 | 42 |
43 | ))} 44 |
45 | 46 |
    47 | {!pageContext.isFirst && ( 48 |
  • 49 | 59 | 60 | 前のページ 61 | 62 |
    • 63 | )} 64 | {!pageContext.isLast && ( 65 |
  • 66 | 72 | 次のページ 73 | 74 | 75 |
    • 76 | )} 77 |
78 |
79 |
80 | 81 | ) 82 | 83 | export const query = graphql` 84 | query($catid: String!, $skip: Int!, $limit: Int!) { 85 | allMicrocmsBlog( 86 | sort: { order: DESC, fields: publishDate } 87 | skip: $skip 88 | limit: $limit 89 | filter: { category: { elemMatch: { id: { eq: $catid } } } } 90 | ) { 91 | edges { 92 | node { 93 | title 94 | id 95 | slug 96 | eyecatch { 97 | url 98 | width 99 | height 100 | } 101 | } 102 | } 103 | } 104 | } 105 | ` 106 | 107 | export default CatTemp 108 | -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/static/favicon.ico -------------------------------------------------------------------------------- /microCMS/mysite-microcms-gatsby-v4/static/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/mysite-microcms-gatsby-v4/static/thumb.jpg -------------------------------------------------------------------------------- /microCMS/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/microCMS/readme.txt -------------------------------------------------------------------------------- /mysite-part1/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /mysite-part1/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /mysite-part1/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /mysite-part1/README.md: -------------------------------------------------------------------------------- 1 | # 第１部 完成サンプル 2 | 3 | **Netlifyにデプロイしたサイト** ： https://gatsby-essentials-5.netlify.app/ 4 | 5 | 6 | ------------------------------------------------------ 7 | 8 | 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 9 | GatsbyJSで実現する、高速＆実用的なサイト構築 10 | 11 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 12 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 13 | -------------------------------------------------------------------------------- /mysite-part1/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | siteMetadata: { 10 | title: `ESSENTIALS`, 11 | description: ` おいしい食材と食事を探求するサイト`, 12 | lang: `ja`, 13 | siteUrl: `https://********.netlify.app`, 14 | locale: `ja_JP`, 15 | fbappid: `XXXXXXXXXXXXXXXXXXXXX`, 16 | }, 17 | plugins: [ 18 | `gatsby-transformer-sharp`, 19 | `gatsby-plugin-sharp`, 20 | { 21 | resolve: `gatsby-source-filesystem`, 22 | options: { 23 | name: `images`, 24 | path: `${__dirname}/src/images/`, 25 | }, 26 | }, 27 | `gatsby-plugin-react-helmet`, 28 | { 29 | resolve: `gatsby-plugin-manifest`, 30 | options: { 31 | name: `ESSENTIALS エッセンシャルズ`, 32 | short_name: `ESSENTIALS`, 33 | start_url: `/`, 34 | background_color: `#ffffff`, 35 | theme_color: `#477294`, 36 | display: `standalone`, 37 | icon: `src/images/icon.png`, 38 | }, 39 | }, 40 | `gatsby-plugin-offline`, 41 | ], 42 | } 43 | -------------------------------------------------------------------------------- /mysite-part1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mysite-part1", 3 | "private": true, 4 | "description": "「Webサイト高速化のための 静的サイトジェネレーター活用入門」で作成するプロジェクトデータです", 5 | "homepage": "https://github.com/ebisucom/gatsbyjs-book", 6 | "author": "エビスコム - EBISUCOM (https://ebisu.com/)", 7 | "version": "1.0.0", 8 | "scripts": { 9 | "build": "gatsby build", 10 | "develop": "gatsby develop", 11 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 12 | "start": "npm run develop", 13 | "serve": "gatsby serve", 14 | "clean": "gatsby clean", 15 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 16 | }, 17 | "dependencies": { 18 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 19 | "@fortawesome/free-brands-svg-icons": "^5.15.4", 20 | "@fortawesome/free-regular-svg-icons": "^5.15.4", 21 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 22 | "@fortawesome/react-fontawesome": "^0.1.16", 23 | "gatsby": "^2.32.13", 24 | "gatsby-image": "^2.11.0", 25 | "gatsby-plugin-manifest": "^2.12.1", 26 | "gatsby-plugin-offline": "^3.10.2", 27 | "gatsby-plugin-react-helmet": "^3.10.0", 28 | "gatsby-plugin-sharp": "^2.14.4", 29 | "gatsby-source-filesystem": "^2.11.1", 30 | "gatsby-transformer-sharp": "^2.12.1", 31 | "react": "^16.14.0", 32 | "react-dom": "^16.14.0", 33 | "react-helmet": "^6.1.0" 34 | }, 35 | "devDependencies": { 36 | "prettier": "2.0.4" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/ebisucom/gatsbyjs-book.git", 41 | "directory": "mysite-part1" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /mysite-part1/src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, useStaticQuery, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 6 | import { 7 | faTwitter, 8 | faFacebookSquare, 9 | faInstagram, 10 | } from "@fortawesome/free-brands-svg-icons" 11 | 12 | export default () => { 13 | const data = useStaticQuery(graphql` 14 | query { 15 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 16 | childImageSharp { 17 | fluid(maxWidth: 1920, quality: 90) { 18 | ...GatsbyImageSharpFluid_withWebp 19 | } 20 | } 21 | } 22 | } 23 | `) 24 | 25 | return ( 26 | 74 | ) 75 | } 76 | -------------------------------------------------------------------------------- /mysite-part1/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | export default () => ( 5 |
6 |
7 |
8 | 9 | 10 | 11 | ESSENTIALS 12 | 16 | 17 | 18 |
19 | 29 |
30 |
31 | ) 32 | -------------------------------------------------------------------------------- /mysite-part1/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Header from "../components/header" 4 | import Footer from "../components/footer" 5 | 6 | import "./layout.css" 7 | 8 | import "@fortawesome/fontawesome-svg-core/styles.css" 9 | import { config } from "@fortawesome/fontawesome-svg-core" 10 | config.autoAddCss = false 11 | 12 | export default ({ children }) => ( 13 |
14 |
15 | 16 | {children} 17 | 18 |
19 |
20 | ) 21 | -------------------------------------------------------------------------------- /mysite-part1/src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Helmet } from "react-helmet" 3 | import { useStaticQuery, graphql } from "gatsby" 4 | 5 | export default props => { 6 | const data = useStaticQuery(graphql` 7 | query { 8 | site { 9 | siteMetadata { 10 | title 11 | lang 12 | description 13 | siteUrl 14 | locale 15 | fbappid 16 | } 17 | } 18 | } 19 | `) 20 | 21 | const title = props.pagetitle 22 | ? `${props.pagetitle} | ${data.site.siteMetadata.title}` 23 | : data.site.siteMetadata.title 24 | 25 | const description = props.pagedesc || data.site.siteMetadata.description 26 | 27 | const url = props.pagepath 28 | ? `${data.site.siteMetadata.siteUrl}${props.pagepath}` 29 | : data.site.siteMetadata.siteUrl 30 | 31 | const imgurl = props.pageimg 32 | ? `${data.site.siteMetadata.siteUrl}${props.pageimg}` 33 | : `${data.site.siteMetadata.siteUrl}/thumb.jpg` 34 | const imgw = props.pageimgw || 1280 35 | const imgh = props.pageimgh || 640 36 | 37 | return ( 38 | 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /mysite-part1/src/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/about.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/berry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/berry.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/beverage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/beverage.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/fruit.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/grain.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/hero.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/icon.png -------------------------------------------------------------------------------- /mysite-part1/src/images/logo-w.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part1/src/images/logo.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part1/src/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/src/images/pattern.jpg -------------------------------------------------------------------------------- /mysite-part1/src/images/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mysite-part1/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Layout from "../components/layout" 3 | 4 | import SEO from "../components/seo" 5 | 6 | export default ({ location }) => ( 7 | 8 | 9 |

10 | お探しのページが見つかりませんでした 11 |

12 | 13 | ) 14 | -------------------------------------------------------------------------------- /mysite-part1/src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { faUtensils, faCheckSquare } from "@fortawesome/free-solid-svg-icons" 9 | 10 | import SEO from "../components/seo" 11 | 12 | export default ({ data, location }) => ( 13 | 14 | 22 |
23 |
24 | ブルーベリー＆ヨーグルト 28 |
29 |
30 |
31 |
32 |

ESSENTIALSについて

33 | 39 |
40 |

41 | 体に必要不可欠な食べ物についての情報を発信しているサイトです。「おいしい食材をおいしく食べる」をモットーにしています。特に力を入れているのが、フルーツ、穀物、飲み物の３つです。 42 |

43 |

44 | 45 | 公開している記事 46 |

47 |

48 | これらについて、次のような記事やレシピなどを書いて公開しています。 49 |

50 |
    51 |
  • ヘルシーで美味しい料理の研究・レビュー・レシピ。
    • 52 |
  • 一人でも、家族や友人と一緒にでも楽しめる料理。
    • 53 |
  • ユーザー間のオープンなコミュニケーションを基盤とした情報。
    • 54 |
55 |

56 | 57 | よく聞かれること 58 |

59 |

60 | よく聞かれることなのですが、私たちはスタートアップではありません。私たちはまだスタートしたばかりで、より多くの人々が食べやすい食べ物がもたらす違いを発見できるように、成長しサービスを改善する機会を待っています。 61 |

62 |

気長にお付き合いいただければ幸いです。

63 |
64 |
65 |
66 | 67 | ) 68 | 69 | export const query = graphql` 70 | query { 71 | about: file(relativePath: { eq: "about.jpg" }) { 72 | childImageSharp { 73 | fluid(maxWidth: 1600) { 74 | ...GatsbyImageSharpFluid_withWebp 75 | } 76 | original { 77 | src 78 | height 79 | width 80 | } 81 | } 82 | } 83 | } 84 | ` 85 | -------------------------------------------------------------------------------- /mysite-part1/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import SEO from "../components/seo" 8 | 9 | export default ({ data }) => ( 10 | 11 | 12 |
13 |
14 | 19 |
20 |
21 |

22 | There is no love sincerer than 23 |
the love of food. 24 |

25 |

食物を愛するよりも誠実な愛はない ― バーナード・ショー

26 |
27 |
28 | 33 | 37 | 38 | 39 |
40 |
41 |
42 |
43 |

44 | Food Essence 45 |

46 |
47 |
48 |
49 | 50 |
51 |

フルーツ

52 |

FRUIT

53 |

54 | 甘くてすっぱくておいしい果実たち。 55 |
56 | 旬のフルーツを満喫します。 57 |

58 |
59 |
60 |
61 | 62 |
63 |

穀物

64 |

GRAIN

65 |

66 | 食事の基本となる穀物。 67 |
68 | 毎日の活動のエネルギー源になります。 69 |

70 |
71 |
72 |
73 | 74 |
75 |

飲み物

76 |

BEVERAGE

77 |

78 | リラックスするのに欠かせない飲み物。 79 |
80 | お気に入りの一杯はありますか？ 81 |

82 |
83 |
84 |
85 |
86 |
87 |

Photo

88 |
89 | 赤く熟したベリー 94 |
95 |
96 | 97 | ) 98 | 99 | export const query = graphql` 100 | query { 101 | hero: file(relativePath: { eq: "hero.jpg" }) { 102 | childImageSharp { 103 | fluid(maxWidth: 1600) { 104 | ...GatsbyImageSharpFluid_withWebp 105 | } 106 | } 107 | } 108 | fruit: file(relativePath: { eq: "fruit.jpg" }) { 109 | childImageSharp { 110 | fluid(maxWidth: 320) { 111 | ...GatsbyImageSharpFluid_withWebp 112 | } 113 | } 114 | } 115 | grain: file(relativePath: { eq: "grain.jpg" }) { 116 | childImageSharp { 117 | fluid(maxWidth: 320) { 118 | ...GatsbyImageSharpFluid_withWebp 119 | } 120 | } 121 | } 122 | beverage: file(relativePath: { eq: "beverage.jpg" }) { 123 | childImageSharp { 124 | fluid(maxWidth: 320) { 125 | ...GatsbyImageSharpFluid_withWebp 126 | } 127 | } 128 | } 129 | berry: file(relativePath: { eq: "berry.jpg" }) { 130 | childImageSharp { 131 | fluid(maxWidth: 1600) { 132 | ...GatsbyImageSharpFluid_withWebp 133 | } 134 | } 135 | } 136 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 137 | childImageSharp { 138 | fluid(maxWidth: 1920, quality: 90) { 139 | ...GatsbyImageSharpFluid_withWebp 140 | } 141 | } 142 | } 143 | } 144 | ` 145 | -------------------------------------------------------------------------------- /mysite-part1/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/static/favicon.ico -------------------------------------------------------------------------------- /mysite-part1/static/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part1/static/thumb.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/README.md: -------------------------------------------------------------------------------- 1 | # 第２部 完成サンプル（Gatsby v4 / gatsby-source-contentful v6 / new Gatsby image plugin 対応版） 2 | 3 | 4 | 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 5 | GatsbyJSで実現する、高速＆実用的なサイト構築 6 | 7 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 8 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 9 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | siteMetadata: { 10 | title: `ESSENTIALS`, 11 | description: ` おいしい食材と食事を探求するサイト`, 12 | lang: `ja`, 13 | siteUrl: `https://********.netlify.app`, 14 | locale: `ja_JP`, 15 | fbappid: `XXXXXXXXXXXXXXXXXXXXX`, 16 | }, 17 | plugins: [ 18 | `gatsby-plugin-image`, 19 | `gatsby-transformer-sharp`, 20 | `gatsby-plugin-sharp`, 21 | { 22 | resolve: `gatsby-source-filesystem`, 23 | options: { 24 | name: `images`, 25 | path: `${__dirname}/src/images/`, 26 | }, 27 | }, 28 | `gatsby-plugin-react-helmet`, 29 | { 30 | resolve: `gatsby-plugin-manifest`, 31 | options: { 32 | name: `ESSENTIALS エッセンシャルズ`, 33 | short_name: `ESSENTIALS`, 34 | start_url: `/`, 35 | background_color: `#ffffff`, 36 | theme_color: `#477294`, 37 | display: `standalone`, 38 | icon: `src/images/icon.png`, 39 | }, 40 | }, 41 | `gatsby-plugin-offline`, 42 | { 43 | resolve: `gatsby-source-contentful`, 44 | options: { 45 | spaceId: process.env.CONTENTFUL_SPACE_ID, 46 | accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, 47 | host: process.env.CONTENTFUL_HOST, 48 | }, 49 | }, 50 | ], 51 | } 52 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | 3 | exports.createPages = async ({ graphql, actions, reporter }) => { 4 | const { createPage } = actions 5 | 6 | const blogresult = await graphql(` 7 | query { 8 | allContentfulBlogPost(sort: { fields: publishDate, order: DESC }) { 9 | edges { 10 | node { 11 | id 12 | slug 13 | } 14 | next { 15 | title 16 | slug 17 | } 18 | previous { 19 | title 20 | slug 21 | } 22 | } 23 | } 24 | allContentfulCategory { 25 | edges { 26 | node { 27 | categorySlug 28 | id 29 | category 30 | blogpost { 31 | title 32 | } 33 | } 34 | } 35 | } 36 | } 37 | `) 38 | 39 | if (blogresult.errors) { 40 | reporter.panicOnBuild(`GraphQL のクエリでエラーが発生しました`) 41 | return 42 | } 43 | 44 | blogresult.data.allContentfulBlogPost.edges.forEach( 45 | ({ node, next, previous }) => { 46 | createPage({ 47 | path: `/blog/post/${node.slug}/`, 48 | component: path.resolve(`./src/templates/blogpost-template.js`), 49 | context: { 50 | id: node.id, 51 | next, 52 | previous, 53 | }, 54 | }) 55 | } 56 | ) 57 | 58 | const blogPostsPerPage = 6 //１ページに表示する記事の数 59 | const blogPosts = blogresult.data.allContentfulBlogPost.edges.length //記事の総数 60 | const blogPages = Math.ceil(blogPosts / blogPostsPerPage) //記事一覧ページの総数 61 | 62 | Array.from({ length: blogPages }).forEach((_, i) => { 63 | createPage({ 64 | path: i === 0 ? `/blog/` : `/blog/${i + 1}/`, 65 | component: path.resolve("./src/templates/blog-template.js"), 66 | context: { 67 | skip: blogPostsPerPage * i, 68 | limit: blogPostsPerPage, 69 | currentPage: i + 1, //現在のページ番号 70 | isFirst: i + 1 === 1, //最初のページ 71 | isLast: i + 1 === blogPages, //最後のページ 72 | }, 73 | }) 74 | }) 75 | 76 | blogresult.data.allContentfulCategory.edges.forEach(({ node }) => { 77 | const catPostsPerPage = 6 //１ページに表示する記事の数 78 | const catPosts = node.blogpost.length //カテゴリーに属した記事の総数 79 | const catPages = Math.ceil(catPosts / catPostsPerPage) //カテゴリーページの総数 80 | 81 | Array.from({ length: catPages }).forEach((_, i) => { 82 | createPage({ 83 | path: 84 | i === 0 85 | ? `/cat/${node.categorySlug}/` 86 | : `/cat/${node.categorySlug}/${i + 1}/`, 87 | component: path.resolve(`./src/templates/cat-template.js`), 88 | context: { 89 | catid: node.id, 90 | catname: node.category, 91 | catslug: node.categorySlug, 92 | skip: catPostsPerPage * i, 93 | limit: catPostsPerPage, 94 | currentPage: i + 1, //現在のページ番号 95 | isFirst: i + 1 === 1, //最初のページ 96 | isLast: i + 1 === catPages, //最後のページ 97 | }, 98 | }) 99 | }) 100 | }) 101 | } 102 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mysite-part2-gatsby-v4", 3 | "private": true, 4 | "description": "「Webサイト高速化のための 静的サイトジェネレーター活用入門」で作成するプロジェクトデータです", 5 | "homepage": "https://github.com/ebisucom/gatsbyjs-book", 6 | "author": "エビスコム - EBISUCOM (https://ebisu.com/)", 7 | "version": "1.2.0", 8 | "scripts": { 9 | "build": "gatsby build", 10 | "develop": "gatsby develop", 11 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 12 | "start": "npm run develop", 13 | "serve": "gatsby serve", 14 | "clean": "gatsby clean", 15 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 16 | }, 17 | "dependencies": { 18 | "@contentful/rich-text-plain-text-renderer": "^15.6.2", 19 | "@contentful/rich-text-types": "^15.6.2", 20 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 21 | "@fortawesome/free-brands-svg-icons": "^5.15.4", 22 | "@fortawesome/free-regular-svg-icons": "^5.15.4", 23 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 24 | "@fortawesome/react-fontawesome": "^0.1.16", 25 | "gatsby": "^4.1.2", 26 | "gatsby-plugin-image": "^2.1.0", 27 | "gatsby-plugin-manifest": "^4.1.1", 28 | "gatsby-plugin-offline": "^5.1.1", 29 | "gatsby-plugin-react-helmet": "^5.1.0", 30 | "gatsby-plugin-sharp": "^4.1.1", 31 | "gatsby-source-contentful": "^6.1.1", 32 | "gatsby-source-filesystem": "^4.1.0", 33 | "gatsby-transformer-sharp": "^4.1.0", 34 | "react": "^17.0.2", 35 | "react-dom": "^17.0.2", 36 | "react-helmet": "^6.1.0" 37 | }, 38 | "devDependencies": { 39 | "prettier": "2.2.1" 40 | }, 41 | "repository": { 42 | "type": "git", 43 | "url": "https://github.com/ebisucom/gatsbyjs-book.git", 44 | "directory": "mysite-part2-gatsby-v4" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, useStaticQuery, Link } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 6 | import { 7 | faTwitter, 8 | faFacebookSquare, 9 | faInstagram, 10 | } from "@fortawesome/free-brands-svg-icons" 11 | 12 | const Footer = () => { 13 | const data = useStaticQuery(graphql` 14 | query { 15 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 16 | childImageSharp { 17 | gatsbyImageData(quality: 90, layout: FULL_WIDTH) 18 | } 19 | } 20 | } 21 | `) 22 | 23 | return ( 24 | 72 | ) 73 | } 74 | 75 | export default Footer 76 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | const Header = () => ( 5 |
6 |
7 |
8 | 9 | 10 | 11 | ESSENTIALS 12 | 16 | 17 | 18 |
19 | 32 |
33 |
34 | ) 35 | 36 | export default Header 37 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Header from "../components/header" 4 | import Footer from "../components/footer" 5 | 6 | import "./layout.css" 7 | 8 | import "@fortawesome/fontawesome-svg-core/styles.css" 9 | import { config } from "@fortawesome/fontawesome-svg-core" 10 | config.autoAddCss = false 11 | 12 | const Layout = ({ children }) => ( 13 |
14 |
15 | 16 | {children} 17 | 18 |
19 |
20 | ) 21 | 22 | export default Layout 23 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Helmet } from "react-helmet" 3 | import { useStaticQuery, graphql } from "gatsby" 4 | 5 | const Seo = props => { 6 | const data = useStaticQuery(graphql` 7 | query { 8 | site { 9 | siteMetadata { 10 | title 11 | lang 12 | description 13 | siteUrl 14 | locale 15 | fbappid 16 | } 17 | } 18 | } 19 | `) 20 | 21 | const title = props.pagetitle 22 | ? `${props.pagetitle} | ${data.site.siteMetadata.title}` 23 | : data.site.siteMetadata.title 24 | 25 | const description = props.pagedesc || data.site.siteMetadata.description 26 | 27 | const url = props.pagepath 28 | ? `${data.site.siteMetadata.siteUrl}${props.pagepath}` 29 | : data.site.siteMetadata.siteUrl 30 | 31 | const imgurl = props.pageimg 32 | ? `${data.site.siteMetadata.siteUrl}${props.pageimg}` 33 | : props.blogimg || `${data.site.siteMetadata.siteUrl}/thumb.jpg` 34 | const imgw = props.pageimgw || 1280 35 | const imgh = props.pageimgh || 640 36 | 37 | return ( 38 | 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | 61 | export default Seo 62 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/about.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/berry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/berry.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/beverage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/beverage.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/fruit.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/grain.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/hero.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/icon.png -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/logo-w.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/logo.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/src/images/pattern.jpg -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/images/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Layout from "../components/layout" 3 | 4 | import Seo from "../components/seo" 5 | 6 | const NotFound = ({ location }) => ( 7 | 8 | 9 |

10 | お探しのページが見つかりませんでした 11 |

12 | 13 | ) 14 | 15 | export default NotFound 16 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { faUtensils, faCheckSquare } from "@fortawesome/free-solid-svg-icons" 9 | 10 | import Seo from "../components/seo" 11 | 12 | const About = ({ data, location }) => ( 13 | 14 | 22 |
23 |
24 | 28 |
29 |
30 |
31 |
32 |

ESSENTIALSについて

33 | 39 |
40 |

41 | 体に必要不可欠な食べ物についての情報を発信しているサイトです。「おいしい食材をおいしく食べる」をモットーにしています。特に力を入れているのが、フルーツ、穀物、飲み物の３つです。 42 |

43 |

44 | 45 | 公開している記事 46 |

47 |

48 | これらについて、次のような記事やレシピなどを書いて公開しています。 49 |

50 |
    51 |
  • ヘルシーで美味しい料理の研究・レビュー・レシピ。
    • 52 |
  • 一人でも、家族や友人と一緒にでも楽しめる料理。
    • 53 |
  • ユーザー間のオープンなコミュニケーションを基盤とした情報。
    • 54 |
55 |

56 | 57 | よく聞かれること 58 |

59 |

60 | よく聞かれることなのですが、私たちはスタートアップではありません。私たちはまだスタートしたばかりで、より多くの人々が食べやすい食べ物がもたらす違いを発見できるように、成長しサービスを改善する機会を待っています。 61 |

62 |

気長にお付き合いいただければ幸いです。

63 |
64 |
65 |
66 | 67 | ) 68 | 69 | export const query = graphql` 70 | query { 71 | about: file(relativePath: { eq: "about.jpg" }) { 72 | childImageSharp { 73 | gatsbyImageData(layout: FULL_WIDTH) 74 | original { 75 | src 76 | height 77 | width 78 | } 79 | } 80 | } 81 | } 82 | ` 83 | 84 | export default About 85 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/templates/blog-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | import Layout from "../components/layout" 5 | 6 | import Seo from "../components/seo" 7 | 8 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 9 | import { 10 | faChevronLeft, 11 | faChevronRight, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | const BlogTemp = ({ data, location, pageContext }) => ( 15 | 16 | 21 |
22 |
23 |

RECENT POSTS

24 |
25 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 26 |
27 | 28 |
29 | 34 |
35 |

{node.title}

36 | 37 |
38 | ))} 39 |
40 | 41 |
    42 | {!pageContext.isFirst && ( 43 |
  • 44 | 52 | 53 | 前のページ 54 | 55 |
    • 56 | )} 57 | {!pageContext.isLast && ( 58 |
  • 59 | 60 | 次のページ 61 | 62 | 63 |
    • 64 | )} 65 |
66 |
67 |
68 | 69 | ) 70 | 71 | export const query = graphql` 72 | query($skip: Int!, $limit: Int!) { 73 | allContentfulBlogPost( 74 | sort: { order: DESC, fields: publishDate } 75 | skip: $skip 76 | limit: $limit 77 | ) { 78 | edges { 79 | node { 80 | title 81 | id 82 | slug 83 | eyecatch { 84 | gatsbyImageData(width: 500, layout: CONSTRAINED) 85 | description 86 | } 87 | } 88 | } 89 | } 90 | } 91 | ` 92 | 93 | export default BlogTemp 94 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/templates/blogpost-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | import Layout from "../components/layout" 5 | 6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 7 | import { faClock, faFolderOpen } from "@fortawesome/free-regular-svg-icons" 8 | import { 9 | faChevronLeft, 10 | faChevronRight, 11 | faCheckSquare, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | import { renderRichText } from "gatsby-source-contentful/rich-text" 15 | import { BLOCKS } from "@contentful/rich-text-types" 16 | import { documentToPlainTextString } from "@contentful/rich-text-plain-text-renderer" 17 | 18 | import Seo from "../components/seo" 19 | 20 | const options = { 21 | renderNode: { 22 | [BLOCKS.HEADING_2]: (node, children) => ( 23 |

24 | 25 | {children} 26 |

27 | ), 28 | [BLOCKS.EMBEDDED_ASSET]: node => ( 29 | 37 | ), 38 | }, 39 | renderText: text => { 40 | return text.split("\n").reduce((children, textSegment, index) => { 41 | return [...children, index > 0 &&
, textSegment] 42 | }, []) 43 | }, 44 | } 45 | 46 | const BlogpostTemp = ({ data, pageContext, location }) => ( 47 | 48 | 58 |
59 |
60 | 64 |
65 |
66 |
67 |
68 |

{data.contentfulBlogPost.title}

69 | 85 |
86 | {renderRichText(data.contentfulBlogPost.content, options)} 87 |
88 |
    89 | {pageContext.next && ( 90 |
  • 91 | 92 | 93 | {pageContext.next.title} 94 | 95 |
    • 96 | )} 97 | {pageContext.previous && ( 98 |
  • 99 | 100 | {pageContext.previous.title} 101 | 102 | 103 |
    • 104 | )} 105 |
106 |
107 |
108 | 109 | ) 110 | 111 | export const query = graphql` 112 | query($id: String!) { 113 | contentfulBlogPost(id: { eq: $id }) { 114 | title 115 | publishDateJP: publishDate(formatString: "YYYY年MM月DD日") 116 | publishDate 117 | category { 118 | category 119 | categorySlug 120 | id 121 | } 122 | eyecatch { 123 | gatsbyImageData(layout: FULL_WIDTH) 124 | description 125 | file { 126 | details { 127 | image { 128 | width 129 | height 130 | } 131 | } 132 | url 133 | } 134 | } 135 | content { 136 | raw 137 | references { 138 | ... on ContentfulAsset { 139 | contentful_id 140 | __typename 141 | gatsbyImageData(layout: FULL_WIDTH) 142 | title 143 | description 144 | } 145 | } 146 | } 147 | } 148 | } 149 | ` 150 | 151 | export default BlogpostTemp 152 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/templates/cat-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import { GatsbyImage } from "gatsby-plugin-image" 4 | import Layout from "../components/layout" 5 | 6 | import Seo from "../components/seo" 7 | 8 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 9 | import { 10 | faChevronLeft, 11 | faChevronRight, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | const CatTemp = ({ data, location, pageContext }) => ( 15 | 16 | 21 |
22 |
23 |

CATEGORY: {pageContext.catname}

24 |
25 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 26 |
27 | 28 |
29 | 34 |
35 |

{node.title}

36 | 37 |
38 | ))} 39 |
40 | 41 |
    42 | {!pageContext.isFirst && ( 43 |
  • 44 | 54 | 55 | 前のページ 56 | 57 |
    • 58 | )} 59 | {!pageContext.isLast && ( 60 |
  • 61 | 67 | 次のページ 68 | 69 | 70 |
    • 71 | )} 72 |
73 |
74 |
75 | 76 | ) 77 | 78 | export const query = graphql` 79 | query($catid: String!, $skip: Int!, $limit: Int!) { 80 | allContentfulBlogPost( 81 | sort: { order: DESC, fields: publishDate } 82 | skip: $skip 83 | limit: $limit 84 | filter: { category: { elemMatch: { id: { eq: $catid } } } } 85 | ) { 86 | edges { 87 | node { 88 | title 89 | id 90 | slug 91 | eyecatch { 92 | gatsbyImageData(width: 500, layout: CONSTRAINED) 93 | description 94 | } 95 | } 96 | } 97 | } 98 | } 99 | ` 100 | 101 | export default CatTemp 102 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/src/utils/useContentfulImage.js: -------------------------------------------------------------------------------- 1 | import { useStaticQuery, graphql } from "gatsby" 2 | 3 | export default assetUrl => { 4 | const { allContentfulAsset } = useStaticQuery(graphql` 5 | query { 6 | allContentfulAsset { 7 | nodes { 8 | file { 9 | url 10 | } 11 | fluid(maxWidth: 785) { 12 | ...GatsbyContentfulFluid_withWebp 13 | } 14 | } 15 | } 16 | } 17 | `) 18 | 19 | return allContentfulAsset.nodes.find(n => n.file.url === assetUrl).fluid 20 | } 21 | -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/static/favicon.ico -------------------------------------------------------------------------------- /mysite-part2-gatsby-v4/static/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2-gatsby-v4/static/thumb.jpg -------------------------------------------------------------------------------- /mysite-part2/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /mysite-part2/.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /mysite-part2/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /mysite-part2/README.md: -------------------------------------------------------------------------------- 1 | # 第２部 完成サンプル 2 | 3 | **Netlifyにデプロイしたサイト** ： https://gatsby-essentials.netlify.app/ 4 | 5 | 6 | ------------------------------------------------------ 7 | 8 | 『Webサイト高速化のための 静的サイトジェネレーター活用入門』 9 | GatsbyJSで実現する、高速＆実用的なサイト構築 10 | 11 | * [サポートサイト](https://book.mynavi.jp/supportsite/detail/9784839973001.html) 12 | * [書籍情報](https://ebisu.com/gatsbyjs-book/) 13 | -------------------------------------------------------------------------------- /mysite-part2/gatsby-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Configure your Gatsby site with this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/gatsby-config/ 5 | */ 6 | 7 | module.exports = { 8 | /* Your site config here */ 9 | siteMetadata: { 10 | title: `ESSENTIALS`, 11 | description: ` おいしい食材と食事を探求するサイト`, 12 | lang: `ja`, 13 | siteUrl: `https://********.netlify.app`, 14 | locale: `ja_JP`, 15 | fbappid: `XXXXXXXXXXXXXXXXXXXXX`, 16 | }, 17 | plugins: [ 18 | `gatsby-transformer-sharp`, 19 | `gatsby-plugin-sharp`, 20 | { 21 | resolve: `gatsby-source-filesystem`, 22 | options: { 23 | name: `images`, 24 | path: `${__dirname}/src/images/`, 25 | }, 26 | }, 27 | `gatsby-plugin-react-helmet`, 28 | { 29 | resolve: `gatsby-plugin-manifest`, 30 | options: { 31 | name: `ESSENTIALS エッセンシャルズ`, 32 | short_name: `ESSENTIALS`, 33 | start_url: `/`, 34 | background_color: `#ffffff`, 35 | theme_color: `#477294`, 36 | display: `standalone`, 37 | icon: `src/images/icon.png`, 38 | }, 39 | }, 40 | `gatsby-plugin-offline`, 41 | { 42 | resolve: `gatsby-source-contentful`, 43 | options: { 44 | spaceId: process.env.CONTENTFUL_SPACE_ID, 45 | accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, 46 | host: process.env.CONTENTFUL_HOST, 47 | }, 48 | }, 49 | ], 50 | } 51 | -------------------------------------------------------------------------------- /mysite-part2/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | 3 | exports.createPages = async ({ graphql, actions, reporter }) => { 4 | const { createPage } = actions 5 | 6 | const blogresult = await graphql(` 7 | query { 8 | allContentfulBlogPost(sort: { fields: publishDate, order: DESC }) { 9 | edges { 10 | node { 11 | id 12 | slug 13 | } 14 | next { 15 | title 16 | slug 17 | } 18 | previous { 19 | title 20 | slug 21 | } 22 | } 23 | } 24 | allContentfulCategory { 25 | edges { 26 | node { 27 | categorySlug 28 | id 29 | category 30 | blogpost { 31 | title 32 | } 33 | } 34 | } 35 | } 36 | } 37 | `) 38 | 39 | if (blogresult.errors) { 40 | reporter.panicOnBuild(`GraphQL のクエリでエラーが発生しました`) 41 | return 42 | } 43 | 44 | blogresult.data.allContentfulBlogPost.edges.forEach( 45 | ({ node, next, previous }) => { 46 | createPage({ 47 | path: `/blog/post/${node.slug}/`, 48 | component: path.resolve(`./src/templates/blogpost-template.js`), 49 | context: { 50 | id: node.id, 51 | next, 52 | previous, 53 | }, 54 | }) 55 | } 56 | ) 57 | 58 | const blogPostsPerPage = 6 //１ページに表示する記事の数 59 | const blogPosts = blogresult.data.allContentfulBlogPost.edges.length //記事の総数 60 | const blogPages = Math.ceil(blogPosts / blogPostsPerPage) //記事一覧ページの総数 61 | 62 | Array.from({ length: blogPages }).forEach((_, i) => { 63 | createPage({ 64 | path: i === 0 ? `/blog/` : `/blog/${i + 1}/`, 65 | component: path.resolve("./src/templates/blog-template.js"), 66 | context: { 67 | skip: blogPostsPerPage * i, 68 | limit: blogPostsPerPage, 69 | currentPage: i + 1, //現在のページ番号 70 | isFirst: i + 1 === 1, //最初のページ 71 | isLast: i + 1 === blogPages, //最後のページ 72 | }, 73 | }) 74 | }) 75 | 76 | blogresult.data.allContentfulCategory.edges.forEach(({ node }) => { 77 | const catPostsPerPage = 6 //１ページに表示する記事の数 78 | const catPosts = node.blogpost.length //カテゴリーに属した記事の総数 79 | const catPages = Math.ceil(catPosts / catPostsPerPage) //カテゴリーページの総数 80 | 81 | Array.from({ length: catPages }).forEach((_, i) => { 82 | createPage({ 83 | path: 84 | i === 0 85 | ? `/cat/${node.categorySlug}/` 86 | : `/cat/${node.categorySlug}/${i + 1}/`, 87 | component: path.resolve(`./src/templates/cat-template.js`), 88 | context: { 89 | catid: node.id, 90 | catname: node.category, 91 | catslug: node.categorySlug, 92 | skip: catPostsPerPage * i, 93 | limit: catPostsPerPage, 94 | currentPage: i + 1, //現在のページ番号 95 | isFirst: i + 1 === 1, //最初のページ 96 | isLast: i + 1 === catPages, //最後のページ 97 | }, 98 | }) 99 | }) 100 | }) 101 | } 102 | -------------------------------------------------------------------------------- /mysite-part2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mysite-part2", 3 | "private": true, 4 | "description": "「Webサイト高速化のための 静的サイトジェネレーター活用入門」で作成するプロジェクトデータです", 5 | "homepage": "https://github.com/ebisucom/gatsbyjs-book", 6 | "author": "エビスコム - EBISUCOM (https://ebisu.com/)", 7 | "version": "1.0.0", 8 | "scripts": { 9 | "build": "gatsby build", 10 | "develop": "gatsby develop", 11 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 12 | "start": "npm run develop", 13 | "serve": "gatsby serve", 14 | "clean": "gatsby clean", 15 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 16 | }, 17 | "dependencies": { 18 | "@contentful/rich-text-plain-text-renderer": "^14.1.2", 19 | "@contentful/rich-text-react-renderer": "^13.4.0", 20 | "@contentful/rich-text-types": "^14.1.2", 21 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 22 | "@fortawesome/free-brands-svg-icons": "^5.15.4", 23 | "@fortawesome/free-regular-svg-icons": "^5.15.4", 24 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 25 | "@fortawesome/react-fontawesome": "^0.1.16", 26 | "gatsby": "^2.32.13", 27 | "gatsby-image": "^2.11.0", 28 | "gatsby-plugin-manifest": "^2.12.1", 29 | "gatsby-plugin-offline": "^3.10.2", 30 | "gatsby-plugin-react-helmet": "^3.10.0", 31 | "gatsby-plugin-sharp": "^2.14.4", 32 | "gatsby-source-contentful": "^2.3.56", 33 | "gatsby-source-filesystem": "^2.11.1", 34 | "gatsby-transformer-sharp": "^2.12.1", 35 | "react": "^16.14.0", 36 | "react-dom": "^16.14.0", 37 | "react-helmet": "^6.1.0" 38 | }, 39 | "devDependencies": { 40 | "prettier": "2.0.4" 41 | }, 42 | "repository": { 43 | "type": "git", 44 | "url": "https://github.com/ebisucom/gatsbyjs-book.git", 45 | "directory": "mysite-part2" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /mysite-part2/src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, useStaticQuery, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 6 | import { 7 | faTwitter, 8 | faFacebookSquare, 9 | faInstagram, 10 | } from "@fortawesome/free-brands-svg-icons" 11 | 12 | export default () => { 13 | const data = useStaticQuery(graphql` 14 | query { 15 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 16 | childImageSharp { 17 | fluid(maxWidth: 1920, quality: 90) { 18 | ...GatsbyImageSharpFluid_withWebp 19 | } 20 | } 21 | } 22 | } 23 | `) 24 | 25 | return ( 26 | 74 | ) 75 | } 76 | -------------------------------------------------------------------------------- /mysite-part2/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | export default () => ( 5 |
6 |
7 |
8 | 9 | 10 | 11 | ESSENTIALS 12 | 16 | 17 | 18 |
19 | 32 |
33 |
34 | ) 35 | -------------------------------------------------------------------------------- /mysite-part2/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Header from "../components/header" 4 | import Footer from "../components/footer" 5 | 6 | import "./layout.css" 7 | 8 | import "@fortawesome/fontawesome-svg-core/styles.css" 9 | import { config } from "@fortawesome/fontawesome-svg-core" 10 | config.autoAddCss = false 11 | 12 | export default ({ children }) => ( 13 |
14 |
15 | 16 | {children} 17 | 18 |
19 |
20 | ) 21 | -------------------------------------------------------------------------------- /mysite-part2/src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Helmet } from "react-helmet" 3 | import { useStaticQuery, graphql } from "gatsby" 4 | 5 | export default props => { 6 | const data = useStaticQuery(graphql` 7 | query { 8 | site { 9 | siteMetadata { 10 | title 11 | lang 12 | description 13 | siteUrl 14 | locale 15 | fbappid 16 | } 17 | } 18 | } 19 | `) 20 | 21 | const title = props.pagetitle 22 | ? `${props.pagetitle} | ${data.site.siteMetadata.title}` 23 | : data.site.siteMetadata.title 24 | 25 | const description = props.pagedesc || data.site.siteMetadata.description 26 | 27 | const url = props.pagepath 28 | ? `${data.site.siteMetadata.siteUrl}${props.pagepath}` 29 | : data.site.siteMetadata.siteUrl 30 | 31 | const imgurl = props.pageimg 32 | ? `${data.site.siteMetadata.siteUrl}${props.pageimg}` 33 | : props.blogimg || `${data.site.siteMetadata.siteUrl}/thumb.jpg` 34 | const imgw = props.pageimgw || 1280 35 | const imgh = props.pageimgh || 640 36 | 37 | return ( 38 | 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /mysite-part2/src/images/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/about.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/berry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/berry.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/beverage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/beverage.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/fruit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/fruit.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/grain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/grain.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/hero.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/icon.png -------------------------------------------------------------------------------- /mysite-part2/src/images/logo-w.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part2/src/images/logo.svg: -------------------------------------------------------------------------------- 1 | ESSENTIALS -------------------------------------------------------------------------------- /mysite-part2/src/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/src/images/pattern.jpg -------------------------------------------------------------------------------- /mysite-part2/src/images/wave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mysite-part2/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Layout from "../components/layout" 3 | 4 | import SEO from "../components/seo" 5 | 6 | export default ({ location }) => ( 7 | 8 | 9 |

10 | お探しのページが見つかりませんでした 11 |

12 | 13 | ) 14 | -------------------------------------------------------------------------------- /mysite-part2/src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 8 | import { faUtensils, faCheckSquare } from "@fortawesome/free-solid-svg-icons" 9 | 10 | import SEO from "../components/seo" 11 | 12 | export default ({ data, location }) => ( 13 | 14 | 22 |
23 |
24 | ブルーベリー＆ヨーグルト 28 |
29 |
30 |
31 |
32 |

ESSENTIALSについて

33 | 39 |
40 |

41 | 体に必要不可欠な食べ物についての情報を発信しているサイトです。「おいしい食材をおいしく食べる」をモットーにしています。特に力を入れているのが、フルーツ、穀物、飲み物の３つです。 42 |

43 |

44 | 45 | 公開している記事 46 |

47 |

48 | これらについて、次のような記事やレシピなどを書いて公開しています。 49 |

50 |
    51 |
  • ヘルシーで美味しい料理の研究・レビュー・レシピ。
    • 52 |
  • 一人でも、家族や友人と一緒にでも楽しめる料理。
    • 53 |
  • ユーザー間のオープンなコミュニケーションを基盤とした情報。
    • 54 |
55 |

56 | 57 | よく聞かれること 58 |

59 |

60 | よく聞かれることなのですが、私たちはスタートアップではありません。私たちはまだスタートしたばかりで、より多くの人々が食べやすい食べ物がもたらす違いを発見できるように、成長しサービスを改善する機会を待っています。 61 |

62 |

気長にお付き合いいただければ幸いです。

63 |
64 |
65 |
66 | 67 | ) 68 | 69 | export const query = graphql` 70 | query { 71 | about: file(relativePath: { eq: "about.jpg" }) { 72 | childImageSharp { 73 | fluid(maxWidth: 1600) { 74 | ...GatsbyImageSharpFluid_withWebp 75 | } 76 | original { 77 | src 78 | height 79 | width 80 | } 81 | } 82 | } 83 | } 84 | ` 85 | -------------------------------------------------------------------------------- /mysite-part2/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | import Layout from "../components/layout" 6 | 7 | import SEO from "../components/seo" 8 | 9 | export default ({ data }) => ( 10 | 11 | 12 |
13 |
14 | 19 |
20 |
21 |

22 | There is no love sincerer than 23 |
the love of food. 24 |

25 |

食物を愛するよりも誠実な愛はない ― バーナード・ショー

26 |
27 |
28 | 33 | 37 | 38 | 39 |
40 |
41 |
42 |
43 |

44 | Food Essence 45 |

46 |
47 |
48 |
49 | 50 |
51 |

フルーツ

52 |

FRUIT

53 |

54 | 甘くてすっぱくておいしい果実たち。 55 |
56 | 旬のフルーツを満喫します。 57 |

58 |
59 |
60 |
61 | 62 |
63 |

穀物

64 |

GRAIN

65 |

66 | 食事の基本となる穀物。 67 |
68 | 毎日の活動のエネルギー源になります。 69 |

70 |
71 |
72 |
73 | 74 |
75 |

飲み物

76 |

BEVERAGE

77 |

78 | リラックスするのに欠かせない飲み物。 79 |
80 | お気に入りの一杯はありますか？ 81 |

82 |
83 |
84 |
85 |
86 |
87 |

Photo

88 |
89 | 赤く熟したベリー 94 |
95 |
96 | 97 |
98 |
99 |

RECENT POSTS

100 |
101 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 102 |
103 | 104 |
105 | {node.eyecatch.description} 110 |
111 |

{node.title}

112 | 113 |
114 | ))} 115 |
116 |
117 |
118 | 119 | ) 120 | 121 | export const query = graphql` 122 | query { 123 | hero: file(relativePath: { eq: "hero.jpg" }) { 124 | childImageSharp { 125 | fluid(maxWidth: 1600) { 126 | ...GatsbyImageSharpFluid_withWebp 127 | } 128 | } 129 | } 130 | fruit: file(relativePath: { eq: "fruit.jpg" }) { 131 | childImageSharp { 132 | fluid(maxWidth: 320) { 133 | ...GatsbyImageSharpFluid_withWebp 134 | } 135 | } 136 | } 137 | grain: file(relativePath: { eq: "grain.jpg" }) { 138 | childImageSharp { 139 | fluid(maxWidth: 320) { 140 | ...GatsbyImageSharpFluid_withWebp 141 | } 142 | } 143 | } 144 | beverage: file(relativePath: { eq: "beverage.jpg" }) { 145 | childImageSharp { 146 | fluid(maxWidth: 320) { 147 | ...GatsbyImageSharpFluid_withWebp 148 | } 149 | } 150 | } 151 | berry: file(relativePath: { eq: "berry.jpg" }) { 152 | childImageSharp { 153 | fluid(maxWidth: 1600) { 154 | ...GatsbyImageSharpFluid_withWebp 155 | } 156 | } 157 | } 158 | pattern: file(relativePath: { eq: "pattern.jpg" }) { 159 | childImageSharp { 160 | fluid(maxWidth: 1920, quality: 90) { 161 | ...GatsbyImageSharpFluid_withWebp 162 | } 163 | } 164 | } 165 | allContentfulBlogPost( 166 | sort: { order: DESC, fields: publishDate } 167 | skip: 0 168 | limit: 4 169 | ) { 170 | edges { 171 | node { 172 | title 173 | id 174 | slug 175 | eyecatch { 176 | fluid(maxWidth: 573) { 177 | ...GatsbyContentfulFluid_withWebp 178 | } 179 | description 180 | } 181 | } 182 | } 183 | } 184 | } 185 | ` 186 | -------------------------------------------------------------------------------- /mysite-part2/src/templates/blog-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | import Layout from "../components/layout" 5 | 6 | import SEO from "../components/seo" 7 | 8 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 9 | import { 10 | faChevronLeft, 11 | faChevronRight, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | export default ({ data, location, pageContext }) => ( 15 | 16 | 21 |
22 |
23 |

RECENT POSTS

24 |
25 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 26 |
27 | 28 |
29 | {node.eyecatch.description} 34 |
35 |

{node.title}

36 | 37 |
38 | ))} 39 |
40 | 41 |
    42 | {!pageContext.isFirst && ( 43 |
  • 44 | 52 | 53 | 前のページ 54 | 55 |
    • 56 | )} 57 | {!pageContext.isLast && ( 58 |
  • 59 | 60 | 次のページ 61 | 62 | 63 |
    • 64 | )} 65 |
66 |
67 |
68 | 69 | ) 70 | 71 | export const query = graphql` 72 | query($skip: Int!, $limit: Int!) { 73 | allContentfulBlogPost( 74 | sort: { order: DESC, fields: publishDate } 75 | skip: $skip 76 | limit: $limit 77 | ) { 78 | edges { 79 | node { 80 | title 81 | id 82 | slug 83 | eyecatch { 84 | fluid(maxWidth: 500) { 85 | ...GatsbyContentfulFluid_withWebp 86 | } 87 | description 88 | } 89 | } 90 | } 91 | } 92 | } 93 | ` 94 | -------------------------------------------------------------------------------- /mysite-part2/src/templates/blogpost-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | import Layout from "../components/layout" 5 | 6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 7 | import { faClock, faFolderOpen } from "@fortawesome/free-regular-svg-icons" 8 | import { 9 | faChevronLeft, 10 | faChevronRight, 11 | faCheckSquare, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | import { documentToReactComponents } from "@contentful/rich-text-react-renderer" 15 | import { BLOCKS } from "@contentful/rich-text-types" 16 | import useContentfulImage from "../utils/useContentfulImage" 17 | import { documentToPlainTextString } from "@contentful/rich-text-plain-text-renderer" 18 | 19 | import SEO from "../components/seo" 20 | 21 | const options = { 22 | renderNode: { 23 | [BLOCKS.HEADING_2]: (node, children) => ( 24 |

25 | 26 | {children} 27 |

28 | ), 29 | [BLOCKS.EMBEDDED_ASSET]: node => ( 30 | { 38 | ), 39 | }, 40 | renderText: text => { 41 | return text.split("\n").reduce((children, textSegment, index) => { 42 | return [...children, index > 0 &&
, textSegment] 43 | }, []) 44 | }, 45 | } 46 | 47 | export default ({ data, pageContext, location }) => ( 48 | 49 | 59 |
60 |
61 | {data.contentfulBlogPost.eyecatch.description} 65 |
66 |
67 |
68 |
69 |

{data.contentfulBlogPost.title}

70 | 86 |
87 | {documentToReactComponents( 88 | data.contentfulBlogPost.content.json, 89 | options 90 | )} 91 |
92 |
    93 | {pageContext.next && ( 94 |
  • 95 | 96 | 97 | {pageContext.next.title} 98 | 99 |
    • 100 | )} 101 | {pageContext.previous && ( 102 |
  • 103 | 104 | {pageContext.previous.title} 105 | 106 | 107 |
    • 108 | )} 109 |
110 |
111 |
112 | 113 | ) 114 | 115 | export const query = graphql` 116 | query($id: String!) { 117 | contentfulBlogPost(id: { eq: $id }) { 118 | title 119 | publishDateJP: publishDate(formatString: "YYYY年MM月DD日") 120 | publishDate 121 | category { 122 | category 123 | categorySlug 124 | id 125 | } 126 | eyecatch { 127 | fluid(maxWidth: 1600) { 128 | ...GatsbyContentfulFluid_withWebp 129 | } 130 | description 131 | file { 132 | details { 133 | image { 134 | width 135 | height 136 | } 137 | } 138 | url 139 | } 140 | } 141 | content { 142 | json 143 | } 144 | } 145 | } 146 | ` 147 | -------------------------------------------------------------------------------- /mysite-part2/src/templates/cat-template.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Img from "gatsby-image" 4 | import Layout from "../components/layout" 5 | 6 | import SEO from "../components/seo" 7 | 8 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 9 | import { 10 | faChevronLeft, 11 | faChevronRight, 12 | } from "@fortawesome/free-solid-svg-icons" 13 | 14 | export default ({ data, location, pageContext }) => ( 15 | 16 | 21 |
22 |
23 |

CATEGORY: {pageContext.catname}

24 |
25 | {data.allContentfulBlogPost.edges.map(({ node }) => ( 26 |
27 | 28 |
29 | {node.eyecatch.description} 34 |
35 |

{node.title}

36 | 37 |
38 | ))} 39 |
40 | 41 |
    42 | {!pageContext.isFirst && ( 43 |
  • 44 | 54 | 55 | 前のページ 56 | 57 |
    • 58 | )} 59 | {!pageContext.isLast && ( 60 |
  • 61 | 67 | 次のページ 68 | 69 | 70 |
    • 71 | )} 72 |
73 |
74 |
75 | 76 | ) 77 | 78 | export const query = graphql` 79 | query($catid: String!, $skip: Int!, $limit: Int!) { 80 | allContentfulBlogPost( 81 | sort: { order: DESC, fields: publishDate } 82 | skip: $skip 83 | limit: $limit 84 | filter: { category: { elemMatch: { id: { eq: $catid } } } } 85 | ) { 86 | edges { 87 | node { 88 | title 89 | id 90 | slug 91 | eyecatch { 92 | fluid(maxWidth: 500) { 93 | ...GatsbyContentfulFluid_withWebp 94 | } 95 | description 96 | } 97 | } 98 | } 99 | } 100 | } 101 | ` 102 | -------------------------------------------------------------------------------- /mysite-part2/src/utils/useContentfulImage.js: -------------------------------------------------------------------------------- 1 | import { useStaticQuery, graphql } from "gatsby" 2 | 3 | export default assetUrl => { 4 | const { allContentfulAsset } = useStaticQuery(graphql` 5 | query { 6 | allContentfulAsset { 7 | nodes { 8 | file { 9 | url 10 | } 11 | fluid(maxWidth: 785) { 12 | ...GatsbyContentfulFluid_withWebp 13 | } 14 | } 15 | } 16 | } 17 | `) 18 | 19 | return allContentfulAsset.nodes.find(n => n.file.url === assetUrl).fluid 20 | } 21 | -------------------------------------------------------------------------------- /mysite-part2/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/static/favicon.ico -------------------------------------------------------------------------------- /mysite-part2/static/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/mysite-part2/static/thumb.jpg -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/readme.txt -------------------------------------------------------------------------------- /setup.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebisucom/gatsbyjs-book/0cfa867ddab6801696d53c717b92f3676e334536/setup.pdf --------------------------------------------------------------------------------