0、前言
很早就打算，重新构建一下自己的博客，让博客书写过程更加顺利并减少手动发布的过程，降低自己的工作负荷；(就是为了偷懒)
刚好，今天又是新年的伊始，所以重新选择了：github + hexo + Travis CI；顺手记录、梳理、补充搭建的每一个过程与细节和趟过的坑，收藏并分享于疆域我的个人知识库之中，期望能帮助有需要的朋友。
1. 注册账号建立仓库
1.1. 注册 Github 账号
1、登录 github 官网：https://github.com/ ，如下图所示：
2、输入信息后，点击 Sign up for GitHub进入注册页面，如下图所示：
3、单击 Next：Select a plan，进入团队页面，如下图所示：
由于创建团队是要花钱的并且我们仅仅是为了搭建个人博客，所以选择免费的即可。4、单击 “Choose Free”，进入欢迎界面，如下图所示，到此Github账号创建基本完毕。
1.2. 创建空仓库
- 1、在完成第 1 部分，内容后，不出意外的话，我们将会收到一封来自github的确认邮件，如下图所示：
- 2、单击 Verify email address进行确认并创建一个名为：username.github.io的仓库，用于存放自动化生成并且可以直接访问的博客页面，如下图实例：
- 3、进入 新建仓库页面，再次创建一个名为：myblog私有化仓库用于存放博客源码，如下图实例：
1.3. 仓库作用介绍
| 仓库 | 属性 | 用途 |
|---|---|---|
| myblog | private | 存放博客源码 |
| username.github.io | public | 存放自动化生成的博客页面 |
2. 写作环境搭建
下面将完成基本博客写作环境的搭建。
2.1. Git 安装与相关配置
2.1.1. 下载并安装git工具
- 1、登录git官网下载 git
本人认为，现在几乎每个人手里的windows系统都是64位的，所以我们直接选择**64-bit Git for Windows Setup.，下载项即可，若你是32位系统，请选择32-bit Git for Windows Setup.**；如何确认自己的系统位数，请自行百度。安装成功后，在桌面鼠标右键单击将会看见下图所示的状态，即为安装成功；安装过程省略，若你需帮助可联系鄙人。
2.1.2. 生成ssh密钥
Git安装完成之后，需要做最后一步配置，如果你没做这项配置，是没有ssh公私密钥对的，然而上传代码到远程的github等仓库，是需要验证是不是你本人亲自上传的，所以我们配置并生成一下 - 配置用户信息，win+R输入cmd，在弹出的黑窗口中输入如下内容：
虽然用户名和邮箱均可以自我选择，但鄙人建议与github注册时使用的用户名和邮箱保持一致。git config --global user.name "用户名" git config --global user.email "你的邮箱"
- 配置用户信息，win+R输入cmd，在弹出的黑窗口中输入如下内容：
- 生成 ssh 公私密钥对,win+R输入cmd，在弹出的黑窗口中输入如下内容：
然后三次回车键，如下图所示：ssh-keygen -t rsa -C "你的邮箱"
在下面的文件路径：**C:\Users\你的电脑用户名\.ssh\**下，将会出现如下图所示的一组密钥
- 生成 ssh 公私密钥对,win+R输入cmd，在弹出的黑窗口中输入如下内容：
| 文件名 | 文件描述 |
|---|---|
| id_rsa | ssh私钥,不可以泄露给其他人 |
| id_rsa.pub | ssh公钥,后面一步将配置到github网站中 |
- 3、在github配置与验证ssh密钥
- 使用文本编辑器打开id_rsa.pub文件并复制其中的内容；
- 打开github添加密钥页面,添加ssh公钥，如下面的图片所示进行操作:
- 验证ssh密钥配置是否成功
win+R输入cmd，在弹出的黑窗口中输入如下内容：
中途会有一个确认问题，我们输入yes即可，当看见如下字样即配置成功ssh git@github.comHi 。。。
- 使用文本编辑器打开id_rsa.pub文件并复制其中的内容；
2.2. nodejs安装与配置
2.2.1. 下载并安装nodejs工具
登录nodejs官网下载 nodejs
2.2.2. 验证nodejs安装成功
执行命令node -v 与命令npm -v；见到如下图所示结果，即为安装成功！
2.2.3. 安装hexo
执行命令：npm install -g hexo，如下图所示：
2.3. myblog源码生成与预览博客
2.3.1. 克隆myblog仓库到本地
- 打开github，找到myblog仓库，并按照下图，复制出仓库的地。
- 克隆仓库，选择一个专门存放博客的文件夹（最好不要有中文名）然后单击鼠标右键，选择Git Bash Here然后输入git clone，如下所示
git clone git@github.com:yourname/myblog.git
2.3.2. 生成myblog初始化源码
- 另外找一个空的文件夹，执行命令：hexo init myblog，生成源码文件
- 将生成的所有文件，复制到克隆下来的仓库文件夹中；文件目录结构如下图所示
| 文件/文件夹 | 说明 |
|---|---|
| _config.yml | 配置文件 |
| scaffolds | 一些通用的markdown模板 |
| source | 编写的markdown文件，_drafts草稿文件，_posts发布的文章 |
| themes | 博客的主题模板 |
| .gitignore | Git提交忽略文件列表 |
| package.json | hexo模块的描述文件 |
| package-lock.json | 记录当前状态下实际安装的各个npm package的具体来源和版本号。 |
| node_modules | 模块下载时存储的文件 |
2.3.3. 预览博客
- 进入目录中，执行命令hexo server或者hexo s，将会出现如下图所示
- 浏览器打开网址：http://localhost:4000 进行博客预览，不出意外则会如下图所示的默认博客页面：
3. 博客配置
我们已经成功搭建了基础的博客环境并初始化了默认的博客源码；但是很多的默认内容都是要修改为我们自己的，主要有：
- 博客基本信息；
- 让博客的基本配置更友好；
- 选择自己喜欢的主题等等。
3.1. 基本信息配置
Hexo 是一款优秀的博客框架，在使用 Hexo 搭建一个属于自己的博客网站后，我们还需要对其进行配置，使得 Hexo 更能满足自己的需求
这里所说的配置文件，是位于站点根目录下的 _config.yml 文件，可以直接用记事本打开，然后参照官方说明文档进行编辑即可。
下面的是我个人编辑并添加中文注释进行说明后的**_config.yml**文档，供各位参考
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# 网站
title: 个人知识库 ## 网站标题
subtitle: 姜宇的个人知识库 ## 网站副标题
description: 一个系统分析师、设计师、IT技术爱好者的知识、经验以及工具分享小站 ## 网站描述
keywords: 系统分析师,设计师,JAVA,MySQL,Linux,CentOS7,前端,VUE ## 网站的关键词。使用半角逗号 , 分隔多个关键词。
author: 姜 宇 ## 作者名字
language: zh-Hans ## 网站使用的语言,默认是en ，中文网站填zh-Hans
timezone: Asia/Shanghai ## 网站时区,默认为:计算机的预设置，可以不填，中国要填就是Asia/Shanghai(亚洲/上海)
# 网址
url: http://blog.jiangyu365.com
## URL，如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/
root: / ## 网站根目录
permalink: :year/:month/:day/:title/ ## 文章的链接格式 ，默认为 :year/:month/:day/:title/
permalink_defaults: ## 永久链接中每个段的默认值
pretty_urls: ## 通过覆盖 permalink 的值来美化文章的URL
trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
trailing_html: true # 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)
# 目录设置--一般不要更改
source_dir: source ## 资源文件夹，这个文件夹用来存放内容,一般不用进行更改
public_dir: public ## 公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags ## 标签文件夹，默认为 tags
archive_dir: archives ## 归档文件夹，默认为 archives
category_dir: categories ## 分类文件夹 ，默认为 categories
code_dir: downloads/code ## 代码目录 ，默认为 downloads/code
i18n_dir: :lang ## 国际化（i18n）文件夹
skip_render: ## 储存站长验证文件，跳过指定文件的渲染
## 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。
## skip_render: "mypage/**/*"
## 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
## 你也可以用这种方法来跳过对指定文章文件的渲染
## skip_render: "_posts/test-post.md"
## 这将会忽略对 'test-post.md' 的渲染
# 文章写作设置
# 这里是比较常用的写作设置，可以根据自己的写作习惯随时进行调整
new_post_name: :title.md ## 文章的文件名格式，默认为 :title.md
default_layout: post ## 预设的布局模板，默认为 post
auto_spacing: true ## 在中文和英文之间加入空格
titlecase: false ## 标题是否使用首字母大写 ，默认为 false
external_link:
enable: false # 在新标签中打开链接
field: site # 对整个网站（site）生效或仅对文章（post）生效
exclude: '' # 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0 # 将文件名转换为 1 小写 或 2 大写，默认为 0 关闭
render_drafts: false # 是否显示渲染草稿，默认为 false
post_asset_folder: true # 是否启用 Asset 文件夹，默认为 false
## 这里建议开启这样在进行写文章时，可以将文章中引用到的文件放入后直接引用，可以不用考虑第三方图床等
relative_link: false # 是否建立相对于根文件夹的链接，默认为 false
future: true # 是否显示未来文章，默认为 true
# 代码块设置
highlight:
enable: false # 是否使用代码高亮 ，默认为 true，我这里为false，因为我使用的主题有这个要求
line_number: true # 是否显示行号 ，默认为 true
auto_detect: false # 是否自动检测语言 ，默认为 false
tab_replace: '' ## tab 制表符替代设置
wrap: true
hljs: false
# 首页设置
index_generator:
path: '' ## 首页的根目录，默认为：''
per_page: 10 ## 每页显示文章的数量，默认为 10
order_by: -date ## 显示文章的顺序，默认为 -date
# 分类 & 标签
default_category: uncategorized ## 预设分类，默认为 uncategorized
category_map: ## 分类别名
tag_map: ## 标签别名
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# 日期 / 时间格式：时间和日期的显示格式，一般没特殊要求的也不需要改
date_format: YYYY-MM-DD ##日期格式，默认为 YYYY-MM-DD
time_format: HH:mm:ss ## 时间格式，默认为 HH:mm:ss
## 启用以后，如果 Front Matter 中没有指定 updated， post.updated 将会使用 date 的值而不是文件的创建时间。
use_date_for_updated: false
# 分页
per_page: 10 # 单个页面上显示的文章数量，默认为 10 ，用 0 表示禁用分页
pagination_dir: page #分页目录，默认为 page
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# 主题
## 当前主题名称。值为false时禁用主题
theme: 3-hexo ## 博客使用的主题，默认为 landscape
# 网站部署配置
deploy:
type: git ## 网站部署类型，默认为：''
repo: git@github.com:jiang4yu/jiang4yu.github.io.git ##网站部署地址
branch: master
3.2. 主题设置
- 下载自己喜欢的主题，例如我这里选择的是3-hexo这个主题；
- 将它下载下来之后，复制到themes文件夹下；
- 在**_config.yml文件**中进行引用即可；
- 根据你选用的主题进行相应的配置，这里我的主题的配置就忽略，若有需要帮助
3.3. 效果图
4. 自动化发布
配置了博客的基本信息，并按照自己选择的博客主题，进行了配置，可以说博客的搭建工作已经完成了，但是呢，我们要偷懒一下，减少一些指令的操作。
4.1. Travis CI 简介
Travis CI是目前新兴的开源持续集成构建项目，它与jenkins，GO的很明显的特别在于采用yaml格式，同时他是在在线的服务，
不像jenkins需要你本地打架服务器，简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI的构建队列中，
据说Travis CI每天运行超过4000次完整构建。对于做开源项目或者github的使用者，快将你的项目加入Travis CI构建队列吧!
4.2. 我们的目标需求
将myblog 博客源码以及文章的更新推送到远端的github仓库，然后啥也不管了，交由 Travis CI 自动构建并推送到博客项目的master分支上。
4.3. 自动化配置
登录 Travis Pro的官网,也许有人会问，为什么不选用免费版的地址，可能是我强上的姿势不对吧，总是无法获取到私有的myblog仓库，没有其他原因。
按照下面图片组的步骤进行操作即可，让Travis CI获取到我们的仓库
在GitHub中是否有 Travis CI 应用
新建Personal Access Token，只勾选repo的权限并创建一个新的token，复制token并保存好！
前往Travis CI 配置token
在myblog中创建 .travis.yml 文件，文件内容如下：
sudo: false
language: node_js
node_js:
- 10 # use nodejs v10 LTS
cache: npm
before_install:
- git config --global user.name "<your github username>"
- git config --global user.email "<your email>"
- npm install -g hexo-cli
install:
- npm i
branches:
only:
- master # build master branch only
script:
- hexo clean
- hexo generate # generate static files
after_success:
- cd ./public
- git init
- git add --all .
- git commit -m "Travis CI Auto Builder"
- git push --quiet --force https://$GH_TOKEN@github.com/<your github username>/<your github username>.github.io.git master
注意：
- 不要改变配置内容缩进；
- 将your github username和your email替换为你自己的
4.4. 发布博客
在myblog目录下将node_modules文件夹删除后，鼠标右键选择Git Bash Here ，然后依次执行下列命令：
git add .
git commint -m "blog搭建成功"
git pull
git push
4.5. 在浏览器中打开你的博客
https://<your github username>.github.io
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jiang4yu@126.com
