折腾之网站篇

slug
2022-003
status
Published
tags
archive
summary
该文介绍了如何部署网站、CDN的配置、个人导航页、SEO优化等内容。强调了适合自己的才是最好的,同时提醒注意站点备份、数据库备份和服务器快照。
type
Post
date
Jul 15, 2022
Kia ora!
在进入正题之前,先说点闲话。您知道「Kia ora」是什么意思吗?
「Kia ora」是新西兰的毛利语中,它直译为“拥有生命”或“健康”,希望生命的精髓落在(被打招呼的人)他们身上。它用作与“嗨”,“你好”或“再见”等价的非正式问候或告别,并可以用作类似于“欢呼”的表示感谢的方式。「Kia ora」用拼音来标注发音大致是「keya-ou-rua」。
好了,我们进入正题。
自从入手了极空间新Z4后,我就开始了折腾。除了布置NAS外,我又重新开始捣鼓我的博客站点,除了一些优化,与腾讯云有关的配置外,还把目光从Typecho投到了Wordpress上。当然,结果如您所料,虽然经过一番折腾,我还是坚守在了Typecho上。好了废话不多说,我来说一说的折腾网站的心得吧。

下载站

布置完NAS,我很快注意到了与qbittorrent搭配使用的资源下载站,奈何有一些站点我无法打开,能打开的也无法免费注册,抱着试一试的心态询问了好友,小伙伴邓邓大义援手了我两个邀请码,让我也能够进入下载站的世界里玩耍。不得不感慨一句,互联网的世界真的是太奇妙了。这一部分内容呢,不多说,懂的自然懂。

博客优化

说实在的,本身我就是用的handsome主题,一个非常美观且简约的Typecho主题,实际上作者也还是给了如我一般不懂代码的小白使用者很大的自定义权限。下图就是主题作者给的演示页面,想了解或者购买该主题,点击链接即可。

首页头图悬停放大

我首先瞄准的是文章头图。忘记哪一个版本里头图还可以有弧度,现在都是四四方方了。那么退而求其次,让头图动一下,也让网站整体看上去没有那么板正。操作也非常非常简单。
进入handsome主题管理页面后,在主题设置-开发者设置-自定义css中添加代码就可以了。

顶部菜单栏RSS图标

因为我关掉了左侧栏的底部菜单,所以把rss加在了顶部菜单栏。在高级设置-顶部导航按钮配置中添加代码即可。

版权美化

之后就是自从我建站开始就深恶痛绝的底部备案号和版权美化。应该是我之前就没有设置好,备案号那里丑的不忍直视。在酱姐的网站山葵酱部落格中我找到了具体的设置方法。
在网站的根目录中找到footer.php中的相关代码后稍作修改即可。
后来我又找到了一个更简单的方式,只需要在主题设置-开发者设置-博客底部右侧信息中添入代码即可。
关于博客的美化呢,我就只做了这些,对我来说已经差不多了。
⚠️
其实我建站最主要的目的是取悦自己,之后才是想输出一些内容分享给有缘看到的朋友,那么只要自己能够满意就好,没有必要面面俱到。
如果您想要更多的美化,可以直接去Google上百度一下handsome主题美化,有非常多博主的分享。我也推荐您可以去SunPma‘Blog学习。

优化Gzip压缩

在网站的根目录找到index.php,然后在<!-- 载入配置支持 -->的上方增加这个代码即可。

站点的折腾

腾讯云轻量应用服务器

我2020年建站的时候,最开始选择的是腾讯云的CVM,那个时候腾讯云的轻量应用服务器还没有正式推出。推出后,我第一时间购买了2核2G的版本,也把备案转到了轻量上。
腾讯云的轻量应用服务器真的是好用,价格也并不贵,最近有打折,感兴趣的朋友可以去看一看。
这一次我刚好有优惠券,就把服务器升级成了2核4G的版本,升级好服务器后,我利用Lsky ProCloudreve自建了图床与网盘。

图床

之前我也折腾过自建图床,但都觉得不方便不好用,那个时候我的主力写作软件是Ulysses和Mweb,后者因为自带有图床工具,我也就没有再去折腾。现在一直用着Typora,虽然直接配合着Picgo上传到腾讯云COS也可以,但是我遇到了两点难题:
  1. 没有办法自定义上传到COS的哪个文件夹中,更没有办法自动分类整理;
  1. 我有定期清理Picgo的习惯,图片管理不方便。
