部署Friend-Link-House项目:开源社区初探

⏯️从何而来

在与翠翠学长交换友链的时候，接触到了学长的Friend-Link-House这个项目，基于Blog Roll这个项目而来，可以自动订阅他人博客网站上的文章，感觉很有意思，于是想给自己也部署一个。

⏩如何进展

先跑起来再说

首先把仓库fork一份到自己的账户底下，然后clone到了我的服务器上，跑了一遍npm install npm run gen npm run dev，没遇到什么困难就可以看到网页了。

订阅源的替换

接下来就是把订阅的链接从学长的朋友们换成我的朋友们。从学长写好的README以及对main.js的分析中可以得知，每次访问这个网页的时候都会从存储的各RSS源获取最新的xml，而这些RSS源的url则来自于运行npm run gen命令时，从README.md中的表格里提取的信息。手动把表格里的数据换成了目前已经添加友链的几个朋友（反正也没几条，手动复制一下了），重新跑一遍npm run gen npm run dev，就可以看我的朋友们的文章了。

前端页面样式的修改

虽然跑起来了，但是这个页面的风格跟学长的页面还是完全一致的，总感觉有点忐忑（虽然说只要遵循了MIT许可证就并不会被认为抄袭什么的），而且这个页面的风格和我自己的个人主页的风格也不太一致。后端没什么我能动手的地方，但是前端的样式还是可以自己scratch一下的。修改了一下背景的颜色，用卡片之类的样式把时间轴上的每篇blog包裹了一下，看起来就跟主页上的风格比较类似了。

部署到域名

使用nginx进行反向代理，一开始写入的配置如下

# Friend-Link-House代理到友链屋
location /Friend-Link-House/ {
	root	/data/Friend-Link-House/web/dist/;
	index	index.html;
}

运行nginx -s reload之后，尝试访问loveapple.icu/Friend-Link-House，结果报错503。本来以为是权限的问题，但是提权了之后依然无法访问。遂询问deepseek老师，发现关键是nginx配置反代时的语法，用root会拼接到后面导致访问的位置出错，应该改成alias，最终配置如下：

# Friend-Link-House代理到友链屋
location /Friend-Link-House/ {
	alias	/data/Friend-Link-House/web/dist/;
	index	index.html;
	try_files $uri $uri/ /newspaper/index.html;
}
#资源配置路径
location /assets/ {
	alias /data/Friend-Link-House/web/dist/assets/;
	expires 1y;
	add_header Cache-Control public;
}

经测试即可愉快访问这个域名了。

主页入口

有了域名之后，下一个问题就是如何把这个新的页面与原有的主页整合起来。我的个人主页是用hexo博客框架搭建的，使用了butterfly主题。这个主题有一个menu配置项，可以在右上角显示一个菜单栏，可以自定义跳转的相对链接、绝对链接，还可以自定义图标。于是速速配置如下：

menu:
  Home: / || fas fa-home
  # List||fas fa-list:
    # Music: /music/ || fas fa-music
    # Movie: /movies/ || fas fa-video
  Articles: /archives/ || fa fa-bookmark
  Tags: /tags/ || fa fa-tags
  DrawBoard: /Draw/ || fa fa-paint-brush
  Links || fas fa-list:
    Link List: /link/ || fa fa-link
    Link-House: https://loveapple.icu/Friend-Link-House/ || fa fa-newspaper

⚛️絮语

第一次部署别人做的开源项目，总有一点忐忑，毕竟自己是纯小白，总是担心会不会违反一些社区规则或者道德标准什么的。写作这篇文章的时候，也会担心会不会犯一些小白错误，贻笑大方。但是私以为，作为新手去学习自己不懂的技术，不能陷入文档的陷阱，即使在没有完全理解每一步都在做什么的情况下，也可以先把系统跑起来，在实践与试错的过程中再去慢慢理解一步步的操作。毕竟，比起一看就让人头大的海量文档，还是自己一步步手操更能让人有“实感”。