Hexo + Vercel博客搭建流程

最近通过Hexo和Vercel尝试搭建了个人博客，在这里记录一下搭建流程。
在开始之前，需要做好准备工作，官网下载并安装Node.js与git。

1.Hexo本地部署

首先通过以下命令从淘宝npm镜像源安装cnpm工具：

$ npm install -g cnpm --registry=https://registry.npmmirror.com

通过cnpm可以快速安装Hexo Cli：

$ cnpm install -g hexo-cli

打开git bash，初始化一个目录用于存放博客：

$ hexo init cyf-blog

进入博客目录，下载依赖：

$ cd cyf-blog
$ cnpm install

接下来可以执行以下命令查看本地部署是否成功：

$ hexo clean && hexo g && hexo s

复制链接到浏览器中打开，出现以下页面表示本地部署成功：

Hexo的官网上有很多主题可以帮助我们打造个性化的主页，这里我选择了next主题。
首先在项目根目录下创建git仓库：

$ git init

next主题的GitHub页面上提供了两种安装方式，建议选择直接install的方式，这样后面不容易出错：

$ npm install hexo-theme-next

Hexo推荐我们使用备用主题配置，这样在升级主题时配置文件不会被覆盖。
复制主题配置文件到主目录：

$ cp node_modules/hexo-theme-next/_config.yml _config.next.yml

在博客项目主目录下找到_config.yml并打开，将其中theme项修改为next。

打开_config.next.yml修改方案为Gemini，并改为暗色模式：

然后松开此处注释：

配置好后，重新打开本地网页：

$ hexo clean && hexo g && hexo s

可以看到，主题已经更换为next的格式。关于主题的配置这里不作过多赘述，网络上关于next的主题配置美化教程有很多，可以自行尝试。
如果想写一篇新博客的话，首先最好将_config.yml中的post_asset_folder项改为true，并作如下修改：

这样我们在命令行创建新博客时会自动生成一个同名文件夹管理图片，命令行创建一篇新博客：

$ hexo new "example"

然后在source/_posts目录下就会出现新创建的markdown文件和一个同名文件夹，只要将图片放在该文件夹中并以如下格式编写，就可以在博客中加入图片：

![图片](图片文件名)

如上图所示，成功加入图片并上传博客。

2.Vercel网站托管

首先在GitHub上创建一个仓库，我这里取名为cyf-blog，输入如下命令建立本地关联：

$ git remote add origin git@github.com:magDice/cyf-blog.git

其中magDice替换为你的GitHub账户名，下一步把本地库的所有内容推送到远程库上

$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git push -u origin main

成功之后，打开Vercel网页，选择导入我们GitHub的博客项目


Framwork Preset选择Hexo并部署，点击Vercel提供的域名即可访问我们的个人博客。

然而Vercel提供的域名需要科学上网才能访问，所以我们需要一个国内域名。随便购买一个国内域名，点击Setting，Domains，Add Domain。

这里输入购买的域名，然后点击Save。

进入域名控制台，我这里是腾讯云。选择域名点击解析，添加记录，如下图所示：

然后再添加一条，如下所示：

接下来稍等一会刷新页面，Vercel会自动检测，出现如下页面表示配置成功：

然后就可以通过国内域名直接访问了。