Git Pages + Hexo 搭建个人博客

这段时间弄了一哈个人博客，感觉挺有意思的，于是边学边做了一哈记录，就有了这篇博客。

GitHub Pages

1.进入Github账号， 建立一个名字为username.github.io（其中username为你自己的用户名）形式的仓库

2. 将刚建立的仓库克隆至本地：

3. 测试一下GitHub Pages是否顺利运行

   • 上传一个内容为“Hello World”的html文件

     $ cd username.github.io
     # 注意这里的username为你的用户名
     $ echo "Hello World" > index.html
     $ git add --all
     $ git commit -m "测试"
     $ git push -u origin master
     

• 打开https://username.github.io这个网站（注意username为你的用户名），如果试一下情况则表示成功了：

  

部署hexo

安装

在安装Hexo之前需要安装以下程序：

• Git
• Node.js

由于之前在建立Git Pages时已经安装好了git bash，所以接下来就需要安装Node.js了

安装Node.js

由于我的电脑是win10系统，所以我选择用安装包进行安装

• 进入https://nodejs.org/en/这个网站进行下载，我选择的是左边的稳定版

  

• 注意在安装过程中记得选add to path选项添加至环境变量

  

安装Hexo

由于之前在安装时已将nvm添加至环境变量，所以可以直接通过nvm命令安装Hexo

$ npm install -g hexo-cli

可能要等一段时间才会安装成功，我的就等了20s。。。

部署

成功安装之后，就可以开始Hexo的部署了！

启动hexo

首先创建项目文件夹，我自己的文件夹名字是hexo_blog

$ hexo init hexo_blog
$ hexo install
$ hexo server

之后用浏览器打开localhost:4000出现以下画面说明Hexo服务正常启动：

部署hexo至GitHub Pages

修改部署配置

打开上一步创建的hexo_blog文件夹，其中有一个名为_config.yml的文件，修改以下配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改为：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/JasonLmile/jasonlmile.github.io.git
  branch: master

注意！！！上面那个repo的值应该是你之前建立的那个GitHub Pages项目的地址！！！

进行部署

• 先安装hexo-deployer-git

  $ npm install hexo-deployer-git
  

• 进行部署

  $ hexo deploy
  

  完成之后浏览器打开GitHub Pages项目的地址https://username.github.io，发现跟你之前启动本地服务器后访问localhost:4000的效果是一样的，这代表部署成功了！！

  

Hexo设置

主要设置

通过修改_config.yml配置文件对博客进行修改，常用的参数有如下几种：

• title：网站标题
• subtitle：网站副标题
• description：网站描述
• anthor：作者名称
• language：网站使用语言

主题修改

可能你会认为默认的主题不太好看，没关系，你可以在https://hexo.io.themes/中寻找自己喜欢的主题，克隆至本地进行配置。以目前最火的一个主题next为例:

• 进入之前建立的hexo项目文件夹（我建立的叫hexo_blog），执行：

  $ cd themes
  $ git clone https://github.com/iissnan/hexo-theme-next
  

• 更改配置文件_config.yml：

  将以下内容：

  # Extensions
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: landscape
  

  改为

  # Extensions
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: hexo-theme-next
  

  其中theme的值为你下载至本地的主题名字

• 执行以下命令，在本地进行调试：

  $ hexo clean 
  $ hexo generate
  $ hexo server
  

  这三条命令分别有以下功能：

  • hexo clean：清空及删除public文件夹
  • hexo generate：生成静态文件
  • hexo server：启动本地服务器进行调试

  这时候访问http://localhost:4000/会发现博客主题已经变了：

  

  之后可通过hexo deploy命令部署至Github上

主题设置

主要是通过theme文件夹下的_config.yml文件进行设置（！！！注意这个和之前的_config.yml文件同名但是不同位置）

首页显示摘要

将enable的值由false改为true就可以在首页只显示文章摘要了。默认显示前150个字，但是你可以通过在发布的文章中添加>来指定摘要的内容，只显示这个符号前面的文字。

添加标签界面

新建一个页面命名为tags：

$ hexo new page tags

这时会发现在项目下source文件夹下会出现一名为tags的新建文件夹，对该文件夹里的index.md文件进行编辑：

---
title: tags
date: 2019-03-04 20:38:08
type: tags
comments: false
---

添加分类界面

与添加标签界面类似，先新建一个名为categories的界面：

$ hexo new page tags

编辑categories下的index.md为：

---
title: categories
date: 2019-03-04 20:36:29
type: categories
comments: false
---

添加评论系统

next主题本身就集成了Valine评论系统，不过需要leancloud账号才能使用。所以首先你需要注册一个账号：

点我注册！！

注册完之后需要先创建一个应用：

创建之后，点开该应用，进入设置->安全中心，将web安全域名改为你的博客域名。然后进入设置->应用Key复制App ID和App Key的值，填入主题配置文件中：

再将文件中enable的值改为true。部署之后博客就可以评论了。

添加阅读次数

next主题同样提供了leancloud的统计阅读次数的功能。我们只需要打开之前创建的leancloud应用（注意ACL权限设置为无限制），点开 存储->数据->创建Class 创建一个名称为Counter的class，之后再修改主题配置文件即可。

image

---

最后晒一下自己的博客把，虽然只有两篇文章😂

参考：

文档|Hexo

主题配置——Next使用文档

为你的Hexo加上评论系统-Valine——BlueLzy's Blog