How to Publish a Blog Post on This Website ​

This guide will walk you through the process of creating and publishing blog posts on this VitePress-based website.

Prerequisites ​

Before you start writing, make sure you have:

1. Node.js installed on your system
2. Git for version control
3. Basic knowledge of Markdown syntax
4. Access to the repository

Setting Up Your Development Environment ​

1. Clone the Repository ​

git clone https://github.com/IsaacHuo/My_Blog.git
cd My_Blog

2. Install Dependencies ​

npm install

3. Start the Development Server ​

npm run dev

This will start a local development server at http://localhost:5173/My_Blog/

Creating a New Blog Post ​

1. Choose the Right Directory ​

• For English posts: en/blog/
• For Chinese posts: zh/blog/

2. Create Your Markdown File ​

Create a new .md file in the appropriate directory. Use a descriptive filename like my-awesome-post.md.

3. Add Frontmatter ​

Every blog post must start with frontmatter that defines metadata:

---
layout: ArticleLayout
title: Your Post Title
date: 2024-01-25
author: Isaac Huo
tags:
  - Tag1
  - Tag2
  - Tag3
description: A brief description of your post
---

Frontmatter Fields Explained ​

• layout: Always use ArticleLayout for blog posts
• title: The title of your blog post
• date: Publication date in YYYY-MM-DD format
• author: Your name
• tags: An array of relevant tags
• description: A brief summary for SEO and previews

4. Write Your Content ​

After the frontmatter, write your content using Markdown syntax:

# Main Heading

Your introduction paragraph goes here.

## Section Heading

### Subsection

Content with **bold text**, *italic text*, and `code snippets`.

```javascript
// Code blocks are supported
function example() {
  console.log("Hello, world!");
}

• Bullet points
• Are supported
• As well

1. Numbered lists
2. Work too
3. Perfectly

Blockquotes are great for highlighting important information.

## Markdown Features Supported

### Code Highlighting

Use triple backticks with language specification:

```javascript
const greeting = "Hello, world!";
console.log(greeting);

Tables ​

Images ​

![Alt text](path/to/image.jpg)

Place images in the public/ directory and reference them like:

![My Image](/My_Blog/images/my-image.jpg)

Links ​

• Internal links: [About](/en/about)
• External links: [GitHub](https://github.com)

Table of Contents ​

The ArticleLayout automatically generates a table of contents from your headings. Use proper heading hierarchy (h1, h2, h3, h4) for best results.

Preview Your Post ​

While the development server is running, you can preview your post by navigating to:

• http://localhost:5173/My_Blog/en/blog/your-filename.html
• http://localhost:5173/My_Blog/zh/blog/your-filename.html

Publishing Process ​

1. Test Locally ​

Always test your post locally before publishing:

npm run build
npm run preview

2. Commit Your Changes ​

git add .
git commit -m "Add new blog post: Your Post Title"

3. Push to Repository ​

git push origin main

4. Deploy ​

If using GitHub Pages or similar hosting, the site will automatically rebuild and deploy your changes.

Best Practices ​

Writing Tips ​

1. Clear Headlines: Use descriptive, engaging titles
2. Proper Structure: Organize content with headings and subheadings
3. Code Examples: Include practical examples when discussing technical topics
4. Consistent Style: Follow the site's tone and formatting conventions

SEO Considerations ​

1. Meaningful URLs: Use descriptive filenames
2. Meta Descriptions: Write compelling descriptions
3. Tags: Use relevant, specific tags
4. Internal Linking: Link to related posts when appropriate

Technical Guidelines ​

1. File Naming: Use lowercase, hyphen-separated names
2. Image Optimization: Compress images before uploading
3. Performance: Keep posts reasonably sized
4. Mobile-Friendly: Test on different screen sizes

Troubleshooting ​

Common Issues ​

Build Errors

• Check your frontmatter syntax
• Ensure all quotes are properly closed
• Verify image paths are correct

Styling Issues

• Make sure you're using ArticleLayout
• Check that headings follow proper hierarchy

Navigation Problems

• Verify your file is in the correct directory
• Check that the filename is valid

Getting Help ​

If you encounter issues:

1. Check the console for error messages
2. Review the VitePress documentation
3. Examine existing posts for reference
4. Contact the site administrator

Conclusion ​

Publishing on this blog is straightforward once you understand the workflow. The combination of VitePress and Markdown makes it easy to create professional-looking, well-structured blog posts.

Remember to:

• Test locally before publishing
• Use meaningful tags and descriptions
• Follow the established conventions
• Keep your content engaging and valuable

Happy blogging! 📝