# My Blog Journey From idea to practice
## Table of Contents 1. **Why Create a Blog** 2. **My Previous Blog System** 3. **My Custom Blog System** 4. **Future Plans**
# Chapter 1 ## Why Create a Blog
## Knowledge Consolidation <p class="fragment">Massive notes generated during learning</p> <p class="fragment">Scattered notes difficult to systematize</p> <p class="fragment">Need a place to organize and archive</p>
## Feynman Learning Technique > "If you can't explain something simply, you don't understand it well enough." > > β Richard Feynman <p class="fragment">Writing a blog is the best "teaching" process</p>
## Sharing and Communication - Help people facing the same problems - Get feedback and suggestions - Meet like-minded friends
## Personal Brand <p class="fragment">Visualized display of technical accumulation</p> <p class="fragment">Plus point for job hunting</p> <p class="fragment">Proof of continuous learning</p>
## Summary: Why Write a Blog | Reason | Benefit | |------|------| | Knowledge consolidation | Systematized learning outcomes | | Feynman learning | Deep understanding of knowledge | | Sharing and communication | Community connection | | Personal brand | Career development |
# Chapter 2 ## My Previous Blog System
## Blog Platform Attempts Platforms I've used: <p class="fragment">π CSDN / Cnblogs</p> <p class="fragment">π Zhihu Column</p> <p class="fragment">π GitHub + Jekyll</p> <p class="fragment">π Hexo</p> <p class="fragment">π VuePress / VitePress</p>
## Third-Party Platforms <div style="display: flex; gap: 2em;"> <div style="flex: 1; background: rgba(76, 175, 80, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #4CAF50;"> ### β Pros - Zero cost to start - Built-in traffic and exposure - No server maintenance needed </div> <div style="flex: 1; background: rgba(244, 67, 54, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #F44336;"> ### β Cons - Advertisement interference - Uncontrollable styling - Data not fully owned - May be throttled or censored </div> </div>
## Static Site Generators **Jekyll / Hexo / Hugo** <div style="display: flex; gap: 2em;"> <div style="flex: 1; background: rgba(76, 175, 80, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #4CAF50;"> ### β Pros - Full control over content - Markdown writing - Free hosting (GitHub Pages) </div> <div style="flex: 1; background: rgba(244, 67, 54, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #F44336;"> ### β Cons - Complex theme customization - Limited feature extension - Some frameworks have outdated ecosystems </div> </div>
## Documentation Tools **VuePress / VitePress** <div style="display: flex; gap: 2em;"> <div style="flex: 1; background: rgba(76, 175, 80, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #4CAF50;"> ### β Pros - Vue ecosystem, highly extensible - Suitable for technical documentation </div> <div style="flex: 1; background: rgba(244, 67, 54, 0.1); padding: 1em; border-radius: 8px; border-left: 4px solid #F44336;"> ### β Cons - Blog features require extra configuration - More oriented toward documentation than blogs </div> </div>
## Pain Points Summary <p class="fragment">π¨ Themes difficult to meet personalization needs</p> <p class="fragment">π Lack of mathematical formulas and chart support</p> <p class="fragment">π¬ Want slide presentation functionality</p> <p class="fragment">β‘ Pursuing better performance and developer experience</p>
# Chapter 3 ## My Custom Blog System
## Why Choose Astro | Feature | Description | |------|------| | **Island Architecture** | Load JS on demand, ultimate performance | | **Framework Agnostic** | Supports Vue/React/Svelte | | **Content First** | Designed specifically for content sites | | **Modern Toolchain** | Vite-powered, great developer experience |
## Tech Stack ``` Astro 5 Static site generation Vue 3 Interactive components TypeScript Type safety Tailwind CSS Atomic styling Reveal.js Slide presentations ```
## Core Features <p class="fragment">β Markdown / MDX support</p> <p class="fragment">β Code highlighting (100+ languages)</p> <p class="fragment">β Mathematical formulas (KaTeX)</p> <p class="fragment">β Flowcharts (Mermaid)</p> <p class="fragment">β Data visualization (ECharts)</p> <p class="fragment">β Slide presentations (Reveal.js)</p>
## Content Organization ``` content/ βββ posts/ # Blog posts β βββ math/ # Math notes β βββ tools/ # Tool tutorials β βββ media/ # Presentations βββ pages/ # Static pages βββ slides/ # Independent slides ```
## Feature: Tip Containers ```markdown ::: tip Tip This is a tip ::: ::: warning Warning This is a warning message ::: ::: danger Danger This is a danger warning ::: ```
## Feature: Mermaid Charts Supports multiple chart types: - Flowcharts - Sequence diagrams - Class diagrams - Gantt charts - State diagrams
## Feature: Slides Three usage methods: | Method | Description | |------|------| | Independent slides | `content/slides/` | | Article to slides | `layout: slides` | | Embedded | `<Slides>` component | Just like what you're seeing now!
## Developer Experience - π₯ Hot reload, real-time preview - π¦ Component-based development - π¨ Tailwind rapid styling - π Pure Markdown writing
# Chapter 4 ## Future Plans
## Content Plans <p class="fragment">π Complete math notes series</p> <p class="fragment">π οΈ More tool usage tutorials</p> <p class="fragment">π» Programming tech sharing</p> <p class="fragment">π Data analysis case studies</p>
## Feature Enhancements <p class="fragment">π Full-text search optimization</p> <p class="fragment">π¬ Comment system integration</p> <p class="fragment">π Access statistics and analytics</p> <p class="fragment">π Multi-language support</p>
## Performance Optimization - Image lazy loading and optimization - Better SEO support - PWA offline access - Faster build speed
## Community Building <p class="fragment">Open source blog theme</p> <p class="fragment">Write usage documentation</p> <p class="fragment">Help more people build blogs</p>
## Long-term Vision > Continuous learning, continuous output > > Use words to record every step of growth
# Summary
## Review | Stage | Content | |------|------| | Motivation | Knowledge consolidation, learning, sharing, branding | | Past | Platform blogs β Static generators | | Present | Astro custom blog system | | Future | Continuous optimization, enriched content |
## To Those Who Want to Write Blogs <p class="fragment">Don't wait until you're "ready" to start</p> <p class="fragment">Start by documenting a small piece of knowledge</p> <p class="fragment">Consistency is more important than perfection</p> <p class="fragment">Choose the right tool for yourself</p>
# Thank You! Welcome to exchange and discuss Press `Esc` to view slide overview