Hexo搭建个人博客 (二) 域名、图片托管和SEO优化

博客优化

一. 前文

当前搭载在github上的hexo博客在国内使用时访问速度实在是太慢了,查阅了一些网络上分享的优化经验,自己尝试了一下一些方法,这里记录试用后保留下的部分。

为了优化访问速度等博客问题,主要做了如下的优化措施:

  • 购买域名,双挂方案,国内访问 coding Pages ,境外访问 GitHub Pages
  • 图片资源存储到七牛云上。
  • 搜索引擎优化,收录自己的博客站点。

二. 申请域名

首先到万网等网站申请购买一个域名,然后配置域名解析。购买和配置步骤简单,可以省钱买一个 .top 之类的域名,第一年只要5块钱。

  1. 购买完成后,进行实名认证,不然可能会无法访问。

  2. 进入域名解析管理界面。

  3. 添加一个解析。

最终如图:

三. 同时托管到 GitHub 和 Coding

GitHub不允许百度的爬虫爬取内容,所以我们的项目如果是托管在GitHub上的话基本是不会被百度收录的。因此需要同时托管到coding,然后在做解析的时候海外的 ip 指向到GitHub,国内的或者说百度的直接指向Coding。

步骤:

  1. 首先我们先要创建一个coding账号并且在coding上创建一个项目,必须要是公开项目,私有项目是没有page服务的,项目名称可以随意起,最好和用户名一致。

  2. 将hexo博客同步到新创建的仓库中。

第一次使用coding需要使用ssh,方法和之前github是一样一样的,将ssh公钥复制到coding上 。在coding中添加过ssh公钥之后我们需要修改hexo根目录下的配置文件,官方要求配置格式如下。

1
2
3
4
5
6
deploy:
type: git
message: [message]
repo:
github: <repository url>,[branch]
gitcafe: <repository url>,[branch]

配置举例如下,可依照自己项目修改。

1
2
3
4
5
6
7
8
# Deployment
deploy:
- type: git
repo:
github: git@github.com:LAILAIWA/LAILAIWA.github.io.git,master
coding: git@git.coding.net:linyishui/linyishui.git,master
- type: baidu_url_submitter
message: Site update at {{ now("YYYY-MM-DD HH:mm:ss") }}

完成之后在git bash 中输入。

ssh -T git@git.coding.net

挂到coding上后,发现coding会强制增加一个跳转页面,强迫充钱或者挂广告,看了下价格不是我目前能支付的起的,只能先忍受跳转或是老老实实的在博客首页挂上广告。

四. 增加七牛图床

增加七牛图床就是要将我们电脑上的图片上传至七牛,然后获得外链,在我们使用md写博客的时候直接插入外链。

在登录成功之后,点击对象存储。

上传成功之后,只要点击图片对应行眼睛,获取外链地址,然后把博客中需要图片的地方填入外链地址就可以了。

因为收费和使用方式等原因已弃用七牛图床,迁移到腾讯云-对象存储,配置流程不做赘述,只须转移文件并修改引用图片链接即可。

五. SEO 优化

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

5.1 让百度收录你的站点

我们首先要做的就是让各大搜索引擎收录你的站点,我们在刚建站的时候各个搜索引擎是没有收录我们网站的,在搜索引擎中输入 site:<域名> ,如果我们的网站并没有被百度收录。我们可以直接点击“网址提交”来提交我们的网站。

5.2 验证网站所有权

登录百度站长平台,只要有百度旗下的账号就可以登录,登录成功之后在站点管理中点击添加网站然后输入你的站点地址,建议输入的网站为www开头的,不要输入github.io的,因为github是不允许百度的spider爬取github上的内容的,所以如果想让你的站点被百度收录,只能使用自己购买的域名。

在选择完网站的类型之后需要验证网站的所有权,验证网站所有权的方式有三种:

  1. 文件验证。
  2. html标签验证
  3. cname解析验证

使用哪一种方式都可以,都是比较简单的,但是一定要注意,使用文件验证文件存放的位置需要放在source文件夹下,如果是html文件那么hexo就会将其编译,所以必须要加上的 layout:false ,这样就不会被hexo编译。(如果验证文件是txt格式的就不需要),其他两种方式也是很简单的,推荐文件验证和cname验证,cname验证最为简单,只需加一条解析就好。

5.3 生成网站地图

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎。

  1. 安装sitemap插件:

    1
    2
    3
    $ npm install hexo-generator-sitemap --save  

    $ npm install hexo-generator-baidu-sitemap --save
  2. 修改博客配置文件, 在根目录配置文件中修改url为你的站点地址:

    1
    2
    3
    4
    5
    # URL
    url: YOUR URL
    root: /
    permalink: :title.html
    permalink_defaults:

执行完之后就会在网站根目录生成 sitemap.xml 文件和 baidusitemap.xml 文件,可以通过cherryblog ,查看该文件是否生成,其中 sitemap.xml 文件是搜索引擎通用的文件,baidusitemap.xml 是百度专用的sitemap文件。

5.4 向百度提交链接

