gatsbyセットアップメモ

Diary

セットアップ

このあたりを参考に。

Gatsbyで作ったWebページを公開してみる | DevelopersIO
この記事ではReactベースの静的サイトジェネレータであるGatsbyを用いて公開するまでの流れを整理していきます。
% npm init gatsby

Need to install the following packages:
  [email protected]
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/

npm run develop                                                                                                                      2666ms  Tue Jul 25 09:59:48 2023

> [email protected] 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を使ったほうが良さげ。

Comments

タイトルとURLをコピーしました