静的サイトを簡単に公開するためのテンプレー作ってみた(SCSS, TypeScript, GitHub Pages, webpack)

46344 ワード
Scss TypeScript webpack Tailwind CSS GitHub Pages tech テキストリンク

静的なサイトを HTML, CSS(scss), TypeScript で作って GithubPages でサクッと公開するためのテンプレート的なものを作りました。
自分用のメモとして記事に残しますが、使いたい方がいらっしゃれば自由に使ってください。

HTML, SCSS, TypeScript で静的なページを作り、GitHub へ push すると GitHub Actions が作動し、自動的に webpack によりバンドルされ GitHub Pages に公開されます。

GitHubPages にデプロイしてみたテンプレート ↓

https://tadatakuho.github.io/static-site-template/


TailwindCSS を使ったテンプレートページ

モチベーション

  • HTML, CSS を書くだけですぐに公開できるようなテンプレートを作りたい
  • 例えば、急に友人に「プロフィールサイト作ってよ〜」と言われたときに、1 時間で完成させて公開までできるようにしたい
  • SCSS と TypeScript を使いたい
  • 複数ページにも対応したい
  • フロントエンドエンジニアなのに webpack をイチから書いたことがなかったので勉強したい
  • GitHubActions 勉強したい
  • GitHubPages も使ったことなかったので使ってみたい
  • Tailwind CSS も面白そうなので使ってみたい

使用技術

  • HTML
  • SCSS
  • TypeScript
  • TailWind CSS
  • webpack
  • GitHub Actions
  • GitHub Pages

使い方

以下の github からコードをクローンしてください。

https://github.com/tadatakuho/static-site-template

ディレクトリ構成

.
├── src
│   ├── index.html
│   ├── tailwind-template.html
│   ├── styles
│   │   ├── reset.scss
│   │   ├── style.scss
│   │   └── tailwind-template.scss
│   ├── ts
│   │   ├── index.ts
│   │   └── tailwind-template.ts
│   └── images
│       └── // 画像はここに置く
├── tsconfig.json
├── webpack.config.js
├── postcss.config.js
├── package.json
└── yarn.lock

環境構築

yarn install
  • 起動
yarn start
  • ブラウザでlocalhost:3000に接続


localhost:3000 でページが表示される

ページ作成

html, scss, ts ファイル を好きに書き変えます。
最小限の html, scss, ts の構成は以下です。

.
└── src
    ├── index.html
    ├── styles
    │   ├── reset.scss
    │   └── style.scss
    └── ts
        └── index.ts
  1. tsファイルを作成
    任意のファイル名で ts ファイルをsrc/tsディレクトリ内に作成します。
    使用したい scss は html 内ではなく、ここで import します。
src/ts/index.ts
// index.html内で読み込むcssをimport
import "../styles/style.scss";
import "../styles/reset.scss";

// index.html内で実行するJavaScript(TypeScript)
const hello: string = "hello world";
console.log(hello);
  1. html ファイルを作成
    作成した ts ファイルと同名の html ファイルをsrc/ディレク内に作成します。
    src/ts/○○○.ts → src/○○○.html
src/index.html
src/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Top Page</title>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Static Site Template</h1>

      <button class="button">
        <a href="tailwind-template.html">Tailwind CSSを使ったページ ></a>
      </button>
    </div>
  </body>
</html>
  1. scssファイルを作成
    使用したい scss ファイルを作ります。
    作った scss は、ts ファイルの中で import します。
src/styles/style.scss
src/styles/style.scss
.container {
  margin-top: 50px;
  text-align: center;
}

.title {
  font-size: 30px;
  font-weight: bold;
  color: #555;
}

.button {
  margin-top: 50px;
  border: 2px solid #aaa;
  border-radius: 10px;
  background: #fff;

  a {
    display: block;
    color: #555;
    padding: 20px;
  }

  &:hover {
    opacity: 0.5;
  }
}

複数ページ作成

1 ページだけでなく、複数ページ作ることができます。
うえと同様に、html,ts,scss ファイルを配置します。
ts ファイルと html ファイル名は同じものを使用します。(例の場合、tailwind-template という名前を合わせています)

追加したファイル ↓
src/tailwind-template.html
src/ts/tailwind-template.ts
src/styles/tailwind-template.scss

ディレクトリ構成
.
└── src
    ├── index.html
    ├── tailwind-template.html
    ├── styles
    │   ├── reset.scss
    │   ├── style.scss
    │   └── tailwind-template.scss
    └── ts
        ├── index.ts
        └── tailwind-template.ts

ローカルだと http://localhost:3000/tailwind-template.html で新規作成したページが確認できます。

例えば、index.html内でtailwind-template.htmlへのリンクを作成するときは、以下のように書きます。

