使用Hexo搭建blog并在github上部署

前两周学着用Hexo搭建博客，且在github上部署。这里把里面的过程记录一下。

使用的系统是Mac，但是windows也是基本一致。

安装Node.js

安装完成后，进入终端，使用下面命令可以查询到安装的版本号，验证一下有没安装成功。

1 2	$ node -v $ npm -v

安装Git

由于Mac都是自带安装了git的，所以这一步就可以省略了。

安装Hexo

先新建一个文件夹，这个文件夹就当做以后blog的目录。然后终端移动到这个文件夹里，键入下面的命令。

1
2
3

$ npm install hexo-cli -g # 安装Hexo
$ hexo init # 初始化Hexo
$ npm install # npm会自动安装需要的组件

至此，hexo的安装就完成了。目录下面已经生成了一个blog系统。

部署到github

github为每个账号都提供了一个300M的免费空间作为blog，其实这个blog也是一个仓库，只不过仓库的名字有要求。
仓库必须和用户名一致如ekulelu.github.io，创建后即可访问静态主页如http://ekulelu.github.io
为了使Hexo能上传至这个仓库，需要进行ssh的公私钥部署。登入github，进入Settings，左边菜单选择SSH and GPC keys，这个就是配置用户SSH key的界面，点击下面的generating SSH keys链接，就可以进入创建上传SSH key的教程。
一般来讲，Mac的key都是放在 ~/.ssh目录下面，使用下面命令就可以看到已经存在的key。

1	ls -al ~/.ssh

如果一对key都没有，那么就需要创建，当然，你也可以单独为github创建一对key，如果采用不是默认命名，每次上传的时候都需要重新添加到ssh-agent，好烦。

使用下面命令创建key

1	ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

其中会出现下面提示：

1	Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

这个是生成的key保存的位置和名称，默认就是id_rsa，但是如果你之前就有了这对key，会提示你是否覆盖，假如你之前的key有用的话，别覆盖了。我会说我就是没细看，然后不小心覆盖了，导致公司的仓库登不上去吗…

1	Enter passphrase (empty for no passphrase): [Type a passphrase]

这个如果不需要的话，可以直接按回车，如果输入了的话，以后添加到key-agent就要输入这串东西。
继续enter之后，key就生成了。

添加到key-agent

先验证ssh-agent是否可用

1 2	$ eval "$(ssh-agent -s)" //输出Agent pid 59566

然后添加ssh key，注意后面私钥的名字，如果你不是默认生成的，请换成你生成key的名字。

1	$ ssh-add ~/.ssh/id_rsa

添加公钥到github账号

在终端输入下面命令，注意key的名字。这下公钥已经拷贝到了剪贴板。或者也可以直接用编辑器打开公钥复制。

1 2	$ pbcopy < ~/.ssh/id_rsa.pub # Copies the contents of the id_rsa.pub file to your clipboard

打开github的ssh key的页面，点击上面的New SSH key，然后粘贴上去，写个名字，点击ok就行了。
4、测试SSH连接
在终端输入

1	ssh -T git@github.com

如果出现warning，继续下去
最后应该会出现

1 2	Hi username! You've successfully authenticated, but GitHub does not provide shell access.

如果出现permission denied(publickey)，点击下面的页面看看
https://help.github.com/articles/error-permission-denied-publickey

安装hexo-deployer-git

1	$ npm install hexo-deployer-git --save

配置deploy

打开blog目录下面的config.yml文件（称为站点配置文件），找到deploy字段，按照下面的样式改你刚刚建立的仓库地址

deploy:
  type: git
  repo: git@github.com:xiangnan/xiangnan.github.io.git
  branch: master

此致，就打通了hexo和github仓库，后面就可以通过在blog目录下面输入下面指令将blog部署到github

$ hexo d

安装Next主题

进入blog目录，输入下面指令

1	$ git clone https://github.com/iissnan/hexo-theme-next themes/next

至于Next的使用，请参考官方教程，很详细

http://theme-next.iissnan.com/getting-started.html

创建文章

输入下面的命令

1	$ hexo new "postName" #新建文章

这就会在blog/source/_posts下面生成一个XXX.md文件。里面就可以用markdown语言进行blog撰写。
推荐一个在线编辑工具，所见即所得

