Hexo 是一个快速、简洁且高效的博客框架。Hexo使用Markdown解析文章,在几秒内,即可利用靓丽的主题生成静态网页。这些静态资源文件可以托管在github或者其他服务器,形成我们自己的个人博客网站。
next是Hexo框架内的一套主题。
github作为生成的静态资源文件的托管平台。实际上我们通过Hexo也可以实现这些静态资源的托管,但是这样只能发布在本地,如果想通过互联网发布,则需要自己购买服务器,并自行申请域名之类的操作。而github中提供github pages功能,可以免费托管我们发布的内容,另外github pages还会自动为其创建一个域名。
hexo框架
安装hexo
由于hexo是基于Node.js的框架,因此安装hexo之前,首先需要安装node.js。
node.js和hexo之间存在版本要求,具体如下所示。
待node.js安装之后,可以通过npm命令去安装hexo。
建议使用如下方式进行hexo安装
1 | npm install -g hexo-cli |
安装成功之后,可以通过如下方式验证hexo的效果。
hexo基本操作
初始化一个hexo项目
1 | 初始化一个hexo 博客 |
在生成一个hexo_test文件夹后,hexo会自动创建如下内容:
其中比较重要的是:
source,文件夹,我们的原始文件内容会存放在这里
_config.yml,文件,称之为站点配置文件,用于配置一些全局性的配置
public,文件夹,生成的静态资源文件,会放到public文件夹下,默认按照时间进行分类(初始化时,未创建,在执行完下面的hexo g之后,会自动生成)
生成静态资源
1 | 一键生成静态资源 |
上面的命令会自动生成静态资源文件,并将source下的markdown文件生成为html文件,存放在public文件中,如图所示。
启动服务器,发布
1 | 启动hexo服务,用于在本地浏览器查看hexo生成的网页内容 |
然后打开浏览器,输入http://localhost:4000/就可以访问博客了。
next主题
hexo默认的主题,不是太好看,使用比较多的hexo主题是next。
安装next主题
切换到hexo项目目录,会有一个theme文件夹,用于存放各种主题,hexo默认是没有安装next主题的,我们需要通过git clone从github上将next主题clone到theme文件夹中。
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
同时,修改hexo项目的站点配置文件内容
1 | 将主题修改为next |
接下来执行如下命令进行重新发布。
1 | clean之后重新生成静态文件,然后发布 |
此时从浏览器访问,可能会出现如下错误,原因是hexo在5.0之后把swig给删除了需要自己手动安装。
此时在项目中安装swig可以解决问题: npm i hexo-renderer-swig
,再次重新发布后,登录博客页面。
从博客页面上来看,对站点配置文件的修改配置也生效了
配置next
next主题下同样有一个_config.yml文件,称之为主题配置文件。通过修改主题配置文件,可以进行一些自定义配置。
- 更改next的scheme。
next提供四种scheme,这里我选择的是:scheme: Gemini
,修改完配置文件,保存并刷新浏览器,可以查看修改后的效果。
- 设置博客头像
1 | 配置用户头像 |
修改并保存好主题配置文件后,刷新浏览器,可查看效果。
- 将博客头像设置为圆形
方形的用户头像不太好看,可以通过如下修改,将头像修改为圆形的。
切换至next\source\css_common\components\sidebar
目录下,将sidebar-author.styl中的内容替换为如下内容。
1 | .site-author-image { |
保存,并刷新浏览器查看效果。
博客个性化配置
为博客增加标签、分类页
在hexo项目的根目录下,执行如下命令,进行创建:
1 | 创建分类页 |
执行上面的命令后,hexo会在post下自动创建目录,如图所示。
同时更新next主题配置文件,注意要去掉||前面的空格,否则点击页面会跳转失败。
1 | menu: |
保存配置,并刷新浏览器,查看效果。
增加站内搜索功能
要实现博客的站内搜索功能,需要借助于插件hexo-generator-searchdb
,因此在hexo项目下,安装该插件:
1 | npm install hexo-generator-searchdb --save |
修改站点配置文件,增加如下内容:
1 | search: |
然后再更新next主题配置文件:
1 | local_search: |
保存,并重启hexo,打开浏览器,查看效果。
设置博客文章展示部分
在hexo的source目录下的博客源markdown文件中,合适的位置增加一样md语法,即可实现。
在浏览器中的显示效果如图所示。
将hexo项目部署到github page
首先得在github上创建一个仓库,仓库名字是{github昵称}.github.io
。然后查看该仓库的settings,并选择pages页面,可以查看到网址,我们通过该网址可以直接访问该仓库中的静态html资源。
目前还访问不了,原因是这个仓库中没有任何文件,我们需要将前面hexo生成的静态资源上传至该仓库。
为了能够将数据上传至该仓库,我们需要再hexo的站点配置文件中增加有关github的配置。
1 | # 这里有个前提,就是本机已经配置了有关github的认证信息 |
在hexo项目下执行如下命令,安装hexo的git工具。
1 | npm install hexo-deployer-git --save |
接着执行如下命令,完成在github上的部署。
1 | 清空缓存 |
接着,就可以登录前面所述的github pages页面的网址,查看博客网站了。
设置评论功能模块
这里采用gitalk插件,来实现自建博客的评论功能。
他实际上就是借助于github仓库提供的issue功能来实现的评论功能,如果我们增加了gitalk插件,那么他会为博客中的所有文章在指定仓库的issue上创建一个以该博客文章名命名的问题,后面所有任何关于该博客文章的评论都会记录在这个issue下。
同时当我们打开这个博客文章时,gitalk会自动从issue中加载数据,将关于这个博客的评论展示在评论区。
为了实现上述功能,需要进行如下操作。
申请OAuth 认证
登录github,在个人账户settings下,选择 Developer settings
– OAuth Apps
,进行OAuth认证。
注意homepageurl和callback url都填写前面的github page网址。
接着通过如下方式,获取到client id和ClientSecret,后面会用到。
在next主题配置文件中配置gitalk
1 | gitalk: |
增加gitalk相关内容
在netx\layout\_third-party\comments
目录下,新建gitalk.swig文件,并添加如下内容
1 | {% if page.comments && theme.gitalk.enable %} |
这里需要说明一下,这里引入了md5.min.js文件,并对博客的pathname进行MD5处理,原因是由于github限制,不能创建超过50字符长度的issue???反正就是长度太长就是创建不了。
md5.min.js文件可以在github上下载,下载后放到next\source\js\src
目录下即可。
在next主题的\layout\_third-party\comments
目录中,更新index.swig文件,在文件末尾增加一行。
1 | {% include 'gitalk.swig' %} |
在next主题的\layout\_partials
目录中,更新comments.swig文件,如下增加gitalk部分即可。
1 | {% elseif theme.valine.appid and theme.valine.appkey %} |
待所有内容修改完毕之后,保存并执行如下命令,进行发布。
1 | hexo clean && hexo g && hexo d |
然后登陆github pages网页查看效果。