最开始，我用 WordPress 写博客，但是 Wordpress 实在是太臃肿了，而且我也不需要用那么多功能，我发现用 Markdown 写博客又方便又快，并且非常通用，于是我将博客迁移到了 Hexo。
Hexo 是一个快速、简洁且高效的博客框架，我用它写了很多篇博客，大概有550篇左右。
Hexo 真的非常优秀好用，它的功能可以说非常完善了，有文章分类，标签，评论，搜索，RSS 等等功能。
博客框架的选择
我的博客最初使用的是 WordPress，但由于它功能臃肿且超出了我的需求，后来迁移到 Hexo。Hexo 是一个快速、简洁、高效的博客框架，支持 Markdown 写作，功能全面，包括分类、标签、评论、搜索等。我用 Hexo 写了超过 550 篇文章笔记。
这次迁移没有特别的技术原因，更多是出于兴趣。调研了多个博客框架后，我最终选择了 Astro，原因如下：
- VitePress 和 Docusaurus 缺少标签、分类功能，扩展成本高。
- Eleventy 的模板语言不够直观，社区活跃度较低。
- Hugo 虽然功能强大，但模板较老，主题不吸引我。
让人眼前一亮的 Astro
Astro 是一个现代的静态站点生成框架，支持 JavaScript 生态（如 React、Vue、Svelte）
Astro 支持 Markdown，并且能够预渲染，只生成静态页面，可以极大程度上提高页面的加载速度及性能，SEO 也更友好。
挑战一下自己
作为一个前端，网页性能优化是我非常感兴趣的一个方向，我想看看我能不能将博客的加载速度提高到极致。
Google PageSpeed Insights 测试
作为前端开发者，优化网站性能是我的兴趣所在。我希望新博客能在 Google PageSpeed Insights 测试中获得四项满分（性能、可访问性、最佳实践、SEO）。
Google PageSpeed Insights 测试报告
全球访问速度
通过配置腾讯云 CDN，网站在全球范围内的加载速度显著提升，国内平均加载时间仅 0.4 秒。
迁移及优化过程
迁移的过程非常有趣。我重点说文章迁移，用OpenAI生成文章描述及标题，优化图片格式，CDN加速。
- 文章迁移（写脚本调用 autocorrect-node）
- 优化文章格式（中英文之间加空格）
- 添加文章描述及优化文章标题（调用 OpenAI 接口）
文章迁移
文章迁移，我有超过 550 篇文章，将文章转换成 Astro 的格式很容易，但是转换的过程中我发现了不少优化点。
一方面是文章格式，有时候我没注意，文章里面中英文之间没有空格，文章不美观，我写了一个简单的脚本处理
import fs from "fs-extra";
// 引入 autocorrect-node
import autocorrect from "autocorrect-node";
export async function processFileWithPangu(filePath) {
await generateAndReplaceYAML(filePath);
}
async function generateAndReplaceYAML(filePath) {
let fileContent = await fs.readFile(filePath, "utf8");
fileContent = autocorrect.format(fileContent);
await fs.writeFile(filePath, fileContent);
return true;
}
async function loadFileList() {
const files = await fs.readdir("src/content/blog");
for (const file of files) {
if (file.endsWith(".md")) {
processFileWithPangu(`src/content/blog/${file}`);
}
}
}
loadFileList();
开始我是用的 pangu，但是 pangu 有点问题，pangu 对 Markdown 也不友好，不该加空格的地方也加了空格。后来我换成了 autocorrect-node，效果更好。
添加文章描述及优化文章标题
然后是添加文章描述，文章描述是在首页展示的，我将文章的前 100 个字符作为文章描述。550 篇文章太多了，我用 openai 的接口生成了文章描述。
import yaml from "js-yaml";
import fs from "fs-extra";
import OpenAI from "openai";
const filePath = "src/content/blog/100vw-includes-scrollbar.md";
const openAiFile = "openai.md";
async function parseMarkdownToJSON() {
try {
const fileContent = await fs.readFile(filePath, "utf8");
const yamlMatch = fileContent.match(/---\n([\s\S]*?)\n---/);
if (!yamlMatch) {
throw new Error("No YAML front matter found in the file.");
}
const yamlContent = yamlMatch[1];
const jsonData = yaml.load(yamlContent);
return jsonData;
} catch (error) {
console.error("Error parsing the file:", error.message);
throw error;
}
}
const token = "KEY";
const endpoint = "https://models.inference.ai.azure.com";
const modelName = "gpt-4o";
export async function processFileWithOpenAI(filePath) {
const { openai } = await parseMarkdownToJSON();
if (openai == 1) {
console.log("文件", filePath, "不需要调用 OpenAI");
return;
}
const client = new OpenAI({ baseURL: endpoint, apiKey: token });
let fileContent = await fs.readFile(filePath, "utf8");
const openaiFileContent = await fs.readFile(openAiFile, "utf8");
const content = fileContent + openaiFileContent;
const response = await client.chat.completions.create({
messages: [{ role: "user", content }],
temperature: 1.0,
top_p: 1.0,
max_tokens: 1000,
model: modelName,
});
const getOpenAIContent = response.choices[0].message.content;
const yamlMatch = getOpenAIContent.match(/---\n([\s\S]*?)\n---/);
if (!yamlMatch) {
throw new Error("No YAML front matter found in the file.");
}
const yamlContent = yamlMatch[1];
fileContent = fileContent.replace(/---\n([\s\S]*?)\n---/, yamlContent);
await fs.writeFile(filePath, fileContent);
}
processFileWithOpenAI(filePath).catch(err => {
console.error("The sample encountered an error:", err);
});
优化图片格式
用 Sharp 压缩图片，这儿不多做介绍了
sharp(inputBuffer)
.resize(320, 240)
.toFile('output.webp', (err, info) => { ... });