Hexo + Github Pages搭建的我的博客

这个不算是新手的搭建流程，若是你恰巧看见这篇文章，但愿你已经安装好node、git等软件，由于第一步的环境搭建准备并无详写，默认都会了。但愿能解决你的问题。

步骤：

1、 搭建环境准备
2、安装hexo
3、配置hexo，将其与github page 联系起来
4、发布文章
5、更换主题及简单配置

1、 搭建环境准备

这里包括node.js的安装、git的安装、git帐号注册和新建git项目
注意： 新建项目的时候，项目名称也就是Repository name的格式必须是：yourgithbuName.github.io，这里的yourgithbuName必须和你的github名称保持一致

这个问题下面会说到，由于我没注意，也踩了这个坑了。

2、 安装hexo

cnpm install hexo -g

安装完毕后，不肯定是否安装成功，能够经过 hexo -v查询，会出现下面信息：

以后新建一个空的文件夹，暂且叫mjblog吧，在mjblog文件夹下使用gitbash初始化项目 hexo init。
过程当中，若是遇到网络很差，可能会出现超时的问题，问是否要尝试删除你新建的文件夹，填n(NO)就行了。

Start blogging with Hexo! 成功，而且文件夹里多了hexo相关文件.

scaffolds            # 模板文件
source               # 文章的集放点。里面有个一篇默认的hello-world.md
node_modules         # 相关模块包
themes               # 主题包。站点的最终样子会根据主题来生成页面
_config.yml          # 站点配置，例如和github pages相关的配置都在这里填写

执行 hexo s(hexo server)，启动本地服务，会出现下面这句提示：

浏览器打开http://localhost:4000/，就会看到hexo的默认主题页面了。

3、 配置hexo，将其与github page 联系起来

在mjblog文件夹的下有个_config.yml的文件。打开找到Deployment这个字段(在文末),添加这句的git pages信息。例以下面是个人对应配置。

deploy:
  type: git
  repo: git@github.com:mjtomato/mjliublog.github.io.git
  branch: master

repo这个地址去项目上复制黏贴就好了。
想知道有没有成功，生成部署一下就好了。但这以前，先了解hexo几个经常使用命令行：

1. hexo generate (hexo g)   #生成静态文件，会在当前目录下生成一个新的叫作public的文件夹
2. hexo server (hexo s)     #启动本地web服务，用于博客的预览
3. hexo deploy (hexo d)     #部署播客到远(好比github, heroku等平台)
4. hexo new "postName"      #新建文章
5. hexo new page "pageName" #新建页面
6. hexo clean               #删除已经生成的静态页面(即public文件夹)

ok,如今就能够执行命令了。
第一步：生成静态资源

hexo g

第二步：部署

hexo d

但不少时候，这两个步骤是能够一块的。

hexo d -g

若是不出意外，这样就能够正常生成部署了。
可是我这边却出现问题：deployer not found: git

解决问题：安装一个拓展

cnpm install hexo-deployer-git --save

以后从新生成部署hexo d -g，按道理来讲应该是成功了。但我这里发生一个小插曲。我在部署过程当中，也在执行着本地服务:hexo server，因此它一直提示下面这个错误。关闭本地服务那个进程就行了。

正常状况下会提示：
Deploy done: git

而后按着git提示的网址访问，发现东西是出来的，可是css样式，js代码引入路径都错误了...

奇了怪了，都是按着教程走，怎么到我这就不行了呢。
刚开始想着是否是个人_config.yml文件配置错了，又从新走了一遍，仍是不行。又去翻个人git项目，是否是我哪里写错了，始终没发现问题。
最后对比了好几篇搭建文章，终于发现，个人博客地址格式跟别人的是不同的，开始觉得是改版了没留意到这个问题。别人都是 https://xxx.github.io/， 而个人是这样的：

原来在建项目的时候，要注意一点：
项目名称也就是Repository name的格式必须是：yourgithbuName.github.io，这里的yourgithbuName必须和你的github名称保持一致

最终会出现这句话：

Your site is ready to be published at https://mjtomato.github.io/.

打开上面的网址，出现Welcome to GitHub Pages，说明成功了，主题是和你在GitHub Pages选的是同样的。

接着更新_config.yml里面的配置repo,把以前错误的项目地址改为如今的，再从新生成部署一次，刷新页面，发现变成hexo默认主题了。

成功。https://mjtomato.github.io/

4、 发布文章

其实发布文章和上面部署的步骤基本一致了，这里就从零新建文章到部署到git上走一次。

顺序是：新建文章>本地web查看>删除以前的静态资源 hexo clean>生成新的静态资源 hexo g>部署到git上git d(后面两步能够合并成：生成部署资源 hexo d -g)

