Site.js：小型Web构建集

启动一个终端窗口（在Windows上，一个在Windows Terminal下运行的PowerShell会话）并继续。以下命令将安装脚本通过管道传递到您的外壳中。在将其管道输送到您的外壳之前，请确保您了解任何脚本的作用。此安装脚本为您的平台下载正确的Site.js二进制文件，并将其放在您的路径中。查看Linux，macOS和Windows脚本的源。

创建一个文件夹。输入文件夹。写字符串“你好，世界”。放入名为index.html的文件中，然后根据需要创建或覆盖它。

Site.js从https：// localhost开始为您的hello-world网站提供服务。在浏览器中转到“您好，世界！”信息。恭喜，您已经开始使用Site.js！在VPS服务器上执行相同的操作，然后使用站点启用启动服务器，您将拥有一个安全的生产Web守护程序，该守护程序可以在发生错误/重新引导并自行自动更新时幸免于难。

您刚创建的网站类型是老式的静态网站。您可以使用简单的旧HTML，CSS和JavaScript使用Site.js创建静态网站。 Site.js会自动将在您启动它的文件夹中找到的所有文件作为静态文件提供。对于较大的站点，手动滚动静态站点可能会变得很麻烦。这就是为什么Site.js与Hugo静态网站生成器捆绑在一起的原因。

您可以使用Site.js的集成式Hugo实例传递通常会传递给Hugo的任何命令：site hugo＆lt; any有效的Hugo命令＆gt;。因此，如果您单独安装了Hugo，则以上命令等效于运行hugo新站点.hugo。）

为使Site.js的实时重新加载正常工作，您的网页必须至少包含＆lt; body＆gt;标签。

Site.js从https：// localhost开始为您的Hugo网站提供服务。在浏览器中转到“您好，世界！”信息。恭喜，您刚刚使用Site.js创建了第一个Hugo网站！如果Site.js在您网站的根目录中找到一个名为.hugo的文件夹，它将使用其集成的Hugo实例（无需单独安装Hugo）对其进行构建，并将生成的文件放入您网站根目录中的一个名为.generation的文件夹中。它还将自动提供这些文件。如果您更改在此示例中创建的文件，Site.js将使用Hugo自动重建它，并且您的浏览器将使用实时重新加载立即反映所做的更改。有关Hugo的工作方式以及如何将其集成到Site.js中的详细信息，请参阅Site.js Hugo文档和Hugo官方文档。

Site.js并不限制您创建和提供完全静态的网站。您可以轻松地将动态功能添加到静态站点或创建完全动态的站点。开始使用动态网站的最简单方法是使用DotJS。 DotJS使用简单的.js文件为您提供了类似于JavaScript的JavaScript简化功能。跟随创建一个非常基本的动态站点，该站点在每次重新加载主页时都会更新计数器。

创建文件夹。创建一个名为count的项目文件夹，并在名为.dynamic的文件夹中创建一个特殊的嵌套文件夹：

.dynamic是Site.js知道要在您的项目中查找的特殊文件夹。如果找到它，它将知道将其内容作为动态路由运行，而不是将其作为静态内容运行。

创建一个名为index.js的文件，该文件包含动态计数器路由：您不必像前面的示例一样，在要Site.js服务的文件夹中。如此处所示，您可以将文件夹指定为site命令的参数。在这种情况下，我们希望从父文件夹（而不只是.dynamic文件夹）为整个网站提供服务。）

点击https：// localhost并刷新以查看计数器更新。恭喜，您刚刚建立了第一个完全动态的DotJS网站！如果您发现我们难以理解的动态路线中的代码，那么您并不孤单。故意编写该代码是为了使示例足够简短，可以进入终端。以下是index.js的详细版本，您可能更希望使用自己喜欢的代码编辑器输入该版本，以便于理解：如果这使您想起了Express中的路由，那是因为它确实如此。唯一的区别是您不必编写任何其他代码，也不必担心其他任何事情，包括安装Node.js，配置TLS证书，确保站点在重新启动时自动重新启动等。（您可能无法识别.html（）响应对象上的方法，因为这是Site.js的补充，使您的生活更轻松。它相当于在Express中编写.type（＆＃39; html＆＃39;）。end（）。） DotJS路由和Site.js也不限制您使用DotJS。如果需要，可以将Express和Node.js的全部功能与高级路由一起使用。而且，由于它只是底层的Node.js，因此您可以使用Node.js做任何事情，包括使用节点模块等。

除了静态路由和动态HTTPS路由，您还可以在DotJS中指定安全WebSocket（WSS）路由。您可以随意混合所有三种类型的路线。

