nextjs-blog

优势

当前blog使用了nextjs-blog框架，能方便地部署到vercel，支持SSR-CSR混合架构，相比hugo这类SSG博客系统 提供了更多的动态性。

由于能部署到vercel，免去了服务器成本，绑定自己的域名后可享受vercel全球CDN加速。

vercel可以部署私有的github项目，不需要开源自己的blog。

编辑工具

nextj-blog支持mdx（markdown extensions），但是为了保证文章的可移植性，我还是选择了使用md（markdown）作为日常使用的格式。

普遍使用的markdown编辑器有：

• typora
• vscode

typora直接打开 /data/blog 这个文件夹就可以开始编辑了，但是有个问题无法解决，它不能设置markdown文件的图片读取路径，在nextjs-blog中，markdown图片必须使用/static/images 这个路径，一定要/目录开始，typora会将/解析到系统根目录。

nextjs-blog图片实际的存放路径则是工程根目录/public/static/images。

vscode解析markdown图片路径 / 代表的是工程根目录，跟nextjs-blog的解析方式一致，现在只需创建一个/public/static的软连接到/static，图片就可以在vscode进行侧边预览了。

图片自动粘贴到指定位置

安装一个 Paste Image 插件，使用Ctrl+Alt+V，就可以自动将图片粘贴到你的文章里，并会存放到你指定的路径。

可以修改默认规则，在.vscode/settings.json

"pasteImage.path": "${projectRoot}/public/static/images/${currentFileNameWithoutExt}/",
"pasteImage.basePath": "${projectRoot}/public",
"pasteImage.forceUnixStyleSeparator": true,
"pasteImage.prefix": "/"

这个设置，粘贴图片时，会自动将图片放到/public/static/images/${文件名}/下面，markdown里面的链接，则为/static/images/${文件名}，完全满足要求。

新建文件自动添加信息

安装一个FrontMatter插件，在settings.json中按如下配置：

"frontmattergen.enabled": true,
"frontmattergen.filename.extension": ".mdx"

配置FrontMatter的模板，新建一个post文件，放置在.vscode/fmg_templates中，内容如下：

---
title: %filename%
date: '%yyyy%-%mm%-%dd%T%hh%:%ii%:%ss%Z'
tags: ['']
draft: false
summary: Summary of the article
---

配置好后，对目录右键 new post即可创建新的文章。

总结

通过这样一番设置，vscode就能很好的进行nextjs-blog的编辑了。