（二）Hexo + GitHub Pages 搭建个人博客网站，最全最新教程来了【亲测有效】

目录

写文章

 个性化页面展示

1. 浏览器tab页名称

2. 博客标题

3. 主页正中间的文字

​编辑 添加阅读量统计

1. 申请LeanCloud账号并创建应用

2. 修改Fluid配置

 添加评论功能

发布到GitHub Pages

 方式一

方式二

---

请先看该专栏​​​​​​​的（一）

写文章

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

post_asset_folder: true

执行如下命令创建一篇新文章，名为《文章1》

hexo new post 文章1

默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

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

在资源目录测试文章中放一张图片 动画唯美.jpeg

 

 在测试文章.md中添加内容如下，演示了图片的三种引用方式。第一种为官方推荐用法，第二种为markdown语法，我换了图片存放位置，是将图片放在\source\images目录下。这两种写法在md文件中图片是无法显示的，但是在页面上能正常显示。

第一种方式图片的引入方式可参考官方文档 资源文件夹 | Hexo，有详细介绍。

第二种方式图片的引入方式可参考官方文档Markdown 图片语法 | Markdown 官方教程

测试一下子~

{% asset_img 动画唯美.jpeg 图片引用方法一 %}

![图片引用方法二](/images/test.jpeg "唯美")

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000，页面如下，文章添加成功，下面是我的效果图：

 个性化页面展示

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

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。

2. 博客标题

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

【温馨小贴士】可以用Ctrl+f，去搜索关键字

3. 主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。

 添加阅读量统计

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

1. 申请LeanCloud账号并创建应用

进入 官网 注册账号

有国内和国际版，可以自己进行选择，leancloud分国内版 网页链接和国际版网页链接，国内需要备案稳定才支持访问统计功能，国际版无需备案。

 需实名认证以及邮箱认证，完成后才能使用各项服务

 创建应用，选择开发版即可，免费的

 进入该应用的 设置->应用凭证，找到 AppID 和 AppKey，记录下来后面配置要用

2. 修改Fluid配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

单篇文章阅读量计数

打开统计开关

 配置 leancloud的 app_id 和 app_key

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

页面效果

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

页面效果

 添加评论功能

评论功能的代码已经写好了，只不过没有开启，需要修改一些配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

启用评论插件

配置 LeanCloud 的 appId 和 appkey

 重新部署后，查看页面效果，评论功能已开启

部署在本地时评论无法提交，会报跨域问题，发布到 GitHub Pages 上之后课正常提交评论 

发布到GitHub Pages

 方式一

安装hexo-deployer-git

npm install hexo-deployer-git --save

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

 其中 token 为 GitHub 的 Personal access tokens，获取方式如下图

 部署到GitHub

hexo g -d

 访问https://6coolboy6.github.io/，成功

方式二

直接将 public 目录中的文件和目录推送至 GitHub 仓库和分支中。

 如果自己有服务器的话，也可以不使用 GitHub Pages，直接部署的自己的服务器上。

至此结束，我用了将近一天的时间，也参考了网上一些教程，之前的教程有的比较老，所以还是踩了不少坑，整理到这儿~ 

与君共享！