🦁

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

2022/04/04に公開

Scss

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

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

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

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

モチベーション

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

使用技術

HTML
SCSS
TypeScript
TailWind CSS
webpack
GitHub Actions
GitHub Pages

使い方

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

ディレクトリ構成

.
├── 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

環境構築

node.js、yarn をインストール
インストール方法を解説してくださってる記事(Mac に nodebrew・Node.js・yarn をインストールする)
パッケージをインストール

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

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);

html ファイルを作成
作成した ts ファイルと同名の html ファイルをsrc/ディレク内に作成します。
src/ts/○○○.ts → src/○○○.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>

scssファイルを作成
使用したい scss ファイルを作ります。
作った scss は、ts ファイルの中で import します。

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

公開設定

GitHub リポジトリで、Settings → Pages より GitHub Pages 設定ページへ移動
Branchgh-pagesを選択、公開ディレクトリは/(root)を選択して、Save
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 のテンプレートをコピペできる便利なサイトをまとめてくださっている素晴らしい記事があったので貼っておきます。

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

webpack 詳細

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://shuu1104.com/2021/12/4458/

おわりに

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

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

課題

HTML がホットリロードで更新されない
TailwindCSS を CDN で読み込んでいるので、これも webpack でバンドルするようにしたい
問い合わせフォームも簡単に作りたい
- サーバー建てるのは面倒なので、Google Form とかでうまくできるのかな、、、

モチベーション

使用技術

使い方

ディレクトリ構成

環境構築

ページ作成

複数ページ作成

ビルド＆デプロイ

公開設定

TailwindCSS

webpack 詳細

おわりに

課題

Discussion