喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做，所以我想我会快速地写下来！

-- Julia Evans（作者）

我喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做，所以我想我会快速地写下来！

只是一个 HTML 页面

我的所有网站都只是静态 HTML 和 CSS。我的网页设计技巧相对不高（ https://wizardzines.com 是我自己开发的最复杂的网站），因此保持我所有的网站相对简单意味着我可以做一些改变/修复，而不会花费大量时间。

因此，我们将在此文章中采用尽可能简单的方式 —— 只需一个 HTML 页面。

HTML 页面

我们要放在互联网上的网站只是一个名为 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一个 Github 仓库，其中只包含一个文件。

HTML 文件中包含一些 CSS，使其看起来不那么无聊，部分复制自 https://example.com 。

如何将 HTML 页面放在互联网上

有以下几步：

1. 注册 Neocities 帐户
2. 将 index.html 复制到你自己 neocities 站点的 index.html 中
3. 完成

上面的 index.html 页面位于 julia-example-website.neocities.com 中，如果你查看源代码，你将看到它与 github 仓库中的 HTML 相同。

我认为这可能是将 HTML 页面放在互联网上的最简单的方法（这是一次回归 Geocities，它是我在 2003 年制作我的第一个网站的方式）:)。我也喜欢 Neocities （像 glitch ，我也喜欢）它能实验、学习，并有乐趣。

其他选择

这绝不是唯一简单的方式，在你推送 Git 仓库时，Github pages 和 Gitlab pages 以及 Netlify 都将会自动发布站点，并且它们都非常易于使用（只需将它们连接到你的 GitHub 仓库即可）。我个人使用 Git 仓库的方式，因为 Git 不会让我感到紧张，我想知道我实际推送的页面发生了什么更改。但我想你如果第一次只想将 HTML/CSS 制作的站点放到互联网上，那么 Neocities 就是一个非常好的方法。

如果你不只是玩，而是要将网站用于真实用途，那么你或许会需要买一个域名，以便你将来可以更改托管服务提供商，但这有点不那么简单。

这是学习 HTML 的一个很好的起点

如果你熟悉在 Git 中编辑文件，同时想练习 HTML/CSS 的话，我认为将它放在网站中是一个有趣的方式！我真的很喜欢它的简单性 —— 实际上这只有一个文件，所以没有其他花哨的东西需要去理解。

还有很多方法可以复杂化/扩展它，比如这个博客实际上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在网络中，但从基础开始总是不错的。

via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/

作者： Julia Evans 选题： lujun9972 译者： geekpi 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接

网页下载下来使用，在日常工作中使用频率还是很高的，有时候确实能解一时之急，我自己就有很窘迫的经历。

我开会的时候，都会把准备好的文档存在局域网，到会议室直接打开就能直接用了。有一次到分公司，由于分公司刚刚成立，内网还没有和母公司连通。结果这下子懵逼了，上不去内网，看不到文档。又是叫同事发过来，又是提发送文件的安全申请，让人着急。

如果把网站保存下来，放在自己的电脑中，既不用担心信息泄露问题，又不用为了看不了文档而着急。

遇到问题，记录下来，然后解决问题，程序员的解决思路永远是自己创造轮子的，接下来就是不断的探索解决方案。

其实下载网页的方式有很多种，其中有几种办法使用的比较多，例如：如果你用Chrome，直接按 Ctrl+s 就可实现。使用这种方法，Chrome会把整个网站，按照编译完成的源码目录结构保存下来。像下面这样：

下载完成的文件直接点击 xxx.html 可以直接离线访问，但是这种方式对目录的依赖结构比较高，怎么理解呢？就是 html 文件和对应文件名的文件夹必须在同一个目录中，才能正常使用。拷贝到其他机器的时候必须要两个同时拷贝才可以，否则就会排版错乱。

如果有十个或者更多的网页需要拷贝或者删除，就会很麻烦，例如我想在其中找到其中几个，复制到其他地方，很容易弄错顺序。

HTML 是一种纯文本格式，它用于排版文字。纯文本文档的意思就是，文档中只包含文字内容，不包含二进制内容，举个例子：打印出的A4纸，只有文字没有图片。而 HTML 想要显示照片等二进制信息，通常都会链接到其他文件，也就是上面文件夹里面的内容。

不过 Chrome 下载文件这种方式也有优点，下载下来的文件可以保持独立性，比如说，我需要这个网页中的一张图片，那么就可以直接到文件夹里面寻找了。

另外还有一种办法，也有很多人再使用。Chrome 在打印网页的时候，会把网页转成 PDF ，然后在进行打印。那么就给我们提供了很明确的思路，把网页直接保存为 PDF ，这样保存下来的网页就只有一个文件。

使用Chrome，直接按下Ctrl+p就可以。然后目标打印机选择 另存为 PDF 。

这个功能很多浏览器都支持

但是这种办法也有很明显的缺点，由于 PDF 是静态文档，网页上的一些动画可能不会正常显示，而且排版也有可能会错乱，这完全靠运气。个人觉得这不是一种很靠谱的方法。

这时候主角来了！有一个工具既可以把网页保存为 html 又可以保持是单文件。他就是 monolith ，你可以在 github 上面找到它，但是源码并没有编译为可执行文件，我把它编译了一下，下面会放上来链接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就简单说说使用方法：如果你下载我的链接，那么里面有三个文件：

第一个是Mac平台编译出来的，使用方式为：

./monolith 网站地址 > xxx.html

默认情况下 monolith 会把生成的 html 输出到标准输出流，也就是当前终端。使用 > 我们把输出的内容重定向并覆盖到文件。

执行完成之后，在这个目录下面就会有一个对应的文件：xxx.html 。

另外两个是 Windows 平台使用的。为了简化使用，我写了一个 CMD 脚本。直接点击 monolith.cmd ，然后粘贴地址就可以完成下载。

下载完成之后，在本地你会发现只有一个 html 文件。我们打开之后，发现图片和JS等信息都在，而且排版正常。那么就要思考了，我们之前说过，HTML 是放置纯文本信息的，那么图片在哪里呢？

答案显而易见，就在 HTML 文件里面。为了方便小图片传输，有一种叫 Base64 的东西，它可以把二进制信息变成成纯文本。这在使用 Json 传递数据的今天十分常见，它可以减少一次请求（题外话），这里就是用的这个原理。monolith 把图片等二进制内容转为了纯文本，保存在 HTML 文件中。我们在下载的文件源码可以看到：

对比源代码，src 信息已经变成了 base64 格式的图片，就是那串乱码。复制那串乱码，从网上搜一个 base64 转图片工具，粘贴进去，这时会发现就是我们看到的那张图片。这样一来，无论这个网站上有多少个文件，都会保存到一个 HTML 文件里面，而且还能离线使用。

当然，base64 编码的图片比原生图片略大，这可能也是你现在在担心的问题。不过 monolith 会特殊处理文件体积。我们可以看看 Chrome 直接下载和使用 monolith 下载体积相差多少。我们把两种方式下载的网页都进行了 7-Zip 压缩。

我们可以看到，使用 monolith 下载会比 Chrome 直接下载小一倍还多！

最后要说的是局限性，无论那种方法，都几乎不能把视频网站中的视频下载下来。因为现在的视频地址都是 Token 加密的，同理，使用 Token 加密的其他请求信息也无法下载。

比如你可以试试下载其他网站的首页，Logo 和视频都是下载不了的。但是也有解决办法，那就是另外一个领域的事情了，以后有机会说给大家听。

如果这篇文章对您或者您的朋友有帮助，感谢您关注，转发。