tool -- hexo 博客搭建教程进阶

1. 前言

因为要使用 hexo 搭建个人博客,而自己作为一个 code 路上的初学者,必然要对这么有趣的项目进行一些分析。掌握一些进阶的手段,才算是一个合格的 coder

2. 独立域名

作为一名程序员,必须有自己的域名,才算帅。
下面就让我从最简单的方式一步步教大家注册域名。
包括 SSL , CDN 等等 一站式配齐。
注: 以下所有的方式都是以 github pages 为准。

2.0 基本概念

  1. 名词介绍:
    1. 域名提供商 : 在哪里购买,即哪里是域名提供商。
    2. 域名解析商 : 提供 nameserver 服务器的厂家。
    3. dns解析 : 请参看我的 killWeb – dns 介绍
  2. 流程简介:
    1. 首先是购买域名 – namesilo
    2. 然后是域名解析 – cloudflare
    3. 最后是上传 cname

2.1 域名购买

可以看 这里的推荐
这里选择最便宜的 namesilo
1、首先点我打开namesilo网站, 注册一个账户。

然后继续填写相关信息,因为大家都是在国内使用,所以尽量如实填写

2、登陆刚创建的账户,在domain search框中输入你想买的域名,点击search。

3、选中你要买的域名后缀,点击REGISTER CHECKED DOMAINS进行注册。

4、进入购买页面,设置隐私保护和购买几年,在promotion code输入优惠码 vpsss,点submit即可优惠1USD。com域名默认8.99USD,使用优惠码之后变成7.99USD,设置完了以后点击continue。。

5、进入到付款页面,有多种付款方式可以选择,我们使用最方便的是支付宝,选择支付宝输入支付宝账号,点击GO就跳转到支付宝付款页面,付款后会自动跳转到namesilo注册成功提示页面,稍后你的注册邮箱会收到namesilo的邮件。

2.2 域名解析

这里选择免费的 cloudflare 。
自带 ssl, cdn , 并且可以抵御 ddos 攻击。
1、 打开 cloudflare 官方网站 进行注册

2、 注册成功,可以登陆打开控制台


3、 选择 DNS, 然后等待导入 dns 记录,这里正常情况下,你是只有几个 namesilo 自带的 dns 记录的,可以直接将所有的 dns 记录删去。然后添加两个 cname 记录。

  1. 一个是 3dot141.com , 指向 3dot141.github.io
  2. 一个是 www , 指向 3dot141.github.io

    cname 记录与其他记录的区别,可以看我博客里的 killWeb – dns 介绍
    4、 回到 namesilo , 更改域名解析商 nameserver


    这里的域名服务器 与 cloudflare 提供的一致。

    5、 回到 本地的 blog 文件夹, 在 blog/source 下,新建一个 cname 文件。如下图

    写入 3dot141.com, 然后保存,上传。

2.3 开启 ssl

1、 点击进入 Crypto

2、 等待状态的转化

刚注册的域名不是这样的状态, 大约要等待 1 小时左右,才会成为激活状态。
至于选择什么样的 方式, 这里有 full, flexible, full(strict) 三种可选,推荐 full ,一劳永逸。

2.4 优化速度

1、 开启 cdn
dns 下,可以看到 橘红色的 云标志,代表 cdn 开启。 灰色云标志,代表 cdn 关闭。

2、 开启 js,css,html 文件压缩
speed 下,可以看到第一个 Auto Minify. 点选全部

3、 开启 Enable Accelerated Mobile Links
同样是 speed 下,可以看到 如下图, 开启后,可以加快 手机端的访问速度。

3. 搜索优化

其他的我就不多讲了, next 主题的网站上基本都有,我说一些,网站没有的东西。

3.1 seo优化

SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

3.2 谷歌优化

3.2.1 收录网页

登陆 google 站点平台
1、 先添加网站

2、 然后按照步骤操作即可。

首先下载文件,然后将文件放入 \blog\source\ 中。

然后 部署 hexo ,将文件上传至 github page 中,等待几分钟,访问相关的网站进行确认。
这里有个问题是,需要在文件中,加入以下代码

1
2
3
4
---
layout: false
---
google-site-verification: google82820b77d14c3755.htm

google-site-verification….是原先文件中的内容,要加入 layout:false 才能够不被再次编译成 hexo 静态网页。
3、 验证成功。等待收录即可,一般在一天左右。