星橙推荐了兰空图床也就是Lsky Pro给我,并且可以将图片保存在COS里。去查了一下使用文档,部署起来并不繁琐,于是乎就按照步骤一步一步来,终于建好了图床站点。
每一次在Typora里写东西所用到的图片,都可以直接通过Picgo上传到我的图床站点中,而且在COS中也是按照年月日自动整理,非常便于管理。
这里需要注意的是,Picgo必须安装Lsky Pro的插件,插件的设置稍微有点繁琐,因为需要用到post tokens。插件自带教程,按照步骤操作就可以了。
不得不说,兰空图床的颜值还是非常高的,兰空图床的这些特性也是很棒:
  • 支持本地等多种第三方云储存 AWS S3阿里云 OSS腾讯云 COS七牛云又拍云SFTPFTPWebDavMinio
  • 多种数据库驱动支持,MySQL 5.7+PostgreSQL 9.6+SQLite 3.8.8+SQL Server 2017+
  • 支持配置使用多种缓存驱动,MemcachedRedisDynamoDB、等其他关系型数据库,默认以文件的方式缓存
  • 多图上传、拖拽上传、粘贴上传、动态设置策略上传、复制、一键复制链接
  • 强大的图片管理功能,瀑布流展示,支持鼠标右键、单选多选、重命名等操作
  • 自由度极高的角色组配置,可以为每个组配置多个储存策略,同时储存策略可以配置多个角色组
  • 可针对角色组设置上传文件、文件夹路径命名规则、上传频率限制、图片审核等功能
  • 支持图片水印、文字水印、水印平铺、设置水印位置、X/y 轴偏移量设置、旋转角度等
  • 支持通过接口上传、管理图片、管理相册
  • 支持在线增量更新、跨版本更新
  • 图片广场

波折

在自建图床的过程中,遇到了一点小波折,Lsky Pro的V2版本是需要PHP 8.0+和Mysql 5.7+的,PHP 8.0直接在宝塔的软件商店里安装就可以了,但是我的Mysql数据库是5.6的版本,就意味着要升级数据库。而通过宝塔升级数据库时需要把原先的所有数据库都删除后才能升级,可数据库的删除还并不彻底,这就直接导致升级完成后不能直接原封不动的把原先的数据库给导入回来。
我查了很多资料去解决这个问题,都没有成功,无奈之下干脆打破重建——在服务器上重装了两次宝塔镜像,一键安装时直接选择了PHP 8.0和Mysql 5.7。
设置宝塔面板的时候,我无意中删除了服务器的默认密钥,虽然又重新建了一个密钥,但是没有办法再使用非常好用的Webshell,去腾讯云查使用文档,发现了这句话:
[scode type="red" size="simple"]请确认系统默认私钥的公钥(默认保存在操作系统的 lighthouse 用户下)未被删除,否则开启后仍无法正常一键登录。[/scode]
为了使用Webshell,我只好再次重装了镜像。

网盘

星橙还推荐我申请了Microsoft E5开发者,除了白嫖Microsoft 365之外,也拥有了5TB的Onedrive,给了我搭建一个网盘的基础。
网盘的开源在网上有很多,比如非常热门的基于Java的Z-File,还有非常有名的NextcloudSeafile等,我所用的是Cloudreve
notion image
Cloudreve有这些优点:
  • 支持从本机从机七牛腾讯云COS阿里云OSS又拍云Onedrive等作为存储端
  • 上传/下载支持客户端直传,支持下载限速
  • 可对接Aria2离线下载,可使用多个从机站点分担下载人物
  • 在线压缩/解压缩、多文件打包下载
  • 覆盖全部存储策略的WebDAV协议支持
  • 拖拽上传、目录上传、流式上传处理
  • 文件拖拽管理
  • 多用户、用户组
  • 创建文件、目录的分享链接,可设定自动过期
  • 视频、图像、音频、文本、Office文档在线预览
  • 自定义配色、黑暗模式、PWA应用、全站单页应用
  • All-In- One打包,开箱即用
Cloudreve的部署很简单,在宝塔面板上添加好站点,然后在网站的根目录上传并解压Cloudreve的安装包,之后在服务器上打开Webshell。
首先输入这个代码:
之后程序就开始安装并运行了,Webshell上也会出现一段代码:
⚠️
请注意保管管理员密码,此密码只会在首次启动时出现。
之后程序会开始自动监听5212端口,记得在宝塔上放行。
这个时候,可以打开网站,看一下是不是可以正常打开。如果可以正常打开,就可以关闭Webshell进行之后的步骤了:
  1. 设置网站的反向代理,目标URL填写http://127.0.0.1:5212,发送域名为$host
  1. 打开宝塔应用管理器,添加cloudreve应用程序,在应用名称填写cloudreve,应用环境选择Null,启动文件选择 /www/wwwroot/域名/cloudreve,启动文件目录选择/www/wwroot/域名
  1. 添加后的默认状态是已暂停,手动打开或者重启即可。
