HonoでSSG開発する
Initする。
code:sh
bunx create-hono your-app-name
bunテンプレを選ぶ。
依存のDL。
code:sh
bun install vite @hono/vite-ssg @hono/vite-dev-server
bun install -D @biomejs/biome
必要ファイルの作成
code:vite.config.ts
import devServer from "@hono/vite-dev-server";
import ssg from "@hono/vite-ssg";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
ssg(),
devServer({
entry: "src/index.tsx",
}),
],
});
code:src/index.tsx
import { Hono } from "hono";
const app = new Hono();
app.get("/", (c) => {
return c.render(
<div>
<h1>Hello, World!</h1>
</div>
);
});
export default app;
code:biome.json
{
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"noNonNullAssertion": "off",
"noUselessElse": "off"
},
"suspicious": {
"noExplicitAny": "off"
}
}
},
"javascript": {
"parser": {
"unsafeParameterDecoratorsEnabled": true
},
"formatter": {
"enabled": true,
"quoteStyle": "single",
"jsxQuoteStyle": "single",
"semicolons": "asNeeded",
"arrowParentheses": "asNeeded",
"indentWidth": 2,
"indentStyle": "space",
"lineWidth": 160,
"quoteProperties": "asNeeded"
}
},
"json": {
"parser": { "allowComments": true },
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
}
},
"files": {
"maxSize": 4194304
}
}
code:package.json
..
"type": "module", // これを追加しないとbun run devが起動しない
"scripts": {
"dev": "vite",
"build": "vite build"
},
..
code:.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "always",
"source.organizeImports.biome": "always"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
}
}
code:.gitignore
node_modules
dist
.wrangler
.dev.vars
./static
.DS_Store
# Change them to your taste:
package-lock.json
yarn.lock
pnpm-lock.yaml
bun.lockb
.env