最近,我想重新推进我的开源项目Clarity——这是一个为Linux(GTK+)设计的图标主题。

通过添加SVG模板,这些图标允许用户自定义颜色。而我希望创建一个平台,让用户能够将自己的自定义模板提交进来。

问题在于,如果我为这个项目建立一个需要持续付费的网站,而我又不在人世了,那么这个网站就会消失。因此,为了让它永远延续下去,我需要一个免费的域名免费的托管服务。于是我决定用PHP来开发这个新项目。

在这篇文章中,我会一步步向您展示如何完成以下步骤:

  • 获取一个免费的.eu.org域名。

  • 在Cloudflare上设置名称服务器。

  • Wasmer平台上配置托管服务。

  • 将所有环节连接起来,使项目能够正常运行。

目录

需求说明

在撰写这篇文章时,我假定您已经拥有一个GitHub账户,并且知道如何创建Git仓库。同时,您也需要有一个Cloudflare账户。虽然这个项目使用PHP编写,但您并不需要掌握PHP知识就能完成本教程中的步骤。实际上,Wasmer也支持其他编程语言和框架,您可以根据自己的喜好进行选择。

关于Wasmer

首先,让我来解释一下Wasmer的托管机制。如果您曾经使用过那些在项目长时间未被使用时需要很长时间才能启动的托管工具,那么你会很高兴地发现,在Wasmer中,项目的冷启动时间不到90毫秒。

在Wasmer上运行的应用程序都是无状态的,因此如果您想要保存用户数据,就需要使用持久化存储方案。Wasmer原生支持云端的MySQL实例,同时也支持外部PostgreSQL和MySQL/MariaDB数据库,此外还支持通过持久化卷进行文件级别的SQLite存储。

Wasmer同时还支持Python、Rust、PHP和Node.js这些编程语言,未来也计划支持GoLang。

您可以使用Django、Flask、FastAPI、WordPress、Symfony、Laravel、Next.js、Nuxt、Hugo、Astro、Vite等多种框架在Wasmer上运行应用程序,因此选择非常丰富。

此外,这个平台还支持CGI协议,这意味着您可以使用任何能够编译成二进制可执行文件的语言,比如Rust、C或C++等。

什么是DNS?

现在正是解释DNS是什么的好时机。DNS全称为域名系统,它是一种将人们能够识别的名称(比如freecodecamp.org)转换成网站或Web应用程序所在服务器的IP地址的方法。

简而言之,这个系统的工作原理就像一棵由服务器组成的树。在树的根部是根服务器,它会将你的请求导向负责处理.org扩展名的顶级域名服务器。

这个顶级域名服务器会指向该域名的具体权威名称服务器。名称服务器是一种专门的服务器,它负责存储该域名的官方DNS记录,从而告诉互联网该在哪里找到网站的资源文件。

在这些记录中,你会看到不同类型的指针。其中一种常见的类型是CNAME记录(规范名称记录)。CNAME记录并不会直接将一个域名指向某个IP地址,而是作为一种别名,将一个域名映射到另一个域名。例如,它可以将www.freecodecamp.org转发到根域名freecodecamp.org

如何创建Wasmer账户

让我们马上开始创建一个Wasmer账户吧。为此,你需要访问wasmer.io,然后选择“Hobby”套餐:

Wasmer注册页面,允许用户选择Hobby或Pro套餐

然后创建账户:

Wasmer注册页面的截图,包含用户名、电子邮件、密码输入框,并允许用户使用Google或GitHub进行注册

最简单的方法是连接你的GitHub账户:

当使用GitHub进行身份验证时,会弹出授权窗口的截图

通过GitHub完成授权后,你应该已经登录成功了,此时你会在右上角看到自己的头像:

Wasmer页面的截图,显示头像以及“jcubic”账户的相关菜单,包括个人资料、设置、加入Discord和退出账户等选项

如何创建Wasmer PHP项目

首先,你需要为你的PHP项目创建一个新的GitHub仓库。在这个教程中,我创建了一个包含简单index.php文件的仓库,这个文件展示了我的新域名(稍后我会告诉你如何注册这个域名的)。

<?php

header("Content-Type: text/plain");
echo "clarity-icons.eu.org";

?>

在您提交文件后,您的GitHub仓库应该会呈现如下所示的样子:

GitHub仓库的截图,其中仅包含一个index.php文件,且没有README文件

这曾经是我的仓库:https://github.com/jcubic/ClarityIcons。但后来我决定将这个网站添加到我的主仓库中。

创建GitHub账户后,您需要告知Wasmer这一信息。为此,您需要添加一个与Wasmer关联的GitHub账户。创建一个新的项目,然后点击“添加GitHub账户”:

Wasmer界面中的截图,顶部显示两个选项:一个用于从GitHub导入内容,另一个用于将您的网站文件拖放到该系统中;页面底部列出了可供选择的模板:WordPress Starter、Flask Starter、Hugo Starter、Gatsby Starter

系统会弹出一个窗口,让您选择想要安装Wasmer应用的账户。如果您没有加入任何GitHub组织,那么系统中只会显示您的个人账户信息,请选择该账户。

一个模态窗口的截图,允许您将Wasmer应用安装在自己的账户或所属的组织中

系统会将您重定向到GitHub页面,在那里您可以选择是否允许访问所有仓库,或者仅选择特定的仓库。我通常只会允许访问特定的仓库,因此在这里我选择了我的新仓库:

一个页面的截图,用于配置Wasmer应用的相关设置。选项中“选择所有仓库”未被选中,而是默认选择了jcubic/clarity-icons这个仓库;页面上还有一个标有“安装并授权”的按钮