index.html内
<a href="tailwind-template.html">Tailwind CSSを使ったページ ></a>

ビルド＆デプロイ

GitHub の main ブランチに push すると、GitHub Actions により自動的にビルド＆デプロイが実行されます。

.github/workflows/deploy.yml
name: Build and Deploy

on:
  push:
    branches: - "main"

jobs:
  build:
    runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v2

          - name: Install
            run: yarn install

          - name: Build
            run: yarn build

          - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist

公開設定

  1. GitHub リポジトリで、Settings → Pages より GitHub Pages 設定ページへ移動
  2. Branchgh-pagesを選択、公開ディレクトリは/(root)を選択して、Save
  3. URL が発行され、ページを見ることができます

今回はやっていませんが、URL を好きなドメインに紐付けることもできます。

TailwindCSS

イチから html,scss をコーディングしても良いのですが、時間がかかってしまうので、TailwindCSS を利用すると、一瞬でキレイなページを作成することができます。

TailwindCSS は様々なテンプレートが公開されており、パーツをコピペしていくだけでそれっぽいサイトを作ることができます。

例) tailwind-template.html


TailwindCSS を使ったテンプレートページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TailwindCSS Page</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- hero - start -->
    <div class="bg-white pb-6 sm:pb-8 lg:pb-12">
      <header class="border-b mb-8">
        <div
          class="max-w-screen-2xl flex justify-between items-center px-4 md:px-8 mx-auto"
        >
          <!-- logo - start -->
          <a
            href="/"
            class="inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5"
            aria-label="logo"
          >
            <svg
              width="95"
              height="94"
              viewBox="0 0 95 94"
              class="w-6 h-auto text-indigo-500"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M96 0V47L48 94H0V47L48 0H96Z" />
            </svg>

            Flowrift
          </a>
          <!-- logo - end -->

          <!-- nav - start -->
          <nav class="hidden lg:flex gap-12 2xl:ml-16">
            <a href="#" class="text-indigo-500 text-lg font-semibold">Home</a>
            <a
              href="#"
              class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100"
              >Collections</a
            >
            <a
              href="#"
              class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100"
              >About</a
            >
            <a
              href="contact.html"
              class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100"
              >Contact</a
            >
          </nav>
          <!-- nav - end -->

===============
長いので以下省略！！！
===============

  </body>
</html>

TailwindCSS のテンプレートをコピペできる便利なサイトをまとめてくださっている素晴らしい記事があったので貼っておきます。

https://zenn.dev/sikkim/articles/d976bd7fd4adfc#tailwindcssでuiコンポーネントを作る手順

TailwindCSS の UI コンポーネントを MIT ライセンスで公開しているページの中から、使い勝手の良さそうなものをピックアップしました。

webpack 詳細

webpack.config.js
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const WebpackWatchedGlobEntries = require("webpack-watched-glob-entries-plugin");

// エントリーポイントとして、tsファイルを設定
const entries = WebpackWatchedGlobEntries.getEntries(
  [path.resolve(__dirname, "./src/ts/**/*.ts")],
  {}
)();

const webpackConfig = {
  entry: entries,
  // 出力設定
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "images/[hash][ext][query]",
  },
  // 開発環境設定
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
    compress: true,
    port: 3000,
    open: true,
  },
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      // SCSSを使うための設定
      {
        test: /(\.s[ac]ss)$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },
      // TypeScriptを使うための設定
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

// 複数ページを書き出すための設定
Object.keys(webpackConfig.entry).forEach((key) => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      template: `./src/${key}.html`, // 読み込み元のhtmlパス
      filename: `./${key}.html`, // 出力するhtmlパス
      inject: true,
      chunks: [key],
    })
  );
});

module.exports = webpackConfig;

以下を参考にさせていただきました。

https://webpack.js.org/concepts/
https://blog.isystk.com/system_develop/frontend/webpack/194/
https://shuu1104.com/2021/12/4458/

おわりに

1,2 時間ぐらいあればサクッと簡単なサイトを公開することができるのではないかと思います。
GitHub Actions と GitHub Pages が便利すぎて感動しました。アイデア次第で色んな使い方ができそうです。

そして webpack 難しい、、絶対にもっといい書き方ある、、、

課題

  • HTML がホットリロードで更新されない
  • TailwindCSS を CDN で読み込んでいるので、これも webpack でバンドルするようにしたい
  • 問い合わせフォームも簡単に作りたい
    • サーバー建てるのは面倒なので、Google Form とかでうまくできるのかな、、、
【WebAR/VR】端末・バージョンごとのデバイスモーション対応
smtp4devでWindowsにサクッとメール送信テスト環境を構築