Github pages + Hexo 搭建个人博客

作者: 我脱下短袖 | 来源:发表于2018-09-18 12:30 被阅读22次

安装

准备环境（NodeJS+Git)

nodejs下载之后，安装路径建议换到除C盘以外的硬盘上，比如我安装在D:\nodejs，其它的就默认next
安装结果输入命令测试结果，若出现版本则安装成功了。npm是NodeJS的包管理工具，可安装、卸载、更新、查看、搜索、发布等等。
改变环境配置npm的全局模块的存放路径以及cache的路径，提前新建好文件，然后输入以下命令
```
npm config set prefix "D:\nodejs\Manual_setting\node_global"
npm config set cache "D:\nodejs\Manual_setting\node_cache"
```
设置环境变量，将D:\nodejs\Manual_setting\node_global添加到系统变量path
安装淘宝镜像npm (cnpm)npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 测试结果，cnpm已安装到之前配置好的全局模块
cnpm -v
git安装，参考百度

安装Hexo

全局安装

cnpm install hexo-cli -g
本地生成博客环境

hexo init Blog
cd Blog
cnpm install
hexo server

浏览器输入

http://localhost:4000
image

安装主题

我选的是NexT

hexo clean
git clone git@github.com:theme-next/hexo-theme-next.git themes/next

在项目根目录下面修改_config.yml配置文件中的theme属性，将其设置为next

hexo generate
hexo server

现在打开http://localhost:4000/ ，会看到我们已经应用了一个新的主题

hexo generate 可以简写为 hexo g

hexo server 可以间写为 hexo s

hexo deloper 可以简写为 hexo d

Github Pages设置

注册Github账号，创建repository，比如我创建 zoukeqing.github.io，不要勾选README.md文件

域名

域名购买

我是从阿里云购买 zoukeqing.top ，当然你通过其它渠道购买也可以，只要能域名解析就行

Ping 域名

![ping](https://img.haomeiwen.com/i3525784/f0e3c0f86ab95581.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

域名解析

解析

新建CNAME文件

在 \themes\next\source 目录下新建CNAME文件，无后缀名，加上自己的域名就可以，比如 zoukeqing.top

hexo deploy部署

在项目根目录下配置文件_config.xml中作如下修改：

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

提前安装一个扩展，用于hexo deloper 命令提交到Github项目中

npm install hexo-deployer-git --save

然后在命令 hexo d执行完成部署，打开Github项目文件就可看到提交上来的静态文件

MarkDown写作

new

新建一篇文章，会在 \source\_posts 目录下生成 title.md

hexo new "title"
新建页面，会在 \source\page 目录下生成 index.md

hexo new page "page"
发表草稿，不会在显示页面

hexo new tra "caogao"
将草稿发布

hexo public "chage caogao to title"

MarkDown编辑器

[Typora](https://typora.io/#)   

[HexoEditor](https://github.com/zhuzhuyule/HexoEditor)

访问量和文章阅读量

主题配置

将配置文件下的 busuanzi_count 的属性 enable 修改为 true ，如果首页也需要文章阅读量可以选用LeanClound，同时将 page_pv 设置为 false
image

LeanCloud

为什么要用LeanCloud是因为不蒜子存在一个缺点是，不能在首页直接看单篇文章的阅读量

创建新应用名为Counter
复制 App ID和App Key

更改主题配置文件 的 leancloud_visitors

leancloud_visitors:
  enable: true
  app_id: 你的id
  app_key: 你的key

设置安全域名

不设置安全域名是看不到数字的，同时也将本地 http://localhost:4000 也添加进去，方便本地调试

image

本地搜索

提前安装一个扩展

cnpm install --save hexo-generator-search
将主题目录下 _config.yml 修改 localhost_search 的属性 enable 为 true

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  # enable: false
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

在项目根目录下 _config.yml 添加一下代码

search:
  path: search.xml
  field: post
  format: html
  limit: 1000

设置动态背景

在主题配置文件中找到canvas_nest，设置成ture

添加RSS

安装插件

cnpm install hexo-generator-feed --save
在项目根目录下 _config.yml 文件末添加

plugins: hexo-generate-feed

配置主题_config.yml文件，ctrl+f搜索rss，在后面加上/atom.xml

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

社交链接

在主题目录下配置 _config.yml 添加如下

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
#social:
  #LinkLabel: Link
social:
  GitHub: https://github.com/halzhan
  Twitter: https://twitter.com/zoukeqing
  E-Mail: gmailto:zoukeqing@gmail.com or qqto:1146704412@qq.com

最后的效果