Skip to content

用hexo极速搭建博客

发表于:February 16, 2016 at 11:19 AM

hexo 是一个非常轻量且快速的博客生成框架,可以使用 markdown 便捷的生成文章。 本文主要介绍 windows 下如何搭建 hexo3.0+环境并发布至 github。默认读者具有命令行使用经验和一定的 web 编程基础。

作者:Icarus 原文链接:用 hexo 极速搭建博客

hexo 搭建完成后只需要三步就可以完成博文的更新。

hexo n #新建
hexo g #生成
hexo d #发布

下面介绍 windows 下如何搭建 hexo3.1.1 环境并发布至 github

环境准备

安装 node.js

node.js官网下载 node.js 并安装。我使用的是 win8.1 x64 下的 4.2.4 版本。

安装 Git

git 客户端很多,我使用的是 git 官方提供的工具,下载速度可能较慢。

安装 sublime(非必须)

作为一个小前端,sublime 作为编辑器实在是不能再好用,不过这个只是作为文本编辑器使用,大家可以根据喜好自由选择工具,切记不要使用 windows 自带的记事本。

Github

我们使用 Github 官方提供的 Github Pages 这一服务来作为静态博客的服务器。申请 Github 账户和与 git 通过 ssh 建立连接网上有很多详细的教程,此处不再赘述。 GitHub Help - Generating SSH Keys

安装

node.js 和 git 安装好后,建议使用 git 提供的命令行窗口进行操作。 windows 自带的 cmd 会报错。 执行如下命令可安装 hexo:

npm install -g hexo

初始化

执行 init 命令初始化 hexo 到你指定的目录。

hexo init <folder> #folder为你指定的目录

或者 cd 至指定目录,执行 hexo init

至此,hexo 的安装工作已经完成。

hexo 必备插件

$ 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 #hexo通过git发布(必装)
$ npm install hexo-renderer-marked@0.2.7--save #渲染器
$ npm install hexo-renderer-stylus@0.3.0 --save #渲染器

生成静态页面

cd 至之前初始化的目录,执行如下命令,即可生成静态页面至 public 目录

hexo g

本地启动

执行如下命令,启动本地服务,进行预览。 必须安装 hexo-server,不然无法启动本地服务器

hexo s

浏览器输入 localhost:4000 即可访问默认的 hexo 博客效果。 注意 hosts 文件中 localhost 是否被占用以及 4000 端口可能被福昕阅读器占用

发布

编辑 hexo 根目录下的_config.yml 文件,找到最下面的 deploy hexo2 和 hexo3 此处配置不一样,我使用的是 hexo3.1.1 为如下格式。

deploy:
  type: git
  repo:https://github.com/xdlrt/xdlrt.github.io.git #你的GitHub Pages的https链接
  branch:master

保存配置文件后,执行如下命令:

hexo d

注意 yml 格式文件冒号后面必须加一个空格 执行完毕后访问 xdlrt.github.io 即可看到部署在 github 上的默认博客。第一次发布可能会有 10 分钟的延迟。

至此,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 n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

坑: 1.有时会出现首页只有一篇文章的情况,这个时候需要 hexo g 渲染两次,原因不明。 2.标题中不能含有[]否则无法编译

参考资料:

hexo 你的博客|不如 最新版 Hexo 配置 hexo 静态博客使用指南 用 hexo3 搭建博客 如何查看某个端口被谁占用 NexT-an elegant theme for hexo