Fork me on GitHub

Hexo+github搭建博客折腾笔记

写博客,就要用心

    看到很多人用hexo+github搭建了自己的博客,自己也很早就想搭建一个个人专属博客,于是搭建了本博客,用于分享一些心得。折腾博客的各种配置以及功能占具了我一部分时间,在此详细记录下我是如何利用hexo+github搭建静态博客以及一些配置相关问题,以免过后遗忘,且当备份之用。

准备工作

获得个人网站域名

域名是网站的入口,也是网站的第一印象,比如饿了么的官网的域名是:ele.me/,很是巧妙。常见的有com,cn,net,org等后缀,也有小众的xyz,me,io等后缀,根据你自己的喜好,选择不同的后缀,比如我选择就是常见的com后缀。很多小众奇特的后缀在大陆是没办法备案的,网站也就无法上线。然而使用GitHub托管我们的网站,完全不需要备案,因为托管我们的网站内容的服务器在美国,而且在国内备案流程也比较繁杂,时间需要一周左右。

申请域名的地方有很多,这里推荐阿里云:阿里云-为了无法计算的价值 申请入口:域名注册购买域名这也是我们整个搭建过程中惟一一个需要花钱的地方。如果你已经有了空闲域名就无需购买,直接使用即可。如下图是我购买的域名:
查看

GitHub创建个人仓库

登录到GitHub,如果没有GitHub帐号,使用你的邮箱注册GitHub帐号:GitHub 点击GitHub中的New repository创建新仓库,仓库名应该为:用户名.github.io,这个用户名使用你的GitHub帐号名称代替,这是固定写法,比如我的仓库名为:
我的仓库名

安装(由于这不是重点,就简单说下,网上很多方法)

  • 安装git

    什么是Git ?简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。如果想要了解Git的细节,参看廖雪峰老师的Git教程:Git教程 从Git官网下载:Git - Downloading Package 现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。安装成功后,将你的Git与GitHub帐号绑定,绑定过程看廖雪峰老师的Git教程

  • 安装Node.js

    Hexo基于Node.js,Node.js下载地址:Download | Node.js 下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v :
                     node安装截图
    检测npm是否安装成功,在命令行中输入npm -v :
                     npm安装截图

  • 安装hexo

    Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中:
    使用npm命令安装Hexo,输入 npm install -g hexo


    这个安装时间较长耐心等待,安装完成后,初始化我们的博客,输入:
    hexo init blog
    注意,这里的命令都是作用在刚刚创建的Blog文件夹中。
    为了检测我们的网站雏形,分别按顺序输入以下三条命令:

    1
    2
    3
    hexo new test_my_site
    hexo g
    hexo s

    这些命令在后面作介绍,完成后,打开浏览器输入地址: localhost:4000
    可以看出我们写出第一篇博客

推送网站

上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,如下图:


进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件,如下图:
下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:

1
2
3
4
deploy:
type: git
repository: git@github.com:你的用户名/你的用户名.github.io.git
branch: master

保存站点配置

  • 运行:npm install hexo-deployer-git –save
  • 运行:hexo g(本地生成静态文件)
  • 运行:hexo d(将本地静态文件推送至Github)

此时,打开浏览器,访问http://wushilongwu.github.io

绑定域名

博客已经搭建好,也能通过github的域名访问,但总归还是用自己的域名比较舒服。因为我们需要设置将自己的域名绑定到github这个博客项目上。

  • 域名提供商设置
    添加2条A记录:
    @—>192.30.252.154
    @—>192.30.252.153
    添加一条CNAME记录:
    CNAME—>你的用户名.github.io
    如图:npm安装截图
  • 博客添加CNAME文件
    配置完域名解析后,进入博客目录,在站点source目录下新建CNAME文件,写入域名,如:longofo.cc
  • 运行:hexo g
  • 运行:hexo d

更换主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:Themes 我自己使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题,在blog目录中(就是命令行的位置处于blog目录)打开命令行输入:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开主题的_config.yml配置文件,修改主题为next,如图:
npm安装截图
打开主题的_config.yml配置文件,不是站点主题文件,找到Scheme Settings

