如何在github上面部署hexo主题

Welcome to Hexo!   下面我讲一下如何在github上面部署hexo主题。

1
2
3
4
安装要准备的环境:
    node.js 
    hexo主题
    github

安装node.js

下载node.js

地址：node

安装成功之后,验证node和npm是否安装成功(由于新版的NodeJS已经集成了npm)，在cmd中输入

node -v
npm -v
如果显示的是数字，则证明成功;

接下来安装依赖包:

1
2
3
4
5
6
7
键入命令：npm install express -g 回车等待安装express.....

键入命令：npm install jade  -g  回车等待安装jade.........

键入命令：npm install mysql  -g 回车等待安装mysql........

'(ps:g为在全局有效)'

安装hexo主题

安装好node.js之后,接下来安装hexo主题;

1
npm install -g hexo

可以通过hexo -v 查看hexo 版本

hexo的使用

在你喜欢的文件夹下面新建一个文件夹(我选择D:/hexo);
在当前文件夹使用以下指令 :

1
2
3
4
hexo init  //文件夹自动生成建网站所需的文件。
hexo install //会在文件夹下安装node_modules 
hexo generate // 自动根据当前目录下文件,生成静态网页
hexo server  //本地测试

然后就可以http://localhost:4000/ 中打开了
记得关server是 ctrl+c

发布博客新文章

1
2
3
4
5
hexo new "my first blog" 
 //博文会自动生成在博客目录下source/_posts/postName.md
hexo g (g 为generate的简写)
hexo s  (s为server的简写)
看看http://localhost:4000/中新发布的blog

如果不想博文在首页全部显示,
并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加

1
2
3
此处及以上的内容会在首页显示
<!--more-->
一下是在首页隐藏的部分

更改hexo主题以及部署到github

Hexo提供了官网的主题, 初始化hexo时也会自动生成一个主题, Hexo还支持个性定制主题, 可以根据自己的喜好对主题进行修改, 更多主题可以在官网中找到

1.个性化博客的设置
在博客的根目录下对喜爱的主题进行主题进行克隆

1
git clone git@github.com:yunlzheng/hexo-themes.git themes/yilia

2.更新主题

1
2
cd themes/yilia
git pull

1
2
3
4
5
6
7
#在./_config.yml(根目录)，修改主题为yilia
theme: yilia
#查看本地效果（在根目录下面写）
hexo g       #hexo generate简写
hexo s       #hexo server简写

以上这些仅限本地，如果需要push github 还需要更改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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

 # 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'
## If your site is put in a subdirectory, set url as http://yoursite.com/child and root as /child/
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 # 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
highlight:
  enable: true
  line_number: true
  tab_replace:

'# Category & Tag'
default_category: uncategorized
category_map:
tag_map:

'# Archives'
'#Archives 默认值为2,修改为1,Archives页面就只会列出标题,而非全文'
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

'# Server服务器设置, 不修改'
//## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev

'# 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: MMM D YYYY
time_format: H:mm:ss

'# Pagination 分页, 设置每页显示多少篇博文'
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

'# Disqus  disqus评论,  与多说类似, 国内一般使用多说'
disqus_shortname: 

'# Extensions'
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: yilia    '#主题设置'
exclude_generator:

'# Deployment  站点部署到github要配置这里, 非常重要'
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github  '#部署类型, 本文使用Github'
  repository: git@github.com:gdutwyg/gdutwyg.github.io.git '#部署的仓库的SSH'
  branch: master   '#部署分支,一般使用master主分支'
plugins: 
- hexo-generator-feed   '#此插件用于RSS订阅, 以后有时间再介绍'

最后，运行

1
2
3
4
npm install hexo-deployer-git --save

hexo g
hexo d

可以去xxx.github.io 查看效果了~~