最近想搭建自己的博客,在网上查了攻略之后决定使用Hexo+github来搭建,搭建过程中也遇到了一些问题,所以本文一方面是让大家有一个参考,还有就是记录一下方便自己以后查看。废话不多说啦,下面就来详细介绍具体步骤。
PS:我博客的地址:https://summerrouxin.github.io/
1、什么是hexo
是基于NodeJs
的静态博客框架,具有快速、简洁、高效等特点。使用Markdown(或其他渲染引擎)解析文章,生成的静态网页可以托管在Github
和Heroku
上。
2、环境配置
2.1 安装git
看到这篇博客的应该大部分都是程序员,所以git
一定不会陌生,所以这里只给出官网上操作步骤,供大家参考。
- Windows:下载并安装 。
- Mac:使用 Homebrew, MacPorts :
brew install git
;或下载 安装程序 安装。 - Linux (Ubuntu, Debian):
sudo apt-get install git-core
- Linux (Fedora, Red Hat, CentOS):
sudo yum install git-core
检验是否安装成功:
$ git version
2.2 安装nodejs
去 官网下载所需系统的安装包,并根据提示安装即可。
检验是否安装成功:
$ node -v
2.3 安装hexo
上述两个必备程序安装成功之后,只需要通过npm便可以完成Hexo的安装了。
$ npm install -g hexo-cli
至此,环境配置就完成了,可以开始搭建博客啦!
3、新建博客 rouxin
3.1 创建github仓库
进入GitHub新建repo,注意 这里的仓库名称要和你的username对应,这边很容易出问题,所以一定要注意,如下图所示:
3.2 hexo操作
$ hexo init rouxin$ cd rouxin$ npm install复制代码
上面三步主要完成初始化hexo的文件夹,安装依赖。新建完成后,可以看到文件夹的结构如下:
.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes复制代码
其中,_config.yml
是配置文件,这个文件我们会经常用到,后面也会介绍具体可以配置哪些信息。
source
是资源文件夹,用来存放我们的markdown文件。
themes
文件夹是用来放置主题的,后面主题部分我们将详细介绍。
下面我们修改配置文件_config.yml
中以下几个字段,完成部署的相关配置:
type
字段对应的是部署的服务器类型,我们在这边填写git即可repo
是我们在3.1
中创建的github仓库的地址branch
是文件的分支,默认是master
完成上述配置后,在终端执行npm install hexo-deployer-git --save
,这个操作主要是为了把我们写好的文章部署到github
服务器上并可以被别人浏览。
4、发文章
当然啦,我们新建博客的目的肯定是为了自己写文章,通过命令 $ hexo new test_md
就可以新建文章,此时会在source/_posts
目录下生成test_md.md
文件,在test_md.md
中输入内容后,保存一下。
运行以下命令(以下我们称为三步走),访问localhost:4000就可以看到效果啦。
$ hexo clean$ hexo g$ hexo s复制代码
其中hexo clean
是为了清除缓存,和已经生成的静态文件(publish
文件夹);hexo g
是命令hexo generate
的简写,生成静态文件;hexo s
是命令hexo server
的简写。默认情况下,访问网址为:http://localhost:4000/
在本地看到效果后,可以通过命令$ hexo d
(即hexo deploy
)将网站进行部署。
完成以上步骤之后,我们访问链接https://summerrouxin.github.io/
就可以看到博客啦~~~手机也可以查看哦
5、个性化定制
完成以上步骤,其实我们的基础功能已经完成啦,可是为了博客能更好看一些我还想做一些个性化的定制,首先肯定是想换下主题。
5.1 更换主题
默认的主题实在有些不能忍啊啊,所以在博客跑起来之后我第一件事就是去更换主题,关于主题网上有很多介绍,有一些来自于 ,也有一些是自己开发的,这边我们为了能够快速搞定,就在官方主题上进行选择。
首先我们在官网上找到自己喜欢的主题,可是我不得不吐槽一下,官方的主题真的有些太man了,我们这些女码农真的很难找到自己喜欢的主题。。。我把列表来回看了三遍,勉强选择了Anodyne
,所以下面我们都以Anodyne
为例。把主题的地址克隆到博客目录的themes
下,执行 $ git clone https://github.com/klugjo/hexo-theme-anodyne
然后我们还是要到配置文件_config.yml
中,修改theme字段,如下图所示:
接着执行三步走的代码,就可以在本地看到更换主题的效果。
5.2 修改导航栏
修改导航栏,这次我们要修改的仍然是配置文件_config.yml,不过不是之前修改的全局的配置文件,而是主题下的配置文件themes/anodyne/_config.yml
,在主题中找到menu
字段,因为这边我们主要有两个页面,一个是首页还有是一个是归档页面,About
和Contact
没有对应页面,所以将About
和Contact
的路由都改为了首页,即/
。如下图所示:
5.3 设置标签与分类
给文章贴标签
首先需要确认全局的配置文件_config.yml
中有tag_dir: tags
,确认过之后就可以新建tags页面啦。命令为: $ hexo new page tags
此时会在全局的source
文件下新建文件夹tags
文件夹,修改tags/index.md
文件
title: tagsdate: 2018-05-23 19:52:31type: "tags"复制代码
全局设置好标签之后就可以给文章贴标签了,在文章的.md
文件中添加:
tags: - tag1 - tag2复制代码
添加过之后,头部如下:
title: test_mddate: 2018-05-23 20:10:12tags: tag1复制代码
设置文章分类
给文章设置分类与上面介绍的设置标签类似,也需要首先确认一下全局的配置文件_config.yml
中有category_dir: categories
,接着新建categories
文件 $ hexo new page categories
此时会在全局的source
文件下新建文件夹categories
文件夹,修改categories/index.md
文件
title: 文章分类date: 2018-05-23 20:19:38type: "categories"复制代码
设置好全局的分类之后,就可以设置文章的分类了,在文章的.md
文件中添加:
categories: - category1 - category2复制代码
添加过之后,头部如下:
title: test_mddate: 2018-05-23 20:10:12categories: cate1复制代码
5.4 设置代码高亮、行号
代码高亮
完成了基本中能之后,可以正式开始写博客了,可是在写的过程中又发现了新问题:博客内的代码没有高亮。为了解决这个问题,在网上查了一些资料,hexo默认已经实现了代码高亮,但是它存在一些局限性,某些情况下无法高亮,而且界面也比较丑,所以最后还是选择了 这个库。这个库的使用也很简单,具体步骤如下:
- 我们上面介绍了hexo自带高亮,所以需要先关闭自带高亮,在全局配置文件_config.yml中将highlight的enable字段设置为false。
- 接着要引入
highlight.js
的css
和js
,具体的引入位置在主题模版中的<head></head>
之间,我使用的Anodyne
风格写在了主题的layout
文件夹中的layout.ejs
文件内,具体代码如下:
复制代码
在highlight.js
官方文档可以看到,它有很多代码风格,我们可以根据自己的喜好来选择,因为平时经常看github
的代码,所以我这边选择的是github
风格。 3. 最后,还要对highlight
进行初始化,位置在</body>
之前的<script></script>
中引入,代码如下:
hljs.initHighlightingOnLoad();复制代码
上述步骤的具体代码截图如下图所示:
添加代码行号
处理完代码高亮之后,很自然的想让插入的代码带有行号,所以我们接下来就介绍一下怎样添加代码行号。这边我们使用库 ,具体步骤如下:
- 首先是引入库,这里有两种方式: 第一种是,执行命令
$ npm install highlightjs-line-numbers.js
第二种是,通过script的方式引入,<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>
。 其实比较规范的操作应该是通过npm install
的方式来引入,这样作者有更新,我们可以拉到最新代码,但是这里我为了跟highlight
保持一致,使用了第二种方式。 - 在
highlight
之后对行号插件进行初始化,代码为:
hljs.initLineNumbersOnLoad();复制代码
上述步骤以及highlight
的具体代码截图如下图所示:
如果行号的样式我们不喜欢,可以通过更改CSS的方式来改变,这边仍然以Anodyne
风格为例,我在anodyne/source/css/partial/_highlight
文件中加入了如下代码:
td.hljs-ln-numbers -webkit-touch-callout: none -webkit-user-select: none -khtml-user-select: none -moz-user-select: none -ms-user-select: none user-select: none text-align: center color: #ccc border-right: 1px solid #CCC vertical-align: top padding-right: 5px width: 20pxtd.hljs-ln-code padding-left: 10px.content table tr:not(:last-child) td border-bottom: 0px solid #eee复制代码
注意这边要是styl
的格式来编写代码,可是.styl
貌似不支持高亮,好尴尬啊,这个有待进一步学习。
另外,还有一个小功能,就是如何将文字缩进,这边我常用的方法就是输入两个  
或者  
。
以上,就是我们创建博客的一些基本功能的介绍,接下来我还会在博客中加入用户量统计、评论框、插入表情等功能,敬请期待。