个人博客的搭建和部署
个人博客的搭建和部署
这篇文章讲解如何从0开始搭建一个个人博客。很显然我已经有了一个博客，所以在这个教程中我会用二级域名部署一个其它主题的vuepress博客页面。
基础工具
vuepress框架
官方文档：Vuepress.vuejs.org
VuePress 是由 Vue.js 官方团队开发的一个 静态网站生成器，最初是为了支持 Vue 官方文档而设计的。它基于 Vue + Markdown，主要特点是用 Markdown 写文档，然后VuePress会自动把它编译成一个静态网站。
简单来说，它的核心功能，基本上也是全部的功能，就是把md渲染到html。它本身是不带任何样式主题的，所以一般很少用到原生的vuepress，除非你想自己从头编写一个自己的主题。
在搭博客时第一件事就是找合适的主题，各个主题之间有不同的风格，以适配不同的使用场景。比如要搭博客可以选华丽充实一点的；如果只是做个知识库或者api手册就可以选简约的。
不过，无论是何种主题，只要基于vuepress，它本质上仍是一个vue项目，所以我建议先学学vue框架再回来搭建博客。
Cloudflare
官网：Cloudflare，如果读者尚未注册，请先注册。
Cloudflare素有“赛博佛祖”的称号，它提供边缘计算与网络安全服务在强度与价格方面都堪称一流，最常见的例子就是各种网站的人机验证，几乎都能看到Cloudflare的logo。不过，今天只说它的云原生部署这项服务。
学过计算机网络就应该知道，网站是需要服务器来部署以对外提供服务的。在没有Cloudflare这样的边缘计算平台之前确实如此，我的第一个上线网页（flask+mysql做的留言板）就是租了一台阿里云服务器并利用gunicorn部署到公网的。而Cloudflare可以做到无服务器部署，也就是说你只需要一个域名就能部署网站。大概的原理是，在dns解析阶段Anycast会把请求引导到最近的Cloudflare节点，之后在这些节点上会进行一系列的处理，包括：安全检查、缓存刷新、数据获取等。可以看出，它的“无服务器”并不是说真的不用服务器，而是把交互服务器的步骤（部署、防DDos等）抽象成一项服务了，使得开发者只要关注应用层即可。虽然这样做局限性很大，但是这种工具非常适合用来迅速部署上线一些玩具页面。
购买域名、生成二级域名
购买域名有很多渠道，但是为了后续操作方便，如果对域名没有很高的要求，一般选择直接在Cloudflare购买并激活。
在左边栏点击Domain Registration，展开栏点Register Domains。然后你就可以按关键字搜索想要的域名：
注意一般越短的、越有实际意义的（比如单词、短语、网络流行语）的域名越贵，买的时候也应注意续费价格，有的域名很坑人，买的时候很便宜，要续费就是天价。Cloudflare上我建议买7美元档，不是太贵，质量也还可以。
另外，我也不建议买.vip、.xyz这种域名，人家看了就不想点进来。后缀名方面优先选择国家后缀（.cn除外，因为要备案）、其次是.link、.net这种不太奇怪的。买完之后立刻开始解析，域名要解析1-2天。
下一步就是要生成一个二级域名。如果你只想用这个域名部署一个网站，可以暂时跳过这一步。
比如我的域名是https://fuufhjn.link，按照这个域名的协议，我可以生成50个例如https://https://playground.fuufhjn.link/这样的二级域名。我一般用二级域名来部署一些和我的博客有关的其它网页，这样比较能回本。
在Manage dimains里可以看到已经购买的域名，点右边的manage，再点右边的Configure DNS，添加一条记录即可。除了把Type改成CNAME（指向域名而非ipv4），其它都保持默认。
初始化vuepress主题模板
选择一个喜欢的主题，进入它的官方文档，按教程操作（一般都会有一个快速开始）。我选vuepress-reco作为示例，这是一个极简风格的主题。
mkdir blog-example
npm install vuepress
npm install @vuepress-reco/[email protected] -g
theme-cli init按照指示一步步走就行，其中有一个What style do you want your home page to be?，选blog即可，2.x还没有稳定支持。如果没报错，直接运行项目：
npm run dev浏览器打开8080端口就可以看到在本地运行的主题页面了。由于这篇帖子只讲部署，对于如何添加文章、美化博客请自行查看主题文档。
在Cloudflare部署
首先要把整个项目放在gitlab上。其实只要是代码托管平台就行，不一定非得用gitlab，但是考虑到墙的问题，建议还是用gitlab。在gitlab创建一个全空项目，之后：
git remote add origin https://gitlab.com/zjq8947/blog-example.git上传完成后，打开Cloudflare，点左边的Compute(Workers)，然后选Workers & Pages，这个就是管理所有已部署的域名的地方。点击新建，pages，Import a repository，选出刚才创建好的gtilab项目，begin。
之后你需要填一些信息，Framework preset就选vue（这个我不知道有啥用，其实不选也无所谓）；后面的选项很重要，build command要去你对应框架的package.json里找，这里的是
npm run buildbuild output是放编译完的项目的文件夹，默认是/dist，但是vuepress-reco的目录是不会初始化/dist的，它是/public。怎么确定自己使用的框架把编译目录放在哪呢，最简单的办法就是手动用npm run build在本地编译一次，看看git中谁多出来了就是谁。
一般情况下到这里就可以点deploy了，但是也有可能会报一个错说你的node版本有问题。这是因为Cloudflare上的环境跟你肯定是有差异的，所以需要设置一个环境变量：NODE_VERSION，值就是你本地的node版本，我用的是20.10.0，自己的版本用node --version看。
点击deploy，成功后会启动一个开发域名，形如：https://7980f63c.blog-example-b3s.pages.dev，这是由于目前还没有为它绑定域名，但是这时候已经可以用公网访问到了。
之后去刚才的dns配置那里，把子域名example.fuufhjn.link指向我的开发服务器url：blog-example-b3s.pages.dev（这个url可以在Workers & Pages中页面条目的下方找到），就可以通过自己的域名访问到了。不过不能立即访问到，域名的解析是需要时间的，一般在24-48小时之间。
到这里部署完成。后续想修改博客内容，只需要在本地改完后push到gitlab，Cloudflare会自动更新公网上的内容，可以说极其方便了。
个人推荐的插件及其安装
图床
根据松耦合原则，图片等静态资源应该单独存放。而且由于我们使用的是云原生部署，是不能直接在服务器上安资源的。如果使用的是本地图片连接，部署的时候会直接报错。
所以如果想要在博客中使用图片，就必须有图床（也就是一个远程存储图片的容器，供网页用url访问）。这部分内容typora使用gitlab图床结合picGo这篇文章已经讲得非常清楚，按它的配置即可。配置完后，如果你使用typora编写md（如果你不是，很推荐试试），就可以直接把图片复制到里面，它会调用PicGo自动上传到图床，非常方便。
我听说还有另外一些流派，比如用Cloudflare的存储桶，或者github提供的图床，甚至直接图方便使用第三方图床，比如sm.ms等。不过综合考虑后我还是觉得typora+PicGo+GitLab是使用体验最完美的。
waline评论区
这个功能完全选装，对于流量小的博客它几乎没什么用处。而且国内对评论系统管得很严，无需备案的评论系统都必须挂代理才能访问，所以大部分国内读者其实是不太愿意特意开梯子给你整两句的。不过如果很想装，我推荐国际版Waline。
先按官方文档在github上启动一个服务，之后再看你是用的vuepress主题文档去集成。
其它选装插件
一般来讲，主题文档都会有一个单独的部分来讲它提供了哪些插件，很值得一读。最好在配置文件中去掉不需要的，装上需要的。
后续的维护工作
鉴于Cloudflare的安全和强大，一旦部署成功你基本上啥也不用管了，只需要在本地修改然后不断push就行。唯一可能遇到的问题就是可能在放图的时候不小心放了一张本地图片。
未完
后续我自己遇到问题时会写在这里。
勤于撰写技术博客也是一种开源精神。前人栽树后人乘凉，博主不经意间提到的一句话就可能在几个月后为一个菜鸟省下一下午的时间。在没有chatgpt之前，我解决问题就看csdn、stackoverflow等博客平台，我也算是技术博客的受益者。现在解决问题可以靠AI，但我还是希望更多的人能在做项目或debug时写一写博客，让后来者能省下时间做更有意义的事，这种传承精神是chatgpt无法替代的。