//2018.8.12—-（拖了很长时间）以及更远的将来
之前一直很羡慕学长们有自己漂亮的个人博客，一直想着什么时候自己也搭一个，于是，思虑再多，再如何讲没有时间，也只是没有行动力和意志而已。
暑假集训时愈发觉得CSDN特别蠢，被它的辣鸡格式，不好看的界面，和辣鸡广告弹窗产生了深深的不适。
恰巧曹老师的个人博客文章上线了，嘛真的是很详细的指南，后来的个性化部分就各种百度找资料了。
总算，终于，有了雏形，待到修缮得更好，内容更充实的时候就分享一波叭。
另：每当没有意志力，执行力低下的时候，总会想起那句话：靡不有初，鲜克有终。
一、github创建仓库get个人主页
从上大学进行计算机相关学习之前就对Github有所耳闻，是一个大型的代码项目托管平台，作为开源代码库，以及版本控制平台，有着非常强大的功能，提供订阅、协作、分享的功能，注册用户众多，也有很好的检索分类以及社交功能2333。在此，人们可以非常轻松地找到他们所需的代码等，能够更好地记录自己的脑力发量劳力产出2333。
1.注册账户
2.创建仓库
进入个人页面，创建新仓库 new repository 。
使用Github Page，在创建仓库时需要一定的命名规范：
Repository name： github用户名.github.io
并勾选Initialize this repository with a README
其他默认随意即可。
完成后在网址内输入github用户名.github.io就会有一个你的个人页面出现了。
二、配置环境
Github主流搭建方式主要有两种：Jekyll和Hexo。
相较之下，Hexo更加方便简单快捷，本地编译速度快，于是我选择了Hexo（虽然一开始也是各种狐疑与稍有抵触，但搜索相关资料权衡后，还是感觉hexo更好一些）
Hexo依赖：
- Node.js
- Git
1.Node.js
选择左边最新的稳定版本LTS即可，安装默认一路即可，然而我还是习惯将他们分类规整不放在C盘。
安装完成后，打开cmd，输入node -v 与 npm -v，出现版本信息即说明安装成功。
2.Git
进入后会自动选择合适版本。
同样是一路默认安装即可，虽然我还是改动了安装位置2333
安装完成后，打开Git bash，输入git --version ，输出版本信息则说明安装成功。
3.Hexo
1）安装
找一个合适的地方创建一个文件夹。
打开cmd进入到刚创建的文件夹，输入npm install hexo-cli -g （预备安装，安装hexo-cli
完成后，继续输入npm install hexo --save （正式安装hexo
检查是否安装成功：
cmd输入hexo -v ，出现版本信息即说明安装成功。
2）初始化
在该文件夹中再新建一个文件夹，将用来放所有个人博客相关东西。
cmd进入新文件夹，继续输入以下：(每步操作需要一定时间，耐心等待哦，私以为cmd的这些过程非常有趣，进度条显示及等待的旋转的小线也非常可爱)
hexo init
npm install
hexo g
hexo s
页面上会出现Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
浏览器输入http://localhost:4000/ ，预览页面成功。
3）与Github Page连接
联系需要：
- 配置Git个人信息
- 配置Deployment
配置Git个人信息
Git bash中输入命令：
cd ~/.sshls用于检查是否已经存在id_rsa.pub文件，若已经存在，跳过创建步骤。
创建SSH key
Git bash输入命令：
ssh-keygen -t rsa -C "daddy_hong@foxmail.com"接下来两次默认回车即可。
添加key至Github
将
id_rsa.pub文件中的内容复制到 github主页 -> 个人设置 -> SSH AND GPG keys -> New SSH key测试是否成功，Git bash继续输入
ssh -T git@github.com，只要出现用户名即可，其他不用在意。配置Deployment
在刚才的文件夹下找到
_config.yml文件（以后这个文件会经常用到），找到Deployment：1
2
3
4deploy:
type: git
repo: git@github.com:DADDYHONGGG/daddyhonggg.github.io.git
branch: master即完成。
三、基本使用（发布博文）
新建一篇文章，在文件夹下输入命令：hexo new post "title"
执行结束，就会在文件夹地址\source\_posts中看到title.md文件。
进行编辑，编辑好之后，运行生成命令：hexo g
运行部署命令hexo d
也可以合二为一：hexo d -g （部署前生成）
部署之后访问地址 daddyhonggg.github.io 稍等一段时间就能够看到生成的文章了。
（删除文章直接删除本地再重新部署就好了（hexo d -g）
过程中遇到的问题：
1.deloyer not found:git
解决命令：npm install hexo-deployer-git --save
2.Please tell me who you are
解决命令：
1 | git config --global user.email "daddy_hong@foxmail.com" |
3.
_config.yml文件中url yoursite改为唯一的名字，并强制https ：https://daddyhonggg.github.io
4.
_config.yml 文件中冒号后面不要忘记一定要有空格！
四、个性化
基本操作完成，基本功能实现，我现在觉得这个个人博客好丑，于是，来美化一下。
可以去到hexo官网中的themes挑选喜欢的主题，然后点进去预览查看自己喜欢的，并点进那个主题的github项目，按照上面的步骤一点点做就好啦，最后记得重新部署hexo d -g 。
我喜欢的themes：
1 | aircloud |
五、细节优化
1.文章目录 //如今还是没有成功//换了主题自带什么的真好详解什么的真好
嘛，会用到hexo官网上的toc帮助函数
1 | <%- toc(str, [options]) %> |
str就是文章内容，options有两个参数，一个是class，也就是html标签的class值，默认为toc；一个是list_number，是否显示列表编号，默认值是true。
安装
npm install hexo-toc --save。在
_config.yml中添加：1
2
3toc:
maxDepth: 3 #表示目录深度为3，即最多生成三级目录。
slugify: false找到主题下的文章模版，我的是
themes\yilia\layout\_partial\article.ejs。
在其末尾增加代码：1
2
3
4
5
6
7
8
9<% if (!index && theme.toc){ %>
<script>
var tocEx = function(el){
var toc = document.querySelector(el), content = toc.innerHTML;
content = content.replace('<!-- ttoc -->', '<div class="toc">').replace('<!-- ttocstop -->', '</div>');
toc.innerHTML = content;
}('.article-entry');
</script>
<% } %>1~3为15年老方法，最新！！！：
不需要安装额外插件！
不需要在文章中插入标记！
不需要在配置文件添加配置！仅仅是在文章页模版中，插入调用辅助函数的代码即可。
1
2
3
4<%- toc(page.content, {
class: 'post-toc',
list_number: true
}) %>
2.图片显示问题
首先确认
_config.yml中有post_asset_folder:true。在hexo的目录下执行
npm install https://github.com/CodeFalling/hexo-asset-image --save；后来上述失败，执行
npm install hexo-asset-image --save得到部分解决 。完成安装后用
hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面辣。只要使用
就可以插入图片。其中[]里面不写文字则没有图片标题。博客头像即文章头图等图片加载不出的问题：用PS将图片大小改小即可。
后来……又又又崩了，使用
<% asset_img example.jpg [] %>即可完美显示。
3.评论功能
Valine炒鸡好用呢！轻量快速不需要登录！官网讲解，步骤如下：
获取APP ID 和 APP Key
登录或注册
LeanCloud, 进入控制台后点击左下角创建应用，默认开发版。应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到APP ID和APP Key了。配置
在主题文件夹中找到用于添加评论的代码文件，往往是
layout>partial>comment中，按网站上说明补全，或者是已经初始好，只需要填入APP ID和APP Key。主题文件夹中的
_config.yml中的部分也需要填入APP ID和APP Key。安装Valine
Valine 现已发布到npm，可以直接用命令安装：
1
2
3
4# Install leancloud's js-sdk
npm install leancloud-storage --save
# Install valine
npm install valine --save安全域名
为了你的数据安全，请设置自己的
安全域名：在设置>安全中心中的Web安全域名中添加博客域名。评论数据管理
由于Valine 是无后端评论系统，所以也就没有开发评论数据管理功能。需登录
Leancloud应用管理。具体步骤：
登录>选择你创建的应用>存储>选择ClassComment，然后就可以尽情的发挥啦(～￣▽￣)～
4.数学公式解析
1
npm install hexo-math --save
站点配置文件
_config.yml中添加1
2
3
4
5
6math:
engine: 'mathjax' # or 'katex'
mathjax:
# src: custom_mathjax_source
config:
# MathJax config主题配置文件
themes/yourthemes/_config.yml中添加1
2
3
4
5# MathJax Support
mathjax:
enable: true
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML也可以在文章开始集成插件支持，但不建议：
1
2
3<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>