Gatsby Theme Aoi のインストール

Gatsby Theme Aoi は、Gatsby スターターを使う方法と、マニュアルでインストールする方法の2つの方法から使うことができます。

Gatsby スターターを使う

Gatsby スターターを使うと、複雑な設定をすることなく Gatsby Theme Aoi を使うことができます。Gatsby Theme Aoi には以下の2種類のスターターがあります。

• Gatsby Starter Aoi Theme: 最低限の機能を持ったシンプルなスターター
• Gatsby Starter Aoi Blog: ブログスターター

Gatsby Starter Aoi Theme

Gatsby Starter Aoi Theme は最低限の機能を持ったシンプルなスターターです。

curl https://codeload.github.com/cieloazul310/gatsby-aoi/tar.gz/main | tar -xz --strip=2  gatsby-aoi-main/starters/gatsby-starter-aoi-theme
cd gatsby-starter-aoi-theme

Gatsby Starter Aoi Theme のデモサイト
https://cieloazul310.github.io/gatsby-aoi

Gatsby Starter Aoi Blog

Gatsby Starter Aoi Blog はブログスターターです。

curl https://codeload.github.com/cieloazul310/gatsby-aoi/tar.gz/main | tar -xz --strip=2  gatsby-aoi-main/starters/gatsby-starter-aoi-blog
cd gatsby-starter-aoi-blog

Gatsby Starter Aoi Blog のデモサイトはこのページです。

クローン後

# install
npm install

# develop
npm run dev

# build
npm run build

プロジェクトのクローンが終わったら、npm install で依存パッケージをインストールします。npm run dev で開発スタート、npm run build で Gatsby サイトのビルドができます。

マニュアルインストール

次に、既存の Gatsby プロジェクトに Gatsby Theme Aoi をインストールする方法です。

1. インストール

npm install @cieloazul310/gatsby-theme-aoi

以下の peerDependencies パッケージをインストールが必要です。
@mui/material @mui/icons-material @emotion/react @emotion/styled

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

2. 設定

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@cieloazul310/gatsby-theme-aoi`,
      options: {
        siteId: `your-site-id`,
      },
    },
  ],
}

gatsby-config.js のプラグインに @cieloazul310/gatsby-theme-aoi を加えると AppState やダークモードなど、Gatsby Theme Aoi の機能が利用できます。

次へ