喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁(yè)面是如此簡(jiǎn)單。今天有人問我該怎么做，所以我想我會(huì)快速地寫下來(lái)！

-- Julia Evans（作者）

我喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁(yè)面是如此簡(jiǎn)單。今天有人問我該怎么做，所以我想我會(huì)快速地寫下來(lái)！

只是一個(gè) HTML 頁(yè)面

我的所有網(wǎng)站都只是靜態(tài) HTML 和 CSS。我的網(wǎng)頁(yè)設(shè)計(jì)技巧相對(duì)不高（ https://wizardzines.com 是我自己開發(fā)的最復(fù)雜的網(wǎng)站），因此保持我所有的網(wǎng)站相對(duì)簡(jiǎn)單意味著我可以做一些改變/修復(fù)，而不會(huì)花費(fèi)大量時(shí)間。

因此，我們將在此文章中采用盡可能簡(jiǎn)單的方式 —— 只需一個(gè) HTML 頁(yè)面。

HTML 頁(yè)面

我們要放在互聯(lián)網(wǎng)上的網(wǎng)站只是一個(gè)名為 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一個(gè) Github 倉(cāng)庫(kù)，其中只包含一個(gè)文件。

HTML 文件中包含一些 CSS，使其看起來(lái)不那么無(wú)聊，部分復(fù)制自 https://example.com 。

如何將 HTML 頁(yè)面放在互聯(lián)網(wǎng)上

有以下幾步：

1. 注冊(cè) Neocities 帳戶
2. 將 index.html 復(fù)制到你自己 neocities 站點(diǎn)的 index.html 中
3. 完成

上面的 index.html 頁(yè)面位于 julia-example-website.neocities.com 中，如果你查看源代碼，你將看到它與 github 倉(cāng)庫(kù)中的 HTML 相同。

我認(rèn)為這可能是將 HTML 頁(yè)面放在互聯(lián)網(wǎng)上的最簡(jiǎn)單的方法（這是一次回歸 Geocities，它是我在 2003 年制作我的第一個(gè)網(wǎng)站的方式）:)。我也喜歡 Neocities （像 glitch ，我也喜歡）它能實(shí)驗(yàn)、學(xué)習(xí)，并有樂趣。

其他選擇

這絕不是唯一簡(jiǎn)單的方式，在你推送 Git 倉(cāng)庫(kù)時(shí)，Github pages 和 Gitlab pages 以及 Netlify 都將會(huì)自動(dòng)發(fā)布站點(diǎn)，并且它們都非常易于使用（只需將它們連接到你的 GitHub 倉(cāng)庫(kù)即可）。我個(gè)人使用 Git 倉(cāng)庫(kù)的方式，因?yàn)?Git 不會(huì)讓我感到緊張，我想知道我實(shí)際推送的頁(yè)面發(fā)生了什么更改。但我想你如果第一次只想將 HTML/CSS 制作的站點(diǎn)放到互聯(lián)網(wǎng)上，那么 Neocities 就是一個(gè)非常好的方法。

如果你不只是玩，而是要將網(wǎng)站用于真實(shí)用途，那么你或許會(huì)需要買一個(gè)域名，以便你將來(lái)可以更改托管服務(wù)提供商，但這有點(diǎn)不那么簡(jiǎn)單。

這是學(xué)習(xí) HTML 的一個(gè)很好的起點(diǎn)

如果你熟悉在 Git 中編輯文件，同時(shí)想練習(xí) HTML/CSS 的話，我認(rèn)為將它放在網(wǎng)站中是一個(gè)有趣的方式！我真的很喜歡它的簡(jiǎn)單性 —— 實(shí)際上這只有一個(gè)文件，所以沒有其他花哨的東西需要去理解。

還有很多方法可以復(fù)雜化/擴(kuò)展它，比如這個(gè)博客實(shí)際上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在網(wǎng)絡(luò)中，但從基礎(chǔ)開始總是不錯(cuò)的。

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

作者： Julia Evans 選題： lujun9972 譯者： geekpi 校對(duì)： wxy

本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出

點(diǎn)擊“了解更多”可訪問文內(nèi)鏈接

網(wǎng)頁(yè)下載下來(lái)使用，在日常工作中使用頻率還是很高的，有時(shí)候確實(shí)能解一時(shí)之急，我自己就有很窘迫的經(jīng)歷。

我開會(huì)的時(shí)候，都會(huì)把準(zhǔn)備好的文檔存在局域網(wǎng)，到會(huì)議室直接打開就能直接用了。有一次到分公司，由于分公司剛剛成立，內(nèi)網(wǎng)還沒有和母公司連通。結(jié)果這下子懵逼了，上不去內(nèi)網(wǎng)，看不到文檔。又是叫同事發(fā)過(guò)來(lái)，又是提發(fā)送文件的安全申請(qǐng)，讓人著急。

如果把網(wǎng)站保存下來(lái)，放在自己的電腦中，既不用擔(dān)心信息泄露問題，又不用為了看不了文檔而著急。

遇到問題，記錄下來(lái)，然后解決問題，程序員的解決思路永遠(yuǎn)是自己創(chuàng)造輪子的，接下來(lái)就是不斷的探索解決方案。

