手把手教 GitHub + Hexo 搭建博客

本文章主要介绍使用hexo框架搭建博客,使用GitHub免费托管自己的博客代码,并使用GitHub Pages提供的免费服务。换句话说,就是使用免费资源搭建属于自己的博客网站。

前言

在很久以前,博主就想着要有自主的博客专栏或者网站。经历了博客园这个需要所谓的编辑审核,一直比较困惑,这些编辑是什么出身,怎么知道技术博客的价值性。

接下来找到了开源中国,这个可以自由发言的地方。不过,不知道是不是受众面不广,访问量都不是很理想。

再然后就来自己动手开始搭建博客。从手写html发布文章,到使用jekyll,最后到了hexo阵营。

终于,有种找到家的赶脚。hexo不仅搭建方便,而且在后续的功能扩展以及文章发布都是非常方便的。不仅如此,还可以本地调试,预览效果。最方便的是支持markdown编写文档。

本文就是介绍如何安装使用hexo搭建属于自己的博客。从此不再担心投稿被莫名拒绝。可以在自己的一亩三分地讲述着自己的故事。

环境准备

安装Git

MAC OS X 是自带Git命令行工具。

Windows 可以安装Git Bash。

安装Node.js

前往官网地址,根据教程安装即可。

安装hexo

1
$ sudo npm install hexo-cli -g

使用hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 创建hexo文件夹
$ mkdir hexo

# 进入hexo文件夹
$ cd hexo

# 初始化hexo
$ hexo init

# 安装依赖包
$ npm install

# 本地查看
# 先运行下面的命令,再在浏览器输入localhost:4000即可
$ hexo server

# 问题:执行hexo server提示找不到该指令
# 解决办法:在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:
$ npm install hexo -server --save

生成静态网站

1
$ hexo generate

目录结构

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: #标题
subtitle: #副标题
description: #站点描述,给搜索引擎看的
author: #作者
email: #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
enable: true #是否启用
line_number: true #显示行号
tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
type: git
repo: github创库地址.git
branch: master

注意

  • 配置文件的冒号“:”后面有一个空格
  • repo: github创库地址.git

hexo命令行使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
常用命令:
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹

简写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

使用GitHub

注册账号

前往GitHub官网注册账号,按照网站提示注册。

创建代码仓库

这个仓库的名字需要和你的账号对应。格式: yourname.github.io

具体使用GitHub可以参考:《GitHub 使用》

编辑文章

1
2
# 新建文章
$ hexo new "标题"

在 _posts 目录下会生成文件标题.md

1
2
3
4
5
6
7
---
title: Hello World
date: 2015-07-30 07:56:29 #发表日期,一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签,多于一项时用这种格式
---
正文,使用Markdown语法书写

编辑完后保存, 预览

1
$ hexo server

hexo部署

执行下列指令完成部署

1
2
hexo generate
hexo deploy

以下提示说明部署成功

1
[info] Deploy done: git

hexo插件使用

添加rss订阅功能

安装hexo-generator-feed插件

1
$ npm install hexo-generator-feed --save

安装完后,会在node_modules目录下生成hexo-generator-feed目录。然后将其配置到根目录的_config.yml

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed: #可选项,可以不填
type: atom
path: atom.xml
limit: 20

最后,在你当前主题下的_config.yml下,添加RSS订阅链接即可,这里博主用的是Yilia主题,subnav下添加rss:

1
2
3
# SubNav
subnav:
rss: "/atom.xml"

至此,博客搭建完成,基本使用介绍完毕。希望对大家有所帮助。