Hexo+GitHub Page搭建自己的Blog

发表于 更新于 分类于 精品
阅读次数： 本文字数： 1.8k 阅读时长 ≈ 6 分钟

什么是Hexo

  • Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 @tommy351 的话：

  • 快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

GitHub Pages是什么？

  • GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。

以下环境为mac下安装。

Hexo安装

需要安装git和Node.js运行环境

git安装

  • mac自带git，如果需要重新安装，可去官网下载

1
2
$ git --version
git version 2.9.3 (Apple Git-75)

安装npm

  • 基于brew方式安装npm

1
$ brew install npm

安装Hexo

1
$ npm install hexo-cli -g

npm安装Hexo：参考资料

查看Hexo版本

1
2
3
4
5
6
7
8
9
10
11
12
13
$ hexo version
hexo: 3.2.2
hexo-cli: 1.0.2
os: Darwin 16.1.0 darwin x64
http_parser: 2.7.0
node: 6.6.0
v8: 5.1.281.83
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2h

Quick Start

Setup your blog

1
2
3
$ cd ~
$ hexo init blog
$ cd blog

  • 此命令会在当前用户的家目录下创建一个blog目录，并初始化相关文件，如下为初始化的目录结构：
    blog目录结构

blog目录结构说明

  • scaffolds ：模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局： post 、 page 和 draft ，它们分别对应不同的路径。新建文件的默认布局是 post ，可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。

  • source ：资源文件夹是存放用户资源的地方。

  • source/_post ：文件箱。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件或者文件夹和隐藏的文件将会被忽略。Markdown文件会被解析并放到 public 文件夹。

  • themes ：主题 文件夹。Hexo 会根据主题来生成静态页面。我们可以将自己的主题放到该目录下，然后在_config.yml中修改默认的主题即可。

  • themes/landscape ：默认的皮肤文件夹

  • _config.yml ：全局的配置文件，每次更改要重启服务。

_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
71
72
73
74
75
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点配置
title: Study Zone #网站标题
subtitle: Spring--java程序员的春天 #网站副标题
description: 分享成长与快乐的地方 #网站描述
author: hanqunfeng #作者，网站所有者
language: zh-CN #网站使用的语言
timezone: Asia/Shanghai #网站时区

# URL 可以不配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://hanqunfeng.github.io #网址，搜索时会在搜索引擎中显示
root: / #网站根目录
permalink: :year/:month/:day/:title/ #永久链接格式
permalink_defaults: #永久链接中各部分的默认值

# Directory 目录配置
source_dir: source #资源文件夹，这个文件夹用来存放内容
public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化文件夹
skip_render: #跳过指定文件的渲染，您可使用 glob 来配置路径

# Writing 写作配置
new_post_name: :title.md # File name of new posts # 新文章的文件名称
default_layout: post #默认布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #是否启动资源文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true
highlight: #代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag 分类 & 标签
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名

# Date / Time format 时间和日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录

# Extensions 扩展
## Plugins: https://hexo.io/plugins/ 插件
## Themes: https://hexo.io/themes/ 主题
# theme: landscape #当前主题名称
theme: yilia #当前主题名称

# Deployment #部署到github
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/hanqunfeng/hanqunfeng.github.io.git
  branch: master

注意：以下所有命令，都必须在blog目录下执行。

Start the server

1
2
3
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

  • 我们可以通过浏览器访问http://localhost:4000/，就可以看到blog的页面了。

  • 创建文件、生成静态文件以及发布到github，都不需要启动服务，启动服务的目的仅是为了能在本地看到效果。

  • hexo server == hexo s

Create a new post

1
2
$ hexo new "Hello Hexo"
INFO  Created: ~/blog/source/_posts/Hello-Hexo.md

  • 创建好的文件基于makedown语法，可以使用sublime或者atom编辑器，进行编辑与管理。

  • 编辑完成后不需要执行hexo generate命令即可在浏览器中查看效果，但是修改了主题内容，有时会不生效，需要先生成静态文件才能看到最终效果。

  • hexo new == hexo n

Generate static files

1
$ hexo generate

  • 该命令用于将makedown文件转换为静态html文件，并放到public文件夹下。

  • 可以使用hexo clean命令来删除public文件夹，之后再使用hexo generate来重新生成静态文件。

  • hexo generate == hexo g

Clean static files

1
2
3
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

  • hexo clean == hexo cl

主题

更换主题

  • github上有许多技术达人为Hexo制作的主题，可以clone到本地，并拷贝到themes文件夹下，然后修改_config.yml中的theme属性，修改主题需要重启Hexo才能生效。

  • 比如博主使用主题为yilia下载地址:

1
2
$ cd ~/blog
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

  • 更新主题时，在themes/yilia目录下执行git pull。

添加资源

  • 可以在当前主题的source目录下放入自己的资源，执行hexo generate命令时，会将主题中的source目录下的内容拷贝到public目录下。

  • 但是这样做如果更换主题，则资源就失效了，所以一般是在source目录下创建资源文件，执行hexo generate命令时，会将source目录下的内容拷贝到public目录下。

发布到Github

安装hexo的git发布包

1
$ npm install hexo-deployer-git -S

创建SSH密钥

  • 创建密钥可以在执行发布时不需要每次都输入用户名和密码，具体创建方法查看如下资料:

Deploy to remote sites

  • 因为使用GitPage，所以需要申请一个Github帐号，并创建一个仓库，仓库名称为"your_name.github.io"。

  • 创建好仓库后，在_config.yml中按上文中的内容配置好deploy属性。

  • 执行如下命令，会将public下的文件发布到该仓库中，一般执行deploy前先执行clean和generate保证文件最新。

  • 访问https://hanqunfeng.github.io，查看blog页面。

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

  • hexo deploy == hexo d

参考资料