https://stackedit.io/editor

文章编辑完之后，可以使用

hexo g

生成blog，然后再使用下面命令

hexo s

开启本地的服务器，安装里面提示的地址就可以看到博客了，方便修改。

有时候，即使使用了hexo g命令，也没有生成最新的文章。这个时候，可以吧blog/public目录删除了。重新使用hexo g命令生成blog
在文章中使用 <!– more –> 手动进行截断，Hexo 提供的方式

博客的图片

xiangnan推荐我用新浪微博的图床，感觉还不错。

Next主题修改的几个位置

Next的教程里面没有详细告知网页中元素的修改位置，且主题是黑色的，个人觉得一般般。所以自己摸索了一下一些控件颜色的修改位置。

小tip：活用浏览器的右键检查元素的功能，可以快速定位元素的class。
主题配置文件是指themes/next下面的_config.yml，下面一般先指出修改的文件所在位置，代码内是文件要修改的地方，一般是color字段。

头像

头像：主题配置文件

将头像放置主题目录下的 source/uploads/ （新建uploads目录若不存在）

配置为：avatar: /uploads/avatar.png

或者放置在 source/images/ 目录下

配置为：avatar: /images/avatar.png

最上面一条颜色

blog/themes/next/source/css/_common/components/header/headband.styl

.headband {
  height: $headband-height;
  background: $themeColor;
}

头部背景颜色位置

blog/themes/next/source/css/_schemes/Pisces/_brand.styl

.site-meta {
  padding: 20px 0;
  color: white;
background: $themeColor;

头部文字颜色

blog/themes/next/source/css/_common/components/header/site-meta.styl

.brand {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  color: $brand-color;
  background: $brand-bg;
  border-bottom: none;
  &:hover { color: $brand-hover-color; }
}

个人信息框的名字颜色

blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $themeColor;
  font-weight: $site-author-name-weight;
}

文章标题颜色：

blog/themes/next/source/css/_common/components/post/post-title.styl

.posts-expand .post-title-link {
  display: inline-block;
  position: relative;
  color: $blue;
  border-bottom: none;
  line-height: 1.2;
vertical-align: top;

文章内容宽度

我现在只能调节整个页面的宽度，如果有发现怎么调节的，请告知
blog/themes/next/source/css/_variables/base.styl

1
2
3

$main-desktop                   = 1160px
和
$content-desktop                = 900px

导航栏的激活标志

blog/themes/next/source/css/_schemes/Pisces/_menu.sytl

.menu-item-active a {
  @extend .menu .menu-item a:hover;
  &:after {
    content: " ";
    position: absolute;
    top: 50%;
    margin-top: -3px;
    right: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: $blue-bright;
  }
}

导航栏图标颜色

blog/themes/next/source/css/_common/scaffolding/base.styl

a {
  color: $link-color;
  text-decoration: none;
  border-bottom: 1px solid $grey-dark;
  word-wrap: break-word;
  &:hover {
    color: $link-hover-color;
    border-bottom-color: $link-decoration-hover-color;
  }
}

背景图片

blog/themes/next/source/css/_custom/custom.styl添加

#header {
    background: url("../images/background-header.jpg");
    background-size: cover;
}
body {
    background: url("../images/background-body.jpg");
    background-size: cover;
    background-attachment: fixed;  #防止图片滚动
}
#footer {
    background: url("../images/background-footer.jpg");
    background-size: cover;
}

修改侧边导航栏颜色

blog/themes/next/source/css/_common/components/sidebar/sidebar-nav.styl

.sidebar-nav .sidebar-nav-active {
  color: $themeColor;
  border-bottom-color: $themeColor;
  &:hover { color: $sidebar-highlight; }
}

blog/themes/next/source/css/_common/components/sidebar/sidebar-toc.styl

.post-toc .nav .active > a {
  color: $themeColor;
  border-bottom-color: $themeColor;
}
.post-toc .nav .active-current > a {
  color: $themeColor;
  &:hover {
    color: $toc-link-active-current-border-color;
}

标题下划线颜色

blog/themes/next/source/css/_common/components/post/post-title.styl

&::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: $themeColor;
  visibility: hidden;
  transform: scaleX(0);
  the-transition();
}