⚠️
请注意如果开启了宝塔加固,需要在异常进程监控把cloudreve加入白名单。
至于之后该怎么配置存储策略,可以自行百度。

CDN的配置

我个人非常建议使用CDN,不仅可以提高网速,安全性也更高。具体该怎么配置,我自己也是一知半解,所以推荐大家去看星泽V社的教程,还是很详细的。

知识库

由于我重装了镜像,所以有需要重新部署Docsify,看着官方的部署文档其实是有点晕的。所以我直接手动部署了,感觉更便捷一些,也就是在宝塔新建站点后,直接在网站根目录新建index.html然后在里面添加内容。
具体怎么操作,推荐去看邓邓写的教程。

个人导航页

在我这次折腾网站之前,我是不知道还有个人导航页这种玩意的。大约12年前,我还在用Windows系统的时候才设置过导航页,那个时候我记得是hao123,之后开始用macOS就再也没有用过导航页了。
之所以想弄个人导航页,是为了简化我使用浏览器时的点击次数。为了减少点击次数这个事情,我优化了很多次书签,比如分门别类,比如把常用的网站都集中起来……这次看到了webstack的导航页,又看到了一为导航这个付费的Wordpress模板,纠结了几天后我还是付费了。
整体的部署非常简单,我就不赘言了。只是说一下我对于个人导航页的思考。
首先,我认为个人导航页并不是必须的;每个人使用浏览器的方式都不同,找到属于自己的,让自己舒适的方式才是最关键。
其次,我觉得个人导航页可以提高我的效率,减少时间成本。每次使用浏览器的时候,要使用搜索引擎的时候,我要么是直接在标题栏输入搜索内容,要么就是打开Google或者Bing后再去搜索,一旦涉及到要切换搜索引擎,十分不便接。当我要浏览某个网站的时候,我一般会先新建一个标签页,载点击书签栏,找到相应的分类文件夹后在里面点击网站。可如果我正在浏览着一个网站,需要打开另一个网站,而忘记新建标签页时,新打开的网站并不会自动新建一个标签页后开启,这给我带来很大的困扰。
再次,集中一站式管理自己部署的站点、经常浏览的网站、会用到的网页工具,可以带来幸福感。当我部署好自己的导航页后,所有的网站都会集中、清晰的呈现在我面前,需要进入哪个网站点击一下就会在自动在新标签页打开;通过浏览器设置每次打开标签页会自动进入导航页,省去了很多不必要的麻烦。而且,由于个人导航页的高度私人化,我可以想怎么设置就怎么设置。

SEO优化

在我试图优化博客SEO的时候,突然心血来潮,想着把博客放到Wordpress上去。一个是我读大学的时候就折腾过Wordpress,想要重温一下;第二个是相比较于Typecho,Wordpress整体对于网站seo更加友好。
可当我真的迁移到Wordpress后,我才发现习惯真的很难改。就说用Markdown写博客这件事情吧。虽然Wordpress可以通过安装插件解决Markdown语法的问题,但目前还是有一些bug,比如对emoji的支持并不友好,比如有些语法格式很吊诡。所以只过了一夜,我又把博客系统迁回了Typecho。
原本因为重装了镜像就导致了博客SEO出现问题,这一折腾后又增加了博客的死链。这对于SEO而言是致命的。
所以,这就需要我向搜索引擎提交死链。

提交死链

具体的操作步骤是这样的。
在博客主题的根目录中找到404.php,然后添加如下代码,同时赋予777权限:
之后,在博客的根目录中,就会自动创建silian.txt,在百度资源搜索平台提交生成的silian.txt就可以了。

提交站点地图

虽然Typecho上有自动提交站点地图的插件,但因为我折腾了这么多,还是手动去GoogleBing和百度分别提交了站点地图。
我发现很多朋友并没有注意站点地图的问题,有站点地图就想到于给了搜索引擎一份地图,能够更好的SEO。
如果想知道自己的站点有没有站点地图,只需要访问你的站点域名/sitemap.xml就可以知道了。

其他

截至目前,Google和Bing都给了我一些SEO优化建议,比如把网站内的图片由jpg和png换成webp之类的。
我反正图片都是直接从COS来的,设置过COS的CDN优化,也就没管这个。
感觉上,各家的SEO建议,不要都听,也不要都不听。适合自己的,就去操作;不适合自己的,不管它就好。反正也没有什么流量,更不指望站点可以流量变现。

总结

经过这一番折腾之后,我终于再度确信,只有适合自己的,才是最好的。即便越折腾对很多知识越熟悉,也还是奉劝各位少折腾微妙。
同时,一定要注意自己的站点备份、数据库备份、服务器快照。这在关键时刻是lifesaver。

© 樹程Leslie 2019 - 2023