基于 Nobelium 的个人博客搭建记录

date
May 4, 2023
slug
blog-deploy-method
status
Published
tags
技术
计算机技术
summary
　　本文介绍了如何使用 Nobelium 搭建一个部署在 Vercel 上的个人博客，并使用 Cloudflare 的 CDN 进行加速⚡。用这个方法建的博客响应速度、美观程度都较为不错👍🏼。如果你想拥有一个属于自己的 blog 空间，那么也许这篇文章能够帮到你。
type
Post
URL
notion image

前言

　　我是一个对写博客有些执着的人。我认为，在互联网的一隅，写着自己的东西，无论是记录生活也好，输出学到的知识、技术也好，都是留下了时光的印记。
　　我前前后后用过了Wordpress、Hexo、Gatsby、Hugo等博客框架，这些框架各有千秋，但是无一例外都需要花大量的时间去折腾，比如怎么选择 markdown 编辑器、怎么写 CSS 搞一个好看的界面、怎么优化 SEO 等等，留给写作和思考的时间反而少了，这与写作和输出的目的背道而驰。于是，我终于找到了一个比较方便省时的博客写作模式——基于 Nobelium 、Vercel、Cloudflare 的个人博客网站。
　　Nobelium 是一个以 Notion 作为数据源，用 react-notion-x 进行页面渲染的博客框架。这是它的 GitHub地址。我的博客就是用 Nobelium 搭建的，速度很快，界面优雅美观，其使用的 Tailwind CSS 非常高效简洁，易于后期定制化。最重要的是，博客运营的过程非常省心省力：我只需要在 notion 上，把文章写出来，然后把文章状态设置为 Published，类型改为 Post，就能被 Nobelium 爬取到文章信息，从而在网页中展示出来。因此，我能把绝大部分精力用来阅读、思考、输出，而不是在琢磨博客这个工具上。
　　在做这个博客的过程中，还算是比较顺利的。已经有了不少相关的文章可以供参考，因此我很快地就把博客搭好并开始写作了。对于写作，该如何写作和应具备哪些思维，可以看看这篇文章：写作课笔记 | 先完成再完美，先写完再修改。
　　如果你也想尽快搭建一个属于自己的博客并写点什么的话，那我们就赶快开始吧。
 

1️⃣ 关于如何搭建博客和定制化

　　可以看这篇文章：用 Notion 部署你的个人博客 —— 基于 Nobelium + Vercel 的个人博客搭建指南。
　　关于如何修改博客基本信息、头像、脚注、添加评论系统，可以读这个post：Nobelium 初体验——静态博客的不二之选。
　　我们在Vercel部署了自己的博客，但是在访问的时候出现了vercel.app 域名在国内无法访问的情况，也就是所谓的被墙了，其实是因为这个域名后缀被 DNS污染 了。解决方案是，用域名进行 CNAME 解析映射过去就能访问了。这个会在第三部分讲到。
 

2️⃣ 域名的购买

　　我选择的是Namesilo，一家国外的知名域名注册商，同样的选择还有Godaddy、Namecheap、万网（阿里）等。Namesilo可通过支付宝支付，域名的价格都很低，而且不像 Godaddy 或其他平台首年优惠、续费很贵，Namesilo 的域名续费和首年购买价格一致。
　　如何购买域名的相关介绍可以看看：Namesilo购买域名详细教程 - VPS攻略 (vpsgongyi.com。写得很详细，我就不再过多赘述了。

3️⃣ 域名解析和CDN

　　Cloudflare是一个国外域名解析服务商。它的服务具有Worker.js、全球无限CDN流量、网站防火墙、DDoS等特性，且自带免费CDN，在国内直连的话速度还不错。
　　这个板块我主要参考的文章有：
 

Vercel配置

　　现在，我们回到 Vercel。打开你的 Vercel Dashboard，然后打开你的项目。
notion image
 
　　打开 Settings 里面的 Domain，输入域名并点击 Add。
notion image
 
 
　　一般都是选第一个，注意这里的域名只是演示，实际参考你自己的域名。
notion image
 
　　这一步 Vercel 会提供给你一个 IP，把这个 IP 加入到你的DNSPOD就行，我用的是 Cloudflare，所以继续，来到 Cloudflare 配置阶段。
注意，76.76.21.21 可能已被DNS污染，先不管它
注意，76.76.21.21 可能已被DNS污染，先不管它
 

Cloudflare配置

　　如果你还没有Cloudflare账号，得先去注册一个：https://www.cloudflare.com。
　　现在，打开 Cloudflare 的域名控制台 https://dash.cloudflare.com，在 网站 一栏中，点击 添加站点。
notion image
 
　　输入在2️⃣ 域名的购买 中购买的域名，点击添加站点。
notion image
　　
选免费计划。
notion image
　　找到红框内的添加名称服务器，把两个分别复制下来。
在Namesilo 弄好之后，回来这个界面点击图中的完成，继续
在Namesilo 弄好之后，回来这个界面点击图中的完成，继续
　　接下来，我们回到 Namesilo 的控制台的 NameServers ，NameSilo 默认有3个NS记录，你只需要将这3条默认的都删除了，依次填入刚才复制的两条名称服务器即可：
默认的3个NS记录，全部删掉，换成红框中你的名称服务器地址
默认的3个NS记录，全部删掉，换成红框中你的名称服务器地址
 
　　到步骤3/3，我们需要配置DNS解析。这里我们在 Cloudflare ，点添加记录：
notion image
 
　　所以我们在后台添加记录，添加A记录与CNAME记录地址，这里我已经整理好：
记录类型
主机记录
记录值
A
@
76.223.126.88
CNAME
www
cname-china.vercel-dns.com
  • A 记录：为了让用户可以通过域名gritodyssey.com可以直接访问博客主页，Content 写vercel针对墙内用户特供的特殊地址，76.223.126.88 或 76.76.21.98 等。76.76.21.21 应该是已经被污染了，因此没有使用。
 
　　完成后如下图所示：
DNS解析
DNS解析
 
　　到这一步基本就完成了，我们再次回到 Vercel，如果域名服务配置正常，Vercel的卡片会变成如图的样子，说明设置成功了。
notion image
 
　　另外，如果我们希望自己的网站更加安全，可以在 Cloudflare 的左侧边栏 ssl/tls 配置中，开启 https 加密。
notion image
 
　　接下来我们就可以通过设置的域名（如 www.onesparkout.com）访问我们的博客网站了。
 
　　到此，博客的搭建告一段落。你拥有了一个快速响应、CDN加速的博客，可以尽情开始你的写作之旅了！
 
 

2024.07.05更新：Cloudflare CDN更换

　　将原来的DNS解析至从 cname-china.vercel-dns.com 换到vercel.cdn.yt-blog.top 。
notion image
 
　　参考来源是这篇文章：推一下 Vercel 加速节点 - Fgaoxing_Fgaoxing的个人博客 (yt-blog.top)；
　　关于具体的优化细节参考可这篇文章：博客访问速度优化 - new精致的生活 (itangqiao.top)
 

© ziyuan_yin 2024