671 文字
3 分
gatsbyセットアップメモ
セットアップ
このあたりを参考に。
https://dev.classmethod.jp/articles/gatsby-project-init/
% npm init gatsbyNeed to install the following packages: create-gatsby@3.11.0Ok to proceed? (y) ycreate-gatsby version 3.11.0
Welcome to Gatsby!
This command will generate a new Gatsby site for you in /Users/yuki.matsukura/ghq/github.com/matsubo/www.teraren.com with the setup you select. Let's answer some questions:
What would you like to call your site?✔ · Teraren Corporate SiteWhat would you like to name the folder where your site will be created?✔ www.teraren.com/ teraren-corporate-site✔ Will you be using JavaScript or TypeScript?· JavaScript✔ Will you be using a CMS?· No (or I'll add it later)✔ Would you like to install a styling system?· Tailwind CSS✔ Would you like to install additional features with other plugins?· Add the Google gtag script for e.g. Google Analytics· Add responsive images· Add an automatic sitemap· Generate a manifest file· Add Markdown and MDX support
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder teraren-corporate-site 🎨 Get you set up to use Tailwind CSS for styling your site 🔌 Install gatsby-plugin-google-gtag, gatsby-plugin-image, gatsby-plugin-sitemap, gatsby-plugin-manifest, gatsby-plugin-mdx
✔ Shall we do this? (Y/n) · Yes✔ Created site from template✔ Installed Gatsby✔ Installed plugins✔ Created site in teraren-corporate-site🔌 Setting-up plugins...info Adding gatsby-plugin-postcssinfo Adding gatsby-plugin-google-gtaginfo Adding gatsby-plugin-imageinfo Adding gatsby-plugin-sitemapinfo Adding gatsby-plugin-manifestinfo Adding gatsby-plugin-mdxinfo Adding gatsby-plugin-sharpinfo Adding gatsby-transformer-sharpinfo Adding gatsby-source-filesysteminfo Adding gatsby-source-filesysteminfo Installed gatsby-plugin-postcss in gatsby-configsuccess Adding gatsby-plugin-postcss to gatsby-config - 0.215sinfo Installed gatsby-plugin-google-gtag in gatsby-configsuccess Adding gatsby-plugin-google-gtag to gatsby-config - 0.210sinfo Installed gatsby-plugin-image in gatsby-configsuccess Adding gatsby-plugin-image to gatsby-config - 0.215sinfo Installed gatsby-plugin-sitemap in gatsby-configsuccess Adding gatsby-plugin-sitemap to gatsby-config - 0.220sinfo Installed gatsby-plugin-manifest in gatsby-configsuccess Adding gatsby-plugin-manifest to gatsby-config - 0.256sinfo Installed gatsby-plugin-mdx in gatsby-configsuccess Adding gatsby-plugin-mdx to gatsby-config - 0.260sinfo Installed gatsby-plugin-sharp in gatsby-configsuccess Adding gatsby-plugin-sharp to gatsby-config - 0.262sinfo Installed gatsby-transformer-sharp in gatsby-configsuccess Adding gatsby-transformer-sharp to gatsby-config - 0.266sinfo Installed gatsby-source-filesystem in gatsby-configsuccess Adding gatsby-source-filesystem (images) to gatsby-config - 0.278sinfo Installed gatsby-source-filesystem in gatsby-configsuccess Adding gatsby-source-filesystem (pages) to gatsby-config - 0.281s🎨 Adding necessary styling files...🎉 Your new Gatsby site Teraren Corporate Site has been successfully createdat /Users/yuki.matsukura/ghq/github.com/matsubo/www.teraren.com/teraren-corporate-site.Start by going to the directory with
cd teraren-corporate-site
Start the local development server with
npm run develop
See all commands at
https://www.gatsbyjs.com/docs/reference/gatsby-cli/% npm run develop> teraren-corporate-site@1.0.0 develop> gatsby develop
success compile gatsby files - 0.270ssuccess load gatsby config - 0.022ssuccess load plugins - 0.511ssuccess onPreInit - 0.008ssuccess initialize cache - 0.076ssuccess copy gatsby files - 0.413ssuccess Compiling Gatsby Functions - 0.856ssuccess onPreBootstrap - 0.901ssuccess createSchemaCustomization - 0.012ssuccess Checking for changed pages - 0.001ssuccess source and transform nodes - 0.091ssuccess building schema - 0.107ssuccess createPages - 0.006ssuccess createPagesStatefully - 0.073sinfo Total nodes: 47, SitePage nodes: 4 (use --verbose for breakdown)success Checking for changed pages - 0.000ssuccess write out redirect data - 0.006ssuccess Build manifest and related icons - 0.097ssuccess onPostBootstrap - 0.100sinfo bootstrap finished - 4.405ssuccess onPreExtractQueries - 0.001ssuccess extract queries from components - 0.806ssuccess write out requires - 0.006s⠀You can now view teraren-corporate-site in the browser.⠀ http://localhost:8000/⠀View GraphiQL, an in-browser IDE, to explore your site's data and schema⠀ http://localhost:8000/___graphql⠀Note that the development build is not optimized.To create a production build, use gatsby build⠀success Building development bundle - 8.742ssuccess Writing page-data.json and slice-data.json files to public directory - 0.047s - 3/4 85.29/s
いろいろやった結果
gatsbyのコミュニティが急速に衰退しているので微妙っす。デザインテンプレも良い感じのが出ない。
Next.JSを使ったほうが良さげ。
gatsbyセットアップメモ
https://blog.teraren.com/posts/post-15683/