【Blog】Hexo搭建博客教程

优秀的人,不是不合群,而是他们合群的人里面没有你

利用Github搭建静态网站原因:

  • Simple
  • Clear
  • Saving Money :)
  • For Memory
  • For Love

0x00 前提

本文只是为了记录笔者在搭建以Next主题为首要主题前碰到的坑,有的坑的确很坑,索性记录一笔,笔者在之前已碰了不少钉子,希望后面的小伙伴能在Siber空间里,尽情创作(ps: 有风险 :) ),不要再一天捣鼓博客配置,更重要的是了解内核,了解逻辑,理解更深层次的东西:

阅读本文前请Confirm已经参阅过下面URI,给官网打啵广告(ps: 吃水不忘挖井人):

Next官方指南:http://theme-next.iissnan.com/getting-started.html
Next主题配置指南:http://theme-next.iissnan.com/theme-settings.html#rss
Next内置标签指南:http://theme-next.iissnan.com/tag-plugins.html

0x01 准备工作环境

  • 下载node.js并安装(官网下载安装),默认会安装npm
    *
  • 下载安装git(官网下载安装)
    • $ apt-get install git
  • 下载安装hexo:
    • $ npm install hexo-cli -g

0x02 搭建局域网Blog

  • 第零步:安装Hexo: $ npm install hexo-cli -g
  • 第一步(找位置,取名字):找你想放置博客的位置,新建一个文件夹,如MyBlog,当然取一个自己的 ID 更酷 !!!
  • 第二步(生成模板):进入该文件夹内,右击运行git,输入:hexo init(生成hexo模板,可能要fq)
    • 第一步+第二步(初始化博客):$ hexo init <blogName>
  • 第三步(启动Blog):
    • $ cd blog
    • $ hexo server (运行程序,访问本地localhost:4000可以看到博客已经搭建成功) 直接在浏览器上访问本地博客地址: localhost:4000
  • Bingo! 但是还要发布到网上呀,这个时候你就要牢记 hexo d 命令了
1
2
3
4
hexo clean 
hexo generate
hexo server
hexo deploy

0x03 搭建Internet Blog

局域网blog已经搭建完成,但是我们想让网上所有人都可以看到我们的文章,怎么办呢?又不想自己搭建服务器,别急,这时候就轮到github pages出场了!

  • 注册github账户,到github官网注册一个github账户

  • 配置登录免密码移步 Git之SSH与HTTPS免密码配置

  • 创建github远程仓库,在github上创建一个仓库 xxx.github.io ,xxx为自己的github用户名(必须的!其他名字不能用来识别,简言之,博客部署时,GithubPages根据你的博客的名字找到你的仓库找到部署文件,所以这个仓库必须是你自己独特的名字,不能是其他子仓库!!!)

  • 配置Hexo,这里要弄清楚:什么是主题配置文件,什么是主配置文件,修改 主配置文件:_comfig.yml, xxx为你的用户名:

1
2
3
4
deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master
  • 安装git部署插件
1
2
3
$ npm install hexo-deployer-git --save
推送服务器
$ hexo deploy

0x04 更新博客内容

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

更新文章

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

添加内置标签

好烦人的东西,不过最后弄通了还是很爽,这个功能就是官网有点描述不清,下面我来详细描述一波:

主页显示文章摘要

法一:默认情况下在主页是把文章内容全部显示出来的,如果在根目录的_config.yml中配置分页:

per_page: 10

那么每页显示10篇文章,这样的花主页就看起来不是很精简了!

法二(我就这样):通过下面的方法来配置主页只显示文章摘要:
在themes/next/的_config.yml中配置:

1
2
3
4
5
6
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.

auto_excerpt:
enable: false
length: 150

enable项配置为true就可以了。

但是我们也可以看到注释中是不推荐这样做的,因为这样会强制把文章前150个字符做为摘要的,会出现描述不完整的情况,而且有时候会把文章的源码显示出来。
那么我们就用推荐的在文章中用这种方式来作为文章摘要的方式,可以根据每篇文章的不同情况自己来把控摘要的内容。

这个需要使用进行截断,上面的内容就是显示在主页的摘要,把图片放在上面就可以了。

我的做法:

  • auto_excerpt修改为对应的 enable: true
  • 在每个文章前面加上
  • 效果图:

法三(极力推荐):在文章中配置description也是可以的。

