HexoBlog 搭建

一.环境搭建

1. 安装 git

- Mac OSX下:安装Xcode即可/或者安装命令行工具
- Windows下:安装git bash

2. 安装 node.js

1）Mac OSX 下:首先安装 Ruby 环境，然后安装 HomeBrew（详情 Google）
```
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
```
2）使用 Homebrew 安装 Node.js (注意检查 Node 版本，截止 2020.05.12 14.x 版本会导致 hexo 部署出错)
```
$ brew update
$ brew install node
```
3）Windows/OSX 下也可以进入Node.js 官网下载安装包安装
4）一般 Node modules 通常被安装在每个项目的本地文件夹 node_modules，Npm 使用(更详细的命令操作参考百度/Google)
```
$ npm install <package>     # 安装在本地项目中
$ npm install -g <package>  # 安装在全局
```

二.安装 Hexo（参考Hexo）

1. 初始化和安装

在 Finder 中建立新的文件夹 Hexo，cd 进入这个目录下(推荐使用 iTerm2)进行操作

$ cd /Users/weico/Hexo	#这是我的电脑
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g    #生成静态博客
$ hexo s		#也可以指定端口$ hexo server -p 5000

2. Hexo 简单使用

1）常用命令

$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help  # 查看帮助
$ hexo version  #查看Hexo的版本

2）复合命令

$ hexo deploy -g  #生成加部署
$ hexo server -g  #生成加预览
$ hexo cl && hexo g && hexo d && hexo cl

3）命令简写

$ hexo n == hexo new
$ hexo g == hexo generate
$ hexo s == hexo server
$ hexo d == hexo deploy

3. 部署到 GitHub

1）首先设置你的用户名密码

$ git config --global user.email "bu.ru@qq.com"
$ git config --global user.name "bruce-sha"

2）生成密钥
```
$ ssh-keygen -t rsa -C "bu.ru@qq.com"
```
3）到/Users/用户名/.ssh 下打开.pub 文件将其添加到 Github 上的 SSH Key
4）执行 npm install hexo-deployer-git –save ## 安装部署所需要的插件

5）部署到 Github 前需要配置_config.yml 文件，首先找到下面的内容

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

# 将上面内容修改为：
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git	#这里使用git，而不使用github
  repository: git@github.com:lecymeng/lecymeng.github.io.git	#这是我的Github账户
  branch: master	#部署分支

4. 插件安装

1）sitemap 插件安装、使用-可以将你站点地图提交给搜索引擎，文件路径\sitemap.xml

$ npm install hexo-generator-sitemap

# Extensions
Plugins:
- hexo-generator-sitemap

#sitemap
sitemap:
  path: sitemap.xml

2）feed 插件安装、使用-RSS 的生成插件，你可以在配置显示你站点的 RSS，文件路径\atom.xml

$ npm install hexo-generator-feed

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

5. 公益 404 页面

腾讯公益 404 页面-在主题的 source 目录下创建 404.html，内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow" />
  </head>
  <body>
    <script
      type="text/javascript"
      src="http://www.qq.com/404/search_children.js"
      charset="utf-8"
      homePageUrl="your site url "
      homePageName="回到我的主页"
    ></script>
  </body>
</html>

6. 主体选择和配置

GitHub 或者在官网可以找到很多很漂亮的主题，安装对应的文档进行配置即可

也可以参考 https://easyhexo.com/ 里面所罗列到的主题，都是非常不错的

7. Q & A

1）hexo ERROR Deployer not found: github，不能部署到 github。

解决办法：
1.安装 npm install hexo-deployer-git –save；
2.将Hexo的配置文件_config.yml中的deploy 的 type由github改为git

2）生成 SSH key 时，在那个目录下执行的 ssh-keygen -t rsa -C “xxxx@xxxx.com”就会在那生成.pub 文件，并不是在.ssh 里面 QAQ
3）SSH 无法连接到 GitHub 时，尝试 ssh-add ~/.ssh/私钥文件名
4）安装的时候最好加上 sudo

Hexo 自动构建 By Travis

配置 GitHub Token

如果需要使用 travis 自动化构建你的博客，travis 自然需要读写你的 GitHub 上的 Repo。GitHub 提供了 token 机制来供外部访问你的仓库。

