Gatsby+TailwindCSSをGitHubPagesにデプロイする
はじめに
GatsbyとTailwind CSSを使って実装したページをGitHub Pagesにデプロイしたので、手順を投稿します。筆者の専門はAndroidアプリでWebは初心者ですので、同じようなWeb初心者の読者を想定してます。
概要
- Gatsbyサイトの新規作成
- Tailwind CSSの導入
- GitHub Pagesへのデプロイ
1. Gatsbyサイトの新規作成
まずは、Gatsbyのサイトを新規作成していきます。公式のドキュメントは以下です。
1.1. Gatsbyのサイトを新規作成する
以下のコマンドを実行してGatsbyのサイトを新規作成します。
npm init gatsby
コマンドを実行するとサイトのタイトルやプロジェクトのディレクトリ名を尋ねられます。プロンプトに従って入力を行ってください。例として、筆者が入力した内容は以下の通りです。
Need to install the following packages:
create-gatsby@3.7.0
Ok to proceed? (y) y
What would you like to call your site?
√ · Gatsby Tailwind CSS GitHub Pages
What would you like to name the folder where your site will be created?
√ /gatsby-tailwindcss-githubpages
√ Will you be using JavaScript or TypeScript?
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?No items were selected
Thanks! Here's what we'll now do:
Create a new Gatsby site in the folder gatsby-tailwindcss-githubpages
√ Shall we do this? (Y/n) · Yes
1.2. ローカル開発サーバの起動
手順1.1.で作成したディレクトリ(筆者の場合はgatsby-tailwindcss-githubpages)に移動して、以下のコマンドを実行することで、ローカル開発サーバを起動することができます。
npm run develop
ブラウザを開き、http://localhost:8000 を指定すると、ローカル開発サーバにアクセスすることができます。
2. Tailwind CSSの導入
次に、Tailwind CSSを導入します。公式のドキュメントは以下です。
2.1. Tailwind CSSのインストール
以下のコマンドを実行してTailwind CSSのインストール及び初期化を行います。
npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
2.2. Gatsby PostCSS pluginを有効化
公式のドキュメントではgatsby-config.jsを編集していますが、こちらの例ではGatsbyのサイトをTypeScriptで生成しているため、gatsby-config.tsを編集しています。
const config: GatsbyConfig = {
// ...
plugins: [
'gatsby-plugin-postcss',
],
}
2.3. テンプレートパスの設定
tailwind.config.jsのcontentに以下の二行を追加します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,jsx,ts,tsx}",
"./src/components/**/*.{js,jsx,ts,tsx}",
],
// ...
}
2.4. CSSにTailwind directivesを追加する
src/styles/global.cssを作成して以下の三行を追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
2.5. CSSファイルをインポートする
gatsby-browser.jsを作成して、2.4で作成したglobal.cssファイルをインポートします。
import './src/styles/global.css'
2.6. Tailwindを使って実装する
src/pages/index.tsxをTailwind CSSを使って実装してみましょう。実装にはTailwind CSS Cheat Sheetを参照すると便利です。今回は例として、サンプルコードにあるHello world!の実装を流用しました。
import * as React from "react"
import type { HeadFC, PageProps } from "gatsby"
const IndexPage: React.FC<PageProps> = () => {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
export default IndexPage
export const Head: HeadFC = () => <title>Home Page</title>
2.7. ローカル開発サーバを起動して動作確認を行う
npm run buildを実行して、ブラウザを開き、http://localhost:8000 を指定してローカル開発サーバにアクセスします。Hello world!の文字が、太字で下線付きになっていることが確認できます。
3. GitHub Pagesへのデプロイ
最後に、GitHub Pagesへのデプロイを行います。公式のドキュメントは以下です。
3.1. gh-pagesのインストール
以下のコマンドを実行してgh-pagesをインストールします。
npm install gh-pages --save-dev
3.2. pathPrefixオプションの追加
gatsby-config.tsにpathPrefixオプションを追加します。公式のドキュメントではgatsby-config.jsを編集していますが、こちらの例ではGatsbyのサイトをTypeScriptで生成しているため、gatsby-config.tsを編集しています。pathPrefixの値はGatsbyのサイトを新規作成する際にプロンプトで指定したプロジェクトのディレクトリ名です。筆者の場合は/gatsby-tailwindcss-githubpagesとなります。
const config: GatsbyConfig = {
// ...
plugins: [
// ...
'gatsby-plugin-postcss',
],
pathPrefix: '/gatsby-tailwindcss-githubpages',
}
3.3. デプロイスクリプトの追加
package.jsonにデプロイスクリプトを追加します。
{
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
}
}
3.4. GitHub Pagesへデプロイする
以下のコマンドで手順3.3.で追加したデプロイスクリプトを実行します。これにより、リポジトリのgh-pagesブランチにデプロイが行われます。
npm run deploy
デプロイ後にfetchすると、実装用のmainブランチに加えて、デプロイ用のgh-pagesブランチが作成されていることが確認できます。
3.5. GitHub Pagesソースブランチの指定
GitHub Pagesへのデプロイの最後の手順として、GitHub Pagesソースブランチの指定の手順を書こうと思ったのですが、手順3.4.のデプロイスクリプトを実行することでこちらの手順は完了していました。ソースブランチの指定はGitHubリポジトリのSettingsのPagesから確認することができます。
3.6. デプロイしたページの表示
ブラウザを開き、https://[ユーザー名].github.io/[リポジトリ名]/ を指定することで、デプロイしたページにアクセスすることができます。筆者の例ではhttps://zozooizozzoizioiiiooi.github.io/gatsby-tailwindcss-githubpages/ がデプロイしたページのURLとなります。手順2.7.でローカル開発サーバで表示した内容と同じものがGitHub Pagesとして表示できていることが確認できます。
お疲れ様でした。これで全ての作業は完了です。
おわりに
今回は、GatsbyとTailwind CSSを使って実装したページをGitHub Pagesにデプロイする手順を紹介しました。筆者の専門はAndroidアプリの開発ですが、Androidアプリのリリースにはプライバシーポリシーを記載したWebページが必要になります。ちょっとしたWebページが必要な場合に、GitHub Pagesは大変便利です。
Discussion