next主题有三个样式,我用的是Mist,你们可以自己试试看,选择你自己喜欢的样式(只需要把行首的#去除,#是注释),选择好后,再次部署网站,hexo g、hexo d,查看效果。选择其他主题,按照上述过程即可实现。

初识MarkDown语法

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown语法简洁明了、容易掌握,而且功能比纯文本更强,因此写博客使用它,可以让用户更加专注的写文章,而不需要费尽心力的考虑样式,相对于html已经算是轻量级语言,像有道云笔记也支持Markdown写作。并且Markdown完全兼容html,也就是可以在文章里直接插入html代码。比如给博文添加音乐,就可以直接把音乐的外链html代码插入文章中。具体语法参看:Markdown 语法说明(简体中文版) 可以说十分钟就可以入门。当然,工欲善其事必先利其器,选择一个好的Markdown编辑器也是非常重要的,这里推荐MarkPadThe Markdown Editor for Windows ,这是带有预览效果的编辑器,也可以使用本地的文本编辑器,更多的Markdown的语法与编辑器自己可以搜索了解。

写博客

至此博客已经搭建完毕,域名也已经正常解析,那么剩下的问题就是更新内容了。

更新文章

  • 在MyBlog目录下执行:hexo new “我的第一篇文章”,会在source_posts文件夹内生成一个.md文件。
    • 编辑该文件(遵循Markdown规则)
      • 修改起始字段
      • title 文章的标题
      • date 创建日期 (文件的创建日期 )
      • updated 修改日期 ( 文件的修改日期)
      • comments 是否开启评论 true or false
      • tags 标签
      • categories 分类
      • permalink url中的名字(文件名)
      • 编写正文内容(使用MakeDown语法)
  • hexo clean 删除本地静态文件(Public目录),可不执行。
  • hexo g 生成本地静态文件(Public目录)
  • hexo deploy 将本地静态文件推送至github(hexo d)

添加菜单

进入theme目录,编辑\next\_config.yml文件,找到menu:字段,在该字段下添加一个字段。

1
2
3
4
menu:
home: /
about: /about
......

然后到themes\next\languages下找到lanhuages目录,编辑zh-Hans.yml(检查下站点配置文件中的language的值是否为zh-Hans)文件:

1
2
3
4
menu:
home: 首页
about: 关于作者
......

高度定制优化篇

文章中添加居中模块

文章Markdown中填写如下:

1
<blockquote class="blockquote-center">优秀的人,不是不合群,而是他们合群的人里面没有你</blockquote>

在文章底部增加版权信息

在目录 next/layout/_macro/下添加 my-copyright.swig:

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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl:

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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

修改next/layout/_macro/post.swig,在代码

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>

之前添加增加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

1
@import "my-post-copyright"

如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加copyright: true的设置,类似:

1
2
3
4
5
6
7
---
title:
date:
tags:
categories:
copyright: true
---

自定义hexo new生成md文件的选项

/scaffolds/post.md文件中添加:

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
permalink: 01
top: 0
password:
---

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用隐藏之间的代码即可,或者直接删除。

1
2
3
4
5
6
7
8
9
10
11
<!--
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" rel="external nofollow" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" rel="external nofollow" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>
-->

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在meta标签后面插入这样一段代码:

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
</script>

然后文章中添加:

1
password: 你的密码

如果password后面为空,则表示不用密码。

博文置顶

修改 hero-generator-index插件,把文件:node_modules/hexo-generator-index/lib/generator.js内的代码替换为:

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

在文章中添加 top 值,数值越大文章越靠前,如:

1
2
3
4
5
---
......
copyright: true
top: 100
---

默认不设置则为0,数值相同时按时间排序。

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件,在maximum-scale=1”/>后添加如下代码:

1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是,默认的是粉色的,要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码(接在刚才link的后面)

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>

添加热度

next主题集成leanCloud,打开/themes/next/layout/_macro/post.swig,在”leancloud-visitors-count”>标签后面添加℃。
然后打开,/themes/next/languages/zh-Hans.yml,将visitors内容改为_热度_即可。
注: 在主题配置文件中检查leancolud的值是否设置为true,app_idapp_key需要去leancolud 注册,然后创建应用获取。如图:

添加到样式文件

打开themes/next/source/css/_custom/custom.styl,把调试好的样式加进去,保存后Ctrl+F5就能看到效果了,前提是在本地运行的,下面引用了一下别人的一些样式:

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
// Custom styles.  
// 页面头部背景
.header { background:url([http://ojoba1c98.bkt.clouddn.com/img/header/header_background.jpg](http://ojoba1c98.bkt.clouddn.com/img/header/header_background.jpg));}
// 子标题
.site-subtitle{ font-size: 15px; color: white; }
// 标题
.site-title {
font-size: 40px;
font-weight: bold;
}
// 标题背景
.brand{
background: transparent;
}
// 菜单栏
.menu {
margin-top: 20px;
padding-left: 0;
text-align: center;
background: rgba(240, 240, 240, 0.5);
margin-left: auto;
margin-right: auto;
width: 530px;
border-radius: initial;
}
// 菜单图表链接 以及 超链接样式
a {
color: rgba(0,0,0,0.8);
}
a:hover {
color: #ff106c;
border-bottom-color: #ff106c;
}
// 菜单字体大小
.menu .menu-item a {
font-size: 14px;
}
.menu .menu-item a:hover {
border-bottom-color: #ff106c;
}
// 文章背景框框
.post {
margin-top: 10px;
margin-bottom: 40px;
padding: 18px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0.8);
}
// 站点描述
.site-description {
font-size: 16px;
}
// 头部inner
.header-inner {
padding: 45px 0 25px;
width: 700px;
}
// 作者名
.site-author-name {
font-family: 'Comic Sans MS', sans-serif;
font-size: 20px;
}
// 文章之间的分割线
.posts-expand .post-eof {
margin: 40px auto 40px;
background: white;
}
// 按钮样式
.btn {
margin-top: 20px;
}
// ``代码块样式
code {
color: #E6006B;
background: white;
border-radius: 3px;
}
body {
color: #444;
font-size: 16px;
}

好玩的样式

先在themes/next/source/css/_custom/custom.styl中添加以下样式:

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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
// 下载样式  
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
/ /颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

文字增加背景色块

站点配置文件
主题配置文件

1
2
<span id="inline-blue">站点配置文件</span>
<span id="inline-purple">主题配置文件</span>

引用边框变色

如果没有安装成功,那可能就是墙的原因。建议下载 Node.js 直接安装。

关于更多基本操作和基础知识,请查阅 Hexo) 与 NexT) 官方文档.


1
2
<p id="div-border-left-red">如果没有安装成功,那可能就是墙的原因。建议下载 `Node.js` 直接安装。</p>  
<p id="div-border-top-blue">关于更多基本操作和基础知识,请查阅[Hexo]([https://hexo.io/zh-cn/](https://hexo.io/zh-cn/)) 与[NexT]([http://theme-next.iissnan.com/](http://theme-next.iissnan.com/)) 官方文档.</p>

在文档中增加图标

  • 支持Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一件部署
    只需一条指令即可部署到Github Pages,或其他网站
  • 丰富的插件
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。
    1
    2
    3
    4
    5
    6
    - <i class="fa fa-pencil"></i>支持Markdown  
    <i>Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。</i>
    - <i class="fa fa-cloud-upload"></i>一件部署
    <i>只需一条指令即可部署到Github Pages,或其他网站</i>
    - <i class="fa fa-cog"></i>丰富的插件
    <i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。</i>
  • <i class="fa fa-github"></i>
  • <i class="fa fa-github fa-lg"></i>
  • <i class="fa fa-github fa-2x"></i>

采用的是Font Awesome的图标。

图形边框效果

Download Now

1
2
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>  
</a>

主页文章添加阴影效果

打开\themes\next\source\css_custom\custom.styl,向里面加入:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

居中

标签居中

修改模板/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成

themes\next\source\css\_common\components\post\post-tags.styl里面的 .post-tags里面的text-align: left; 改成 text-align: center;

阅读更多居中

themes\next\source\css\_custom\custom.styl 新增:
.post-more-link { text-align: center; }

鼠标点击小红心的设置

love.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件, 在文件的后面, 标签之前 添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

为next主题添加nest背景特效

背景的几何线条是采用的nest效果,一个基于html5 canvas绘制的网页背景效果,非常赞!来自github的开源项目canvas-nest

特性

  • 不依赖任何框架或者内库,比如不依赖jQuery,使用原生的javascript。
  • 非常小,只有1.66kb,如果开启gzip,可以更小。
  • 非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。
    使用非常简单
  • color: 线条颜色, 默认: ‘0,0,0’ ;三个数字分别为(R,G,B),注意用,分割
  • opacity: 线条透明度(0~1), 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

如何添加?

打开next/layout/_layout.swig,在</body>之前添加如下代码:

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改主题配置文件
打开/next/_config.yml,添加/修改以下代码:

1
2
3
4
5
6
# --------------------------------------------------------------  
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from [https://github.com/hustcc/canvas-nest.js](https://github.com/hustcc/canvas-nest.js)
canvas_nest: true

至此,大功告成,运行hexo clean 和 hexo g hexo s之后就可以看到效果了

背景的设置

particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件, 在文件的后面,标签之前 添加以下代码:

1
2
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>

修改文章内链接文本样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
找到文件 themes\next\source\css_custom\custom.styl ,添加如下 css 样式:

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

搜索功能

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

1
npm install hexo-generator-searchdb --save

编辑 站点配置文件,新增/添加以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

自定义页面

以添加文章阅读统计排行为例,执行hexo new page "count"之后,那怎么在博客中加进去呢?
找到\next\_config.yml下的memu,把count加进去:

1
2
3
4
5
6
7
menu:  
home: /
categories: /categories
#about: /about
archives: /archives
tags: /tags
count: /count || eye # ||后面为显示的图标

图标网站:http://fontawesome.io/icons/

/themes/hexo-theme-next/languages/zh-Hans.yml的目录下,在memu下加一句即可:

1
count: 琅琊榜

增加阅读排行统计页面

首先我们可以使用leancloud来统计页面阅读数量,以及储存这些信息,然后通过leancloud提供的api编写js脚本来获取阅读数量信息,并展示在页面上。
首先新建一个page页面,hexo new page “count”,然后编辑此.md文件,写下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("app_id", "app_key");</script> //需要写上leancloud的app_id和app_key
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');//表名
query.notEqualTo('id',0); //id不为0的结果
query.descending('time'); //结果按阅读次数降序排序
query.limit(20); //最终只返回10条结果
query.find().then(function (todo) {
for (var i=0;i<10;i++){
var result=todo[i].attributes;
time=result.time; //阅读次数
title=result.title; //文章标题
url=result.url; //文章url
var content="<p>"+"<font color='#0477ab'>"+"【阅读次数:"+time+"】"+"<a href='"+"http://thief.one"+url+"'>"+title+"</font>"+"</a>"+"</p>";
// document.write("<a href='"+"http://thief.one/"+url+"'>"+title+"</a>"+" Readtimes:"+time+"<br>");
document.getElementById("heheda").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

注:js里面需要写上leancloud的app_id和app_key
最终效果查看: 效果查看

多说替换成来必力评论

多说已经宣布下线了,因此使用来必力评论系统来替换,以下是替换的教程,教程内容来自:https://blog.smoker.cc/web/add-comments-livere-for-hexo-theme-next.html
首先在 _config.yml 文件中添加如下配置:

1
livere_uid: your uid  #按照上面链接教程获取

layout/_scripts/third-party/comments/ 目录中添加 livere.swig,文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
{% if theme.livere_uid %}
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
{% endif %}
{% endif %}

优先使用其他评论插件,如果其他评论插件没有开启,且LiveRe评论插件配置开启了,则使用LiveRe。其中脚本代码为上一步管理页面中获取到的。在layout/_scripts/third-party/comments.swig文件中追加:

1
{% include './comments/livere.swig' %}

引入 LiveRe 评论插件。
最后,在 layout/_partials/comments.swig 文件中条件最后追加LiveRe插件是否引用的判断逻辑:

1
2
3
{% elseif theme.livere_uid %}
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

最后打开博客瞧瞧吧!

集成Mod分享组件


Step1、获取 AppKey
Mob 注册账号后,点击头像进入后台,选择 shareSDK 添加一个 Web应用

Step2、在主题配置文件中添加配置:

1
2
3
mob_share:  
enable: true
appkey: ********

Step3、在next/layout/_partials/share/里面添加mob_share.swig

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
<!--MOB SHARE BEGIN-->  
<div class="-hoofoo-share-title">分享到:</div>
<div class="-hoofoo-share-buttons">
<div class="-mob-share-weibo -hoofoo-share-weibo -hoofoo-share-ui-button"><i class="fa fa-weibo" aria-hidden="true"></i></div>
<div class="-mob-share-weixin -hoofoo-share-weixin -hoofoo-share-ui-button"><i class="fa fa-weixin" aria-hidden="true"></i></div>
<div class="-mob-share-qq -hoofoo-share-qq -hoofoo-share-ui-button"><i class="fa fa-qq" aria-hidden="true"></i></div>
<div class="-mob-share-twitter -hoofoo-share-twitter -hoofoo-share-ui-button"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="-hoofoo-share-more -hoofoo-share-ui-button -mob-share-open"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>
</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-kaixin"><p>开心网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-pengyou"><p>朋友网</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="[http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey](http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey)}}"></script>
<!--MOB SHARE END-->

Step4、在next/layout/post.swig中添加条件分支:

1
2
3
4
5
6
7
8
9
10
11
{% if theme.jiathis %}  
{% include '_partials/share/jiathis.swig' %}
{% elseif theme.baidushare %}
{% include '_partials/share/baidushare.swig' %}
{% elseif theme.add_this_id %}
{% include '_partials/share/add-this.swig' %}
{% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
{% include '_partials/share/duoshuo_share.swig' %}
{% elseif theme.mob_share.enable %}
{% include '_partials/share/mob_share.swig' %}
{% endif %}

Step5、在next/source/css/_common/components/third-party/(没有自行创建)里添加样式文件mob_share.styl

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
.-hoofoo-share-buttons{  
display: inline-block;
}
.-hoofoo-share-title{
font-size: 1.1em;
font-weight: 200;
}
.-hoofoo-share-ui-button{
cursor: pointer;
background-color: #555;
color: #fff;
font-size: 24px;
line-height: 40px;
width: 40px;
height: 40px;
margin: 10px;
border-radius: 25px;
float: left;
transition: background 0.4s;
-moz-transition: background 0.4s; /* Firefox 4 */
-webkit-transition: background 0.4s; /* Safari 和 Chrome */
-o-transition: background 0.4s;
}
.-hoofoo-share-weibo:hover{
background-color: #cf3f41;
}
.-hoofoo-share-weixin:hover{
background-color: #18a01a;
}
.-hoofoo-share-qq:hover{
background-color: #950c0c;
}
.-hoofoo-share-twitter:hover{
background-color: #2ab3e6;
}
.-hoofoo-share-more:hover{
background-color: #777;
}
.-mob-share-weixin-qrcode-content{
border-radius: 4px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.-mob-share-weixin-qrcode{
margin: 5% !important;
width: 90% !important;
height: auto !important;
}
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/fancybox_sprite.png') !important;//因为兼容问题把vendor改成了lib,根据自己的路径修改
}
.-mob-share-weixin-qrcode-close {
overflow: hidden;
line-height: 100px !important;
position: absolute !important;
top: -18px !important;
right: -18px !important;
width: 36px !important;
height: 36px !important;
cursor: pointer !important;
z-index: 8040 !important;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/fancybox_sprite@2x.png') !important;//因为兼容问题把vendor改成了lib,根据自己的路径修改
background-size: 44px 152px !important; /*The size of the normal image, half the size of the hi-res image*/
}
}
.-mob-share-close{
height: 4em !important;
font-size: 0.8em !important;
line-height: 4em !important;
background: #555 !important;
color: #fff !important;
}

Step6、同一目录下的 third-party.styl 中添加:

1
@import "mob_share";

Step7、在next/layout/_scripts/third-party/里添加脚本文件mob_share.swig

1
2
3
4
5
6
7
8
{% if theme.mob_share.enable %}  
<script type="text/javascript">
//微信二维码点击背景关闭
$('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
$(".-mob-share-weixin-qrcode-close").trigger("click");
});
</script>
{% endif %}

Step8、在next/layout/_layout.swigbody标签结束前添加:

1
{% include '_scripts/third-party/mob_share.swig' %}

修改文章页宽

打开themes/next/source/css/_variables/base.styl,找到以下字段并修改为合适的宽度:

1
$content-desktop-large = 1000px

修改小型代码块颜色

修改\themes\next\source\css\ _variables\base.styl文件,加入自定义颜色:

1
2
3
4
5
6
7
8
9
$black-deep = #222  
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #fc6423
// 下面是我自定义的颜色
$my-code-foreground = #dd0055 // 用``围出的代码块字体颜色
$my-code-background = #eee // 用``围出的代码块背景颜色

修改$code-background$code-foreground的值:

1
2
3
4
5
6
// Code & Code Blocks // 用``围出的代码块 // --------------------------------------------------   
$code-font-family = $font-family-monospace
$code-font-size = 15px
$code-background = $my-code-background
$code-foreground = $my-code-foreground
$code-border-radius = 4px

添加文章结束标记

themes/next/layout/_macro/post.swig中,在wechat-subscriber.swig之前添加如下代码:

1
<div style="text-align:center;color: #ccc;font-size:14px;">---------------- The End ----------------</div>

添加Fork me on GitHub

去网址https://github.com/blog/273-github-ribbons挑选自己喜欢的样式,并复制代码,添加到themes\next\layout\_layout.swigbody标签之内即可
记得把里面的url换成自己的!

把侧边栏头像变成圆形,并且鼠标停留在上面发生旋转效果

修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl

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
.site-author-image {  

display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: site-author-image-border-color;

/* start*/
border-radius: 50%
webkit-transition: 1.4s all;
moz-transition: 1.4s all;
ms-transition: 1.4s all;
transition: 1.4s all;
/* end */

}

/* start */
.site-author-image:hover {

background-color: #55DAE1;
webkit-transform: rotate(360deg) scale(1.1);
moz-transform: rotate(360deg) scale(1.1);
ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
}
/* end */

:如果图片是扁的,自己换分辨率低的图片

侧栏添加音乐

去往网易云音乐搜索喜欢的音乐,点击生成外链播放器,复制代码直接放到博文末尾即可,height设为0可隐藏播放器,但仍然可以播放音乐,auto设成0可手动播放,默认是1自动播放,可把代码放到themes/next/layout/_custom/sidebar.swig文件里,播放器会显示在站点预览中

footer居中

修改your blog\themes\next\source\css\_schemes\Mist\index.styl文件,将.footer-inner中的text-align: left;修改为text-align: center;即可。

简单的命令

总结一下简单的使用命令

1
2
3
4
5
6
7
hexo init [folder] # 初始化一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站  
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default\_layout 参数代替。如果标题包含空格的话,请使用引号括起来
hexo version # 查看版本
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g # 等于hexo generate # 生成静态文件
hexo s # 等于hexo server # 本地预览
hexo d # 等于hexo deploy # 部署,可与hexo g合并为 hexo d -g

站点加速

使用云盘存放图片资源

由于Github的服务器在海外,那么如果把图片也放到Github显然是不科学的,而且Github的存储空间也有局限,那么在这里博主推荐使用七牛云储存
免费用户实名审核之后,新建空间,专门用来放置博客上引用的资源,进入空间后点击「内容管理」,再点击「上传」

上传完成之后点击关闭回到管理页面,选中刚上传的图片,最右边的操作点击复制链接即可

然后在博文中通过地址引用

1
![](图片地址如:http://ojoba1c98.bkt.clouddn.com/img/build-hexo/copyUrl.png)

压缩代码

安装插件:

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --sav

在博客根目录下新建 gulpfile.js ,并填入以下内容:

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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩。

SEO(搜索引擎优化)

网站验证

以下是几个搜索引擎的提交入口:

添加并提交sitemap

安装hexo的sitemap网站地图生成插件:

1
2
npm install hexo-generator-sitemap --save  
npm install hexo-generator-baidu-sitemap --save

在站点配置文件或主题配置文件加入:
                             mark

1
2
3
4
sitemap:   
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

hexo-site\source中新建文件robots.txt,内容如下,请自行替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/
Allow: /count/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/

Sitemap: http://longofo.cc/sitemap.xml
Sitemap: http://longofo.cc/baidusitemap.xml

Allow后面的就是你的menu 可以在主题配置文件中找到。
前往链接:https://www.google.com/webmasters/
添加你的网站。
                           mark
下载验证文件放入hexo-site\source
Tips: 站点配置文件忽略Google的验证文件。这样clean的时候就不会被删除了。

1
2
3
skip_render:
- README.md
- google*****.html

mark
打开站点地图:添加站点地图。
          mark
可以进入站点地图详情查看有没有报错。

robots.txt测试

mark

百度搜索资源平台

由于百度的爬虫会被github屏蔽,我在网上找了很多解决方法,最后使用了这个方法解决了

多PC同步源码

1.准备工作:公司电脑和家里电脑配置git ssh密钥连接
2.上传blog到git:此项建议先在blog进度最新的PC上进行,否则会有版本冲突,解决也比较麻烦。在PC上建立git ssh密钥连接和建立新库respo在此略过:

  • 编辑.gitignore文件:.gitignore文件作用是声明不被git记录的文件,blog根目录下的.gitignore是hexo初始化是创建的,可以直接编辑,建议.gitignore文件包括以下内容:
    1
    2
    3
    4
    5
    6
    7
    .DS_Store   
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/

public内的文件可以根据source文件夹内容自动生成的,不需要备份。其他日志、压缩、数据库等文件也都是调试等使用,也不需要备份。

初始化仓库:

1
2
git init  
git remote add origin <server>

server是仓库的在线目录地址,可以从git上直接复制过来,origin是本地分支,remote add会将本地仓库映射到托管服务器的仓库上。
添加本地文件到仓库并同步到git上:

1
2
3
git add . #添加blog目录下所有文件,注意有个'.'(.gitignore里面声明的文件不在此内)   
git commit -m "hexo source first add" #添加更新说明
git push -u origin master #推送更新到git上

至此,git库上备份已完成。

3.将git的内容同步到另一台电脑:假设之前将公司电脑中的blog源码内容备份到了git上,现在家里电脑准备同步源码内容。注意,在同步前也要事先建好hexo的环境,不然同步后本地服务器运行时会出现无法运行错误。在建好的环境的主目录运行以下命令:

1
2
3
4
git init #将目录添加到版本控制系统中  
git remote add origin <server> #同上
git fetch --all #将git上所有文件拉取到本地
git reset --hard origin/master #强制将本地内容指向刚刚同步git云端内容

reset对所拉取的文件不做任何处理,此处不用pull是因为本地尚有许多文件,使用pull会有一些版本冲突,解决起来也麻烦,而本地的文件都是初始化生成的文件,较拉取的库里面的文件而言基本无用,所以直接丢弃。

4.家里电脑生成完文章并部署到服务器上后,此时需要将新的blog源码文件更新到git托管库上,不然公司电脑上无法获取最新的文章。在本地文件中运行以下命令:

1
git add . #将所有更新的本地文件添加到版本控制系统中

此时可以使用git status查看本地文件的状态。然后对更改添加说明更推送到git托管库上:

1
2
git commit -m '更新信息说明'   
git push

至此,家里电脑更新的备份完成。在公司电脑上使用时,只需先运行:

1
git pull

获取的源码即为最新文件

最后

折腾起来还是挺累的,不过也学到了一些东西,同时还要感谢很多大佬的文章由衷感谢。

参考
http://yangbingdong.com/2017/build-blog-hexo-advanced/
https://thief.one/2017/03/03/Hexo搭建博客教程/
http://mtianyan.gitee.io/post/a625fa82.html
https://zhuanlan.zhihu.com/p/26625249

-------------本文结束感谢您的阅读-------------

本文标题:Hexo+github搭建博客折腾笔记

文章作者:Longofo

发布时间:2018年03月12日 - 11:03

最后更新:2018年03月17日 - 16:03

原始链接:http://longofo.cc/Hexo+github搭建博客折腾笔记.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请我吃包辣条也好啊!!!
分享到: