hexo搭建博客

2017-04-11

13年想搭建一个个人博客，考虑到博客的内容简单，加上没钱没技术，调研过wordpress，嫌弃臃肿，还需要管理数据库，最后还是决定使用jekyll+github方式搭建个人博客。不过在使用jekyll的过程中也有一些问题和不爽的地方，尤其markdown方式写博客内容，没有GUI界面等，都是体验不好的地方。

所以当发现hexo时，我眼前一亮。nodeJs静态博客不就是目前最适合我的一款嘛！作为一个常用nodeJs+webpack+es6+react……开发项目的前端程序员来说，这个好像还蛮符合我的style的~So，我开始了hexo+git的个人博客改造。

环境搭建：

安装node：我的node版本是6.9.1

安装git：我的版本是1.8.4
ps：系统：win7 64位；编辑器：sublime或者webstorm。

Github配置：

因为是系统改造，之前已经申请了Github账号和Github pages了。这里只对添加SSH-Key做介绍：
为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

1、首先检查本机是否存在的ssh密钥

1	$ cd ~/. ssh #检查本机已存在的ssh密钥

结果，(⊙o⊙)…，发现之前已经生成过了。在github个人账户首页-Settings-SSH and GPG keys看到了我的SSH秘钥，“Added on 28 Apr 2016 by GitHub for Windows. Never used”。汗颜一个~还没生效。

然后我在C:\Users\用户名中找到了.ssh文件。既然当时没弄清楚，现在删除重新搞一下吧~

删除了.ssh文件，在Github上点击ssh的delete按钮。

1	ssh-keygen -t rsa -C "邮件地址"

三个回车即可生成。第一个回车处可以设置存放生成ssh的地址。直接回车就放在默认C:\Users\用户名.ssh中

打开C:\Users\用户名.ssh中找到id_rsa.pub文件，打开复制代码粘贴到github-new ssh key中。title自己写一个。
测试是否成功

1	ssh -T git@github.com

看到这个信息说明SSH已配置成功！

此时你还需要配置：

1 2	git config --global user.name "xxx"// 你的github用户名，非昵称 git config --global user.email "xxx"// 填写你的github注册邮箱

再次查看github密钥：登陆到github上查看刚刚输入的SSH key，现在图标的颜色变为绿色，说明密钥配置有效

hexo

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。
官网： http://hexo.io
github: https://github.com/hexojs/hexo

注意事项：

很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；

hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；

hexo有2种_config.yml文件，一个是根目录下的全局的_config.yml，一个是各个theme下的；

全局安装hexo：

1	npm install -g hexo

初始化hexo工程：
在本地存放博客工程的文件夹地址下运行初始化hexo语言

hexo init

hexo会自动下载一些文件，目录结构如图：

生成静态页面：

1	hexo generate

或者

hexo g

本地启动：

1	hexo server

或者

hexo s

浏览器访问http://localhost:4000/

修改主题：
界面主题不满足个人审美，所以，下一步是修改主题。
网上查到这一款和我现有的主题很相似，ok，直接用它试试：hexo-theme-yilia

下载主题到文件夹themes/yilia中：

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。据说对手机端展示也做好了自适应。

配置_config.yml：
有两处配置：一个是根目录下，一个是yilia下，配置完后重新hexo g生成，hexo s运行就能看到新的效果界面了。具体配置项自己修改~

这里有个注意点：
在所有文章点开处出现指导要求运行

1	npm i hexo-generator-json-content --save

但是按照步骤运行和添加代码后报错。
解决方法：
在node_modules/hexo-generator-json-content目录下，把里面的index.js文件的第一行加入:

1	"use strict";

即可成功。
ps：这句npm命令一样要在git里面运行才有效。

写文章：
因为是旧的博客转移，所以要将旧的md博客修改过来。因为Hexo 支持 GitHub Flavored Markdown 的所有功能。原来md的写法和样式需要做一些调整~所以就是一些体力劳动了~~将md文件放入根目录下\source_posts里。
一般完整格式如下：


---
title: postName #文章页面上的显示名称，一般是中文
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

当然，也可以通过命令来新建。

1	hexo new 'my-first-blog'

在合适的位置加上可以使前面的文字内容作为概要展现在文章列表里，否则全部文章展现在列表里就太长了。

另外，由于是技术文章，有些文章内需要增加css定义，script脚本。尤其是css定义，这里写时要注意缩进。前后需要空行，否则语法识别有误会自动加上

。

上传博客代码：

1	hexo deploy

然后发现报错
deployer not found: git
运行：
npm install hexo-deployer-git –save
之后就ok啦