本文篇幅较长，涉及的面较广，通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章，之后闲时再细细阅读，个人预览DEMO，有关文中具体涉及到的工具大家可以公众号《云爬虫技术研究笔记》回复关键词“博客”获取“一键图床工具”和“无损压缩工具”，可以查看原文获取更好的阅读体验。

”

必读前言

“个人博客”这一名词从很早前就广为人知了，对程序猿来说，“个人博客”也可以算是程序员们的“私人乐园”，让各位码农们可以在自己的私人博客里放飞自我。而搭建“个人博客”的方式也是五花八门，例如：

博客搭建方式

1. 可以利用现成的博客社区，例如CSDN、知乎等等；

2. 利用熟悉的语言，自己开发前后端，再把项目部署到私人服务器上；

3. 利用现成的博客构建框架，结合第三方的平台进行部署，并借由第三方平台维护；

当然，每种方式都有自己的优缺点：

第三方博客社区的优缺点

博客社区有极大的读者流量，并且做好了SEO优化，提供了现成的写作工具和数据分析报告等等；但是缺点是不够自由，像知乎专栏那样千篇一律的样式；像CSDN逼迫不登录就不能浏览文章的恶心人的限制；像。。。好吧~~被这些网站的约束打败了。。。

自建服务器全栈开发博客

自己大包大揽，拥有极大的权限，想怎么改就怎么改，当然~~只要你会。但是苦的是要服务器，要学前端框架，学后端框架，学。。。好吧，懒人党表示拒绝！

最后是利用现成的博客构建框架，搭建个人博客的框架是一代又一代的更换，从最早的基于Php开发的WordPress、到之后的基于Ruby开发的Jekyll、再到近几年凭借部署方便，编译速度快等特性而迅速火起来的基于Node开发的Hexo和基于Go开发的Hugo，都是让人很容易上手，并且可以结合国外的Github平台以及国内的码云平台进行部署，熟练的话简直可以说10分钟就部署好自己的博客，真的是懒人党、伸手党的福音。当然，缺点也是有的，没自建博客那么高的自由度，没博客社区那么好的优化程度，但是转念一想，结合还算可以的自由度再加上我们自己简单的优化也还过得去。

好！看完以上的分析，我们就打算使用现成的博客框架来做，其实网上关于每个框架的教程都比较多，但是更多的是关于如何从0到1一步步搭建完博客的流程，而没有介绍搭建完博客的后续，此处给各位点到即止的作者一个差评！来个疑问多连！

壹伴编辑器

搭建完博客就摆着吗？

不做图片、Js脚本加载优化吗？

不做SEO优化吗？

不介绍如何自定义开发吗？

嗯！对，相信很多人在搭建完博客之后也会有同样的疑问，那么这篇文章就给你满意 的答案，我不会再重复那些搭建步骤，大家可以自行搜查教程哈，本文着重讲解如何搭建博客生态，提升博客的逼格！再次提醒：

本文篇幅较长，涉及的面较广，通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章，之后闲时再细细阅读。

话不所说，我们现在就开始从以下几个点入手(PS：为什么要选择Hexo呢？在如今Hugo以强劲性能称霸的时代环境之下，Hexo虽然性能差点，但是也是基于动态语言Node开发，相比于Jekyll还是有很大提升的，不过对我来说，最主要还是Hexo的生态中各种组件和模板比较丰富，对我这种对UI要求严格的人来说，Hexo是我不能拒绝的！)

1. 模板选择

2. 模板定制化修改

3. 网站SEO

4. 代码优化

5. 优化网站加载速度

6. Github+Coding国内外双线部署

7. 自建CDN资源

8. 网站预加载JS脚本

9. 快捷图床工具

原来的主题没有404页面，我们加一个。我们可以根据Hexo的语法新建个404的目录：

然后我们可以在source/404/下编辑index.md文件

这样我们就完成了一个增加了404的功能，如果我们自己需要额外定制404的样式，可以参考404模板之家，我也是刚刚知道竟然还有这种网站。

写文章的时候，想一段BGM怎么办？

• 首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在地址栏拿到音乐ID号

• 然后通过下面网址：http://music.163/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID号，每一首歌我们只需要换掉这个ID号就行了,就相当于每一首的外链了

