Generated and powered by Cursor
A clean, researcher-style personal website built with TypeScript, HTML, CSS, and JavaScript.
Your website is ready to use! If the development server is running, open:
# 1. Install dependencies
npm install
# 2. Build TypeScript
npm run build
# 3. Start development server
npm run dev- 📱 Responsive design - Works on all devices
- 🌓 Dark/Light theme toggle - Automatic preference saving
- 📝 Markdown blog posts - Write in markdown with frontmatter
- 🎨 Clean, minimalist UI - Academic/researcher style
- 🚀 Fast and lightweight - Loads in <500ms
- 💻 Syntax highlighting - Beautiful code blocks
- 📂 Simple content management - Just add markdown files
personal-site/
├── index.html # Main HTML file
├── package.json # Dependencies & scripts
├── styles/
│ └── main.css # All styling (light + dark themes)
├── src/ # TypeScript source files
│ ├── main.ts # Entry point
│ ├── theme.ts # Theme management
│ ├── router.ts # Client-side routing
│ ├── markdown.ts # Markdown parsing
│ ├── posts.ts # Posts management
│ └── pages/ # Page components
│ ├── home.ts
│ ├── blog.ts
│ ├── about.ts
│ └── archive.ts
├── content/
│ └── posts/ # Your markdown blog posts
│ ├── getting-started.md
│ ├── example-post.md
│ └── ...
├── dist/ # Compiled JavaScript (generated)
├── scripts/
│ ├── build.js # Build script
│ └── new-post.js # Helper to create posts
└── doc/ # Documentation
├── DEPLOYMENT.md # Deployment guide
└── MIGRATION.md # Hexo migration guide
npm run new-postThis interactive script creates a new post with proper frontmatter.
- Create markdown file in
content/posts/, e.g.,my-first-post.md:
---
title: My First Post
date: 2026-01-17
category: general
tags: [tag1, tag2]
description: Brief description of your post
---
# My First Post
Your content here...- Register the post in
src/posts.ts:
const POST_FILES = [
'example-post.md',
'my-first-post.md', // Add this line
];- Rebuild:
npm run build- Refresh browser to see your new post!
Your posts support:
- Headers (H1-H6)
- Bold, italic,
inline code - Code blocks with syntax highlighting
- Links and images
- Lists (ordered and unordered)
- Tables
- Blockquotes
Example code block:
```python
def hello():
print("Hello, World!")
```- Site Title - Edit
index.html:
<title>Your Name - Personal Website</title>- Home Page - Edit
src/pages/home.ts:
mainContent.innerHTML = `
<h1>Your Name</h1>
<p class="subtitle">Your Title @ University</p>
<p>Your bio...</p>
`;-
About Page - Edit
src/pages/about.ts:- Add your background
- Update education
- Change contact information
-
Rebuild after changes:
npm run buildEdit styles/main.css:
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--link-color: #0066cc; /* Change this! */
}
[data-theme="dark"] {
--bg-primary: #1a1a1a;
--text-primary: #e0e0e0;
--link-color: #66b3ff; /* And this! */
}npm run build # Compile TypeScript
npm run dev # Build and start server
npm run watch # Auto-compile on changes
npm run new-post # Create new blog postFor continuous development:
Terminal 1:
npm run watchTerminal 2:
npx http-server -p 8080Now TypeScript auto-compiles when you save files!
When you're ready to deploy online, see doc/DEPLOYMENT.md for detailed instructions on:
- GitHub Pages (free)
- Netlify (free, easy drag-and-drop)
- Vercel (free)
- Traditional hosting
- Custom domains
Quick Deploy (Netlify):
- Go to netlify.com/drop
- Drag the
personal-sitefolder - Your site is live!
Suggested categories for your posts:
general- Personal updates, reflectionscode- Programming, algorithms, projectsbaseball- Sports, games, travel- (Create your own!)
Tag your posts for better organization:
- Technical:
javascript,python,algorithm,tutorial - Academic:
university,courses,semester-review - Personal:
travel,sports,hobbies
If you're migrating from an existing Hexo blog, see doc/MIGRATION.md for:
- Frontmatter conversion guide
- Content structure changes
- Step-by-step migration process
- Initial Load: ~50-100ms
- Total Size: ~75KB (excluding images)
- Time to Interactive: <500ms
- Browser Support: Chrome/Edge/Firefox/Safari (latest)
Four example posts are included to demonstrate features:
- getting-started.md - Complete usage guide
- example-post.md - Features overview
- sample-baseball.md - Travel/sports post example
- sample-semester.md - Academic post with code
Feel free to delete or customize these examples!
Posts not showing?
- Verify filename is added to
src/posts.ts - Check frontmatter format is correct
- Rebuild:
npm run build
Dark mode not saving?
- Ensure browser localStorage is enabled
- Try clearing cache
Page not loading?
- Check browser console for errors
- Verify all TypeScript compiled successfully
- Check file paths are correct
- HTML5/CSS3 - Structure and styling
- TypeScript - Type-safe JavaScript
- Marked.js (v11.1.1) - Markdown parsing
- Highlight.js (v11.9.0) - Code syntax highlighting
- CSS Custom Properties - Theming system
- LocalStorage - Preference persistence
- ⬜ Browse your site at http://localhost:8080
- ⬜ Update
src/pages/home.tswith your info - ⬜ Update
src/pages/about.tswith your background - ⬜ Write your first blog post
- ⬜ Test on mobile device
- ⬜ Deploy online (see
doc/DEPLOYMENT.md)
MIT License - Feel free to use this template for your own website!
Built with:
- Marked.js - Markdown parser
- Highlight.js - Syntax highlighting
- TypeScript - Type-safe JavaScript
Enjoy your new website! 🎉