hanqunfeng's blog

Hexo+GitHub Page搭建自己的Blog

什么是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
# 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

参考资料

热评文章