1
2
3
4
5
6
7
8
9
---
title: Hexo+GitHub搭建个人博客
categories: Hexo
comments: true
keywords: Hexo, Blog, GitHub
tags: [Hexo, Blog, GitHub]
description: 使用Hexo在GitHub上搭建个人博客
date: 2017-01-010 13:00:00
---

代码高亮

Next主题总共支持5种主题,默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段,来设置代码主题。

本站点使用的是night主题。即令highlight为night。

代码高亮未遂

这里是最坑的,因为也是各种百度,google一波,最后再某乎上找到了希望

hexo中next主题代码高亮无法正常显示,如何解决?

总结一波(可能原因有三种):

    1. 你没有设置代码高亮显示
      • 解决方法:编辑主题配置文件_config.yml,将字段改为highlight_theme: night bright
    1. 编写文章时,在代码前后没有插入符号
      • 解决方法:编辑文章时,代码段的格式要记得换行
    1. 代码引用的Markdown语法没有声明

文章加密访问

效果图:

具体实现方法:

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:

代码如下:

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

然后在文章上写成类似这样:

0x05 高效写作

在创作的过程中没有必要老是去启动服务器,因为你改的都是前端的东西,包括Markdown语法创建的文章也是如此,我的做法:

  • 新建文章: hexo new "articleName"
  • 开启本地调试: hexo g && hexo s
  • 直接写内容,中间文章写错了,直接修改,浏览器直接刷新到自己对文章零容忍瑕疵,满意为止!
  • 决定发到网上: hexo g && hexo d
  • Bingo !!!

0x06 配置个性化的极客CSS

其实这套博客代码只要拿到手的时候,需要先研究一波Tree,然后根据博客的_config.yml配置文件去对应整个框架目录中的资源调用目录情况,在magic主题下/css/main.styl中查看各个资源的调用情况,方便custom

修改背景图片

  1. 首先,根据目录树找到修改背景图片对应的配置文件

在这里说明main.styl 引入的确实是_custom/Mala 样式

  1. 在配置文件对应的资源获取路径下添加你想作为背景的图片

然后直接在对应的标签下面添加自己喜欢的样式表就行

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
//大家可以参照我的

// Custom of Mala scheme.

// over write code color

//body { background: url(https://source.unsplash.com/random/1600x900);}

.header {
background: #000;
opacity: 0.4;
// min-height: 500px;
}

body {
background:url(/images/watchdogs01.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
// min-height: 500px;
}

.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #000;
opacity: 0.8;
min-height: 500px;
}

.sidebar{
background: #000;
opacity: 0.8;
}

.post code {
background: none;
color: $gainsboro;
text-shadow: 0 0px #fff;
}

// post next article
.post-nav-item a {
color: $gray-lighter;
}

// search input
.site-search input {
border-bottom: 1px solid $blue-bright;
color: $gray-lighter;
}

// 归档
.posts-collapse .post-title a {
color: $grey-light;
border-bottom: none;
}

// prev next
.post-nav-item {
a:hover {
color: $blue-bright;
}
}

// post tags
.posts-expand .post-tags a:hover {
background: none;
color: $blue-bright;
}

// blockquote
blockquote {
color: $grey-light;
}

// Blockquote with all children centered.
.blockquote-center {

&::before, &::after {
background: none;
}
}

// footer info text color
.powered-by, .theme-info, .busuanzi-info {
a {
color: $grey-dark;
}
}

.busuanzi-info {

}


a:hover {
border-bottom-color: $blue-bright;
}

.menu .menu-item a:hover {
background: none;
color: $blue-bright;
}

.post-more-link a:hover {
border-bottom-color: $blue-bright;
}

.btn:hover {
// border-color: $blue-bright;
color: $gray-lighter;
background: none;
}

// not show in mobile
#idhyt-surprise-ball {
+mobile() {
display: none;
}
}

#idhyt-surprise-ball-animation {
+mobile() {
display: none;
}
}

#assist_btn {
+mobile() {
display: none;
}
}

修改Header样式

修改SideBar样式

参考文章

nmask-hexo博客搭建教程

打造个性超赞博客Hexo+NexT+GithubPages的超深度优化

hexo高阶教程next主题优化

hexo的next主题个性化教程:打造炫酷网站

Hexo搭建博客的个性化设置

Next个性化主题搭建,小确幸篇