Hexo自动生成的HTML文件名

我们在使用Hexo框架生成静态博客时，其实是将你写好的.md文件输出成HTML文件进行渲染，其中HTML的文件名称就是.md的文件名称。

通常是把.md文件命名成中文的甚至是文章的标题，那么生成HTML文件时也就是中文的文件名了。

这样就会带来一个比较麻烦的问题就是，url的链接过长，不利于记录和同步，而且对搜索引擎不友好。例如 什么样的问题应该使用动态规划 这段中文url就编译成了 %E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%E9%97%AE%E9%A2%98%E5%BA%94%E8%AF%A5%E4%BD%BF%E7%94%A8%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/

我们可以在Hexo生成HTML文件时，修改HTML的命名策略，即将原始的命名方式改为我们自定义的命名方式？

Hexo的根配置文件_config.yml，打开它，修改配置文件

我把他改成这样了，page是目录，执行 hexo g 会在public下生成，我让生成的HTML文件都放在page下， :fileName.html 是HTML的命名格式，其中 fileName 是个变量。这个变量从哪来？

为保证文件名在文件的名字不变，我们把文件名和 Title 关联起来，然后通过 base64 进行编码，这样只要title不变我们文件也不变，同时这个改变最好在进行文档生成就执行，所以我们需要把该功能做成插件 hexo-abbrlink-base64 。

源码如下：

生产的文件格式如下：

使用abbrlink之后，文章的url就会变得非常简洁，例如 https://XXXXXX/pages/5S50ll2222.html

有一些插件会根据标题的拼音、翻译生成permlink，但是我感觉这些都不是好的做法。事实上url不宜太长，将一句话放在url中并不一定增强所谓的seo优化，反倒导致其使用起来相当不便。

就像许多博客平台一样，为每篇文章分配短小且唯一的url即可，无论是看起来还是用起来都很方便。

    docsify可以即时生成文档网站，它可以智能地加载和解析您的Markdown文件并将其显示为网站，但是它不会生成静态html文件, SEO 不够友好。使用简单，支持ie10以上浏览器。官方推荐部署到GitHub Pages上，它也支持服务端渲染。因为服务端渲染麻烦（我不会...）和浏览器不能兼容ie9的原因我放弃了他选择了vuepress，但总的来说使用起来还是很方便，界面也可以，还是比较值得推荐的。

    官方文档： https://docsify.js.org/

    Vue 驱动的静态网站生成器。跟Docsify一样也是以Markdown为中心的项目结构，但是它可以为每个页面预渲染生成静态的html页面，可以通过vue去自定义主题，浏览器支持ie9及以上浏览器，上手程度相对于Docsify要难点，但是部署简单，功能也蛮强大的我最终也选择了它。吐槽一下：左侧导航只支持3级栏目导航（h1-h3），没有Docsify灵活。

    官方中文网： https://www.vuepress.cn/

    Docute和Docsify差不多，但是它不支持ie...,如果不考虑ie兼容性问题的可以参考一下

    官方中文网： https://docute.org/zh/

    也是使用Markdown解析文章，能够兼容ie9,但是它是一个博客框架，它主题样式不太适用于帮助文档，所以我没有考虑它，单从文档网站的角度的话还是推荐使用的，兼容性比较好，上手度简单。

    官方链接： https://hexo.io/

    GitBook是一款文档编辑工具，单据说更像是一个现代的文档平台，无法实现个性化部署，所以暂时没有考虑。

    官网链接： http://caibaojian.com/gitbook/

    Nuxt.js 是一个基于 Vue.js 的通用应用框架，vuepress能做的，它理论上能做，但是Nuxt 是为构建应用程序而生的，VuePress则专注以内容为中心的静态网站，所以就文档网站我更推荐VuePress

    官网链接:  https://www.nuxtjs.cn/

为了让博文可以被Google搜索到，需要配置站点地图（Sitemap）

在开始之前需要注意，本文适用于 NexT主题 ，其他主题的设置可能会有不同。本文只适用于Google，Baidu的坑待填。

修改 主题配置文件 （ themes/next/_config.yml ）：

在终端中使用npm安装sitemap插件：

生成静态文件

此时在public目录下可见 sitemap.xml ，即已完成站点地图的生成，同时可在个人博客主页见到站点地图标签，点击可以看到xml文件。

首先你需要一个谷歌账号，然后使用 Google Search Console服务 ，点击立即使用！

接下来你可以看到如下的验证界面

选择第二种，填写你的Github Page主页地址后点击继续，记得地址前面的协议 https:// 别忘了

随后你可以看到如下几种方式用以验证你对站点资源的所有权

打开 主题配置文件 （ /themes/next/_config.yml ），找到如下片段：

在Google Search Console选择HTML标记验证，Google会提供如下的元标记

将 content= 后面的xxxxx填到 主题配置文件 的 google_site_verification: 之后，记得冒号后需留一空格，同时不要忘记引号：

保存文件，在 终端 中生成并部署Hexo静态文件

部署成功后，回到Google Search Console，点击验证、完成。

来到Google Search Console，点击左侧边栏中的网址检查，输入你的Github Page主页。

还是Google Search Console，点击左侧边栏中的 站点地图 ，添加新的站点地图，在主站地址后面填入 sitemap.xml ，即与前面生成的站点地图文件名称相同！

一开始，Google有可能显示无法获取站点地图（至少我这里情况如此），我等待了大约24h，再次添加了同名的站点地图，即显示成功，如图

有许多情况可能导致获取站点地图失败，需要仔细分析原因，记得检查站点地图的地址名称是否正确，包括大小写。

如果想要让更多的人看到你的博客，建议在你关心的社区（比如呀）发布你的文章，同时，建议参见 搜索引擎优化SEO 。同时，需要优化桌面端和移动端的性能以提供更好的用户体验。SEO和优化性能大概是个很深的坑，以后有机会慢慢填