{"componentChunkName":"component---src-templates-blog-post-js","path":"/2019-08-22-gridsome/","webpackCompilationHash":"da658d138a5c02dfedf3","result":{"data":{"site":{"siteMetadata":{"title":"八王子わんにゃんクラブ","author":"technology unit of JOHAQ.COM.","siteUrl":"https://svc-802-wannyan-club.johaq.com","keywords":["八王子わんにゃんクラブ"],"disqusShortname":"johaq-com"}},"markdownRemark":{"id":"6f54c3ad-6ea3-528a-ab5a-bc8bde051055","excerpt":"Gridsomeはvue.jsベースのサイト生成ツールです。コンテンツのソースはHeadless CMSやAPIを使用したり、Markdown形式のファイルを使用することもできます。また、生成自体はNetlifyなどが提供するCIを活用し、github…","timeToRead":2,"html":"
\n

Gridsomeはvue.jsベースのサイト生成ツールです。コンテンツのソースはHeadless CMSやAPIを使用したり、Markdown形式のファイルを使用することもできます。また、生成自体はNetlifyなどが提供するCIを活用し、github等で管理しているドキュメントの更新をトリガーに自動で更新する仕組みも実現しています。

\n
\n

Why Gridsome?

\n\n

Learn more about how Gridsome works

\n
<template>\n  <Layout>\n    <div class=\"container-inner mx-auto my-16\">\n      <h1 class=\"text-4xl font-bold leading-tight\">{{ $page.post.title }}</h1>\n      <div class=\"text-xl text-gray-600 mb-8\">{{ $page.post.date }}</div>\n      <div class=\"markdown-body\" v-html=\"$page.post.content\" />\n    </div>\n  </Layout>\n</template>
\n

Prerequisites

\n

You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how Vue Single File components & GraphQL works is a plus, but not required. Gridsome is a great way to learn both.

\n

Gridsome requires Node.js and recommends Yarn. How to setup

\n

\n \n \n \n \n \n \n

\n

1. Install Gridsome CLI tool

\n

Using yarn:\nyarn global add @gridsome/cli

\n

Using npm:\nnpm install --global @gridsome/cli

\n

2. Create a Gridsome project

\n
    \n
  1. gridsome create my-gridsome-site to create a new project
    2. \n
  2. cd my-gridsome-site to open folder
    3. \n
  3. gridsome develop to start local dev server at http://localhost:8080
    4. \n
  4. Happy coding 🎉🙌
    5. \n
\n

3. Next steps

\n
    \n
  1. Create .vue components in the /pages directory to create page routes.
    2. \n
  2. Use gridsome build to generate static files in a /dist folder
    3. \n
  3. How it works
    4. \n
  4. How Pages work
    5. \n
  5. How to deploy
    6. \n
","fields":{"slug":"/2019-08-22-gridsome/"},"frontmatter":{"title":"Introduction to Gridsome","date":"August 22, 2019","published_time":"2019-08-22","description":"Gridsomeはvue.jsベースのサイト生成ツールです。コンテンツのソースはHeadless CMSやAPIを使用したり、Markdown形式のファイルを使用することもできます。また、生成自体はNetlifyなどが提供するCIを活用し、github等で管理しているドキュメントの更新をトリガーに自動で更新する仕組みも実現しています。","tags":["software","product","vue","markdown","gridsome"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAgP/2gAMAwEAAhADEAAAAcy6U1m2JB//xAAZEAADAAMAAAAAAAAAAAAAAAAAAQIQERL/2gAIAQEAAQUC6kVQOozs/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQACEv/aAAgBAwEBPwFwXBf/xAAWEQEBAQAAAAAAAAAAAAAAAAAAERL/2gAIAQIBAT8BrT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAbEAACAgMBAAAAAAAAAAAAAAAAARGBECExUf/aAAgBAQABPyFeg11xRI026zI//9oADAMBAAIAAwAAABDL3//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/EFS//8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EBlq/8QAGxAAAwADAQEAAAAAAAAAAAAAAAERITFBUXH/2gAIAQEAAT8Q7TeTct0IOknvQ9wiz9IJRn//2Q==","aspectRatio":2.3333333333333335,"src":"/static/7132e1ecaa29dd534fc8dc790ef09f53/d0c15/blog_bg_1.jpg","srcSet":"/static/7132e1ecaa29dd534fc8dc790ef09f53/74a6a/blog_bg_1.jpg 350w,\n/static/7132e1ecaa29dd534fc8dc790ef09f53/047db/blog_bg_1.jpg 700w,\n/static/7132e1ecaa29dd534fc8dc790ef09f53/d0c15/blog_bg_1.jpg 1024w","srcWebp":"/static/7132e1ecaa29dd534fc8dc790ef09f53/22384/blog_bg_1.webp","srcSetWebp":"/static/7132e1ecaa29dd534fc8dc790ef09f53/e5785/blog_bg_1.webp 350w,\n/static/7132e1ecaa29dd534fc8dc790ef09f53/1b440/blog_bg_1.webp 700w,\n/static/7132e1ecaa29dd534fc8dc790ef09f53/22384/blog_bg_1.webp 1024w","sizes":"(max-width: 1024px) 100vw, 1024px","presentationWidth":1024,"originalImg":"/static/7132e1ecaa29dd534fc8dc790ef09f53/d0c15/blog_bg_1.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/2019-08-22-gridsome/","previous":{"fields":{"slug":"/you-will-stop-using-localstorage/"},"frontmatter":{"title":"You Will Stop Using LocalStorage"}},"next":{"fields":{"slug":"/2019-08-23-gridsome-graphql/"},"frontmatter":{"title":"[gridsome] Graph QLで複数の問い合わせをページで行うには"}}}}}