• 过去的程序员写文章可能是为了让自己做些技术积累，每隔一段时间可以总结自己的技术。不过如今自媒体发展迅速，我们在沉淀技术的同时当然也需要让更多人了解自己，在技术圈里出点小名气~~，那如何能够让更多人知道自己呢？SEO就是一个需要了解的东西了，SEO也就是搜索引擎优化，指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化，换句话说相当于网站推广，网站推广是一个比较烦人的事情，特别是对于专心搞技术的来说，可能就不是很擅长，所以下面教大家两个比较简单的SEO技巧。

  查看百度是否收录你的站点

  • 文件验证。

  • html标签验证

  • CNAME解析验证(推荐使用)

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

  安装sitemap插件

  修改博客配置文件

  为什么要生成网站地图呢？主要的原因是网站地图表示了你的博客网站的结构，例如某一分类下面哪些文章等等，也是方便百度爬虫去爬取你的时候尽可能覆盖你想要被爬取的所有文章，便于他们收录，不过我们下面会讲我们将为百度主动提交链接，这样的话，网站地图也显得不是那么重要。

  向百度提交链接

  一般主动提交比手动提交效果好，这里介绍主动提交的三种方法

  从效率上来说：

  我们下面将会具体操作主动推送

  设置主动推送 安装插件hexo-baidu-url-submit

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

  再加入新的deploy：

  各种不同的推送反馈字段说明在这里查看,一般来说,推送失败基本都是地址不相符造成的,我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中的地址对比看是否一样即可。

  其他的搜索引擎类似于Google、搜狗、360搜索等等，不过一般还会Baidu和Google对于大多数程序员来说使用频率较高，因此，只需要做这两个搜索引擎的收录就行了。

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

  方案一：

  我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根

  目录的配置文件下修改permalink如下：

  方案二：

  使用插件优化url

  插件hexo-abbrlink实现了这个功能，它将原来的URL地址重新进行了进制转换和再编码。

  安装hexo-abbrlink。

  配置博客根目录下的_config.yml文件。

  运行hexo clean和hexo g命令来重新生成文件看看，可以清楚的看到，URL结构成功变为了3层。

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

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

  • 网站外链的推广度、数量和质量

  • 网站的内链足够强大

  • 网站的原创质量

  • 网站的年龄时间

  • 网站的更新频率(更新次数越多越好)

  • 网站的服务器

  • 网站的流量：流量越高网站的权重越高

  • 网站的关键词排名：关键词排名越靠前，网站的权重越高

  • 网站的收录数量：网站百度收录数量越多，网站百度权重越高

  • 网站的浏览量及深度：用户体验越好，网站的百度权重越高

  代码优化主要是想要让我们的代码块显示行号和整体复制，这两点对于读者在浏览文章以及复制代码的时候都是很关键的两点，所以我们也要进行优化，由于代码高亮插件prism_plugin的样式没有行号显示和代码块整体复制功能，不是很方便，为了优化观感和易用性，我们可以对其进行修改：

  我们在配置文件.yml中找到prism_plugin配置项

  line_number: false(# default false)

  改为true，开启行号，但是在我们这个matery主题中中是无效的，有bug需要改一下matery.css样式参数,在第115行位置将：

  改为

  注释掉紧接着的code代码块里面的font-size项，如下：

  优化网站图片加载的速度的通用方法大概就是两种：第一种就是就是使用图片懒加载，Hexo的插件中已经有实现该功能的插件了--也就是hexo-lazyload-image，hexo-lazyload-image的作用原理是讲你博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时(也就是图片在窗口中完全可见时)，他会有一段js用data-origin的内容替换src，打到懒加载的目的。

  具体的使用方法是在博客根目录配置.yml文件加入对应字段，如下：

  这里我们介绍一个工具，Gulp它是复制前端框架控制流的构建工具，作为流程工具，它集成了很多使用的功能，我们这里就使用它来做代码压缩，以提升网页加载速度。

  首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。

  接下来在博客的根目录下新建gulpfile.js文件，并复制下面的内容到文件中。

      以上就是本篇文章【个人博客页面源代码_2019年末，来一发基于Hexo自建博客生态指南】的全部内容了，欢迎阅览 ！ 文章地址：http://www78564.xrbh.cn/quote/27271.html 
       动态      相关文章      文章      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多