进入github.com/settings/tokens，生成一个供 travis 读写你的 GitHub 用的 token，至于 token 的权限，不会的直接全选了，但是不建议这样做，风险比较大，或者选择能够访问和提交仓库代码的权限即可，token 注意保密，待会会用到。
-w1028

配置 Travis-CI

使用 GitHub 账号登陆 travis，在 travis 进入仓库同步管理进入 travis-ci.org/profile，打开刚才托管的 hexo 博客源码仓库同步开关
-w682

进入设置页，设置自动化编译时机，自动化编译过程中需要用到的变量。
-w1015
-w1171

添加必要的 Shell 变量
-w1475
记住 NAME 在配置 travis.yml 会用到

编写.travis.yml 文件

.travis.yml 是 travis 平台进行自动化构建的配置文件，travis 会根据配置文件生成一个 shell 自动化脚本。

进入 hexo 博客源码本地 repo

cd hexo
touch .travis.yml
vim .travis.yml

# 指定构建环境是Node.js
language: node_js
# 指定版本，当前最新版14.x会导致hexo部署失败，改为12.16
node_js:
  - 12.16.3
# 指定需要sudo权限
sudo: required

# 设置缓存文件
cache:
  directories:
    - node_modules

# 设置钩子只检测hexo分支的push变动
branches:
  only:
    - hexo

# 在构建之前安装hexo环境
before_install:
  - npm install -g hexo-cli

# 安装git插件和搜索功能插件
install:
  - npm install
  - npm install hexo-deployer-git --save

# 执行清缓存，生成网页操作
script:
  - hexo clean
  - hexo generate

# 设置git提交名，邮箱；替换真实token到_config.yml文件，最后depoy部署
after_script:
  - git config user.name "lecymeng"
  - git config user.email "1570682285@qq.com"
  # 替换同目录下的 `_config.yml` 文件中 `github_token` 字符串为travis后台刚才配置的变量，注意>此处sed命令用了双引号，单引号无效
  - sed -i "s/github_token/${GITHUB_TOKEN}/g" ./_config.yml
  - sed -i "s/coding_token/${CODING_TOKEN}/g" ./_config.yml
  - sed -i "s/phone_number/${CODING_NUMBER}/g" ./_config.yml
  - hexo deploy

修改下_config.yml 文件的 deploy 节点：

# 修改前
deploy:
  - type: git
    repo: git@github.com:userName/RepoName.git
    branch: master

deploy:
  - type: git
    # github_token 会被 .travis.yml 中sed命令替换
    repo: https://github_token@github.com/lecymeng/lecymeng.github.io.git
    branch: master
  - type: git
    # 新的e.coding 只能用电话和邮箱，不能使用账户名，邮箱带@字符会导致Git链接识别错误
    repo: https://phone_number:coding_token@e.coding.net/weicools/Weicools.git
    branch: master

配置参考

双线部署 GitHub+Coding

hexo deploy 时(由于部署的环境上没有配置 SSH)，所以需要使用 https+TOKEN 模式实现更快部署
GitHub 格式：https://github_token@github.com/useName/RepoName.git
Coding 格式：https://[phone_number]:[coding_token/coding_password]@e.coding.net/useName/RepoName.git

coding_password 不能带有@ 否则会导致 GitUrl 识别错误

开启 Coding Page

打开仓库设置，打开持续集成和持续部署
-w1760
然后打开持续部署中的静态网站，点击立即部署，就会得到一个 coding 的博客网址
-w1893
然后点击设置，配置域名，配置之前需要先在域名解析中添加 CNAME 解析道 Coding 的博客地址例如：https://xxxx.coding-pages.com，注意如果有 GitHub 的解析的话需要先删除，否则无法开启 https。(Coding Pages 申请 SSL/TLS 安全证书出现以下错误：urn:acme:error:unauthorized: Invalid response from http://www.xxxx.cn/.well-known/acme-challenge/ysOz9wW3U_GFPP8kRP4w8uknBZ9UfiUT7t2xpu9pDCw [185.199.111.153]: ，因为这种情况下，在验证域名所有权时会定位到 Github Pages 的主机上导致 SSL 证书申请失败)
141psU
配置好域名解析之后，在 Coding 中绑定域名，然后强制开启 https，开启成功后再去配置 GitHub 的解析
-w1578