tonglin0325的个人主页

如何使用Hexo搭建静态博客

介绍如何使用Hexo和Github搭建静态博客
使用的主题为Bootstrap
搭建的环境是ubuntu 14.04 LTS#

<1>什么是Hexo#

Hexo 是一款基于node 的静态博客网站生成器,作者:tommy351是一个台湾的在校大学生。 相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Octopress插件)。 同其他很多轻量级博客如jekyll、octopress、jekyllbootstrap等一样,也是使用Markdown语法进行编辑博文,即编辑.md后缀的文件。

hexo的github主页地址: Hexo_Github
Markdown的中文语法: Hexo_Docs

 

<2>注册Github并创建个人站点#

Git是一个分布式的版本控制系统,功能强大而且免费 要想在Github上搭建一个基于Hexo的博客,首先要注册一个Github帐号,并在上面创建个人站点 这里我参考的是博客园一篇博文的前几个步骤,即创建Github Pages

Github主页: Github
参考的博客园博文地址: 创建Github Pages参考

<3>安装Node.js和Git#

要想使用Hexo,必须安装Node.js和Git

安装Git#

由于用的是ubuntu,安装git直接在终端下运行命令apt-get就行了
1
$ sudo apt-get install git-core

安装Node.js#

参考网上一篇CSDN文章安装的Node.js,使用的是源码进行编译安装 安装的版本是v0.10.29
1
2
3
4
5
6
7
cd /usr/local/src
wget http://nodejs.org/dist/v0.10.29/node-v0.10.29.tar.gz
tar zxvf node-v0.10.29.tar.gz
cd node-v0.10.29
./configure
make
make install
1
2
node -v
v0.10.29

参考CSDN文章地址: ubuntu下安装Node.js参考

安装NPM#

NPM的全称是Node Package Manager,是Nodejs的包管理器,要安装Hexo的话,就是通过NPM来进行的 安装NPM的命令 这里详解一下这句命令的意思,curl http://npmjs.org/install.sh 是通过curl命令获取这个安装shell脚本,按后通过管道符| 将获取的脚本交由sh命令来执行。这里如果没有权限会安装不成功,需要加上sudo来确保权限
1
curl http://npmjs.org/install.sh | sudo sh
上面的网址不行的话换成www.npmjs.com,安装成功后执行npm命令,会得到一下的提示:
1
2
3
4
5
6
7
8
9
10
Usage: npm <command>
where <command> is one of:
adduser, apihelp, author, bin, bugs, c, cache, completion,
config, deprecate, docs, edit, explore, faq, find, get,
help, help-search, home, i, info, init, install, la, link,
list, ll, ln, ls, outdated, owner, pack, prefix, prune,
publish, r, rb, rebuild, remove, restart, rm, root,
run-script, s, se, search, set, show, star, start, stop,
submodule, tag, test, un, uninstall, unlink, unpublish,
unstar, up, update, version, view, whoami
另外,由于某些原因,国内npm速度比较慢,甚至打不开,建议使用淘宝源:http://npm.taobao.org/ (本条有可能导致出错)
1
npm install -g cnpm --registry=https://registry.npm.taobao.org

其他文章地址: ubuntu下安装NPM参考
可能出现错误的解决方法: npm ERR!

<4>安装Hexo#

Node, npm和Git都安装成功, 开始安装Hexo,要求安装G++和Python
1
npm install hexo -g  #-g表示全局安装, npm默认为当前项目安装
Hexo使用命令:
1
2
3
hexo init <folder>  #执行init命令初始化hexo到你指定的目录
hexo g #自动根据当前目录下文件,生成静态网页
hexo s #运行本地服务
浏览器输入http://localhost:4000 就可以看到效果

设置Hexo全局配置#

打开站点配置文件_config.yml,只需要修改部分配置,大部分保持默认即可 也可以下载Bootstrap主题,然后把Hexo的_config.yml的theme里面改成Bootstrap
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Common的个人主页
subtitle:
description:
author: Common
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://lintong-common.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
i18n_dir: :lang
skip_render:

# 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
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
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: bootstrap-blog

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git #部署工具的类型
repository: git@github.com:Lintong-common/lintong-common.github.com.git #SSH链接
branch: master #分支

参考的博客地址: Hexo(一):在GitHub上搭建静态博客

<5>下载Bootstrap主题#

在下面给的网址中下载主题,放在hexo/themes/目录下,然后修改Hexo目录下的._config.yml文件中的theme参数

Hexo主题库: Hexo主题库

以下是我修改后的themes/bootstrap-blog目录下的._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
# Header
navbar_brand: false
menu:
主页: index.html
所有文章: archives/
其他页面: page/Hello.html
rss: /atom.xml

# Content
excerpt_link: 全文 >>
fancybox: true

# Sidebar
widgets:
- about # See also: `about_content`
- category
- tag
- tagcloud
- archive
- recent_posts

about_widget_content:
<div style="text-align:center;"><img src="/images/he.jpg" width="150" height="150" style="vertical-align:middle;"/></div> #About 关于我

# widget behavior
archive_type: 'monthly'
show_count: true

# Miscellaneous
google_analytics:
favicon: http://o6g92sjqd.bkt.clouddn.com/3232.ico
twitter_id:
google_plus:
fb_admins:
fb_app_id:

<6>部署到Github上#

在下面给的网址中下载主题,放在hexo/themes/目录下,然后修改Hexo目录下的._config.yml文件中的theme参数

参考该博客的博文的如何部署到Github: 如何部署到Github

添加可跳转的目录,参考: Hexo 博客踩坑

写在之后:搭建的过程中遇到了各种问题,也是google各种解决方法,参考了很多博文,总结的难免有披露,同时也感谢网上大神们的分享#