Welcome to Astro Tech Blog
This is the first article of a modern tech blog built with Astro, introducing the blog features and usage.
Haiyue
3min
Welcome to Astro Tech Blog
This is a modern tech blog built on the Astro framework, aiming to provide an excellent reading experience and powerful feature set.
Blog Features
🚀 Excellent Performance
- Static site generation based on Astro
- Optimized build process and resource loading
- Fast page switching and navigation
🎨 Modern Design
- Design philosophy inspired by VuePress Theme Hope
- Responsive interface built with Tailwind CSS
- Support for light and dark theme switching
📝 Content Management
- Support for Markdown and MDX formats
- Code highlighting and mathematical formula rendering
- Tag and category system
🔍 Search Functionality
- Local search support
- Real-time search suggestions
- Keyword highlighting
📱 Responsive Design
- Perfect adaptation for mobile devices
- Tablet and desktop optimization
- Touch-friendly interactions
Tech Stack
This blog uses the following technologies:
const techStack = {
framework: 'Astro',
frontend: 'Vue 3',
styling: 'Tailwind CSS',
language: 'TypeScript',
search: 'Fuse.js',
markdown: 'Marked + Prism.js'
};
Getting Started
Install Dependencies
npm install
Start Development Server
npm run dev
Build Production Version
npm run build
Writing Guide
Frontmatter Configuration
Each article needs frontmatter configuration at the beginning:
---
title: 'Article Title'
description: 'Article Description'
pubDate: '2025-01-08'
tags: ['Tag1', 'Tag2']
categories: ['Category']
author: 'Author'
image: '/images/posts/cover.jpg'
---
Supported Features
- Code Highlighting: Supports multiple programming languages
- Math Formulas: Using LaTeX syntax
- Image Lazy Loading: Automatic image loading optimization
- Table of Contents: Automatically generated article navigation
- Related Articles: Intelligent recommendation of related content
Deployment
This blog can be deployed to any platform supporting static sites:
- Vercel
- Netlify
- GitHub Pages
- Cloudflare Pages
Simply run the npm run build command, then deploy the dist directory.
Conclusion
Hope this blog provides you with an excellent writing and reading experience. If you have any suggestions or questions, feel free to provide feedback through GitHub Issues.
Happy Blogging! 🎉