使用hexo+github搭建免费的个人博客及主题更换，添加博客特效

写在前面

目前主流的在线博客平台有很多，如csdn、简书等。此次我们利用github page和hexo搭建免费的博客站，此次我在win平台下演示搭建。

一、环境准备

1.点击进入下载页：
Node.js
Git
注册github账号

2.下载完成后根据提示安装。
3.安装完成后打开git bash命令行工具。输入node -v和git version可查看node.js和git是否安装成功，出现版本号即成功。

3.然后在你要写博客的目录下创建一个文件夹，名字随意取，如myBlog，然后输入如下命令来安装hexo：

npm install -g hexo-cli

安装完成后，cd切换到刚才新建的文件夹myBlog中，我的在e盘下。
命令行输入如下命令安装hexo：

hexo init myBlog
npm install

这时候文件夹中会生成5个目录和文件：其中 _config.yml 是网站设置文件，source文件夹是博客的资源文件， _posts 目录是存放博客的地方。

到此，hexo安装完毕，已经可以输入hexo s启动本机服务器，然后打开浏览器输入http://localhost:4000在本机服务器预览了。

二、开始部署

1.在github上新建一个 用户名.github.io 的仓库，勾选上Initialize this repository with a README,如下图：
2.下面通过SSH key配置本地git和github的连接：

如果之前没有配置过，那么秘钥需要生成。（如果之前使用过git，那么此第2步可跳过，无需再次配置。）秘钥默认路径：~/.ssh/id_rsa.pub。

下面生成秘钥：

git config --global user.name "用户名"
git config --global user.email "邮箱"

提示秘钥保存位置可选默认，无需更改，一路回车，最后命令行界面弹出ssh-rsa开头的即是秘钥，从“ssh-rsa”开始复制到结尾保存。

在github上填入秘钥：按图示打开github网站

Title随意起，将秘钥粘贴到Key一栏，点击 Add SSH key。

下面在git bash命令行界面输入
ssh -T git@github.com
来添加信任列表，提示Hi ! You’ve successfully authenticated, but GitHub does not provide shell access. 即成功！

3.下面使用文本编辑工具打开安装目录下的 _config.yml 配置文件进行修改，我使用Editplus++打开，翻到末尾：如图输入，在repo输入你自己的地址（注意type、repo、branch的冒号后面都有一个空格！！）
上面参数描述：
repo:库（Repository）地址
branch:分支名称。如果不指定，则默认值为 master

4.下面安装 hexo-deployer-git：
git bash输入：npm install hexo-deployer-git --save
然后输入hexo g和hexo d将本地文件推送到github仓库，打开https://用户名.github.io测试，是否已经看到自己博客的雏形了。

注：执行hexo g时，git在本地生成网页静态文件，执行hexo d时将public目录下的文件推送到远程仓库。

三、开始写博客

1.hexo new '文章标题'
执行后在安装文件的/source/_posts目录下可以看到文章标题.md的文件，md是Markdown类型的文档，可以使用markdown文档编辑器书写博客。
2.写完后执行命令：hexo clean hexo g hexo d,执行hexo clean是清空本地缓存，避免出现错误，建议每次上传前都执行一次。此时打开自己的博客网站看看是不是已经可以看到刚才写的博客了。

四、主题替换

这里我贴出hexo的 官方教学文档网站，可以按照文档中指引进行更换主题。文档中的主题配置文件是指主题目录下的 _config.yml 文件，比如我使用的nexT主题，配置文件在E:\myBlog\themes\next 下。这个配置文件不要和同名的站点配置文件搞混。后续通过修改配置文件中的各项参数即可实现网站及主体的配置，包括名字、头像、语言、菜单、侧边栏等。

五、给出几种主体美化方式

以我的博客为例，我添加了背景线条动态特效和鼠标点击出现彩色心心特效：

1.背景线条动态特效：
我使用了nexT主体自带的特效，在主体配置文件中搜索：canvas_nest，如下输入（注意冒号后面有空格！！）：

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

下面下载特效的资源包：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

2.点击出心心特效：

首先在 /themes/next/source/js/src 目录下新建文件：clicklove.js,将下面js代码粘进去：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

打开 \themes\next\layout_layout.swig 目录，在文件末尾添加：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

如图：
保存后，依次进行 hexo clean hexo g hexo d进行上传，打开自己网站查看一下效果。

主体可以折腾的地方还有很多，可以自行搜索教程。若文中有不对的地方烦请指出。