博客搭建

hexo搭建github静态博客

hexo是一个基于node的博客框架，也可以实现基于 github的博客，更轻更快，很方便，部署在github上省了服务器成本，还少了各种系统运维的事儿，何乐而不为呢O(∩_∩)O~

之前用的jekyll搭的博客，换了电脑以后，环境配置总出错，而且步骤繁琐，一气之下就换了hexo，发现真的超级好用哦~~

安装nodejs

官网下载http://nodejs.org/download/

无脑安装

安装git

官网http://git-scm.com/

安装hexo

搞定上面两个以后开始安装hexo

1
$ npm install -g hexo-cli

注意：mac上需要先安装Xcode

查看hexo版本信息，确认是否安装成功

1
$ hexo version

配置

OK~hexo已经成功安装了，接下来在你希望的目录里初始化Hexo

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

查看package.json，能看到EJS,Stylus和Markdown的依赖都已经默认装好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.1.1"
  },
  "dependencies": {
    "hexo": "^3.1.0",
    "hexo-deployer-git": "0.0.4",
    "hexo-generator-archive": "^0.1.2",
    "hexo-generator-category": "^0.1.2",
    "hexo-generator-index": "^0.1.2",
    "hexo-generator-tag": "^0.1.1",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-server": "^0.1.2"
  }
}

目录结构含义

  • scaffolds 脚手架，也就是一个工具模板
  • scripts 写文件的js，扩展hexo的功能
  • source 存放博客正文内容
  • source/_drafts 草稿箱
  • source/_posts 文件箱
  • themes 存放皮肤的目录
  • themes/landscape 默认的皮肤
  • _config.yml 全局的配置文件
  • db.json 静态常量

提一下_config.yml，全局配置文件，很多网站配置都在这里

  • 站点信息: 定义标题，作者，语言
  • URL: URL访问路径
  • 文件目录: 正文的存储目录
  • 写博客配置：文章标题，文章类型，外部链接等
  • 目录和标签：默认分类，分类图，标签图
  • 归档设置：归档的类型
  • 服务器设置：IP，访问端口，日志输出
  • 时间和日期格式： 时间显示格式，日期显示格式
  • 分页设置：每页显示数量
  • 评论：外挂的Disqus评论系统
  • 插件和皮肤：换皮肤，安装插件
  • Markdown语言：markdown的标准
  • CSS的stylus格式：是否允许压缩
  • 部署配置：github发布

详细内容可参考我的配置，想了解更细致的东西，可以查看hexo官方文档http://hexo.io/docs/configuration.html

部署到github上

在github上新建一个仓库，名字为：username.github.io

修改根目录下的_config.yml为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/quanxi613/quanxi613.github.io.git
  branch: master

运行

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

然后部署步骤是：

1
2
3
$ hexo clean
$ hexo generate //也可简写为 hexo g
$ hexo deploy   //也可简写为 hexo d

这时，在浏览器中打开http://quanxi613.github.io/，网页正常显示表示部署成功。

本地调试

本地修改了样式，添加了功能和文章后，执行下面的命令

1
2
$ hexo g #生成
$ hexo s #启动本地服务，进行文章预览调试

浏览器输入localhost:4000，可现实你的博客网页

简化的一条命令

1
$ hexo s -g

常用命令总结

1
2
3
4
5
6
7
8
9
10
hexo init 创建一个hexo项目
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo deploy -g  #生成加部署
hexo server -g  #生成加预览

命令简写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy