搭建hexo静态博客并上传到github

github+hexo

写在前面的话

  1. 为什么要写博客?
    答:通过写博客加深对技术的理解。
  2. 为什么使用hexo静态博客?
    答:文章的生成速度明显高于jkyll/octopress,并且安装更简单,也有更多漂亮的模板。

这里将hexo静态博客托管到github上,免去管理vps和流量瓶颈的各种麻烦。

前期准备

安装git

  这里主要是面向windows的安装的,首先下载git并依据提示操作安装,比较简单。

安装node.js

  下载并安装node.js。安装完成之后需要注意将npm添加到环境变量中,使npm命令生效

1
;C:\Program Files\nodejs\node_modules\npm

安装hexo

  打开git bash,输入如下命令

1
2
npm install -g hexo-cli
npm install hexo --save

  安装好之后,建立hexo博客的文件夹,如:D:\hexo。在该文件夹下打开git bash,输入以下命令

1
hexo init

  完成安装之后,你会发现里面多了好多文件夹。OK,接下来就是安装hexo的各种插件(PS:新版的hexo默认连server和deployer-git都没装。如果不自己安装插件,连预览和push上github都不行)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
npm install hexo-toc --save
npm install hexo --save
npm install hexo-renderer-ejs --save

  在漫长的等待中,插件终于自动安装好了。终于可以看看是什么效果了~

  在文件夹内打开git bash,输入

1
2
3
4
5
6
7
8
hexo s -g
# 这里说一下,hexo是支持缩写的,即:
# hexo s => hexo server
# hexo n => hexo new
# hexo d => hexo deploy
# hexo s -g => 先生成,再预览
# hexo d -g => 先生成,再部署
# 更多命令可以输入hexo -h查看

  等待程序反应,运行成功后可以看到

1
Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  OK,这时候可以打开浏览器,输入

1
2
http://127.0.0.1:4000
# 默认端口是4000,也可以通过-p参数修改。如:hexo s -p 3721

  看一下效果图
hexo博客效果图
  如果需要更换主题的话可以看这里。同时需要修改_config.yml里面的theme:(不要漏掉冒号后面的空格)
  这个博客使用的主题是:hexo-theme-yilia
  每次写完博客的之后都可以先在本地预览,修改,然后再部署到服务器上。

Github上的配置

新建Github账号

  Github账号可以在这里创建,比较简单,一直填下去就可以了(已有账号的请忽略)。

创建github page的repository

  接着就是创建一个repository,名字为username(你的用户名).github.io。Github会自动识别为你的网站。
  注意:新用户可能要设置ssh,具体请参考官方的教程

修改_config.yml

  回到博客的目录下修改_config.yml

1
2
3
4
5
deploy:
type: github
repository: https://github.com/你的用户名/你的用户名.github.io.git
branch: master
# 这里说一下,如果你的用户名有大写字母,你会发现后面的username.github.io会变成全部小写的。

  最后在博客目录下打开git bash,输入

1
hexo d -g

  上传到Github上(中间可能需要输入密码,取决于当初ssh的设置)
  OK,我们已经搭建好了一个hexo静态博客并将之上传到Github上。通过Github分配的二级域名username.github.io就可以访问属于自己的博客。Have fun!

参考网站

  1. hexo官方文档
  2. 使用GitHub和Hexo搭建免费静态Blog