Hexo博客yilia模板配置

配置环境

安装Node(必须)

作用:用来生成静态页面的

到Node.js官网下载相应平台的最新版本,一路安装即可。

安装Git(必须)

作用:把本地的hexo内容提交到github上去.

安装Xcode就自带有Git,我就不多说了。

申请GitHub(必须)

作用:是用来做博客的远程创库、域名、服务器之类的,怎么与本地hexo建立连接等下讲。

github账号我也不再啰嗦了,没有的话直接申请就行了,跟一般的注册账号差不多,SSH Keys,看你自己了,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了,怎么配置我就不多说了,网上有很多教程。

正式安装Hexo

Node和Git都安装好后,首先创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。

执行如下命令安装Hexo:

1
sudo npm install -g hexo

初始化然后,执行init命令初始化hexo,命令:

1
hexo init

好啦,至此,全部安装工作已经完成!blog就是你的博客根目录,所有的操作都在里面进行。

生成静态页面

1
hexo generate(hexo g也可以)

本地启动

启动本地服务,进行文章预览调试,命令:

1
hexo server

浏览器输入http://localhost:4000

我不知道你们能不能,反正我不能,因为我还有环境没配置好

配置Github

建立Repository

建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io】,固定写法

然后建立关联,我的blog在本地/Users/leopard/blog,blog是我之前建的东西也全在这里面,有:

1
2
3
_config.yml    node_modules    public      source

db.json package.json scaffolds themes

现在我们需要_config.yml文件,来建立关联,命令:

1
vim _config.yml

翻到最下面,改成我这样子的

1
2
3
4
5
6
7
deploy:

type: git

repo: https://github.com/leopardpan/leopardpan.github.io.git

branch: master

然后执行命令:

1
npm install hexo-deployer-git --save

网上会有很多说法,有的type是github, 还有repository最后面的后缀也不一样,是github.com.git,我也踩了很多坑,我现在的版本是hexo: 3.1.1,执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。

忘了说了,我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了,总共就两种协议,相信你懂的。

然后,执行配置命令:

1
hexo deploy

然后再浏览器中输入http://leopardpan.github.io/就行了,我的github的账户叫leopardpan,把这个改成你github的账户名就行了

部署步骤

每次部署的步骤,可按以下三步来进行。

1
2
3
4
5
hexo clean

hexo generate

hexo deploy

一些常用命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo new"postName" #新建文章

hexo new page"pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

E:\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
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
95
96
97
98
99
100
101
102
103
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 徐彦杰的博客
subtitle: 如果真有奇迹,那只是努力的另一个名字
description: Yanjie.Xu World
author: 墨迹流韶
email: xuyjcode@gmail.com
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://blog.cocoper.com
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: 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: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/hchjerry/hchjerry.github.io.git
branch: master

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xm

feed:
type: atom
path: atom.xml
limit: 100

jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: true
tags: true

E:\Blog\themes\yilia_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
95
96
97
98
99
100
101
102
103
104
105
106
# Header

menu:
主页: /
博客: /archives
相册: /photos
#随笔: /tags

# SubNav
subnav:
github: "https://github.com/hchjerry"
weibo: "http://weibo.com/hchjerry"
#rss: "#"
#zhihu: "#"
#qq: "#"
#weixin: "#"
#jianshu: "#"
#douban: "#"
#segmentfault: "#"
#bilibili: "#"
#acfun: "#"
#mail: "mailto:litten225@qq.com"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 请在需要打赏的文章的md文件头部,设置属性reward: true

# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 0
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay:
# 微信二维码图片地址
weixin:

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: /img/head.jpg

#是否开启分享
share_jia: true

#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: false

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
# 头像上面的背景颜色
header: '#4A708B'
# 右滑板块背景
slider: 'linear-gradient(200deg,#d1e3eb,#4A708B)'

# slider的设置
slider:
# 是否默认展开tags板块
showTags: false

# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '博客'
friends: '友链'
aboutme: '关于我'
#tagcloud: '标签云'

friends:
百度: http://www.baidu.com

#tagcloud: true

aboutme:
<div id="nav">
邮箱:xuyanjie@cocoper.com <br><br>
QQ:825194169 <br><br>
<a href="http://blog.csdn.net/github_19529589" target="_blank">CSDN博客</a>
</div>

E:\Blog\themes\yilia\layout_partial\left-col.ejs

1
2
3
4
5
<!-- 开启网易云播放器 -->
<nav class="header-music">
<!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=400 src="//music.163.com/outchain/player?type=0&id=509985151&auto=0&height=380"></iframe>-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=110 src="//music.163.com/outchain/player?type=0&id=509985151&auto=0&height=90"></iframe>
</nav>

E:\Blog\themes\yilia\source\main.05aabf.css

1
2
3
4
5
.header-music 
{
position:fixed;
bottom:0;
}