回声module.exports = function（client，request）{//根据路线的URL设置会议室。 client.room = this.setRoom（request）//创建消息处理程序。 client.on（＆＃34; message＆＃34 ;, message =＆gt; {//向房间中的每个人广播收到的消息。this.broadcast（client，message）}）}＆＃39; ＆gt; chat / .dynamic / .wss / chat.js

回声module.exports = function（client，request）{//根据路由URL设置房间。 client.room = this.setRoom（request）//创建消息处理程序。 client.on（＆＃34; message＆＃34 ;, message =＆gt; {//向房间中的每个人广播收到的消息。this.broadcast（client，message）}）}＆＃39; |文件外编码UTF8 chat / .dynamic / .wss / chat.js

请注意，这次我们没有使用箭头功能定义路线。这是因为我们需要访问路线上的更高级别的内置功能，例如设置会议室并向通过此引用访问的会议室中的所有人广播消息。

回声聊天聊天发送消息const socket = new WebSocket（`wss：// $ {window.location.hostname} / chat`）const showMessage = message =＆gt; {const list = document.querySelector（＆＃34;＃messageList＆＃34;）list.innerHTML + =`＆lt; li＆gt; $ {message.text}＆lt; / li＆gt;`} socket.onmessage = message =＆gt; {showMessage（JSON.parse（message.data））} document.messageForm.addEventListener（＆＃34; submit＆＃34 ;, event =＆gt; {const message = {：event.target.message.value} socket.send（ JSON.stringify（message））showMessage（message）event.preventDefault（）}）＆＃39; ＆gt; chat / index.html

回声聊天聊天发送消息const socket = new WebSocket（`wss：// $ {window.location.hostname} / chat`）const showMessage = message =＆gt; {const list = document.querySelector（＆＃34;＃messageList＆＃34;）list.innerHTML + =`＆lt; li＆gt; $ {message.text}＆lt; / li＆gt;`} socket.onmessage = message =＆gt; {showMessage（JSON.parse（message.data））} document.messageForm.addEventListener（＆＃34; submit＆＃34 ;, event =＆gt; {const message = {：event.target.message.value} socket.send（ JSON.stringify（message））showMessage（message）event.preventDefault（）}）＆＃39; |外文件编码UTF8 chat / index.html

您可以在项目中混合使用静态和动态路径。 .dynamic文件夹之外的任何内容（例如此处的聊天客户端）都将用作静态页面。

启动服务器。要测试您的聊天应用程序，请在https：// localhost上打开两个或多个Web浏览器窗口，并使用聊天界面进行播放。默认情况下，广播方法具有基本的客户端筛选功能，并且仅向原始发送消息的客户端以外的客户端发送消息，并且仅向连接到同一路由（或“房间”）的客户端发送消息。有关上述示例的完整文档版本，请参见“简单聊天”示例的源代码。要运行该示例，请首先克隆Site.js源代码存储库：然后使用Site.js运行简单的聊天示例：最后，在多个浏览器窗口中打开https：// localhost并使用聊天界面进行播放。 WebSocket功能来自我们的express-ws分支（后者又使用ws）。这两个链接都有更多的使用详细信息。

Site.js还内置了一个快速简单的JavaScript数据库（JSDB）。您可以使用全局数据库实例为您的应用程序的任何路由引用数据库。让我们通过保留简单聊天应用程序中的消息来了解使用JSDB有多么容易。

您需要添加的代码以粗体显示。 module.exports = function（client，request）{//确保消息表存在。 if（！db.messages）{db.messages = []} //根据路线的URL设置会议室。 client.room = this.setRoom（request）//向新客户发送所有现有消息。 client.send（JSON.stringify（db.messages））//创建消息处理程序。 client.on（＆＃39; message＆＃39 ;, message =＆gt; {//将消息JSON字符串解析为JavaScript对象。const parsedMessage = JSON.parse（message）//保留消息。db.messages.push （parsedMessage）//将收到的消息广播给房间中的每个人。this.broadcast（client，message）}）}

您需要更新客户端，以便它可以处理某人加入聊天时发送的消息的初始列表。同样，您需要添加的代码以粗体显示。聊天聊天发送消息const socket = new WebSocket（`wss：// $ {window.location.hostname} / chat`）const showMessage = message =＆gt; {const list = document.querySelector（＆＃34;＃messageList＆＃34;）list.innerHTML + =`＆lt; li＆gt; $ {message.text}＆lt; / li＆gt;`} socket.onmessage = websocketMessage =＆gt; {//反序列化数据。 const data = JSON.parse（websocketMessage.data）if（Array.isArray（data））{//显示加入会议室时收到的消息的初始列表。 data.forEach（message =＆gt; showMessage（message））} else {//显示一条消息。 showMessage（data）}} document.messageForm.addEventListener（＆＃34; submit＆＃34 ;, event =＆gt; {const message = {：event.target.message.value} socket.send（JSON.stringify（message）） showMessage（message）event.preventDefault（）}）＆lt; / script＆gt;

这几乎不了解什么是JSDB，以及您可以使用它做什么。 JSDB是内存中的JavaScript数据库，它以JavaScript数据格式（JSDF）将表持久保存到仅追加事务日志中，该数据是JavaScript的子集。它还具有自己的查询语言，称为JavaScript查询语言（JSQL）。因此，例如，如果您想获取包含#BLM主题标签的消息列表，则可以这样进行：在此介绍性博客文章，Site.js JSDB文档以及相关文章中找到有关JSDB的更多信息。 JSDB文档。有关此处提供的示例的更全面版本，请参见持久聊天示例的源代码。

使用站点@hostname启动服务器，并使用ngrok之类的服务通过实时重载在所有设备上进行测试，或者通过Internet与其他站点进行测试。使用内置的同步功能进行部署。使用实时同步的实时博客。通过存档级联的本机支持和本机404→302支持，可以在不中断网络链接的情况下迁移现有站点。轻松创建自定义404和500错误页面。查看最受欢迎的页面，并使用尊重隐私的临时统计信息发现断开的链接，这些统计信息在每次服务器启动时都会重置。在Site.js文档中了解有关使用Site.js构建静态和动态网站和应用程序的更多信息。

由Small Technology Foundation用爱制造。我们是一家位于爱尔兰的小型非营利组织，为像您这样的人而不是为初创企业，企业或政府提供工具。而且我们也得到了像您这样的人的资助。如果您喜欢我们的工作并希望帮助我们继续存在，请为我们提供资金。