个人博客搭建

本文介绍在搭建个人博客网站时的主要步骤，通过采用阿里云域名+Cloudflare图床&&托管+github同步+hexo生成的方式，实现接近零成本的部署方案，其中域名购买是可选的。

1.购买域名

阿里云搜索miaoer，推荐后缀.vip/.cn/.icu等价格较为实惠，续费每年50RMB以内，选择miaoer.icu作为最终域名。

2.托管域名

登录Cloudflare，将域名加入free计划管理，获取DNS服务器javon.ns.cloudflare.com和keira.ns.cloudflare.com，到阿里云域名控制台的DNS管理中修改默认DNS服务器。

3.创建图床

在CloudFlare个人中心找到R2对象存储，选择每月10GB的免费套餐（0.015美元每GB），绑定PayPal账户，成功后，创建名为blog-file的存储桶，在设置中允许访问，并为其添加自定义域data.miaoer.icu。

4.安装hexo

在node.js官网安装node、npm,执行npm install -g hexo-cli安装hexo，为了加速安装，可以修改npm源，通过命令npm config set registry https://registry.npmmirror.com。

5.github部署

创建名为Miao-er.github.io的github仓库，在本地执行如下代码，

hexo init fkchen-blog 					#初始化博客目录
cd fkchen-blog							
npm install								#安装依赖
npm install hexo-deployer-git --save	#安装部署工具

编辑_config.yml文件，修改作者信息如title、author、url等，并在结尾添加如下内容:

deploy:
  type: git
  repository: https://github.com/Miao-er/Miao-er.github.io.git
  branch: main

然后执行hexo clean && hexo deploy，完成GitHub部署。

6.托管网站

登录Cloudflare，点击workers and pages选项，选择pages，连接github账户，选中上述仓库进行部署，在控制台页面选择自定义域miaoer.icu，保存配置。

7.修改主题

在hexo-theme寻找合适主题，这里使用fluid主题，使用npm install --save hexo-theme-fluid安装到node-modules目录下，在_config.yml中指定如下内容：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

并使用hexo new page about创建关于页，在/source/about/index.md文件中添加layout: about属性。

将node-modules下的_config.fluid.yml文件复制到根目录中，自定义修改部分默认内容。

8.添加评论区

安装utterances并启用仓库的issues功能，修改_config.fluid.yml中，在discuss中设置enable:true，然后在utterances项中设置如下内容：

enable: true
repo: Miao-er/Miao-er.github.io
issue_term: pathname
label: utterances
theme: github-light
theme_dark: github-dark
crossorigin: anonymous

执行hexo clean && hexo deploy完善部署。

9. 上传Google搜索引擎

访问Goole-Search-Console，选择添加资源，可以选择添加整个网域，也可以指定特定的网址前缀。其中前者需要到域名服务商添加一条TXT格式的DNS记录验证，而后者包含多个选项，比较方便的是将Google提供的特定html验证文件放置在网站的根目录下更新，该文件需要确保在不登录的情况下能够被访问。

10. 其他辅助工作

1. 在_config.yml修改permalink: :title/，该行配置修改链接呈现形式为site_name/post_title，而默认文章路径为site_name/year/month/day/post_title，这样的多层目录搜索引擎爬虫爬起来非常费力。

2. 安装npm install hexo-renderer-marked，在_config.yml中开启如下功能：

   post_asset_folder: true
   marked:
     prependRoot: true
     postAsset: true

   该功能会在使用hexo new创建文章时，在同目录下创建文章的同名文件夹用于存放资源图片，此时在markdown源码中使用![](image.png)即可取代原本{% asset_img image.jpg 这是一张图片 %}的功能。