JavaScriptAdvent Calendar 2024

ViteのVanillaテンプレートでブログをはじめてみる

Posted at 2024-12-03

はじめに

ViteのVanillaのTemplateを使い、

VanillaのHTML、Css、JavascriptでBlogを作りたくなったので作ってみる。

※正直なところ、無理にVite使わずに、、普通に静的ファイルを配置・公開するのが一番手っ取り早いのでご注意ください🥲

事前準備

・Node.jsインストール済

（パッケージマネージャはnpmを想定）

（Viteは現時点のv6.0.2を想定）

プロジェクトの構成

下記コマンドでテンプレートを用いる。

VanillaのJavaScriptの場合

npm create vite@latest myblog -- --template vanilla

VanillaのTypeScriptの場合

npm create vite@latest myblog -- --template vanilla-ts

恐らく、下記のような構成でtemplateが出来上がる(node_modulesは省略)

│  .gitignore
│  index.html
│  package.json
│
├─public
│      略
│
└─src
        counter.js
        javascript.svg
        main.js
        style.css

これをはMenu(index.html)以外の投稿はすべて/posts/の配下に来るような下記の構成にする

│   .gitignore
│   index.html
│   main.css
│   main.js
│   vite.config.js
│
├─public
│      略
│
└───posts
        aboutme.html
        dummypost.html
        policy.html

vite.config.js(vite.config.ts)の設定

vite.configをなにも設定しないと/posts/配下のhtmlはエントリポイントに含まれていない。

これを含まれるようにするため、

vite.configを下記のように

エントリーネームをファイル名が一致するような形式で設定する

import { defineConfig } from 'vite';
import { resolve, relative } from 'path';
import { globSync } from 'glob';

const posts = globSync('posts/*.html')
  .reduce((acc, curr) => {
    const key = relative('posts', curr).replace('.html', '')
    acc[key] = curr
    return acc
  }, {})
posts['main'] = resolve(__dirname, 'index.html');

export default defineConfig({
  build: {
    rollupOptions: {
      input: posts
    },
  },
});

参考

※重要な箇所はこれで終わり！！