es6环境

现在的JavaScript 引擎还不能完全支持es6的新语法、新特性。所以要想在页面中直接使用，是会报错的，这时候就需要使用babel将es2015的特性转换为ES5 标准的代码。

1、全局安装 babel-cli

cnpm install -g babel-cli

(这里我使用的是淘宝镜像，比较快，你也可以直接npm)

想看是否安装成功，可以通过查看版本babel -V(大写V)，或者直接babel，会有许多命令行提示，说明安装成功了。否则就安装失败了。

2、本地安装 babel-preset-es2015 babel-cli

仅全局安装babel-cli是转码不够的，还需要本地安装babel-preset-es2015 babel-cli 两个模块

安装这两个模块之前，先在本地新建一个文件夹叫es6，再新建一个index.js文件，随便写个箭头函数。
然后再在当前的cmd或者bash窗口输入 babel index.js 看看有没有成功。显然是没有成功的，嘿嘿。

题外话，补充几个babel的命令行参数 方便使用：

-o : 参数指定输出文件
-s : 参数生成source map文件 eg:babel src/index.js -o dist/index.js -s
-d : 参数指定输出目录,可整个目录下的文件对应转码 eg: babel src -d dist
babel 不带任何参数,eg:babel src/index.js 直接在窗口下转码输出

2.1 npm 初始化

npm init -y
npm init会初始化一个package.json文件，-y 表示默认都同意，不用一个个问题确认。如下：

2.2 本地安装 babel-preset-es2015 babel-cli

cnpm install –save-dev babel-preset-es2015 babel-cli

–save-dev 会自动保存到package.json的devDependencies选项中。

2.3 新建.babelrc文件

在根目录下新建.babelrc文件,注意别写错名字了，不然转码也会不成功的，因为读的就是babelrc这个文件。并填写如下：

presets: 设定转码规则

2.4 大功告成

以上步骤都完成的话，就基本大功告成啦。
最后在根目录中新建一个输出文件叫dist.js，然后在窗口输入babel index.js -o dist.js。如果没什么提示，说明ok了。如下图，左边是index.js用了箭头函数，右边是转码之后的dist.js，搞定。

这个不算是新手的搭建流程，如果你恰巧看见这篇文章，希望你已经安装好node、git等软件，因为第一步的环境搭建准备并没有详写，默认都会了。希望能解决你的问题。

步骤：

一、 搭建环境准备
二、安装hexo
三、配置hexo，将其与github page 联系起来
四、发布文章
五、更换主题及简单配置

一、 搭建环境准备

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

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

二、 安装hexo

cnpm install hexo -g

安装完毕后，不确定是否安装成功，可以通过 hexo -v查询，会出现下面信息：

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

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

1
2
3
4
5

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

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

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

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

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

1
2
3
4

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

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

1
2
3
4
5
6

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/

四、 发布文章

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

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

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

1

hexo new "testName"

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

1
2
3
4
5
6

---
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 ， 没问题的话，刷新自己的页面，就会看见新添加的文章了。

五、更换主题及简单配置

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里修改的。(就在文件开头)

1
2
3
4
5
6
7

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

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

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

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

   1 2 3 4 5

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

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

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

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

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

   1	url: # /images/avatar.gif

需要将它打开，就是去掉#号。默认是个灰色的头像，可以找个自己喜欢的图片放到source/images/下面
我的改成这样

1

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

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

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