如何将网站作为单个文件提供？

Posted 2023-03-06

【中文标题】如何将网站作为单个文件提供？

【英文标题】：How to provide a web site as a single file?

【发布时间】：2017-09-23 12:29:54

【问题描述】：

我有一个裸机应用程序在带有 10BASE-T 以太网 (CS8900) 和基于 EasyWeb 项目的 Tcp/IP 实现的微型 16 位微控制器 (St10) 上运行。

实现了一个微型网络服务器，用于显示设备的一些状态信息，还允许更改设置等。

对于浏览器访问，网络服务器提供了index.html、*.css、*.js、*.svg、*.png等文件。

由于裸机目标没有像 sd 卡这样的存储介质，所以我将上面提到的所有资源都放入了编译后的二进制文件中。

为了节省内存和减少流量，我将所有文件放在一个 index.html 压缩中，使用 gzip 并让我的网络服务器使用 Content-Encoding: gzip 提供此文件。

将所有文件放在一个index.htm 中的步骤目前是手动工作（包括替换文件名引用等）。可能有一个工具可以自动执行此操作吗？

或者，我可以将所有文件 zip / tar / 任何文件都压缩到一个文件中，然后根据 http GET / 请求提供吗？

编辑 2017-10-05

使用brain99提到的inliner解决。

让它在 Kubuntu 16.04 主机上运行时遇到了小麻烦，但最终通过安装修复了它：

sudo apt-get install nodejs
sudo ln -sT "$(which nodejs)" /usr/local/bin/node
sudo apt-get install npm
sudo npm install -g inliner

也许，我可以通过使用nodejs-legacy 而不是nodejs 摆脱符号链接（没有尝试过）。 安装后，我只需要运行：

inliner index.html >index-backed.html
gzip -c index-backed.html >index.html.gz

【问题讨论】：

为您工作一个 go 二进制文件作为 Web 服务器并包含您的静态内容？

嗯，我已经有一个 http 服务器实现，包括。用户管理、摘要访问认证、会话管理、动态内容生成（例如，设备状态为 yaml）等等。 go 方法听起来像是对所有方法的广泛更新，不是吗？

是的，所以也许不是您想要的，因为就像您正确提及它意味着重做所有事情。

【参考方案1】：

选项 1：通过 Chrome

有一组两个 Chrome 扩展程序可让您将网页保存到单个 HTML 文件：

SingleFile SingleFile Core

第二个扩展是第一个所需的辅助扩展。我没有对此进行测试，但它在 Chrome 网上商店中的评价似乎相当不错（显然它会在复杂的页面上卡住）。

使用这些扩展程序，您应该能够在 Chrome 中打开页面并使用这些扩展程序将其保存为具有嵌入式 CSS/脚本/图像的单个文件。

选项 2：可编写脚本

如果您想在脚本中自动执行某些操作，还有一个 project on github 专门用于此目的，可以通过 npm 安装。

【讨论】：

听起来不错。你知道是否还有一个命令行界面，以便我能够将其集成到我的开发工具链中？

inliner 完全符合我的需求！

【参考方案2】：

我对你想要做什么有点困惑，但我猜你需要一种方法来节省一些存储空间，你可以尝试在Google Drive 中存储一些文件？这样，您就不必担心那里的文件，您只需上传图片，然后从驱动器中提取它们，如下所示：

<img src="https://drive.google.com/uc?export=download&id=YOUR_FILE_ID">

当然，将 YOUR_FILE_ID 替换为您的实际文件 ID，通过使用 Google Drive 的共享链接获取。像这样：

https://drive.google.com/file/d/YOUR_FILE_ID/view?usp=sharing

我会发现这比压缩它更好，但选择权在你，希望这对你有帮助！

【讨论】：

我的设备没有所有的互联网连接。在某些情况下，只有我的裸机设备和 PC / 笔记本电脑通过例如连接。以太网。