设置完权限后,您需要将这个应用导入到Wasmer系统中:

一个截图,其中显示了一个“从GitHub导入”选项,该选项下有一个下拉列表,列出了GitHub图标和jcubic名称;下方则显示了名为clarity-icons的仓库以及一个标有“导入”的按钮

点击“导入”按钮后,您可以设置项目的相关信息,比如项目所有者、项目链接等等:

这是一个用于配置项目的页面截图。该截图显示了项目链接(clarity-icons.wasmer.app),以及选择了PHP 8.3版本的项目预设设置。

点击“部署”后,您需要稍等一段时间,等待部署过程完成:

这是一个页面截图,上面显示“项目配置已完成”,同时还有部署进度指示器。

部署完成后,您会看到这个带有彩带的庆祝页面:

一个用于庆祝部署成功的页面,页面上还有彩带。

当您进入控制面板时,应该会看到应用程序正在运行中:

这是clearity-icons项目的主控制面板页面截图,上面显示“已准备就绪”状态,同时还有网站的截图。

这就是网站在上线后的实际外观:

这是一个浏览器窗口的截图,显示的网址是clearity-icons.wasmer.app,页面上显示的文本是clearityIcons.eu.org。

在设置选项中,您可以了解如何添加自定义域名(我们稍后会进行相关操作)。

这是clearity-icons项目的DNS配置截图,上面显示了您需要添加的CNAME记录,这样才能使自定义域名正常使用。

该截图展示了为使自定义域名正常工作而必须添加的CNAME DNS记录。

如何设置Cloudflare

接下来,我们将设置Cloudflare,这样您就可以管理DNS了。我们新的域名也会放在Cloudflare上。

创建Cloudflare账户后,您需要进入域名管理页面:

这是一个用于添加新域名的页面截图。

点击“添加域名”,然后选择“连接域名”:

这是一个页面截图,上面列出了几个选项:连接域名、转移域名以及购买域名。

然后你需要为你的域名指定名称:

一个用于连接域名的表单,其中包含一个输入框,用于输入域名“clarity-icons.eu.org”,高度为“409”,加载方式为“lazy”,来源地址为“https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/176d8c85-b85d-4969-b7cf-ab1cd7220a90.png”,样式为“display:block;margin:0 auto”,宽度为“807”。></p>
<p>接着选择免费计划:</p>
<p><img alt=

在创建域名后(需要等待几秒钟),你可以设置DNS记录(我们已经从Wasmer那里获得了CNAME记录)。

一个用于配置DNS记录的页面截图,此时还没有任何记录添加进去,高度为“1311”,加载方式为“lazy”,来源地址为“https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/82d6fcda-ab5e-477e-b09b-e8a379a7050f.png”,样式为“display:block;margin:0 auto”,宽度为“1128”。></p>
<p>从Wasmer那里添加一个新的CNAME记录:</p>
<p><img alt=

点击“继续激活”后,你应该会看到一个显示有两个域名服务器的页面:

一个页面截图,说明了如何添加Cloudflare域名服务器,高度为“917”,加载方式为“lazy”,来源地址为“https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/18874ad2-3136-46ef-8a26-b763ab3b2ff0.png”,样式为“display:block;margin:0 auto”,宽度为“924”。></p>
<p>我们在注册eu.org域名时将会使用这两个域名服务器。</p>
<h2 id=如何注册eu.org域名

要创建一个.eu.org域名,首先你需要注册一个账户。为此,请访问https://nic.eu.org/arf/en/contact/create/,并填写相关信息,如地址和电话号码。注册任何域名时都需要提供这类信息。

一个简单的表单截图,其中包含用户信息:用户名、电子邮件地址、密码、地址、电话号码以及一个标有“创建”字样的按钮,高度为“680”,加载方式为“lazy”,来源地址为“https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/dc97078f-fa42-4c9f-893b-db08a5f9504b.png”,样式为“display:block;margin:0 auto”,宽度为“1631”。></p>
<p>在上面的截图中,我把“电话”改成了“传真”,后来又纠正了这个错误。如果你犯了错,随时都可以编辑这些信息。</p>
<p>点击“创建”后,你应该会看到一个页面,提示你已成功创建了联系信息页面:</p>
<p><img alt=

在您验证了自己的电子邮件地址(点击激活链接)后,应该会看到这样一个页面,提示您的联系信息现已生效:

显示“您的联系信息现已生效”文字的页面

登录后,您会看到一个用于添加域名的表格:

JTJ18-FREE用户账户的认证页面,其中包含一个添加新域名的按钮。

接下来,只需点击并选择所需的域名即可。

我最初选择了clearity-icons.eu.org这个域名,但在https://nic.eu.org/opendomains.html网站上,他们不建议直接使用.eu.org这种后缀。相反,他们建议选择相应的子域名(即在域名前加上额外的前缀)。因为我来自波兰,所以最终选择了.pl.eu.org这个域名。

用于添加新域名的表格截图,其中包含用户信息

创建一个.eu.org域名的过程可能需要几天时间。我在6月1日注册了账户,然后在6月6日收到了确认邮件。因此,整个流程大概需要一周左右的时间。

确认邮件,其中说明clearity.pl.eu.org域名已经创建完成,并提供了相关详情及提示:“请允许大约半天的时间让域名生效”

大约24小时后,我的域名就已经生效了。

第二天我再次检查时,发现clarity.pl.eu.org这个域名已经可以正常使用了。

结论

为您的开源项目创建一个能够长期使用的网站是完全可行的。这种设置方式也非常适合小型个人项目。

如果您有任何疑问,可以通过Twitter/X与我联系,我会随时回复您的私信。您也可以访问我的个人博客了解更多信息。

Comments are closed.