Skip to content

About This Blog

About This Blog

Welcome to my personal blog! This site is built with VitePress and is dedicated to sharing technical knowledge, learning notes, and reflections on life.

🌟 Highlights

Modern Tech Stack

This blog uses a popular and modern static site setup:

  • VitePress: Static site generator built on Vue 3 and Vite
  • Vue 3: A modern frontend framework with great DX
  • Vite: Lightning-fast build tool with HMR
  • TypeScript: A type-safe superset of JavaScript
  • GitHub Pages: Free static hosting

Great UX

  • ⚡ Fast loading powered by Vite
  • 📱 Responsive design for desktop, tablet, and mobile
  • 🌙 Dark mode support
  • 🔍 Full-text search
  • 🏷️ Tagging system for easy browsing

📝 Content Categories

Technical Articles

Posts on frontend, backend, tools, and more:

  • Frontend: Vue.js, React, JavaScript, CSS
  • Backend: Node.js, Python, databases
  • Tools: Dev tools, productivity, useful software
  • Projects: Real-world project write-ups

Learning Notes

Important takeaways and notes from my studies:

  • Tech learning notes and hands-on practice
  • Problem solving during development
  • Best practices and coding standards

Essays

Reflections on life and work:

  • Personal thoughts on tech, work, and life
  • Book notes (tech and non-tech)
  • Experience sharing

🎨 Design Philosophy

Simple and Elegant

  • Clean typography with comfortable line height
  • Soothing color palette
  • Clear and intuitive navigation

Performance First

  • Static generation for blazing-fast delivery
  • Code splitting for reduced initial load
  • Image optimization
  • CDN via GitHub Pages

Mobile Friendly

  • Responsive layout
  • Touch-optimized interactions
  • Mobile-first asset loading strategy

🛠️ Implementation

Project Structure

My_Blog/
├── .vitepress/            # VitePress config and theme
├── posts/                 # Blog posts
├── index.md               # Home
└── about.md               # About (example)

CI/CD

Automated deployment with GitHub Actions:

  1. Commit to GitHub
  2. GitHub Actions builds the site
  3. Deploy to GitHub Pages
  4. CDN updates globally

Dev Workflow

bash
# Local dev
npm run dev

# Build production
npm run build

# Preview build result
npm run preview

📊 Site Stats (Example)

  • Total posts: 5
  • Tags: 15
  • Pages: Home, Posts, About, Tags
  • Features: Search, Tag filter, Dark mode, Responsive

🚀 Roadmap

Features

  • Comments via third-party services
  • RSS/Atom feed
  • Related posts by tags
  • Reading analytics

Content

  • Video tutorials
  • Open-source projects
  • Thematic series
  • Interview experiences

💡 Why I Write

  • Share knowledge
  • Summarize experiences
  • Learn by teaching
  • Contribute to the community

📞 Contact

🙏 Acknowledgements

  • VitePress
  • Vue.js
  • GitHub Pages
  • Vite
  • Thanks to all OSS contributors

Hope you find value here. Feedback is always welcome. Let’s keep learning and building together!

Last updated: Jan 18, 2024

Released under the MIT License.