从 Hugo/Hexo/Next.js 迁移到 Astro 的3天指南

1
# 创建迁移分支
2
git checkout -b migrate-to-astro
3

4
# 确保当前工作已保存
5
git add .
6
git commit -m "备份：开始迁移到 Astro"

1
# 使用 AstroPaper 主题
2
npm create astro@latest my-blog -- --template satnaing/astro-paper
3

4
# 或使用 Fuwari 主题
5
npm create astro@latest my-blog -- --template saicaca/fuwari

1
npm create astro@latest my-new-blog
2
cd my-new-blog
3
npm install
4

5
# 安装常用集成
6
npx astro add mdx sitemap

1
# Hugo 格式
2
---
3
title: "我的文章"
4
date: 2023-01-15
5
tags: ["前端", "Astro"]
6
---
7

8
# Astro 格式（改动标记为 ⬅）
9
---
10
title: "我的文章"
11
pubDate: 2023-01-15  ⬅ date 改为 pubDate
12
tags: ["前端", "Astro"]
13
---

1
# macOS/Linux
2
find content -name "*.md" -exec sed -i '' 's/^date:/pubDate:/g' {} +
3

4
# Windows (PowerShell)
5
Get-ChildItem content -Filter *.md -Recurse | ForEach-Object {
6
    (Get-Content $_.FullName) -replace '^date:', 'pubDate:' | Set-Content $_.FullName
7
}

1
{{ range .Pages }}
2
  <article>
3
    <h2>{{ .Title }}</h2>
4
    <p>{{ .Summary }}</p>
5
  </article>
6
{{ end }}

1
---
2
const posts = await Astro.glob('../pages/blog/*.md');
3
---
4

5
{posts.map(post => (
6
  <article>
7
    <h2>{post.frontmatter.title}</h2>
8
    <p>{post.frontmatter.description}</p>
9
  </article>
10
))}

1
cp -r hugo-blog/static/* astro-blog/public/

1
export default defineConfig({
2
  redirects: {
3
    '/old-path': '/new-path',
4
    '/posts/[slug]': '/blog/[slug]',
5
  }
6
})

1
pnpm create astro@latest my-blog --template satnaing/astro-paper
2
cd my-blog
3
pnpm install

1
import { defineCollection, z } from 'astro:content';
2

3
const blog = defineCollection({
4
  schema: z.object({
5
    title: z.string(),
6
    pubDate: z.date(),
7
    description: z.string(),
8
    tags: z.array(z.string()),
9
  }),
10
});
11

12
export const collections = { blog };

1
find src/content/blog -name "*.md" -exec sed -i 's/^date:/pubDate:/g' {} +

1
cp -r hexo-blog/source/images astro-blog/public/images

1
---
2
import { Image } from 'astro:assets';
3
import myImage from '../assets/pic.jpg';
4
---
5

6
<Image src={myImage} alt="描述" />

1
export default defineConfig({
2
  redirects: {
3
    '/:year/:month/:day/:slug': '/blog/:slug',
4
  }
5
})

1
npx astro add rss

1
import rss from '@astrojs/rss';
2
import { getCollection } from 'astro:content';
3
import { marked } from 'marked';
4

5
export async function GET(context) {
6
  const posts = await getCollection('blog');
7

8
  return rss({
9
    title: '我的博客',
10
    description: '博客描述',
11
    site: context.site,
12
    items: posts.map(post => ({
13
      title: post.data.title,
14
      pubDate: post.data.pubDate,
15
      link: `/blog/${post.slug}/`,
16
      content: marked.parse(post.body), // 输出全文
17
    })),
18
  });
19
}

1
npm create astro@latest my-blog
2
cd my-blog
3
npx astro add react

1
---
2
import Button from '../components/Button.jsx';
3
---
4

5
<Button client:load>点击我</Button>

1
export default function Card({ title, description }) {
2
  const formattedDate = new Date().toLocaleDateString();
3

4
  return (
5
    <div className="card">
6
      <h2>{title}</h2>
7
      <p>{description}</p>
8
      <span>{formattedDate}</span>
9
    </div>
10
  );
11
}

1
---
2
const { title, description } = Astro.props;
3
const formattedDate = new Date().toLocaleDateString();
4
---
5

6
<div class="card">
7
  <h2>{title}</h2>
8
  <p>{description}</p>
9
  <span>{formattedDate}</span>
10
</div>

1
---
2
import Counter from '../components/Counter.jsx';
3
import HeavyChart from '../components/HeavyChart.jsx';
4
---
5

6
<!-- 立即交互 -->
7
<Counter client:load />
8

9
<!-- 延迟加载，性能更好 -->
10
<HeavyChart client:visible />

1
npx astro add sitemap

1
import { defineConfig } from 'astro/config';
2
import sitemap from '@astrojs/sitemap';
3

4
export default defineConfig({
5
  site: 'https://yourdomain.com',
6
  integrations: [sitemap()],
7
});

1
npx astro add image

1
---
2
import { Image } from 'astro:assets';
3
import cover from '../assets/cover.jpg';
4
---
5

6
<Image src={cover} alt="封面图" width={800} height={600} />

1
# 解决方案
2
npm install sharp

1
export default defineConfig({
2
  image: {
3
    service: { entrypoint: 'astro/assets/services/noop' }
4
  }
5
})

1
npm install @astrojs/mdx@latest

1
<!-- 局部样式 -->
2
<style>
3
  .card { color: blue; }
4
</style>
5

6
<!-- 全局样式 -->
7
<style is:global>
8
  .card { color: blue; }
9
</style>

1
<style is:global>
2
  .prose h1 { font-size: 2rem; }
3
  .prose h2 { font-size: 1.5rem; }
4
  .prose p { margin: 1rem 0; }
5
  .prose code { background: #f4f4f4; padding: 0.2rem 0.4rem; }
6
</style>
7

8
<article class="prose">
9
  <Content />
10
</article>