blog: support Markdown rendering and 404 routes

build.js

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+
+const postsDir = './public/posts';
+const distDir = './dist';
+
+const years = fs.readdirSync(postsDir);
+
+years.forEach(year => {
+  const yearPath = path.join(postsDir, year);
+  if (fs.lstatSync(yearPath).isDirectory()) {
+    const files = fs.readdirSync(yearPath);
+    files.forEach(file => {
+      if (file.endsWith('.md')) {
+        const slug      = file.replace('.md', '');
+        const targetDir = path.join(distDir, year);
+
+        if (!fs.existsSync(targetDir)) {
+          fs.mkdirSync(targetDir, { 
+            recursive: true 
+          });
+        }
+        fs.copyFileSync(path.join(distDir, 'index.html'), path.join(targetDir, `${slug}.html`));
+      }
+    });
+  }
+});
+
+fs.copyFileSync(
+  path.join(distDir, 'index.html'), 
+  path.join(distDir, '404.html')
+);
+
+console.log('✅ Build HTML from Markdown Post');

package.json

@@ -5,13 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "clean": "rm -rf dist",
+    "prebuild": "bun run clean",
+    "build": "vite build && bun build.js",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

public/posts/2026/Test.md

@@ -0,0 +1,16 @@
+# Hello React 19
+
+This is a post read from `public/posts/2026/Test.md`.
+
+## Testing Functionality
+
+* **Automatic Path**: Accessed via `/2026/Test.html`
+
+* **GA Tracing**: `Analytics.jsx` is enabled
+
+* **Environment**: Driven by **Bun**
+
+### Code Example
+```javascript
+console.log("Hello from 2026!");
+```

src/App.jsx

@@ -1,12 +1,62 @@
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
 import Analytics from './Analytics';
+import NotFound from './NotFound';
+
+const allPostFiles = import.meta.glob('/public/posts/**/*.md', { query: '?url', import: 'default' });
+
+function App() {
+  const [content, setContent] = useState('');
+  const [status, setStatus] = useState('loading');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const redirectedPath = params.get('p');
+    const currentPath = redirectedPath || window.location.pathname;
+
+    if (redirectedPath) {
+      window.history.replaceState(null, '', redirectedPath);
+    }
+
+    if (currentPath === '/' || currentPath === '/index.html') {
+      setContent('# Welcome My Blog');
+      setStatus('success');
+      return;
+    }
+
+    const parts = currentPath.replace(/\.html$/, '').split('/').filter(Boolean);
+    const [year, slug] = parts;
+
+    if (year && slug) {
+      const expectedPath = `/public/posts/${year}/${slug}.md`;
+
+      if (allPostFiles[expectedPath]) {
+        fetch(`/posts/${year}/${slug}.md`)
+          .then(res => res.text())
+          .then(text => {
+            setContent(text);
+            setStatus('success');
+          })
+          .catch(() => setStatus('404'));
+      } else {
+        setStatus('404');
+      }
+    } else {
+      setStatus('404');
+    }
+  }, []);
+
+  if (status === 'loading') return <div>Loading...</div>;
+  if (status === '404')     return <NotFound />;
 
-function App() { 
   return (
     <>
       <Analytics />
-      <h1 className="main-title">Hello World</h1>
+      <article style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </article>
     </>
   );
-} 
+}
 
 export default App;

src/NotFound.jsx

@@ -0,0 +1,17 @@
+import Analytics from './Analytics';
+
+export default function NotFound() {
+  return (
+    <>
+      <Analytics />
+      <div style={{ textAlign: 'center', padding: '10vh 20px' }}>
+        <h1 style={{ fontSize: '3rem', color: '#ff4d4f' }}>404</h1>
+        <h2>Page Not Found</h2>
+        <p>Sorry, the article or page you are looking for seems to have moved or no longer exists.</p>
+        <a href="/" style={{ color: '#1890ff', textDecoration: 'none' }}>
+          ← Return to homepage
+        </a>
+      </div>
+    </>
+  );
+}

vite.config.js

@@ -2,8 +2,14 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
+  build: {
+    emptyOutDir: true,
+  },
+
   plugins: [react()],
+
   base: '/', 
+
   server: {
     open: true, 
     port: 3000,