# Hexo个人博客简介
Hexo 是一个快速、简洁且高效的博客框架。Hexo是基于Node的框架，使用 Markdown (opens new window)（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
Hexo具有以下优点：
- 使用广泛，主题和插件很多，可扩展性强
- 支持Markdown语法，编辑简介美观
- 一键生成，快捷方便
基于以上特点，推荐使用Hexo博客框架。
推荐https://easyhexo.com/，教程很nice
# 基本搭建环境
Node.js
在Node官网下载对应系统最新版安装即可
Git
在Git官网 (opens new window)下载对应系统最新版安装即可
# 本地搭建博客
在本地安装Hexo,在Git bash窗口下运行命令
npm install -g hexo-cli
在一个空文件夹(可以新建，例:Hexo)下，点击右键，运行Git bash,输入命令：
hexo init
就会从官网下载Hexo 模板，
下载完再运行
hexo server
启动成功。
打开浏览器，输入local host：4000（Hexo服务器默认端口为4000），就能看到博客页面，只不过现在的页面是默认的模板，没有任何你自己的东西。
# 托管到Github服务器
# Git hub配置
在Git hub下创建仓库，仓库名字必须为 [用户名].github.io,
# 本地文件配置
在本地Hexo文件夹下打开_config.yml文件，在deploy输入以下代码
deploy:
type: git
repository: https://github.com/tengzhangchao/tengzhangchao.github.io.git
branch: master
2
3
4
保存文件,关闭
打开Git bash，使用npm安装发布模块，运行
npm install hexo-deployer-git --save
安装模块，安装完后运行
hexo clean //清理puclic文件夹下的文件,预备
hexo generate //由你的md文件在public下生成html等文件
hexo deploy //将本地的public下生成的传到Github仓库里
2
3
在首次运行Hexo deploy时会提醒你需要输入Git hub用户名及密码。
运行完后在浏览器输入[用户名].github.io即可访问
# 绑定个人域名
绑定个人域名需在域名与Git hub仓库、本地文件夹三个地方分别设置
# 个人域名配置
首先Ctrl+R,打开CMD窗口，使用ping方法寻找你的博客ip地址，
我在ping的时候发现我的博客地址在185.199.108.153，185.199.109.153，185.199.110.153，185.199.111.153四个IP地址自动转换，后来在网上查找发现这是Git hub 的四个IP，所以我把我的个人域名下把这四个IP全部解析，解析时选择添加A类型地址及@、www属性
我的Namesilo域名配置
特别注意: 有的人用腾讯云免费解析（非腾讯云购买）,但是只能解析两个类型，所以最好在你购买的域名商下解析
# Github配置
方式一: 在Git hub之前建立的仓库下，custom domain下输入个人域名
方式二: 然后在对应的仓库下建立一个CNAME文件，文件内容为个人域名,
# 本地文件配置
另外需要注意的是，CNAME文件在本地也需建立，因为发布时是把本地的文件夹hexo/public上传在Git hub仓库里,所以在本地文件夹也新建。
# Hexo与Icarus主题详细配置
# Icarus主题介绍
Hexo默认的主题为landscape，我个人不是很喜欢这个主题，特别推荐使用较多的Next主题，以及我个人使用的icarus主题
Hexo-theme-icarus (opens new window) 是一个优秀的 Hexo 主题，开发者 Ruipeng Zhang (opens new window) 同时还维护了 hexo-theme-hueman (opens new window) 和 hexo-theme-minos (opens new window) 两个项目。
icarus 是一个三栏结构的自适应主题，预置了大量第三方插件，可以方便使用者快速建站。整体风格简约，适合各种类型的站点，无论是技术文章，还是摄影佳作，都可以完美承载。
效果图
# 安装主题
在命令行中cd至博客根目录，加载主题：
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
安装完theme文件夹下多了Icarus文件夹，Icarus文件结构：
├─includes
├─languages
├─layout
│ ├─comment
│ ├─common
│ ├─donate
│ ├─plugin
│ ├─search
│ ├─share
│ └─widget
├─sripts
└─source
├─css
├─images
└─js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在博客根目录下的 _config.yml 文件中做两件事情：
- 设置语言:
language: zh-CN - 设置主题为 icarus:
theme: icarus
# 新建博客
方式一: 在Hexo目录下打开Git bash,运行
hexo new [post] [博客名字]
方式二:
在source/_posts文件夹新建.md文件，运行博客服务器时会自动加载
# 修改界面
打开Hexo/themes/icarus/目录下的_config.yml文件,
# Version of the Icarus theme that is currently used
version: 2.3.0
# 你的网站图标，可以搜索在线图标制作，并将其放在images文件夹中
favicon: /images/favicons.ico
# Path or URL to RSS atom.xml
rss: /atom.xml
# 显示在导航栏左侧的网站logo，同样可以自己制作
logo: /images/gen.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
# Facebook App ID
fb_app_id:
# Facebook Admin ID
fb_admins:
# Twitter ID
twitter_id:
# Twitter site
twitter_site:
# Google+ profile link
google_plus:
# 导航栏
navbar:
#菜单（显示名称：对应文件夹）
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
关于: /about
# 导航栏右侧图标链接
links:
My GitHub:
icon: fab fa-github
url: '你的gityhub地址'
# Footer section link settings
footer:
# 页脚图标链接
links:
Creative Commons:
icon: fab fa-creative-commons
url: 'https://creativecommons.org/'
Attribution 4.0 International:
icon: fab fa-creative-commons-by
url: 'https://creativecommons.org/licenses/by/4.0/'
Download on GitHub:
icon: fab fa-github
url: 'http://github.com/ppoffice/hexo-theme-icarus'
# 文章显示设置
article:
# Code highlight theme
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
#代码主题atom-one-light亮色，atom-one-dark暗色
highlight: atom-one-dark
# 是否显示文章主图
thumbnail: true
# 是否显示估算阅读时间
readtime: true
# 搜索插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Search-Plugins
search:
# Name of the search plugin
type: insight
# 评论插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Comment-Plugins
comment:
#可选valine，disqus（科学上网）等
# Name of the comment plugin
#type: valine
#app_id: 不为空
#app_key: 不为空
#notify: true
#verify: true
#placeholder:
type: disqus
shortname: 不能为空
# 打赏功能
# http://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
-
# 阿里巴巴支付宝
type: alipay
# 二维码图片
qrcode: '/images/honbao.PNG'
-
# 微信
type: wechat
# 二维码图片
qrcode: '/images/yjtp.png'
-
# 分享插件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Configuration/Share-Plugins
share:
# 插件类型，有多种，可选，自行百度
type: sharejs
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
# 左侧边栏设置
left:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 右侧边栏设置
right:
# 是否不随页面滚动
# http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
sticky: false
# 边栏小部件设置
# http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
-
# 个人信息
type: profile
# 部件位置（左）
position: left
# 作者名（字符串）
author: 飞鱼
# 作者身份描述（字符串）
author_title: Student
# 作者当前居住地
location: China,Fujian
# 头像（可用本地图片或网络图片链接）
avatar: '/images/ava.png'
# Email address for the Gravatar to be shown in the profile widget
gravatar:
# 关注我的链接，可设为你的GitHub主页
follow_link: 'https://github.com/yourname'
# 个人介绍部件底部图标社交链接
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/yourname'
Facebook:
icon: fab fa-facebook
url: 'https://facebook.com'
Twitter:
icon: fab fa-twitter
url: 'https://twitter.com/yourname'
RSS:
icon: fas fa-rss
url: /
-
# Widget name
type: toc
# Where should the widget be placed, left or right
position: left
-
# 分类
type: category
# 位置指定
position: left
-
# 标签云
type: tagcloud
# 位置
position: right
-
# 近期文章
type: recent_posts
# 位置
position: left
-
# 归档
type: archive
# Where should the widget be placed, left or right
position: right
-
# 标签
type: tag
# Where should the widget be placed, left or right
position: right
-
# 外部链接
type: links
# Where should the widget be placed, left or right
position: left
# Links to be shown in the links widget
links:
Google: 'https://google.com'
Baidu: 'https://baidu.com'
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
# Widget
所有的 widget 都是一个卡片，可以自由摆放在任何位置：
# 语言切换
在_config.yml文件下修改
language:
zh-cn
2
# 更改布局
默认的Icarus首页和文章页是三栏布局，文章页三栏布局有点窄，不利于观看，因为修改为两栏并调整列宽
修改两栏：
修改themes\icarus\includes\helpers\layout.js
hexo.extend.helper.register('column_count', function () {
let columns = 1;
+ if (this.page.__post === true || this.page.__page === true) {
+ return 2;
+ }
const hasColumn = hexo.extend.helper.get('has_column').bind(this);
columns += hasColumn('left') ? 1 : 0;
columns += hasColumn('right') ? 1 : 0;
return columns;
});
2
3
4
5
6
7
8
9
10
修改themes\icarus\layout\common\widget.ejs
<% if (position === 'left') { %>
- <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
+ <div class="column-right-shadow <%= (page.__page !== true && page.__post !== true) ? 'is-hidden-widescreen' : '' %> <%= sticky_class('right') %>">
<% get_widgets('right').forEach(widget => {%>
<%- _partial('widget/' + widget.type, { widget }) %>
<%}) %>
</div>
<%} %>
2
3
4
5
6
7
8
修改themes\icarus\layout\layout.ejs
<section class="section">
<div class="container">
<div class="columns">
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<%- _partial('common/widget', { position: 'left' }) %>
+ <% if (page.__page !== true && page.__post !== true) { %>
<%- _partial('common/widget', { position: 'right' }) %>
+ <%} %>
</div>
</div>
</section>
2
3
4
5
6
7
8
9
10
11
修改文章页列宽
修改themes/icarus/layout/layout.ejs
<head>
<%- partial('common/head') %>
</head>
-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
2
3
4
5
6
7
8
9
10
11
12
修改themes\icarus\layout\common\widget.ejs
<% if (get_widgets(position).length) { %>
<% function side_column_class() {
switch (column_count()) {
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-3-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
2
3
4
5
6
7
8
9
10
11
修改themes/icarus/source/css/style.styl
<head>
<%- partial('common/head') %>
</head>
-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
2
3
4
5
6
7
8
9
10
11
12
# 调整字体大小
默认的14px字号我感觉略小，改为15px
修改\themes\icarus\source\css\style.styl中：
html
font-size: 15px
2
# 设置每页显示博客数
在_config.yml文件下修改
index_generator:
path: ''
per_page: 5
order_by: -date
2
3
4
# 添加菜单
hexo new page [name]
# logo设置
logo 会展示在顶部导航栏的最左侧以及底部的footer区域，大家可以替换 source/images/ 下的 logo 文件，使用 svg 或者 png 格式的都可以。
或者给 logo 添加 text 属性，就会优先展示预设文字作为 logo：
logo:
text: your name
2
# 添加个人签名
在 /layout/widget/profile.ejs文件中, 在倒数第二个前加上你想说的话
</div>
+ <hr>
+ <p id="evan">IT学徒、斜杠青年</p>
<p id="evan">机器人爱好者、摄影爱好者</p>
<p id="evan">PS、PR、LR、达芬奇潜在学习者</p>
</div>
</div>
2
3
4
5
6
7
# 添加分享
icarus默认提供多个分享插件。
AddThis
AddToAny
Baidu Share
Share.js
ShareThis
在Icarus主题文件中找到share，配置
_config.yml
share:
type: sharejs
2
3
如果你觉得分享图标太多，可以隐去一些
<div class="social-share" data-disabled="tencent,linkedin,douban,diandian,google"></div>
# 打赏
在_config.yml文件中配置：
donate:
-
type: alipay
qrcode: /images/alipay.JPG
-
type: wechat
qrcode: /images/wechat.JPG
-
# type: paypal
# Paypal business ID or email address
# business: ''
# Currency code
# currency_code: USD
-
# type: patreon
# URL to the Patreon page
# url: ''
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 博客加密
# 安装插件
运行命令：
npm install --save hexo-blog-encrypt
# 配置
在 _config.yml 中启用该插件（没有自己添加）:
# Security##encrypt: enable: true
# 使用方式
在你的文章的头部添加上对应的字段，如 password, abstract, message
---title: hello world
date: 2016-03-30 21:18:02
tags: - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.---
2
3
4
5
6
# 设置文章置顶与先后顺序
# 添加访问量、站点时间和阅读量
打开icarus/layout/common/footer.ejs,添加以下代码:
<div style="text-align: center;">
<br>
<p class="is-size-7">
<% if (busuanzi) { %>
<span id="busuanzi_container_site_uv">
<i class="fa fa-user"></i> 本站访客数 <span id="busuanzi_value_site_uv"></span> 人次
</span>
<span id="busuanzi_container_site_pv">
| <i class="fa fa-eye"></i> 本站总访问量
<span id="busuanzi_value_site_pv"></span> 次
</span>
<% } %>
</p>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("3/2/2020 08:00:00");// 此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行"+dnum+"天";
document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250);
</script>
</div>
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
# 添加评论
# 隐藏博客属性
安装插件hexo-hide-posts
$ npm install hexo-hide-posts --save
使用：在你的博客前添加hidden属性
title: 'Lorem Ipsum'
date: '2019/8/10 11:45:14'
hidden: true
2
3
Github原文地址：https://github.com/printempw/hexo-hide-posts
获取地址
# 在线编辑
hexo-admin
# 设置相关阅读
# 添加背景音乐
# 被搜索引擎收录
gitpage托管的网站默认会被google收录，在搜索引擎中输入site: 你的域名 就可以找到，百度不会
https://www.xiemingzhao.com/posts/HexoblogSE.html
# RSS订阅
RSS订阅是站点用来和其他站点之间共享内容的一种简易方式，即Really Simple Syndication（简易信息聚合）
$ npm install hexo-generator-feed
等待安装完成后，打开hexo目录下配置文件的_config.yml，在末尾添加以下配置：
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
2
3
4
5
6
7
8
9
10
# seo
Hexo-generator-sitemap 和Hexo-generator-baidu-sitemap
# gridea
https://gridea.dev/
https://v2ex.com/t/699961#reply4
# jekyll
# mkdocs
mkdocs是基于python的编译器。比Hugo慢，也没hexo那样基于Node拓展性强，因为我涉及到这方面的工作，所以只是一个记录
启动mkdocs项目需要python和pip的支持，所以不管是windows或者linux，要支持这些
# 托管到giteepage服务器
码云是国内的代码托管网站，也可以托管静态博客，与github托管的功能类似。最重要的是对于国内的用户访问速度会比github快，所以可以尝试一下。
如果你之前hexo配置好了，你只需要做两件事情
# 在gitee新建账号和仓库
# 本地关联gitee仓库和发布
由于gitee也是使用git作为版本管理工具，所以不需要改用其他版本管理工具。
添加gitee远程仓库关联
git remote add github git@gitee.com:yefcion/Poweron.gits
修改站点配置文件 _config.yml,把原来github的repo注释掉，新加gitee的仓库链接
deploy:
type: git
# repo: https://github.com/zhengqingya/zhengqingya.github.io # github仓库
repo: https://gitee.com/zhengqingya/blog # 码云仓库
branch: master
message:
2
3
4
5
6
发布到仓库
hexo deploy
在仓库的gitpage服务下面点击更新
# 托管到Netify服务器
# NetlifyCMS
托管到Netlify有一个好处是能够使用NetlifyCMS管理静态博客文件，进而可以远程编辑，Netlify会获取你的Git仓库很多权限。
在hexo中添加依赖
npm install hexo-netlify-cms --save
#或者
yarn add hexo-netlify-cms
2
3
在config_yml中添加配置
netlify_cms:
backend:
name: git-gateway
branch: master
2
3
4
在Netlify中开启netlify git-gateway服务
添加netlify-identity-widget.js, 代码如下
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
现在Netlify CMS已经好了, 你可以访问your-site/admin查看
# 开发hexo主题
开发一款属于你的hexo主题吧～
# EJS语法
Hexo 使用主流的模板引擎，如： EJS 、 Jade 、 Swing 等，Hexo 的页面都是通过模板引擎渲染出来的页面，它可以实现一些代码的复用。
“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
标签
<%'脚本' 标签，用于流程控制，无输出。<%_删除其前面的空格符<%=输出数据到模板（输出是转义 HTML 标签）<%-输出非转义的数据到模板<%#注释标签，不执行、不输出内容<%%输出字符串 '<%'%>一般结束标签-%>删除紧随其后的换行符_%>将结束标签后面的空格符删除
# hexo语法
除了ejs语法，还有hexo特有的一些语法
辅助函数：
url_for：输出路径
partial：载入其他模版文件
css：载入css文件
js：载入js文件
data_xml：插入 XML 格式的日期
变量
page：针对该页面的内容以及 front-matter 所设定的变量config：网站配置（hexo的_config.yml）theme：主题配置（theme的_config.yml）url：当前页面的完整网址path：当前页面的路径（不含根路径）post.title：文章的题目post.excerpt：文章的摘要，即写文章的时候<!--more-->之上的那段儿，首页显示post.comments：评论模块post.photots：文章中插入的图片post.content：文章内容post.date：文章的时间
# 文件
主题的文件全部在theme文件夹下，
layout.ejs
在layout文件夹下，布局被写在layout.ejs中，由于hexo支持模块儿化布局，使用hexo提供的局部函数partial载入其他模版文件，配合ejs的语法，布局文件layout.ejs
Index.ejs
首页
Post.ejs
文章页
Archive.ejs
归档页
Tag.ejs
标签页
Page.ejs
其他页面
# 参考
他山之石，可以攻玉。在编写时要参考现有的优秀的博客主题，如Next、icarus
# 学习资源
https://easyhexo.com/
← Git使用技巧（三） 前后端开发概述 →