VPS搭建个人博客/相册教程02_hexo静态博客配置

hexo是一个很牛皮的用于生成静态网页的博客框架,且对MarkDown语法支持的很好。比较酷的是,它还有很多主题和插件支持,目前使用最多最受程序员欢迎的一个静态博客框架。


本机环境:macOS10.12 、node:v9.2.0、npm: 5.5.1

1、本地部署

1.1 安装全局的hexo命令行工具

1
npm install hexo-cli -g # -g表示全局安装

1.2 安装deployer工具

1
npm install hexo-deployer-git --save

1.3 创建blog目录,并初始化hexo项目

1
hexo init blog

1.4 安装npm依赖

1
cd blog && npm install

1.5. 启动本地服务

1
hexo server

1.6 在浏览器中输入http://localhost:4000打开本地页面

2、文件结构

打开hexo文件夹,查看文件目录。

  • _config.yml:重要的配置文件
  • themes:主题
  • public:存放的是生成的静态网页
  • source:博客文章目录
  • scaffolds:生成文章等的命令模板文件
  • db.json:source解析所得到的
  • node_modules:npm依赖包
  • package.json:项目所需模块项目的配置信息

3、配置信息

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
deploy:
type: git
message: update
repo:
s1: git@xx.xx.xx.xx:repo/hexo.git,master # git地址
#######################################################################
# 皮肤
theme: yilia

# 1、网站
title: Rui's Blog # 网站标题
subtitle: # 网站副标题
description: # 网站描述(主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。)
author: Rui # 您的名字
language: # 网站使用的语言
timezone: # 网站时区(Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC )
################################################

# 2、网址
url: //ruidada.info # 网址
root: / # 网站根目录
permalink: :year/:month/:day/:title/ # 文章的 永久链接(:year/:month/:day/:title/)
permalink_defaults: # 永久链接中各部分的默认值
################################################

# 3、目录
source_dir: source # 资源文件夹,这个文件夹用来存放内容。
public_dir: public # 公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹
i18n_dir: :lang # 国际化(i18n)文件夹
skip_render: # 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
################################################

# 4、文章
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
external_link: true # 在新标签中打开链接
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false # 显示草稿
post_asset_folder: false # 启动 Asset 文件夹
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章
highlight: # 代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:
# PS:默认情况下,Hexo生成的超链接都是绝对地址。例如,如果您的网站域名为example.com,您有一篇文章名为hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。

################################################

# 5、分类&标签
default_category: uncategorized # 默认分类
category_map: # 分类别名
tag_map: # 标签别名
################################################

# 6、日期/时间格式
date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss # 时间格式
################################################

# 7、分页
per_page: 5 # 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page # 分页目录
################################################

4、相关命令介绍

4.1 新建文章

1
hexo new "postName" # 会在source/_posts目录下生成一个postName.md文件。该文件会被显示在页面上,连接可以访问。

4.2 新建草稿

1
hexo new draft "new draft" # 会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上,链接也访问不到。

4.3 预览草稿

1
2
1.hexo server --drafts
2.或者修改_config.yml文件将render_drafts设置为true

4.4 将草稿添加到发布中

1
hexo publish [layout] <filename>

4.5 新建页面

1
hexo new page "pageName"

4.6 清除

1
hexo clean # 删除public文件夹

4.7 开启预览访问端口

1
hexo server

4.8 生成静态页面

1
hexo generate # 该命令会在主目录的public文件夹中生成静态页面

4.9 将静态页面部署到远程服务器上

1
hexo deploy

5、修改主题

hexo默认主题是landscape。我这里选择使用yilia主题,主要是个人觉得yilia比较简洁大方还比较酷,且完美适配了移动设备。

5.1 下载主题包到themes文件夹中

1
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

5.2 修改hexo根目录下的 _config.yml文件 ,设置theme: yilia

1
theme: yilia

6、添加文章目录功能

6.1 修改~/themes/yilia/source/main.0cf68a.css文件

在themes\yilia\source文件夹下的main.xxxx.css文件中,末尾添加如下代码:

1
2
3
4
5
6
7
8
9
/* 新添加的 */
#container .show-toc-btn,#container .toc-article{display:block}
.toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
.toc-article li ol, .toc-article li ul {
margin-left: 30px;
}
.toc-article ol, .toc-article ul {
margin: 10px 0;
}

6.2 修改~/themes/yilia/layout/_partial/article.ejs文件

在themes\yilia\layout_partial文件夹下article.ejs 文件中,在 <% } %>下面加入如下内容

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
<!-- 目录内容 -->
<% if (!index && post.toc){ %>
<p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
<span class="btn-bg"></span>
<span class="btn-text">文章导航</span>
</p>
<div id="toc-article" class="toc-article">
<span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<script type="text/javascript">
function showToc(){
var toc_article = document.getElementById("toc-article");
var show_toc_btn = document.getElementById("show-toc-btn");
toc_article.setAttribute("style","display:block");
show_toc_btn.setAttribute("style","display:none");
};
function showBtn(){
var toc_article = document.getElementById("toc-article");
var show_toc_btn = document.getElementById("show-toc-btn");
toc_article.setAttribute("style","display:none");
show_toc_btn.setAttribute("style","display:block");
};
</script>
<% } %>
<!-- 目录内容结束 -->

6.3 在文章开头设置toc:true

1
2
3
4
5
6
layout: '[layout]'
title: VPS搭建个人博客/相册教程02_hexo静态博客配置
date: 2017-11-21 11:49:53
tags:
- 教程
toc: true

7、添加访问统计功能(leanCloud)

7.1 注册leanCloud,创建一个应用,新建一个class标识计数,获取AppID和AppKey。

7.2 在yillia主题的_config.yml文件中添加如下配置

1
2
3
4
5
6
7
8
9
10
# 添加浏览量
leancloud_visitors:
enable: true
app_id: ************** // 填入获取AppID
app_key: ************** // 填入获取AppKey

#添加一下js插件的 CDN地址
js_cdn:
jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
av : //cdn1.lncld.net/static/js/2.5.0/av-min.js

7.3 修改主题下layout_parial/post目录下title.ejs文件,在后面添加显示阅读量的html代码

1
2
3
4
5
<% if (theme.leancloud_visitors.enable){ %>
<a href="javascript:;" class="archive-article-date">
<i class="icon-smile icon"></i> 阅读数:<span id="<%- url_for(post.path) %>" class="pageViews">0</span>次
</a>
<% } %>

PS: span 给的 id 是文章的 url 作为唯一的 key 值

1
2
3
4
<script src="<%- theme.js_cdn.jquery %>"></script>
<% if (theme.leancloud_visitors.enable){ %>
<%- partial('post/leancloud') %>
<% } %>

PS:这是自定一个js文件,放在 layout_parial\post 目录 leancloud.ejs中


更多功能,未完待续。之后慢慢加上

Rui,<br>.....。