如何部署在服务器上

众所周知，我们的网站如果就在本地启动的话，是没有办法被互联网上其他用户访问到的，所以必须挂到服务器上。这里有几种选择：

直接挂载到GitHub上（或码云上面）
购买阿里云、腾讯云等云服务器厂商的服务器进行挂在
（本站使用的）将项目托管到GitHub仓库里，并通过Vercel链接到GitHub仓库进行部署

这里比较推荐第三种，也是本站使用的方法。

首先第一种方案需要在本地Hexo g编译生成出public文件夹，然后将这个文件夹的内容上传到GitHub上才能用，比较麻烦。

并且，由于GitHub在国内访问并不稳定，尤其是某些运营商（没错，移动说的就是你）访问的又慢又不稳定，故最不推荐

其次，第二种方法，好处很多，既然用上了服务器，那么后端也可以考虑上了，之后的功能扩展也会变得轻松很多。

缺点就是，可能就是比较费钱，并且由于使用的是国内的服务器，将来域名需要备案。

最后，我要重点介绍一下第三种方法，先上架构图：

我的博客网站的架构图

简单说明一下思路

在GitHub上建一个仓库（建议设置成Private），作用同步本地的文件
注册Vercel账号（就用GitHub账号注册），点击导入GitHub仓库，选择之前创建的仓库。他会自动在Vercel上部署
最后在vercel中设置好域名以及在域名商那里做好域名解析，网站就可以正常访问了！

在写文章时以及网站中涉及到图片的地方，尽量使用图床（我有会员所以用的OneDrive，也可以使用例如七牛云等）

使用图床的好处是，图片一般属于比较消耗流量的资源文件，尽量不要直接走网站，否则访问量大了之后服务器吃不消

同时，图片也要做好压缩，可以有效减少资源加载时间

GitHub同步本地文件夹文件

该方案相比较前两个方案的好处是：

相比于GitHub，vercel走的是亚马逊云。实际测试下国内访问延迟低，以我家测试ping vercel.com延迟在90ms左右
并且，vercel不需要你在本地生成后上传，而是直接从你的代码仓库上同步后在云端自动部署，用户只需要专注于修改就行了，减少了用户操作。
相比于使用国内云服务商，vercel搭建个人网站完全免费，并且不需要网站备案（费时间14天左右）

最后总结一下，本解决方案，属于结合了第一和第二种方案的优点的折衷方案

如何增加一些新组件

添加评论

添加评论可以参考Hexo-Butterfly官方文档中关于：评论的描述，里面非常详细的例举了10种评论系统

本博客采用的是livere

添加搜索

搜索可以使用本地搜索，本博客使用的是Algolia插件，需要注册使用。

这个配置相当繁琐，可以参考：该博客自行配置：

注：
1
2
export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia
执行这两句时，需要在git bash中运行，否则cmd中会因为找不到export命令而报错

添加统计图表

本博客使用的图表来自于：使用 Charts 插件给 Butterfly 增加统计图表

在关于我页面中的发布日历展示

注：上述插件有明显的Bug，调试起来非常麻烦，可能会在后续更新中移除，建议各位寻找别的插件。故不推荐使用

添加RSS订阅

RSS(Really Simple Syndication)，是一种描述和同步网站内容的格式，基于XML的标准。

比起我们在平台上的各种订阅频道，RSS属于互联网早期的一种订阅方式。

简单来说，RSS的作用就是如果你想让用户关注你的网站，而又不需要时时刻刻到你网站上看看你更新文章没有。

就让用户使用一个RSS阅读器，然后将你的RSS订阅源添加进去。这样，当你更新文章的时候，用户在不打开你网站的前提下，通过RSS订阅器就能得知你更新了文章。

顺便说明一下，RSS相比于现在各大平台的订阅推送有什么不同

各大平台需要用户账号登陆后，才能看到自己订阅的内容是否有更新（很麻烦）

如果用户关注了多个平台，就需要每个平台都登陆一下看看订阅内容是否有更新（很分散）

同时，国内的产品经理们为了留住用户。不仅给你提供订阅消息，而且还会给你推送很多相关内容（无形中分散了注意力）

RSS干净无广告，而平台的订阅服务可能夹杂广告

具体的RSS我可能会单独写一篇文章来叙述，这里就不展开赘述了。

具体如何在博客中添加RSS订阅，可以通过这篇博客来操作：hexo博客安装RSS插件

RSS订阅图标

添加天气

我使用的和风天气插件。

具体的操作步骤可以参考这篇博客：为网站添加天气小部件（基于Hexo框架+Butterfly主题）

值得注意的是，关于城市选择一定不要选则自动，要改成选择。

一定要选成选择

我原先以为，自动是那种根据访客的IP地址自动获取他的城市位置。

但是，是我天真了。他是让你手动选的。而且不知道是不是因为Bug的原因，每次刷新页面都需要手动设置一遍

体验极差！！

于是我在原有的代码上，加了一些自己的东西，变得稍微灵活了一些~

首先要在原本的代码文件中加入city这个选项：

WIDGET = {
    "CONFIG": {
      "modules": "01234",
      "background": "5",
      "tmpColor": "FFFFFF",
      "tmpSize": "16",
      "cityColor": "FFFFFF",
      "citySize": "16",
      "aqiColor": "FFFFFF",
      "aqiSize": "16",
      "weatherIconSize": "24",
      "alertIconSize": "18",
      "padding": "10px 10px 10px 10px",
      "shadow": "0",
      "language": "zh",
      "fixed": "true",
      "vertical": "top",
      "horizontal": "left",
      "left": "120",
      "top": "10",
      "city": "不是城市名称，而是城市ID",
      "key": "填写你自己的KEY"
    }
  }

但是这个"city": "",填写的不是城市名称，而是他的一个编号。这个编号需要去他的一个API接口中获取

于是我为了获取便捷，在上述文件中添加了一段代码，也是整个博客系统中唯一需要手动写的代码：

var httpRequest = new XMLHttpRequest();
var cityName = document.cookie == ""?"你设定的默认的城市，例如：北京":document.cookie;//cookie中没有城市名，便采用默认城市
// console.log(cityName);
httpRequest.open('GET','https://geoapi.qweather.com/v2/city/lookup?location='+cityName+'&key=你自己的key',true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      var json = httpRequest.responseText;//获取到json字符串，还需解析
      WIDGET.CONFIG.city = "CN" + JSON.parse(json).location[0].id;
      // console.log(WIDGET.CONFIG.city);
}};
WIDGET = {
    "CONFIG": {
      "modules": "01234",
      "background": "5",
      "tmpColor": "FFFFFF",
      "tmpSize": "16",
      "cityColor": "FFFFFF",
      "citySize": "16",
      "aqiColor": "FFFFFF",
      "aqiSize": "16",
      "weatherIconSize": "24",
      "alertIconSize": "18",
      "padding": "10px 10px 10px 10px",
      "shadow": "0",
      "language": "zh",
      "fixed": "true",
      "vertical": "top",
      "horizontal": "left",
      "left": "120",
      "top": "10",
      "city": "不是城市名称，而是城市ID",
      "key": "填写你自己的KEY"
    }
  }