如何使hexo显得自己更有逼格(一)——开始使用

​ 感谢铮神(@zccz14 )的博客,成功使用Travis CI和github实现了博客的自动部署。最近几天一直在折腾hexo,就讲一下自己的一点经验。因为我只用了next主题 ,所以以下所有的配置也都是针对next主题的,其他主题也大致相似。

开始使用Hexo与主题配置

优先参考 官方文档 ,大部分问题都可以在官方文档中找到答案。

开始使用

安装

hexo使用node.js编写,所以要正常地使用首先需要安装node。同时也需要安装Git,对于后续的部署和版本控制都十分有用,并且hexo的一些命令需要基于Git命令来完成,关于Git的使用可以参考Git教程 。安装完成后在命令行中使用node附带的包管理器安装hexo:npm install -g hexo-cli。安装完成后即可使用hexo命令。

使用步骤

  1. 建立文件夹<folder>,然后输入$ hexo init <folder>命令,初始化文件夹内部结构。

    其中_config.yml是项目的站点配置文件,记录一些全局的变量信息,可以使用yaml和json格式书写;

1
2
3
4
5
6
7
8
9
title: 黑境
url: https://aak1247.coding.me/
root: /

author: aak1247
description: Still waters run deep
avatar: /images/avatar.gif
language: zh-Hans
theme: next

package.json文件是项目的node包信息,主要记录当前版本号和依赖项,是nodejs默认生成的一个东西,也是执行npm install命令时的依据文件,npm会根据它包含的依赖项自动安装包。

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

  1. 修改配置和发布文章,这也是博客使用的主要内容。

  2. 通过修改_config.yml文件修改配置。

    1. 官方推荐的方式为使用hexo new article建立新文章。也可以手动在source/_posts/路径下建立markdown文件来撰写文章。
  3. 使用 hexo generate命令生成静态博客,所有的内容位于public目录下。站点路径下以下划线开头的文件和文件夹不会被渲染。生成以后可以将public目录下的文件部署到服务器来建立可访问的博客。完成以后可以通过hexo server来启用本地服务器预览博客。

自动部署

这一部分内容参考@zccz14 的博客优雅地使用Hexo ,使用Travis CI自动执行脚本的方式,动态生成静态博客内容并push到git repo中,完成部署。由于github主动屏蔽了百度的内容抓取,没有域名的情况下推荐使用coding.net提供的coding pages服务(Coding Pages 介绍 ),具体使用与Github pages相同。

在项目根目录下建立.travis.yml文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
language: node_js
node_js:
- "6"
before_install:
- git config --global user.email $GITHUB_EMAIL
- git config --global user.name $GITHUB_USERNAME
- npm i hexo-cli -g
- git clone $THEME_URI themes/$THEME_NAME
script:
- hexo config theme $THEME_NAME
- hexo generate
after_success:
- cd public
- git init
- git add .
- git commit -m "Travis Deploy"
- git push -f -q https://$GITHUB_USERNAME:$GITHUB_PASSWORD@github.com/$GITHUB_USERNAME/$GITHUB_USERNAME.github.io master
- git push -f -q https://$CODING_USERNAME:$CODING_PASSWORD@git.coding.net/$CODING_USERNAME/$CODING_USERNAME.coding.me master

登录Travis CI,在setting中设置变量,在.travis.yml中可以通过$var方式调用变量值。配置好以后每一次对项目的提交都会使Travis CI进行一次自动部署,将生成的静态博客推送到github pages对应repo和coding pages对应repo。

简化配置

站点的配置可以参考官方文档 的说明,大部分设置项都有不需要修改的默认值,可以参考我上面的_config.yml内容,需要添加第三方插件时直接加入相关配置即可。

觉得有用的话赞助一点吧~