本文首发于个人博客:Lam's Blog - 如何搭建一个拥有个人域名又带点Geek味的独立博客,文章由MarkDown语法编写,可能不同平台渲染效果不一,如果有存在排版错误图片无法显示等问题,烦请移至个人博客,后续更新也只会在个人博客修改,如果个人博客无法访问可以留言告诉我,转载请声明个人博客出处,谢谢。
前言
最早开始写个人博客是在14年的8月,那时候大三刚结束正在实习的阶段,用的平台是csdn,那时候csdn博客的排版还只能繁琐地选择标题一标题二标题三,断断续续写了二十几篇便弃坑了。
后来接触了简书、WordPress等平台,在接触了MarkDown之后便踏上了一条不归路,如果在世上只能用一种方式排版,那我选择MarkDown,还有现在csdn也支持mardown,可能两年多前也支持只是我不知道?
但是作为一个爱折腾的程序员,什么事情都想自己来,更倾向于拥有完全可定制化的独立博客,如果还有一个个人域名就更酷了,无疑是让自己坚持更新博客的最大动力。
本篇文章将会从开始打算创建一个独立博客开始到实现几乎你想要的所有定制化功能为止,详细地罗列出各个步骤。
如果你对默认配置满意,只需几个命令十几分钟便可以搭出一个个人博客;如果你喜欢折腾,那么几小时到几个月都可以让你玩得尽兴。
大致的步骤就是建议Github Pages上的个人主页,然后再本地使用hexo进行博客的初始化构建,这样就可以开始写博客了,其他的如绑定自己的域名,定制化自己的更多需求则属于锦上添花的事情。
Github Pages
首先你需要到Github上注册一个账号
之后创建一个仓库,这里仓库名字是有要求的,必须是你的用户名.github.io
<center>{% qnimg 660127-c4c554b26669999f.jpg %}</center>
创建完仓库之后,为了之后提交博客内容到Github,首先必须安装Git,如果提交方式打算使用SSH的话还需要在本地创建一个SSH KEY并将其添加到Github上。
创建SSH KEY
如果你是使用Windows,在控制台命令中找不到ssh-keygen之类相关的git命令时,要么听过配置Path,要么就在上一步中安装了git之后,在随便一个地方右键,打开Git bash进行以下操作。
首先设置你Github的用户名密码:
<pre><code>
git config --global user.email "linbinghe@gmail.com"
git config --global user.name "linbinghe"
</code></pre>
生成密钥:
<pre><code>
ssh-keygen -t rsa -C "linbinghe@gmail.com"
</code></pre>
输入文件路径:
<pre><code>
H:\hexo\blog>ssh-keygen -t rsa -C "linbinghe@gmail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (//.ssh/id_rsa): H:\git\myssh\ssh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in H:\git\myssh\ssh.
Your public key has been saved in H:\git\myssh\ssh.pub.
The key fingerprint is:
b0:0c:2e:67:33:ab:c1:50:10:40:0a:ba:c1:80:59:22 bu.ru@qq.com
</code></pre>
输入文件路径时如果出现错误,查看是否是盘符没有大写
上述命令若执行成功,会在H:\git\myssh目录下生成两个文件id_rsa和id_rsa.pub,最后两步:
用文本编辑器打开生成的ssh.pub文件,拷贝其中的内容,将其添加到Github上的Add SSH Key里
Windows的话将id_rsa和id_rsa.pub拷贝至当前用户目录下的.ssh文件夹中,Linux则是~/.git中
如果上述操作出了问题并且确定SSH KEY是正确的,那么到.git/config中看下默认SSH KEY文件名是否是上述两个
最后可以验证一下:
<pre><code>
ssh -T git@github.com
</code></pre>
Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装
Hexo的搭建最佳教程永远是官网的中文文档,请跳转到该页面,花几分钟时间跟着文档做完概述与建站后再重新回到这里。
回到这里后,首先阐述一个概念,在你创建的hexo根目录下的config.yml配置文件属于全局配置文件,之后的NEXT等主题下的config.yml文件属于主题配置文件。
同时所有hexo的相关命令需要到你所创建的hexo根目录下才能生效。
配置与Github Pages关联
官方的文档里并没讲解如何配置与Github pages进行关联,而我们需要关联之后才能让hexo自动把我们的博客解析为静态网页后上传到Github上显示。
配置方法就是打开你的全局配置文件,然后找到deploy的位置,添加你自己的Github Pages相关联的信息
<pre><code>
deploy:
type: git
repo: https://github.com/linbinghe/linbinghe.github.io.git
branch: master
</code></pre>
"Hello World"
<pre><code>
hexo n "文章名"
</code></pre>
在命令行界面使用上述命令,可以在source/_posts中生成一篇md格式的文章,使用markdown语法进行编写最终hexo会将其渲染为静态网页文件。
而当你每次写完博客或者更改了一些其他的东西,想把变动发布到Github Pages时,可以先使用
<pre><code>
hexo s -p 5000
</code></pre>
在指定如5000端口打开一个本地服务器,通过访问localhost:5000来查看自己博客的渲染效果,如果不加-p参数,默认是4000端口
当确认要上传之后,可以使用
<pre><code>
hexo clean
hexo g
hexo d
</code></pre>
首先会清空本地的一些public等资源,之后构建静态文件,最后发布到Github上,最后两条命令可以合并为
<pre><code>
hexo d -g
</code></pre>
至此,如果你只想要有一个最简单的具有hexo原始主题的独立博客,所要求的功能就是写文章而已,那么到这一步你就已经完成了,发布后访问以下你的github pages网站,你就会看到你自己的博客啦。
余下内容有兴趣的可以按照目录列表直接找到对应的地方
Hexo主题
相信大多数的人第一眼看到自己用Hexo搭建的博客时肯定是不满意的,因为默认主题真的有点丑。
但庆幸的是,现在Hexo的主题随便一搜都一堆,笔者使用的博客主题是国人写的NEXT。
我一向建议有官方文档的,就直接去看官方文档的,按照步骤一步步做下来一般都不会有问题,至少我没发现有什么坑出现过,不过我会在总结部分给出几个小提醒,这些需要你在看完官方的文档后再来看才有意义。
官方文档的开始使用和第三方服务都可以全看一下,把自己想要的都加上去,也顺便了解一下hexo与next的基本操作方法。
编辑文章
关于编辑器我使用的是最简单的记事本或者notepad++,感觉没必要使用markdown的编辑器,如果刚开始接触markdown,可以直接找个网页版的编辑器写看看,要注意hexo使用的md渲染器标签后面几乎都是要带空格的,简书就不需要在#标题标签后带空格
关于编写文章分类、标签等内容:
<pre><code>
title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格
description: #这里是文章描述,在这里写了内容,则会首页该文章只显示这部分内容作为摘要,如果你想自定义摘要位置,那么这里就不要写,使用
这里开始使用markdown格式输入你的正文。
</code></pre>
创建文章后的固定模板位于scaffolds目录下,你可以使用默认的post.md,也可以自定义一个模板,在创建文件下使用
<pre><code>
hexo new 模板名 "文章名"
</code></pre>
hexo默认会处理全部markdown和html文件,如果不想让hexo处理你的文件,可以在文件头中加入layout: false。
hexo中所有文件的编码格式均必须是UTF-8。
命令
常用命令:
<pre><code>
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
npm install <plugin-name> --save #安装插件
npm update #升级插件
npm uninstall <plugin-name> #卸载插件
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
</code></pre>
Hexo目录结构
<pre><code>
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
</code></pre>
- .deploy:执行hexo deploy命令部署到GitHub上的内容目录
- public:执行hexo generate命令,输出的静态网页内容目录
- scaffolds:layout模板文件目录,其中的md文件可以添加编辑
- scripts:扩展脚本目录,这里可以自定义一些javascript脚本
- source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
- _drafts:草稿文章
- _posts:发布文章
- themes:主题文件目录
- _config.yml:全局配置文件,大多数的设置都在这里
- package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
至于_config.yml由于内容较多,而且大多数普通用户都不需要涉及或者只需要按照第三方服务的教程设置即可,所以暂不做详细介绍。
有兴趣的可以看这篇文章:Hexo系列教程之三:next主题的配置和优化
个人域名
域名推荐到GoDaddy上面购买,国内的服务商大家都懂的,至于购买年限,个人建议一年一年续费就好了,狗爹不定期有优惠,没必要一下子买那么多年。
最后建议大家申请.com或.me域名。据说.info因垃圾网站太多,被搜索引擎惩罚,而且续费较贵。
CNAME
购买域名后如果想要绑定到Github Pages上,则需要在source目录下创建一个名为CNAME的文件(无后缀名),使用记事本等工具打开该文件,在里面填入自己申请的域名,然后在使用命令发布到Github上即可。
DNSPOD
如果只做了上述的操作,你还需要将你域名更换一个更强大的域名解析平台,这里墙裂推荐DNSPOD,速度快,至少对我来说足够了,而且可以针对多种网络服务商提供不同的跳转,这在后面把博客同时架设到国内的GitCafe上非常有帮助。
而将博客同时架设到GitCafe上是为了在百度能搜索到或者国内用户能访问到自己的网站,由于百度自己作妖,所以Github屏蔽了百度的爬虫,你的文章在百度搜索上,甚至你直接搜索自己的域名都搜索不到。
首先你要到GoDaddy网站上,选择管理自己的域名,然后设置自己域名的DNS为
<pre><code>
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
</code></pre>
然后到DNSPOD上注册账号登陆,添加自己的域名,最后按照提示添加记录,要点如下
- 主机记录按照自己需要选择
- 记录类型选择CNAME
- 线路根据自己需要选择,必须配置默认
- Githua Pages的记录值是linbinghe.github.io,前面替换为自己的用户名
DNS地址更换,特别是初次购买域名建站后,需要等待一段时间才能生效,但是一般当天就可以了。
FancyBox
试试在你的文章头部添加photos项,然后看看你页面的变化
<pre><code>
title: xxxxx
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
-
http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
</code></pre>
关于页面
执行new page命令
<pre><code>
hexo new page "about"
</code></pre>
在source目录下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题配置文件中中将其配置上即可。
留言板页面
执行new page命令
<pre><code>
hexo new page "guestbook"
</code></pre>
在source目录下会生成guestbook目录,里面有个index.md,直接编辑就可以了,然后在主题配置文件中中将其配置上即可。
标签页面
执行new page命令
<pre><code>
hexo new page "tags"
</code></pre>
在source目录下会生成tags目录,里面有个index.md,直接编辑就可以了,然后在主题配置文件中中将其配置上即可。
分类页面
执行new page命令
<pre><code>
hexo new page "categories"
</code></pre>
在source目录下会生成categories目录,里面有个index.md,直接编辑就可以了,然后在主题配置文件中中将其配置上即可。
404页面
GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。
看下我的404页面:linbinghe.com上不存在的页面,做点有意义的事情。
目前公益404接入有多个平台,我选的是腾讯404,在404.html文件中添加腾讯公益404中说明的内容即可。
永久链接
也许你会数次更改文章题目或者变更文章发布时间,在默认设置下,文章链接都会改变,不利于搜索引擎收录,也不利于分享。唯一永久链接才是更好的选择。安装此插件后,不要在 hexo s 模式下更改文章文件名,否则文章将成空白。
首先还是安装插件:
<pre><code>
npm install hexo-abbrlink --save
</code></pre>
在全局配置文件中,查找代码permalink,将其更改为如以下格式:
<pre><code>
permalink: :year/:abbrlink.html
</code></pre>
abbrlink是该插件生成的永久唯一标识,因为一般年份也不会去改动,所以我这里添加上了年份,重点在于这串值最后生成的结果应该是不会再因为其他因素而改变的。
在站点配置文件中添加如下代码:
<pre><code>
abbrlink config
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
</code></pre>
可参照样例以选择:
<pre><code>
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html
</code></pre>
版权信息
我们通过修改博客模板(themes)就可以方便地实现。但是通过修改模板的方式产生的版权信息还是相对独立的,不是文章正文的一部分。这段版权信息存在的主要意义就是防止自动化的工具批量转载博客文章,或许“防止”一词并不恰当,但我们之所以要将版权声明放在正文里,就是希望这些自动化的抓取工具抓取文章时能将版权信息一并抓去。
同时,我们还希望在版权信息中给出这篇文章的永久链接,这样在文章被抓取之后,还会有一个链接指向原文,这样不但可以作为原文被转载的明确证据,同时可以提高原文在搜索引擎中的PageRank。
Hexo博客系统具有良好的可扩展性,我们可以编写一个插件,来实现自动化地为每一篇文章追加版权信息。
我们只要在hexo根目录下创建scripts目录,在里面添加一个addtail.js,内容如下
<pre><code>
// Add a tail to every post from tail.md
// Great for adding copyright info
var fs = require('fs');
hexo.extend.filter.register('before_post_render', function(data){
if(data.copyright == false) return data;
var file_content = fs.readFileSync('tail.md');
if(file_content && data.content.length > 50)
{
data.content += file_content;
var permalink = '\n本文永久链接:' + data.permalink;
data.content += permalink;
}
return data;
});
</code></pre>
接下来你就可以在hexo根目录下创建一个tail.md的文件,内容所写的内容,就是你自己定制的版权信息内容。
如果你有哪个界面不想加上版权信息,比如404界面,那么可以在该界面文件的开头添加:
<pre><code>
copyright: false
</code></pre>
有心的同学可以将这个开头与上面的tail.md文件做下对比,看下为什么这样配置就可以,这也是hexo页面自定义配置中通用的一种。
多环境撰文
hexo与github pages共同搭建博客有一个麻烦的地方就在于多环境下要同步本地的博客内容很麻烦,唯一的方法就是你用要么一个硬盘云盘之类的要么就是用github之类的,每次有更新你就同时把本地的博客文件都同步上去,毫无疑问这非常麻烦。
之前想要自己写一个自动化工具来做这个事情,这几天发现有人已经写好了,可以直接用,这里直接贴出链接,里面也有详细的说明,按照步骤来做就好了。
hexo-git-backup
统计
页面上显示访问次数可以使用 不蒜子,两行代码即可搞定。
因Google Analytics偶尔被墙,故用百度统计http://ibruce.info/2013/11/22/hexo-your-blog/
图床
考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我墙裂推荐七牛,访问速度极快,支持日志、防盗链和水印。
免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对个人博客来说足够,如果不够的话可以考虑通过邀请好友或者花点小钱来解决。
这里就不介绍七牛的注册什么的,非常简单自己花几分钟就可以解决了,这里只介绍一个七牛的自动同步插件,试想一下如果我们每张图片都要自己上传然后找到链接最后再一张张贴到文章里是不是太繁琐了。
这个插件可以让你把图片放到本地,用一行命令就可以自动同步图片到七牛云端,在文章中只要使用固定格式就可以简单地链入图片而不需要完整的url地址。
这个插件就是hexo-qiniu-sync,跳转进去后里面也有完整的中文文档,详细地介绍了如何使用以及注意事项,这里就不重复贴一遍了。
SEO
当我们搭建一个网站之后,如果没有做一些相关的搜索引擎优化SEO,那么我们的网站是很难获取来自搜索引擎的流量的,用户很难在搜索引擎上搜索到我们网站的内容,所以在这里我们要为Hexo网站做一些简单的搜索优化。
上周刚搭建好博客的时候只有谷歌能搜索到自己的博客,百度直接搜域名都没有任何信息,主要原因是因为Github Pages屏蔽了百度爬虫,百度根据没办法知道我们博客的内容,所以我将博客同步到两个平台上,一个Github,一个国内的Gitcafe,目前搜索自己博客的相关信息基本都在第一条。
SiteMap
首先安装hexo的sitemap网站地图生成插件:
<pre><code>
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
</code></pre>
在你的hexo站点的_config.yml添加下面的代码:
<pre><code>
hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
</code></pre>
配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。
蜘蛛协议robots.txt
在source目录下创建robots.txt文件,添加下面的一段代码:
<pre><code>
Sitemap: http://www.linbinghe.com/sitemap.xml
Sitemap: http://www.linbinghe.com/baidusitemap.xml
</code></pre>
请自行改成自己的网站。
完整robots.txt文件内容:
<pre><code>
hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://www.arao.me/sitemap.xml
Sitemap: http://www.arao.me/baidusitemap.xml
</code></pre>
谷歌Search Console与百度站长工具
这两个平台都是便于管理自己的网站,查看爬虫爬去频率等等,这两个的使用都不难,但是两者都需要通过验证,只要搜索这两个平台,到各自官网添加域名,按照文档说明通过验证即可。
谷歌可以通过提交站点地图提交我们的sitemap.xml,百度目前已经禁止了。
NoFollow
nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签,并被百度、yahoo等各大搜索引擎广泛支持,引用nofollow标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有nofollow属性的任何出站链接,以减少垃圾链接的分散网站权重。
网上有很多资料,都是通过更改themes/next/layout/_partials目录下的footer.swig等文件,把hexo.io链接设置为非友链,但是大多数资料都已经过期了,至少我发现不是每一句我这边都能找到,这里推荐一个简单的方式,直接通过插件来解决。
<pre><code>
npm install hexo-autonofollow --save
</code></pre>
在站点配置文件中添加以下代码:
<pre><code>
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- exclude1.com
- exclude2.com
</code></pre>
首页标题
更改index.swig文件,文件路径是your-hexo-site\themes\next\layout,将下面代码
<pre><code>
{% block title %} {{ config.title }} {% endblock %}
</code></pre>
改成
<pre><code>
{{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}}
</code></pre>
这时候你的首页标题会更符合网站名称 - 网站描述这习惯。
主动推送新链接
解决百度爬虫被禁止访问的问题,提升网站收录质量和速度。
<pre><code>
npm install hexo-baidu-url-submit --save
</code></pre>
在 站点配置文件 中添加如下代码:
<pre><code>
baidu_url_submit:
count: 5 ## 比如3,代表提交最新的三个链接
host: blog.tangxiaozhu.com ## 在百度站长平台中注册的域名
token: ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里
</code></pre>
为了主动推送链接,你还得在全局配置文件的deploy中添加配置:
<pre><code>
deploy:
- type: baidu_url_submitter
</code></pre>
GitCafe(解决百度爬虫被屏蔽的问题)
如果你对于国内是否能访问到或者搜索到你的博客不在意,那么你完全可以跳过这一步。
因为Github Pages屏蔽了百度爬虫的原因,所以在百度搜索引擎上你是搜不到自己博客的信息的,GitCafe不是唯一解决方案,但是我不想自己搭一个vps,所以在这种情况下,使用DNSPOD针对不同请求跳转不同平台是唯一的解决方法。
而且因为Gihub在国内访问也时好时坏的,所以让国内用户访问GitCafe也可以速度快一点,但是其实GitCafe的服务器也很坑爹,时不时就给你崩一下,不过自己暂时不想搭vps,就将就先用一下。
我这里只提供给大家一个解决方案,具体GitCafe Pages怎么操作,我这里就不做介绍,毕竟国内的平台,教程什么的非常齐全又易懂,这里讲一下当你搭好一个GitCafe之后,怎么与hexo以及dnspod结合起来。
首先在hexo的全局配置文件的deploy中添加Gitcafe的配置:
<pre><code>
deploy:
- type: git
repo: git@github.com:LinBinghe/linbinghe.github.io.git
branch: master - type: git
repo: https://git.coding.net/linbinghe/blog.git
branch: master
</code></pre>
这里gitcafe我使用的是https的方式,第一次提交时会让你自己输入用户名和密码。
接下来,在DNSPOD中,添加记录,将国内用户的请求转向pages.coding.me,这里非常坑,网上很多攻略都过时了,教程里面都是写gitcafe.io,其实gitcafe已经被coding收购了,这个地址早就失效了
我目前的配置如下,因为在家发现电信网络访问博客也时好时坏的,干脆把电信网络也单独拎出来:
<center>{% qnimg 3900981-5b21705fasasdfaaefebd.png %}</center>
RSS
RSS就是我博客右边边栏站点概览中显示RSS文字的东西。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用发布一个RSS文件。
这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。
可以通过以下命令进行安装
<pre><code>
npm install hexo-generator-feed --save
</code></pre>
安装完成后,在全局配置文件中添加相应配置:
<pre><code>
Extensions
Plugins: http://hexo.io/plugins/
RSS订阅
plugin:
- hexo-generator-feed
Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
</code></pre>
其中,feed是可选项,可配可不配。
最后,在你的主题配置文件中,添加RSS订阅链接即可。
<pre><code>
rss: /atom.xml
</code></pre>
音乐播放器
目前博客还没有添加,先写在这里,后续有空补上了再写。
急着加上的可以先看这篇文章:玩转hexo博客之next
打赏功能
目前也没有添加上,后续估计也不会添加,有兴趣的可以看这篇文章:为Hexo博客添加版权说明和打赏功能
自定义挂件
这个我自己没有尝试过,但是有在hexo你的博客中有看到,可以添加新浪微博小挂件等,具体的方法就是在主题目录下的layout/_widget/下,添加对应挂件的ejs文件,然后配置主题配置文件即可。
最近访客
这个其实是多说评论的一个拓展功能,我的博客没有加上去,有兴趣的可以看这篇文章:动动手指,给你的Hexo站点添加最近访客(多说篇)
其他
这里只介绍Next主题官方文档等前文提到的文档中没有的内容或者一些要点
目录默认全展开
~/themes/next/source/css/_custom/custom.styl 中添加以下代码:
<pre><code>
.post-toc .nav .nav-child { display: block; }
</code></pre>
修改链接文字样式
将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
themes\next\source\css_common\components\post\post.styl 添加以下代码:
<pre><code>
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
</code></pre>
选择 .post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式。
修改授权协议图标
在主题配置文件下找到creative_commons,该key对应的值就是授权协议的图片
小提醒
- 菜单icon的对应名称可以到Font Awesome网站上去查找对应的,具体网站是Font Awesome Icon
- 如果你想要使用网站副标题,也就是笔者博客的Knowledge as Action,则要在全局配置文件中的description后面设置
- 配置文件缺少空格会报错
- Algolia 搜索服务需要你每次发表新文章或者更改内容后使用hexo algolia命令进行index的更新
- 如果有的页面不想添加评论功能,那么如果你使用的是next主题,就可以在根目录/themes/next/layout/page.siwg下修改page.siwg这个文件,在categories相关的配置内容里面加上about的判断。
- 如需取消某个页面的评论,编辑该页面,按照md文件开头配置title等的方式,增加comments: false
总结
Hexo + Github Pages的方式来搭建博客非常简便,而且有大量可以供你自己定制的插件,也可以自己写html、css等来改变网站样式。
如果你有其他方面想定制的功能本文没有涉及的,可以先到我参考的文章以及那些官方文档中看看是否有,大多数功能其实都已经包含在里面了。
这个博客使用到现在,唯一不舒服的地方就是当需要多个环境下编写文章时就很不方便,你得有一个方法来把你的博客目录搬移到当前的环境下,而且还得先初始化hexo与git的环境。
目前是用oschina来放置我自己的博客所有文件,因为也就在家里和公司写文章,所以还好,但是后续应该会写一个脚步来做这个自动同步的事情,毕竟程序员还是懒一点比较好。
最近找到一个插件可以用来自动同步整个博客文件的,已经在上述的多环境撰文章节中说明了,现在唯一麻烦的地方就是换一台机子就需要初始化很多环境,之后还是会考虑用python写一个脚本来自动初始化换机或者重装系统后的环境初始化。
而且现在网站的SEO其实做的也不好,所以后续有时间也会持续做这块的内容,然后做个总结,毕竟也是一个值得学习的点。
参考
hexo你的博客
我的博客是如何搭建的(github pages + HEXO + 域名绑定)
玩转hexo博客之next
Hexo—正确添加RSS订阅
动动手指,不限于NexT主题的Hexo优化(SEO篇)
动动手指,NexT主题与Hexo更搭哦(基础篇)
为Hexo博客的每一篇文章自动追加版权信息
使用 Hexo 搭建博客的深度优化与定制
网友评论