3.2.2 提交站点

安装sitemap 插件

1
npm install hexo-generator-sitemap --save

然后重新部署,会生成相应的 sitemap.xml 文件。

将生成的 sitemap.xml 文件加入 google 站点工具中。

3.3 百度优化

github 不允许百度的爬虫,所以如果使用 github 上是不会被百度收录,所以百度优化这一部分,我就放弃了,因为本身,我这个博客的属性,只是对我知识的一个总结。太多的东西,只会增加我的负担。

注: 其实,这个也是有解决办法的,不过需要使用多线路解析,然后同时部署 coding 与 github。 然后对 coding 进行优化,这一部分的内容,之后我会进行说明。

3.4 url优化

seo搜索引擎优化认为,网站的最佳结构是用户从首页点击三次就可以到达任何一个页面,但是我们使用hexo编译的站点打开文章的url是:sitename/year/mounth/day/title四层的结构,这样的url结构很不利于seo,爬虫就会经常爬不到我们的文章,所以我们可以修改我们的 url 连接。

  1. 安装 插件

    1
    npm install hexo-abbrlink --save
  2. 在站点配置文件中查找 permalink, 更改为

    1
    permalink: blogs/:abbrlink.html
  3. 在站点配置文件中添加如下代码:

    1
    2
    3
    4
    # abbrlink config
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
  4. 可选择模式:

    1
    2
    3
    4
    crc16 & hex
    crc16 & dec
    crc32 & hex
    crc32 & dec

4. 个性优化

关于一些简单的东西,比如访问次数,字数统计等等简单的插件使用,next 官网上都有详细的教程,我就不献丑了。

4.1 点击桃心效果

在网址输入如下

1
http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然后将里面的代码copy一下,新建love.js文件并且将代码复制进去,然后保存。将love.js文件放到路径/themes/next/source/js/src里面,然后打开\themes\next\layout_layout.swig文件,在末尾(在前面引用会出现找不到的bug)添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

4.2 文章加密访问

打开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>

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

4.3 Daovoice 匿名沟通

首先在 daovoice 注册账号,邀请码是0f81ff2f,注册完成后会得到一个 app_id :

记下这个 app_id的值,然后打开/themes/next/layout/_partials/head.swig,写下如下代码:

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

接着打开主题配置文件,在最后写下如下代码:

1
2
3
# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

重新 hexo g ,hexo s 就能看到效果了。
安装成功后可以在DaoVoice 控制台上的聊天设置里设置聊天窗口样式,附上我的设置

4.4 妙传图片至七牛云

秒传图片到七牛云并展现在博客中
在markdown中写blog的朋友,想必这点是最烦恼的吧,一般来说都要手动上传图片到七牛云,再把链接写到markdown中。逛了逛社区,有人用phthon实现一个自动上传的脚本,但是我觉得还不是特别方便,这时在github上找到一个一键贴图工具qiniu-image-tool,它支持本地文件、截图、网络图片一键上传七牛云并返回图片引用。Mac 是基于 Alfred 的,其 windows 也有相应版本windows版本。

按照其要求配置好以后,用截图软件截图后,或者本地图片后 copy,然后直接按设置好的 command+option+v,然后在图片成功上传到七牛云图床上,剪贴板上也有相应的连接。

4.5 多终端编辑

上传

  1. 删除主题下的 .git 文件, 以我为例,就是 themes/next/.git
  2. 创建分支 hexo 并切换为默认
  3. 编辑目录下的 .gitignore 文件。
  4. 回到 blog 的源文件目录下,
    1. git init
    2. git add -A
    3. git commit -m "hexo source code"
    4. git branch hexo
    5. git remote add origin git@github.com:3dot141/3Dot141.github.io.git 注意,这里把相应自己的 远程仓库 地址输入即可。
    6. git push origin hexo -f

下载

  1. 先下载 node.js , 然后安装 hexo
  2. git hexo 源码。
  3. 编辑,之后再次上传即可。
  4. 不要忘了将修改后的源码再次上传。

5. 总结

  1. 修改外观样式
    themes/next/layout/*/*.swig
  2. 添加 js
    themes/next/source/js/src/*/*.js 添加 js 文件,然后在 themes/next/layout/_layout.swig 中加入 标签。
  3. 添加 css
    thems/next/sorce/css/_custom/custom.styl 中加入相关 css 语法。
0%