671 文字
3 分
gatsbyセットアップメモ
2024-01-24
タグなし

セットアップ#

このあたりを参考に。

https://dev.classmethod.jp/articles/gatsby-project-init/

Terminal window
% npm init gatsby
Need to install the following packages:
create-gatsby@3.11.0
Ok to proceed? (y) y
create-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 Site
What 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-postcss
info Adding gatsby-plugin-google-gtag
info Adding gatsby-plugin-image
info Adding gatsby-plugin-sitemap
info Adding gatsby-plugin-manifest
info Adding gatsby-plugin-mdx
info Adding gatsby-plugin-sharp
info Adding gatsby-transformer-sharp
info Adding gatsby-source-filesystem
info Adding gatsby-source-filesystem
info Installed gatsby-plugin-postcss in gatsby-config
success Adding gatsby-plugin-postcss to gatsby-config - 0.215s
info Installed gatsby-plugin-google-gtag in gatsby-config
success Adding gatsby-plugin-google-gtag to gatsby-config - 0.210s
info Installed gatsby-plugin-image in gatsby-config
success Adding gatsby-plugin-image to gatsby-config - 0.215s
info Installed gatsby-plugin-sitemap in gatsby-config
success Adding gatsby-plugin-sitemap to gatsby-config - 0.220s
info Installed gatsby-plugin-manifest in gatsby-config
success Adding gatsby-plugin-manifest to gatsby-config - 0.256s
info Installed gatsby-plugin-mdx in gatsby-config
success Adding gatsby-plugin-mdx to gatsby-config - 0.260s
info Installed gatsby-plugin-sharp in gatsby-config
success Adding gatsby-plugin-sharp to gatsby-config - 0.262s
info Installed gatsby-transformer-sharp in gatsby-config
success Adding gatsby-transformer-sharp to gatsby-config - 0.266s
info Installed gatsby-source-filesystem in gatsby-config
success Adding gatsby-source-filesystem (images) to gatsby-config - 0.278s
info Installed gatsby-source-filesystem in gatsby-config
success Adding gatsby-source-filesystem (pages) to gatsby-config - 0.281s
🎨 Adding necessary styling files...
🎉 Your new Gatsby site Teraren Corporate Site has been successfully created
at /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/
Terminal window
% npm run develop
> teraren-corporate-site@1.0.0 develop
> gatsby develop
success compile gatsby files - 0.270s
success load gatsby config - 0.022s
success load plugins - 0.511s
success onPreInit - 0.008s
success initialize cache - 0.076s
success copy gatsby files - 0.413s
success Compiling Gatsby Functions - 0.856s
success onPreBootstrap - 0.901s
success createSchemaCustomization - 0.012s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.091s
success building schema - 0.107s
success createPages - 0.006s
success createPagesStatefully - 0.073s
info Total nodes: 47, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.000s
success write out redirect data - 0.006s
success Build manifest and related icons - 0.097s
success onPostBootstrap - 0.100s
info bootstrap finished - 4.405s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.806s
success 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.742s
success 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/
作者
Yuki Matsukura
公開日
2024-01-24
ライセンス
CC BY-NC-SA 4.0

コメント