By

文章目录
  1. 1. 安装准备
  2. 2. 安装Hexo
    1. 2.1. 修改主题
  3. 3. 部署到Github
  4. 4. 修改Hexo设置
  5. 5. 修改局部页面

安装准备

首先需要有自己的github并且创建自己的个人站点，下载好Node.j

安装Hexo

之前试过使用jekyll是在是觉累不爱了，国内连ruby的官方源都被墙了，必须要换淘宝源。如果想使用jekyll搭建可以参考这篇文章。

安装好Node.js之后，重启git shell，使用如下命令安装hexo

1
$ npm install -g hexo

在磁盘上新建一个hexo文件夹，在git shell中将工作路径切换到该文件夹下，运行如下命令

1
$ hexo init

Hexo随后会自动在目标文件夹建立网站所需要的所有文件。这时可以通过下面的命令预览现在blog的效果，在浏览器中输入localhost:4000

1
2
$ hexo g
$ hexo s

这时就可以看到一个最基础的hexo blog的效果。

修改主题

如果不想用原有的主题可以使用其他主题，以我的主题为例

1
$ git clone https://github.com/wuchong/jacman.git themes/jacman

接着，修改Hexo根目录下的config.yml配置文件中的theme属性，将其设置为jacman。

1
theme: jacman

使用下面的命令更新主题

1
2
$ cd themes/jacman
$ git pull

这时可以使用这三条命令来预览现在的blog

1
2
3
$ hexo clean
$ hexo g
$ hexo s

部署到Github

部署到Github前需要配置_config.yml文件

1
2
3
4
5
deploy:
  type: git
  repository: git@github.com:njuptjsy/njuptjsy.github.com.git
  branch: master
  message:XXXX

这一步要注意的有两点，第一是type:后面需要接一个空格在接上需要的值，而且type:的属性相对于deploy都有两个空格的缩进。第二type:github这个类型不再支持了，需要先

1
$ npm install hexo-deployer-git --save

在把type:改成git
下面提交到github

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

修改Hexo设置

网站搭建完成后，就可以根据自己爱好来对Hexo生成的网站进行设置了，对整站的设置，只要修改项目目录的_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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: More Than Words
subtitle:Perfection'snot attainable, but if we chase it we can catch excellence..
description:学习总结 思考感悟 知识管理
author: Siyu Jin
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://njuptjsy.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
  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: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: jacman

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:njuptjsy/njuptjsy.github.com.git
  branch: master
  message: this is frist try

这里需要注意的是，所以冒号后面必须有一个空格

修改局部页面

页面展现的全部逻辑都在每个主题中控制，源代码在hexo\themes\jacman\中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
├── languages  #多语言
|   ├── default.yml#默认语言
|   └── zh-CN.yml  #中文语言
├── layout #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _partial   #局部的布局，此目录下的*.ejs是对头尾等局部的控制
|   └── _widget#小挂件的布局，页面下方小挂件的控制
├── source #源码
|   ├── css#css源码 
|   |   ├── _base  #*.styl基础css
|   |   ├── _partial   #*.styl局部css
|   |   ├── fonts  #字体
|   |   ├── images #图片
|   |   └── style.styl #*.styl引入需要的css源码
|   ├── fancybox   #fancybox效果源码
|   └── js #javascript源代码
├── _config.yml#主题配置文件
└── README.md  #用GitHub的都知道

到这里一个简单的hexo搭建的博客就部署好了，使用markdown写博的语法可以阅读这篇文章

文章目录
  1. 1. 安装准备
  2. 2. 安装Hexo
    1. 2.1. 修改主题
  3. 3. 部署到Github
  4. 4. 修改Hexo设置
  5. 5. 修改局部页面