セットアップ
このあたりを参考に。
Gatsbyで作ったWebページを公開してみる | DevelopersIO
この記事ではReactベースの静的サイトジェネレータであるGatsbyを用いて公開するまでの流れを整理していきます。
dev.classmethod.jp
% 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を使ったほうが良さげ。
コメント