如何使用Hexo搭建属于自己的博客

一、准备工作

1. 申请GitHub账号
2. 安装Git
3. 安装NodeJS

二、创建仓库

在GitHub上创建一个新的代码仓库用于保存我们的网页。
点击Your repositories ，进入仓库页面。

填写仓库名，格式必须为<用户名>.github.io，然后点击Create repository

三、安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入https://hexo.io官网。

1. 安装 Hexo

   npm install -g hexo-cli

2. 查看版本

   hexo -v

3. 创建一个项目 hexo-blog 并初始化

   hexo init hexo-blog
   cd hexo-blog
   npm install

4. 本地启动

   hexo g
   hexo s

5. 浏览器访问 http://localhost:4000

四、更换主题

Fluid主题官网： https://github.com/fluid-dev/hexo-theme-fluid

1. 指定主题

   如下修改 Hexo 博客目录中的 _config.yml ：

   theme: fluid
   language: zh-CN

2. 创建 关于页

   首次使用主题的 关于页 需要手动创建

   hexo new page about

   创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性

   ---
   title: about
   date: 2022-04-01 19:20:23
   layout: about
   ---

3. 本地启动

   hexo g -d
   hexo s

4. 浏览器访问 http://localhost:4000

五、创建文章

如下修改 Hexo 博客目录中的 _config.yml ，
打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

post_asset_folder: true

执行如下命令创建一篇新文章，名为 测试文章

hexo new post 测试文章

执行完成后在source_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)

图片引用方法

{% asset_img test.png  %}

六、个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

1. 浏览器tab页名称
   修改根目录下 _config.yml 中的 title 字段。

2. 博客标题
   主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。

3. 主页正中间的文字
   主题目录 themes\fluid 下 _config.yml 中的 text 字段。

七、添加阅读量统计

Fluid 主题写好了统计阅读量的代码，但是缺少相应配置所以没有开启，需要借助三方服务来统计阅读量，
这里是有 Leancloud 的免费服务来进行统计。

1. 申请LeanCloud账号并创建应用
   LeanCloud官网: https://console.leancloud.cn/login?from=%2Fapps

   创建应用，选择开发版即可，免费的
   进入该应用的 设置->应用凭证，找到 AppID 和 AppKey，记录下来后面配置要用

2. 修改Fluid 配置
   打开主题目录 themes\fluid 下的 _config.yml 文件，修改如下配置
   单篇文章阅读量计数 打开统计开关

web_analytics:  # 网页访问统计
  enable: true

3. 配置 leancloud 的 app_id 和 app_key

4. 打开计数功能，统计来源改为 leancloud

views:
    enable: true
    # 统计数据来源
    # Data Source
    # Options: busuanzi | leancloud
    source: "leancloud"

5. 页面底部展示网站的 PV、UV 统计数

statistics:
enable: true

# Options: busuanzi | leancloud
source: "leancloud"

八、添加评论功能

评论功能的代码已经写好了，只不过没有开启，需要修改一些配置
打开主题目录 themes\fluid 下的 _config.yml 文件，修改如下配置

启用评论插件

comments:
enable: true
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
type: valine

配置 leancloud 的 app_id 和 app_key

九、发布到GitHub Pages

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改根目录下的 _config.yml ，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/<用户id>/<用户id>.github.io.git
  branch: main

部署到GitHub ，可按以下三步来进行。

hexo clean
hexo generate 或 hexo g
hexo deploy 或 hexo d

十、一些常用命令

hexo 常用命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

git 常用命令：

git config --list
git config --global user.name "<用户id>"
git config --global user.email "<用户email>"

git init
git remote add origin https://github.com/<用户id>/<用户id>.github.io.git

git clone https://github.com/<用户id>/xxxx.git

十一、最终效果展示

可访问如下地址查看 https://liaoliaocode.github.io

以上为 Hexo 搭建个人博客 全过程，详细内容请参考 Hexo Fluid 用户手册

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v