我的个人博客搭建记录

前言

本篇博客旨在备忘,并记录了自己折腾了3,4天后顺利搭建自己的个人博客过程中碰到的一部分问题。

搭建个人独立博客有很多种方法,我暂时采用的是基于github Pages的免费博客,博客框架采用hexo静态博客框架。采用此方案的原因,是因为基于github+hexo的博客很多,碰到了什么问题也有很多解决办法。当对一个事情或事物不太熟悉的时候,尽量采用受众比较多的,无关乎随大流,无关乎跟风。这让我想起了自己当时刚刚接触linux的时候,完全陌生的情况下真是无法选择到底以那个系统进行学习,所以当时采取的办法是使用社区活跃度较高,用户群比较多的系统,比如centos和ubuntu,最终我选择了ubuntu,毕竟刚从windows转过来,当然我现在使用的是centos,当然这是题外话了。

一点建议:
我不知道大家跟我是否一样,当我新接触一个事情或事物的时候,我不太习惯去看他的使用手册或者官方文档,而是去google,baidu别人的教程,我觉得这是一个很不好的习惯,以后尽量优先考虑官方手册。对于搭建这个博客来说,就让我深深的体会到了这样的好处。关于hexo的官方手册,关于next(下文会介绍)主题的官方手册,仔细阅读,如果不笨的话,是不需要再看别人的教程从而也能顺利搭建自己的博客。

搭建准备

我的环境:win10 x64

要使用hexo,需要node.js和git.

Node.js下载安装


这里推荐大家采用安装包.msi的方式,不要下载绿色版的.exe,不然后续设置的环境变量可能不对,还有提示npm找不到的问题。可以看到标题Current Version:v4.4..5(includes npm 2.15.5),故为了正确性起见,推荐大家采用.msi的方式,按照上面地址的安装配置教程就可以顺利安装。

如果后面安装hexo的时候出现npm找不到的话,也可以手动自己安装npm。

Git安装

注意:Git是一个版本控制系统,下载安装Git会顺带把Git需要用到的shell环境也安装了,当然你可以自己设置成windows Powershell,亦或是像我一样,设置成bash.不要与github的客户端搞混了,说来惭愧,我就搞混了。希望你不要搞混了

上面的地址可能需要翻墙,如果不能翻墙,自行解决。但我相信,你既然都能想到用独立博客,那必然翻个墙不是什么难事。

由于我工作中用的是svn,所以对git不太熟练,但是我觉得git是未来的趋势,有必要学习使用。

Git教程

安装hexo

hexo是什么?正如hexo.io上的标题所示:A fast, simple & powerful blog framework ,powered by node.js就足以介绍了。

安装hexo也很简单,打开git bash:

然后输入命令:

1
2
3
4
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install

输完收工!!

需要注意的是blog可以是你自己的自定义blog目录,比如我的是/g/blog
安装完成后大概会是下图的结果:

好了,hexo安装好了,接下来就是使用了。这里强烈推荐大家看hexo的官方doc

后面将会用到的几个常用命令:

1
2
3
4
5
$ hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
$ hexo server (hexo s) 启动本地web服务,用于博客的预览
$ hexo deploy (hexo d) 部署博客到远端服务器
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面

部署到github:

1
$ hexo d -g

部署到本地http://localhost:4000/:

1
$ hexo s -g

Github Pages

作为一个使用github的人来说,应该不用多介绍githubpages。具体可以看上面的链接。

创建新的仓库

这里需要注意的一点是:在你的github里新建一个仓库,仓库名需是你的github用户名,不然是不行的,所以后续你就可以通过http://username.github.io来访问自己的博客。

配置SSH

查看原有的ssh key