然后我们就可以将我们生成的sitemap文件提交给百度,还是在百度站长平台,找到链接提交,这里我们可以看到有两种提交方式,自动提交和手动提交,自动提交又分为主动推送、自动推送和sitemap。

5.4.1 如何选择链接提交方式?

  1. 主动推送:最为快速的提交方式,推荐您将站点当天新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录。
  2. 自动推送:最为便捷的提交方式,请将自动推送的JS代码部署在站点的每一个页面源代码中,部署代码的页面在每次被浏览时,链接会被自动推送给百度。可以与主动推送配合使用。
  3. sitemap:您可以定期将网站链接放到sitemap中,然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap,对其中的链接进行处理,但收录速度慢于主动推送。
  4. 手动提交:一次性提交链接给百度,可以使用此种方式。

一般主动提交比手动提交效果好,这里介绍主动提交的三种方法,从效率上来说:主动推送>自动推送>sitemap。

5.4.2 主动推送

首先安装插件。

1
$ npm install hexo-baidu-url-submit --save

然后再根目录的配置文件中新增字段。

1
2
3
4
5
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: www.cherryblog.site # 在百度站长平台中注册的域名
token: 8OGYpxowYnhgVsUM # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里

再加入新的deploye。

1
2
deploy:
- type:baidu_url_submitter

这样执行 hexo deploy 的时候,新的链接就会被推送了。

5.4.3 设置自动推送

在主题配置文件下设置,将 baidu_push 设置为true:

1
2
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

然后就会将一下代码自动推送到百度,位置是 themes\next\layout_scripts\baidu_push.swig ,这样每次访问博客中的页面就会自动向百度提交sitemap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.baidu_push %}
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

将我们上一步生成的sitemap文件提交到百度就可以了~

5.5 让 Google 收录你的站点

相比于百度,google的效率实在不能更快,貌似十分钟左右站点就被收录了,其实方法是和百度是一样的,都是先验证你的站点所有权,然后提交sitemap google站点平台,然后就是注册账号、验证站点、提交sitemap,一步一步来就好,过不了过久就可以被google收录了 。

5.6 优化你的 URL

seo搜索引擎优化认为,网站的最佳结构是用户从首页点击三次就可以到达任何一个页面,但是我们使用hexo编译的站点打开文章的url是:sitename/year/mounth/day/title 四层的结构,这样的url结构很不利于seo,爬虫就会经常爬不到我们的文章,于是,我们可以将url直接改成sitename/title的形式,并且title最好是用英文,在根目录的配置文件下修改permalink如下:

1
2
3
4
url: YOUR URL
root: /
permalink: :title.html
permalink_defaults:

5.7 其他 SEO 优化

seo优化应该说是一个收益延迟的行为,可能你做的优化短期内看不到什么效果,但是一定要坚持,seo优化也是有很深的可以研究的东西,从我们最初的网站设计,和最基础的标签的选择都有很大的关系,网站设计就如我们刚刚说的,要让用户点击三次可以到达网站的任何一个页面,要增加高质量的外链,增加相关推荐(比如说我们经常见到右侧本站的最高阅读的排名列表),然后就是给每一个页面加上keyword和描述。

在代码中,我们应该写出能让浏览器识别的语义化HTML,这样有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;并且对外链设置nofollow标签,避免spider爬着爬着就爬出去了(减少网站的跳出率),并且我们要尽量在一些比较大的网站增加我们站点的曝光率,因为spider会经常访问大站,比如我们在掘金等技术社区发表文章中带有我们的站点,这样spider是很有可能爬到我们中的站点的:

  • 网站外链的推广度、数量和质量
  • 网站的内链足够强大
  • 网站的原创质量
  • 网站的年龄时间
  • 网站的更新频率(更新次数越多越好)
  • 网站的服务器
  • 网站的流量:流量越高网站的权重越高
  • 网站的关键词排名:关键词排名越靠前,网站的权重越高
  • 网站的收录数量:网站百度收录数量越多,网站百度权重越高
  • 网站的浏览量及深度:用户体验越好,网站的百度权重越高

六. 优化布局样式

6.1 更换字体

打开文件 /blog/themes/next/source/css/_variables/base.styl ,修改字体大小:

1
2
3
4
5
6
7
// Font size
$font-size-base = 14px
$font-size-base = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit'
$font-size-small = $font-size-base - 2px
$font-size-smaller = $font-size-base - 4px
$font-size-large = $font-size-base + 2px
$font-size-larger = $font-size-base + 4px

6.2 优化表格宽度

默认表格样式为每列等宽,很影响美观和效果:

可以直接在表格所在md文件中添加CSS样式调整:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
table th:nth-of-type(1){
width: 10%;
}
table th:nth-of-type(2){
width: 10%;
}
table th:nth-of-type(3){
width: 10%;
}
table th:nth-of-type(4){
width: 10%;
}
table th:nth-of-type(5){
width: 60%;
}
</style>

修改效果:


参考:

🔗 hexo高阶教程:想让你的博客被更多的人在搜索引擎中搜到吗?
🔗 Use utterances as Hexo Next theme comments
🔗 打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
🔗 这应该是最全的hexo博客搭建以及next美化教程
🔗 hexo-blog-encrypt