其實(shí)下載網(wǎng)頁(yè)的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實(shí)現(xiàn)。使用這種方法，Chrome會(huì)把整個(gè)網(wǎng)站，按照編譯完成的源碼目錄結(jié)構(gòu)保存下來(lái)。像下面這樣：

下載完成的文件直接點(diǎn)擊 xxx.html 可以直接離線訪問，但是這種方式對(duì)目錄的依賴結(jié)構(gòu)比較高，怎么理解呢？就是 html 文件和對(duì)應(yīng)文件名的文件夾必須在同一個(gè)目錄中，才能正常使用。拷貝到其他機(jī)器的時(shí)候必須要兩個(gè)同時(shí)拷貝才可以，否則就會(huì)排版錯(cuò)亂。

如果有十個(gè)或者更多的網(wǎng)頁(yè)需要拷貝或者刪除，就會(huì)很麻煩，例如我想在其中找到其中幾個(gè)，復(fù)制到其他地方，很容易弄錯(cuò)順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內(nèi)容，不包含二進(jìn)制內(nèi)容，舉個(gè)例子：打印出的A4紙，只有文字沒有圖片。而 HTML 想要顯示照片等二進(jìn)制信息，通常都會(huì)鏈接到其他文件，也就是上面文件夾里面的內(nèi)容。

不過(guò) Chrome 下載文件這種方式也有優(yōu)點(diǎn)，下載下來(lái)的文件可以保持獨(dú)立性，比如說(shuō)，我需要這個(gè)網(wǎng)頁(yè)中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網(wǎng)頁(yè)的時(shí)候，會(huì)把網(wǎng)頁(yè)轉(zhuǎn)成 PDF ，然后在進(jìn)行打印。那么就給我們提供了很明確的思路，把網(wǎng)頁(yè)直接保存為 PDF ，這樣保存下來(lái)的網(wǎng)頁(yè)就只有一個(gè)文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標(biāo)打印機(jī)選擇 另存為 PDF 。

這個(gè)功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點(diǎn)，由于 PDF 是靜態(tài)文檔，網(wǎng)頁(yè)上的一些動(dòng)畫可能不會(huì)正常顯示，而且排版也有可能會(huì)錯(cuò)亂，這完全靠運(yùn)氣。個(gè)人覺得這不是一種很靠譜的方法。

這時(shí)候主角來(lái)了！有一個(gè)工具既可以把網(wǎng)頁(yè)保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒有編譯為可執(zhí)行文件，我把它編譯了一下，下面會(huì)放上來(lái)鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡(jiǎn)單說(shuō)說(shuō)使用方法：如果你下載我的鏈接，那么里面有三個(gè)文件：

第一個(gè)是Mac平臺(tái)編譯出來(lái)的，使用方式為：

./monolith 網(wǎng)站地址 > xxx.html

默認(rèn)情況下 monolith 會(huì)把生成的 html 輸出到標(biāo)準(zhǔn)輸出流，也就是當(dāng)前終端。使用 > 我們把輸出的內(nèi)容重定向并覆蓋到文件。

執(zhí)行完成之后，在這個(gè)目錄下面就會(huì)有一個(gè)對(duì)應(yīng)的文件：xxx.html 。

另外兩個(gè)是 Windows 平臺(tái)使用的。為了簡(jiǎn)化使用，我寫了一個(gè) CMD 腳本。直接點(diǎn)擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會(huì)發(fā)現(xiàn)只有一個(gè) html 文件。我們打開之后，發(fā)現(xiàn)圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說(shuō)過(guò)，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進(jìn)制信息變成成純文本。這在使用 Json 傳遞數(shù)據(jù)的今天十分常見，它可以減少一次請(qǐng)求（題外話），這里就是用的這個(gè)原理。monolith 把圖片等二進(jìn)制內(nèi)容轉(zhuǎn)為了純文本，保存在 HTML 文件中。我們?cè)谙螺d的文件源碼可以看到：

對(duì)比源代碼，src 信息已經(jīng)變成了 base64 格式的圖片，就是那串亂碼。復(fù)制那串亂碼，從網(wǎng)上搜一個(gè) base64 轉(zhuǎn)圖片工具，粘貼進(jìn)去，這時(shí)會(huì)發(fā)現(xiàn)就是我們看到的那張圖片。這樣一來(lái)，無(wú)論這個(gè)網(wǎng)站上有多少個(gè)文件，都會(huì)保存到一個(gè) HTML 文件里面，而且還能離線使用。

當(dāng)然，base64 編碼的圖片比原生圖片略大，這可能也是你現(xiàn)在在擔(dān)心的問題。不過(guò) monolith 會(huì)特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網(wǎng)頁(yè)都進(jìn)行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會(huì)比 Chrome 直接下載小一倍還多！

最后要說(shuō)的是局限性，無(wú)論那種方法，都幾乎不能把視頻網(wǎng)站中的視頻下載下來(lái)。因?yàn)楝F(xiàn)在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請(qǐng)求信息也無(wú)法下載。

比如你可以試試下載其他網(wǎng)站的首頁(yè)，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個(gè)領(lǐng)域的事情了，以后有機(jī)會(huì)說(shuō)給大家聽。

如果這篇文章對(duì)您或者您的朋友有幫助，感謝您關(guān)注，轉(zhuǎn)發(fā)。