1
2
$ cd ~/.ssh
$ ls -al ./*

如果出现” No such file” 则不用管,如果存在.ssh这个目录那么可以先备份(不是必须,我就没有),再删除。

1
$ rm -rf ./*

生成新的ssh key

1
2
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

“yourname”可以随意输入,”youremail”一般就输成你的github上的邮箱。
然后接着输入:

1
$ ssh-keygen -t rsa -C "yourmail@gmail.com"

这个地方的邮箱必须是你github上的邮箱。一路回车,中间会出现一个设置密码的询问,可以忽略,如果设置,那么就记住。我选择的是不要密码,那么直接一路next. 之后会在~/.ssh/下生成两个文件id_rsa 和 id_rsa.pub

1
$ cat ~/.ssh/id_rsa.pub

然后copy到github上添加秘钥。

title可以随意。完成之后,在git bash里验证一下:

1
$ ssh -T git@github.com

验证成功大概是这么个结果:

部署到github

到这里,即将开始真正配置hexo,包括主题设置,部署上线等等。

修改$BLOG/_config.yml,$BLOG是我自定义的一个shell环境变量,你也可以自定义你自己的$BLOG.

参照我的设置,修改成你自己的github仓库地址即可。这里就要注意到,这个仓库的名字跟我的github用户名是一样的

一些语法上的东西需要注意:type:,repo:,branch:后面是必须有一个空格,不然后面会报错

然后接着在git bash 里执行:

1
2
$ npm install hexo-deployer-git --save
$ hexo d

此时,便已经成功部署到github上了,hexo默认自带了一篇hello world的markdown 博文。可以通过http://linxi4linux.github.io访问刚刚部署上线的博客。(换成你自己的地址)

至此,一个基本的博客系统就已经搭建完成了

hexo 详细配置

接下来的时间,便是折腾开始。看你自己的喜好了。可以配置主题,第三方服务,搜索,代码高亮等等。
我推荐使用next主题,刚开始我会觉得挺简陋的,但是我越看越觉得大气,舒服,简洁。

参照next主题的官方文档,你完全不用google其他的教程,就可以很容易很顺利,而且很好的搭建起一个效果还不错的博客站点。可以看看参考我的博客.

上图是next的官方网站,我建议你把“开始使用”,“主题配置”,”第三方服务”,“内建标签”,“进阶设定”,”常见问题”都仔细的阅读一遍,照着操作,你就没问题的。

下面挑几个我觉得还挺好玩的配置记录记录:

多说评论系统

  1. 登陆多说,选择我要安装。
  2. 创建站点

    记住你自己设置的多说域名,比如我的是 rebootcat
  3. 编辑主题配置文件_config.yml($BLOG/themes/next/_config.yml)
    1
    duoshuo_shortname: rebootcat
    上面这些next的官方doc里都有,需要注意的是**如果需要在某个文章或者页面禁用多说,需要配置
    1
    comments: false
    在博文的开头处。

提交google抓取

首先安装sitemap插件:

1
$ npm install hexo-generator-sitemap

然后插件存放目录是$BLOG/node_modules/

然后配置站点配置文件_config.yml($BLOG/_config.yml):

1
2
3
4
5
6
7
# Extensions	
Plugins:
- hexo-generator-feed

#sitemap
sitemap:
path: sitemap.xml

执行:

1
$ hexo d -g

访问http://username.github.io/sitemap.xml会看到如下的结果:


sitemap.xml文件是用来干嘛的呢?我自己简单的理解是:这个文件实时记录了网站内容的变更,提交google抓取的时候,google便可以根据这个文件的内容来进行相应的更新或者索引。

接下来,到Google Search,添加自己的网站网址,之后在这个页面会收到一封邮件,大致是这样子:

然后我们点击提交站点地图,接下来你就会操作了。之后完成之后便是等待google审核通过。比如我自己的,前天提交了,现在还没有通过(应该是碰到问题了):

嵌入网易云音乐

在网页嵌入云播放器,是不是觉得很酷?是挺酷的,但是其实很简单。
首先找到一首歌,然后点击“生成外链播放器”:


复制上面的html代码到博文的任意位置,即可。就这么简单。
如果碰到受版权保护的情况,解决办法 戳我。

添加近期文章板块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

将此代码贴在next/layout/_macro/sidebar.swig中的if theme.links对应的endif后面,就ok了,是不是很简单。。。。

为了配置方便,在主题的next/_config.yml中添加了几个变量,如下:

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

纯粹是好玩(high一下)

这个效果会使整个页面震颤随着音乐,甚至标签也会跟着跳跃。
在$BLOG\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码:

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
  <!-- 自定义High一下的功能 -->
<li class="menu-item"> <a title="而我一无所获" href='javascript:(
function go() {


var songs = [
"http://music.163.com/song/media/outer/url?id=26199445.mp3",
""
];


function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}

function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}

function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}

function d(e) {
return {
height : e.offsetHeight,
width : e.offsetWidth
}
}

function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}

function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}

function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}

function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}

function E(e) {
var t = m(e);
return t >= w && t <= b + w
}

function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
N();
}

e.src = i;
e.play()
}

function x(e) {
e.className += " " + s + " " + o
}

function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}

function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}

function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("class", l);
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h();
go();
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
}
}

initAudioEle();
var e = 30;
var t = 30;
var n = 350;
var r = 350;

var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];

var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";

var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()'><i class="menu-item-icon fa fa-music fa-fw"></i> 人生需要自嗨</a> </li>
<!-- end high 一下 -->

Related Posts

感谢以下博主:

基于Hexo+GitHub Pages 免费搭建个人博客最强教程

如何搭建一个独立博客——简明Github Pages与Hexo教程

hexo next 主题添加打赏功能

玩转Hexo博客之Next

The End

记录到此为止,其中比较琐碎的部分建议大家直接查看next的官方doc。

Blog:

email: linuxcode2niki@gmail.com

2016-6-11 于杭州

buy me a cola!

欢迎关注我的其它发布渠道