1. 新建文章
能够在source>_posts直接右键新建一个markdown格式的文件，也能够经过命令行方式新建。

hexo new "testName"

就会发现_post文件夹里多了一个testName文件。
里面默认有三个属性:

---
title: testName                 #testName 就是new时候的名字
date: 2018-07-15 14:41:17       #默认带上新建文件夹的时间
tags:                           #文章的标签，可本身添加分类
---
这里就是写文章内容的地方了。

2. 删除以前的静态资源 hexo clean
通常这一步正常状况下不执行也能够，可是当 hexo d -g 执行完，发现有问题的时候或者是不成功时，就颇有必要先清除一下不完整public文件或者是清除一下缓存了，这里是会删除整个public文件的。而后再从新执行一次 hexo d -g ，直至成功。

3. 生成部署 hexo d -g
执行完hexo d -g ， 没问题的话，刷新本身的页面，就会看见新添加的文章了。

5、更换主题及简单配置

1. 安装主题
主题选择里有不少不一样风格选择，我选的是比较冷淡风的next主题
在目录下打开gitbash，输入下面命令行

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

下载完毕以后会在themes文件夹下看见多了一个next文件，这个就是next主题包了。

2. 启用next主题
打开目录下的_config.yml文件，找到theme字段，将原来的landscape换成next。
再重启下本地服务 hexo s 就能够看到新的主题已经更换了。

ps: 没错，这里你会发现个人名称、描述、做者都改为本身的了，这个是在站点配置文件_config.yml里修改的。(就在文件开头)

# Site
title: MJBlog                    # 你的博客名字
subtitle:                        # 副标题
description: 慢慢尝试，总会有的！  # 描述
author: jiaminLiu                # 做者名称
language: zh-Hans                # 站点语言
timezone:                        # 时区

修改更新、重启本地服务就好啦~~

3. 更改next主题配置
每一个主题包下面都有个和站点目录下同名的_config.yml文件，修改主题包下的配置会对应修改主题展现。包括了主题设计、站点语言、站点菜单等等。
下面我按本身的须要对应修改：(如下说的_config.yml文件都是指主题包下面的)

1. 主题设计
   搜索Schemes，在下面发现有四种选择，每一个都看了一下，最后我选的是Gemini，其实Gemini和Pisces好像没差。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

可是呢，这里有个问题，选择这个主题设计以后，你会发现页面上的菜单都变成德语了？？

查了下缘由，原来是Hexo 在生成主题的时候将使用你选择的主题设计去查找对应的语言翻译，并提取显示文本。这些翻译包在主题包下的language文件夹里。
像我选的Gemini对应的语言翻译是de.yml。因而，我将de.yml中德语都改为中文了(最简单作法，找到zh-CN.yml那份，而后复制过去覆盖原来的，就搞定了，耶！)

1. 站点语言
   上一步完成以后，发现整个页面又变成英文了。这个又为啥啊？？并且个人站点配置里也已说明是中文了。
   原来这个主题默认翻译是英文的，不信能够看看default.yml这个文件，里面就只写着en.yml。因此咱们还须要把主题包下面的language字段的值改成zh-Hans

2. 设置头像
   搜索Sidebar Avatar，找到avatar，下面有个url字段，默认是这样的

url: # /images/avatar.gif

须要将它打开，就是去掉#号。默认是个灰色的头像，能够找个本身喜欢的图片放到source/images/下面
个人改为这样

url: /images/avatar.jpg

暂时我须要修改的就这么多了，更多配置，能够查看官方文档

以上就是Hexo + Github Pages搭建的我的博客简单版。暂时使用是没问题的啦。其余的功能，例如站点统计，阅读次数统计等以后再添加。

---

添加百度统计

1. 注册一个 百度统计 帐号
2. 新增本身的网站
   
   例如个人：
   网站域名: mjtomato.github.io
   网站首页：https://mjtomato.github.io/
   填完这两个点肯定就能够了
3. 获取百度统计id
   在代码管理 > 代码获取页面有段统计代码
   
   复制我用红色覆盖那个统计id
4. 修改baidu_analytics字段
   在主题包下的配置文件里找到baidu_analytics字段，将复制的统计id设置成它的值。

搞定~~~

阅读数统计
next主题做为github上星数最多的hexo主题，固然已经有人造好轮子了。并且next主题已经合并这个功能了，因此咱们只须要配置_config.yml就能够了，请参考配置LeanCloud

照着上面步骤完成以后，刷新本身的页面，发现文章内的阅读数出错了

点击控制台的连接进去，按着提示完成便可传送门