使用hexo+github搭建博客

可以直接观看一位UP主的B站视频，本文即是根据视频所写。

第一步：安装Node.js

参考链接：https://blog.csdn.net/cnds123321/article/details/103988059

第二步：注册GitHub账号

注册链接：https://github.com/

并创建一个用户名.github.io的仓库

第三步：本地安装Git

下载链接：https://git-scm.com/download/win

第四步：安装hexo

官网链接：https://hexo.io/zh-cn/docs/

跳转到要安装的目录下，输入上述命令，前提是安装node.js成功

进行初始化，执行hexo init Blog命令，其中Blog是自定义的名称。

Blog文件夹下就会多些文件，具体作用查看官网

进入到Blog目录，并使用npm install命令进行安装

使用hexo s -p 5555执行，其中-p 5555表示设置端口号。

复制http://localhost:5555网址在浏览器打开

第五步：安装一个写前端网页的软件，如HBuilder、Subline等。本人使用的是HBuilderX

打开source/_posts目录下的hello-world.md文件，随便改点，然后刷新浏览器网页，就能看到效果

第六步：上传到github上的用户名.github.io仓库

先修改_config.yml的配置

执行npm install hexo-deployer-git --save命令安装插件

执行hexo g命令

再执行hexo d命令提交

在执行过程中会弹出一个对话框，输入GitHub的登陆用户名和密码即可

如果报这个错

那么按照命令，配置git信息

git config --global user.email "你的邮箱"

git config --global user.name "你的用户名"

然后再次执行hexo d提交

如此才算成功

打开浏览器，输入：https://你的用户名.github.io

第七步：选中hexo的模板

打开官网选中模板主题

可以打开预览，比如下面这个

第八步：使用主题

在官网中搜索next

进入

查看如何安装使用：https://github.com/theme-next/hexo-theme-next/blob/master/READM

点击链接下载最新版本。

选中版本进行下载

把主题改为next

把压缩包解压缩并改名为next，然后放进themes目录下

执行hexo s -p 5555命令，浏览器查看博客

效果如下：

再输入hexo g命令

可以查看http://theme-next.iissnan.com/使用文档进行更加主题化的设置。

使用hexo d命令提交到GitHub上

打开网页，也变成这种主题风格了

hexo插件

搜索插件

hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

然后在_config.yml文件的最后添加代码：

# 搜索插件
# Docs: https://github.com/wzpan/hexo-generator-search
search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000

接着修改next目录下的_config.yml

将local_search下的enable改为true。

使用如下命令重新部署

hexo clean
hexo g
hexo serve

然后就会出现search

进行搜索。

文章文字统计插件

在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后修改/themes/next的_config.yml，找到下图的位置将enable修改为true。

接着还是在这个文件，搜索到footer，然后在下面添加如下红框内的代码：

然后找到themes/next/layout/_partials/footer.swig文件

然后添加如下代码在最底部

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

然后就可以看到统计的结果 了

不过下面的数据不知道怎么是假的，但上传到GitHub上后数据就会变成真的了。