Hexo博客搭建与github托管

Posted on | Edited on | In

关于Hexo及基本安装

Hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github上。

  1. 安装Git，安装Node.js。
  2. 在安装目录上新建一个Hexo的文件夹，右键Git-bash，开始安装Hexo。
1
2
3
4
5
$ npm install hexo -g
$ hexo init blog 
$ cd blog
$ npm install 
$ hexo server

这时Hexo已经在运行了，打开4000端口就可以看到本地的网页了http://localhost:4000/。 若安装了福昕阅读器占用了4000端口，可以通过hexo server -p 5000换端口。

托管到Github

1.在自己的主页下创建一个新的repository。比如我的账号是ninokop，那我的repository的名字就是ninokop/ninokop.github.io

2.在Hexo\blog下的_config.yml文件下修改这些信息

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/ninokop/ninokop.github.io.git
  branch: master

hexo升级之后，type就不再是原来的github了，这时需要安装一个hexo插件

1
npm install hexo-deployer-git --save

3.执行下列指令就可以完成托管部署，貌似需要设置ssh，但是我实在没配置成功

1
2
3
hexo clean 
hexo generate
hexo deploy

4.此时在博客的根目录下会生成一个文件夹：.deploy，等一会儿就可以打开ninokop.github.io看到博客了。

新建文章和编辑文章

1.断掉hexo server，然后新建一个.md文档到source/_posts文件，然后打开hexo server可以边编辑.md文档，边在localhost:4000看到博客的编辑状态。

1
hexo new "file name"

2.编辑文章用markdown语法，可以下载一个Typora用起来蛮方便也蛮好看的。基本的语法跟简书和作业部落的一样，具体可以用在线编辑器看看语法。

https://www.zybuluo.com/mdeditor

换个主题

可以在hexo的皮肤列表页面，可以找到很多的皮肤。最开始我用的是基于pacman修改的jacman风格的主题，后来发现Next的配置文档和风格非常齐全，最后开始用了next。

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

只要编辑blog目录下的_config.yml找到theme一行，改成next就行。

  • 修改文本的行间距
1
2
// css/_variables/base.styl 
line-height-base= 1.7
  • 修改markdown的quote和code的渲染方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// css/_common/scaffolding/base.styl
blockquote {
  padding: 0 15px;
  color: $grey-dim;
  border-left: 6px solid #D6DBDF;
  background-color: #f5f5f5;
  
  cite::before {
    content: "-";
    padding: 0 5px;
  }
}

// css/_custom/custom.styl
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}