Hono/HonoXを使ったブログの作成と技術スタック

import { showRoutes } from 'hono/dev'
import { createApp } from 'honox/server'

const app = createApp({
  trailingSlash: true,
  init(_app) {},
})

showRoutes(app)
export default app

plugins: [
  honox(),
  mdx({
    jsxImportSource: 'hono/jsx',
    providerImportSource: './app/lib/mdx-components',
    remarkPlugins,
    rehypePlugins,
    recmaPlugins: [recmaExportFilepath],
  }),
  tailwindcss(),
  ssg({ entry }),
  viteStaticCopy({ /* 記事画像を dist にコピー */ }),
]

app/routes/
  index.tsx          → /
  about/index.tsx    → /about/
  posts/
    hello-world/
      index.mdx      → /posts/hello-world/
    riss/
      index.mdx      → /posts/riss/
  categories/
    [id]/index.tsx   → /categories/:id/
  tags/
    [id]/index.tsx   → /tags/:id/

const posts = import.meta.glob<MDXExports>(
  '../routes/posts/**/*.mdx',
  { eager: true }
)

export function useMDXComponents(): MDXComponents {
  return {
    img: Image,
    pre: StyledPre,
    blockquote: BlockQuote,
    a: Link,
    BlockLink: BlockLink,
    Note: Note,
    Toc: Toc,
    Marker: Marker,
    Bold: Bold,
    Twitter: Twitter,
    // ...
  }
}

<Toc>
- セクション1
- セクション2
</Toc>

<Note>
  これは補足情報です。
</Note>

<Marker color="pink">ハイライトされたテキスト</Marker>

export const remarkPlugins: PluggableList = [
  remarkFrontmatter,
  remarkMdxFrontmatter,
  remarkGfm,
]

export const rehypePlugins: PluggableList = [
  rehypeSlug,
  rehypeHighlight,
  rehypeMdxCodeProps,
  rehypeMdxImportMedia,
  rehypeMermaid,
]

// app/islands/HeaderParticles.tsx
// islands/ に配置するだけでクライアントサイドで自動ハイドレート
import { useEffect, useRef } from 'hono/jsx/dom'

export default function HeaderParticles() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    // Canvas パーティクルアニメーション
    // マウスカーソルに反応してパーティクルが逃げる物理演算
  }, [])

  return <canvas ref={canvasRef} />
}

&[data-active="true"] {
  background-color: var(--c-accent-bg);
  border-color: var(--c-accent);
  color: var(--c-text);
}

<details open>
  <summary>
    <h3>カテゴリー</h3>
    <span><svg class='sidebar-chevron'>...</svg></span>
  </summary>
  <ul>
    {categories.map(cat => (
      <li><a href={`/categories/${cat.id}/`}>{cat.name}</a></li>
    ))}
  </ul>
</details>

(function(){
  var s = localStorage.getItem('theme');
  var prefersDark = window.matchMedia(
    '(prefers-color-scheme:dark)'
  ).matches;
  if (s === 'dark' || (s !== 'light' ? prefersDark : false)) {
    document.documentElement.classList.add('dark');
  }
})();

// app/styles/color.ts
export const gray = 'var(--c-text)'
export const grayLight = 'var(--c-text-muted)'
export const blue = 'var(--c-accent)'
export const background = 'var(--c-bg)'

export async function ExLinkCard({ url }: Props) {
  const ogp = await fetchOgp(url)
  return (
    <a href={url}>
      {ogp.Image?.length ? (
        <img src={ogp.Image[0].URL} alt={ogp.Title} />
      ) : null}
      <p>{ogp.Title}</p>
      <div>{ogp.Description}</div>
      <span>{new URL(url).host}</span>
    </a>
  )
}

var observer = new MutationObserver(function() {
  var nowDark = document.documentElement.classList.contains('dark');
  var iframe = container
    .querySelector('iframe.giscus-frame');
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage(
      { giscus: {
          setConfig: { theme: nowDark ? 'dark' : 'light' }
      }},
      'https://giscus.app'
    );
  }
});
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class']
});

// app/routes/index.xml.ts — RSS フィード
export default createRoute(c => {
  const rss = generateRss(getAllPosts())
  return c.text(rss, 200, {
    'Content-Type': 'application/xml',
  })
})

pnpm deploy
# → vite build --mode client && vite build && wrangler pages deploy ./dist