在《程序员不可错过的一款Hexo博客主题》中介绍了我博客的主题 stellar ,还介绍了部署方式的调整:
  • 空间:使用 GitHub Page ,然后进行域名的绑定;
  • 域名:需要修改 DNSPod 中的 DNS 解析;
  • 图床:选用 GitHub 图床,配合 jsdelivr 做 CDN 加速;
  • 写作工具:Typora;发布方式:GitHub Action 。
尽管这种方式有很大的改进,但因为使用的是 hexo ,每次发布博客文章的步骤:
  • 使用 hexo 的命令创建一个 md 文件;
  • 将写好的文章复制到改 md 文件中,并填写相关的头信息,分类、标签之类的;
  • 本地运行预览下效果;
  • 发布到服务器。
这种方式对程序员来说算是非常友好了,但每次修改文章上面的步骤几乎要重新来一遍。而且之前使用 stellar 主题也是因为这个主题有专栏,但试用之后发现专栏的功能没有达到我的预期(通过引用博文的方式来组织专栏)。
所以,决定换一个博客工具,春节期间,一番折腾后,发现了 NotionNext。
Notion 是我一直在使用的一款强大的笔记工具,NotionNext 将 Notion 笔记实时渲染成静态博客网站,就像下面这样,在 Notion 中维护笔记,稍等片刻,网站的内容就自动更新了。
notion image
下面介绍我是怎样迁移到 NotionNext 的,大体有三个步骤:
1、将网站在 vercel 中运行起来;
2、绑定域名;
3、博客配置。

使用 vercel 托管

vercel 是一个用来部署前端应用的云平台,我们使用 vercel 来进行网站的托管。步骤如下:
1、NotionNext 的 Github 地址是:https://github.com/tangly1024/NotionNext ,将该项目 fork 到自己的仓库中;
2、在 https://vercel.com 网站中注册账号,成功注册后,在 vercel 中创建项目 notion-next;
3、在 vercel 创建项目时,导入上面 fork 的 Git 项目;
4、在环境变量中添加 Notion 的 Page ID ,这样就和 Notion 的数据库做了绑定;
Notion 的 Page ID 在 Notion 的页面点击 Share 后的地址中获取:
notion image
5、vercel 默认会提供域名供我们访问,当然我们也能绑定自己的域名。
更多的介绍可以参考作者的博客:https://tangly1024.com/

域名绑定

1、我使用 Cloudflare 来做 DNS 解析,Cloudflare 是一家全球最著名的 CDN 加速服务商,提供了免费和付费的网站加速和保护服务;
2、在 Cloudflare 网站中注册账号,添加站点 fwhyy.com ;
3、在 Cloudflare 的 DNS 模块设置 A 记录和 CNAME,地址为 vercel 中的地址:
notion image
4、在 godaddy 中将域名的 DNS 设置为 Cloudflare 的 DNS 服务器:
notion image
5、在 vercel 中进行域名的添加,解析正常如下图:
notion image
6、如果发现解析不正常,可以检查下 Cloudflare 中的配置,ssl 中是否设置的是完全:
notion image
并且在「缓存/配置」中清除所有内容:
notion image

配置

经过上面的步骤,就可以通过域名访问了。但博客的一些基本设置还需要修改源码。
将 fork 的项目下载到本地,主要修改根目录下的 blog.config.js 文件:
notion image
配置中的项都有注释说明,也可以自行修改,然后执行 yarn dev 在本地运行看效果。调整完成后,将代码 push 到 Github 后,vercel 会自动进行编译和发布:
notion image

最后

如果您在使用 Notion ,又正好想要玩玩博客,我觉得可以试下 NotionNext 。不过我理想中的博客还是能随意写博客文章,又能方便地将现有的博客文章组织成专栏。
Hexo
代码提交那点事2023 关键词:做减法