WordPress生成HTML靜態(tài)化網(wǎng)站

前，我寫過一個“WordPress的靜態(tài)化方法”，使用的是一個名為cos-html-cache的插件實現(xiàn)。

這個插件非常簡潔小巧，直接在原網(wǎng)站上生成首頁和文章頁的html文件，不過，這個插件只支持文章靜態(tài)化，不支持頁面、標簽和分類的靜態(tài)化，之后也再沒有過更新。

后來，我想到過利用WordPress插件導(dǎo)出全靜態(tài)化網(wǎng)站的方法，用這個方法，對于少量文章挺方便，但文章數(shù)量一旦多了，就經(jīng)常出錯。

后來，我看到有人在cos-html-cache插件的基礎(chǔ)上又開發(fā)了一個插件，名叫Super Static Cache，我用了一下，發(fā)現(xiàn)其BUG較多，但Rewrite模式是可以正常使用的，在這個模式下，可以將首頁、文章頁、單頁、分類頁、Tag頁都生成靜態(tài)化文件，并保存在一個名為super-static-cache的目錄下，直接復(fù)制這個目錄即可得到一個靜態(tài)化網(wǎng)站。

因此，一個更簡單的生成靜態(tài)化網(wǎng)站的方法來了，先在網(wǎng)站安裝Super Static Cache，之后運行一個抓取網(wǎng)站的工具，這類工具很多，例如wget、sitemaps生成器之類的，把整個網(wǎng)站抓一遍（wget還能多生成一份），即可在super-static-cache的目錄獲取到網(wǎng)站的靜態(tài)化Html文件。

wget在Windows、Linux、Mac都有，用wget下載網(wǎng)站的命令是：

wget -m 網(wǎng)站地址

里云云開發(fā)平臺重磅推出開源應(yīng)用中心，聚合最熱門的開源應(yīng)用，讓你像安裝app一樣快速上線一個網(wǎng)站。面向新人和持續(xù)活躍的開發(fā)者用戶推出上線激勵加油包，最高100元無門檻代金券免費送，現(xiàn)在體驗還能夠領(lǐng)取年輕人的養(yǎng)生神器，桌面不銹鋼保溫杯！

聚合最熱門的開源應(yīng)用

開源應(yīng)用中心聚合了目前最熱門的前端開源應(yīng)用模版，讓大家真正可以做到像安裝APP一樣來上線一個網(wǎng)站。目前已經(jīng)支持最熱門的前端框架，包括Vue.js、React、Nuxt.js、Next.js、AntDesign等，還有內(nèi)容管理平臺Hexo、Docusaurus、VuePress、Sapper等。使用部署開源模版非常適合您的以下場景：

個人學(xué)習(xí)：輕松創(chuàng)建個人主頁、博客等網(wǎng)站，邊部署邊學(xué)習(xí)。
協(xié)同開發(fā)：創(chuàng)建信息管理系統(tǒng)、CMS等前端項目，多人協(xié)同維護開發(fā)。

云開發(fā)平臺同樣面向廣大的開源作者征集應(yīng)用，對于熱門的應(yīng)用我們能夠提供現(xiàn)金激勵、以及流量曝光等扶持。

開源應(yīng)用一鍵同步一鍵部署

阿里云云開發(fā)平臺前端應(yīng)用部署功能旨在為前端開發(fā)者改善工作環(huán)境，優(yōu)化前端開發(fā)和部署體驗。同時還可以結(jié)合云開發(fā)平臺云原生的架構(gòu)能力和主機應(yīng)用的部署能力，讓前后端應(yīng)用能夠更高效地協(xié)同。

操作簡單：無需購買服務(wù)器、配環(huán)境、手動上傳文件等，云開發(fā)平臺都可以幫你自動操作，包括在需要時隨時一鍵上線/下線。
使用零成本: 支持GitHub和云效的Codeup倉庫，快速將倉庫的代碼進行構(gòu)建部署。
免費資源扶持: 免費提供臨時的測試域名，對于新用戶和持續(xù)活躍的用戶提供免費的云資源加油包。
無數(shù)量限制: 沒有使用的repo數(shù)量和應(yīng)用數(shù)量的限制, 不管是開源倉庫還是自己賬戶下的repo，每一個代碼repo都可以部署為一個靜態(tài)網(wǎng)站。

簡單幾步使用云開發(fā)平臺上線靜態(tài)應(yīng)用

1. 賬號準備工作

你需要一個阿里云賬號，并使用阿里云賬號登錄云開發(fā)平臺 (https://workbench.aliyun.com/)，按照提示創(chuàng)建團隊，點擊同意協(xié)議。沒有阿里云賬號就在登錄頁面注冊一個繼續(xù)登錄。
擁有Github賬號 (https://github.com/)，沒有就注冊一個。為保證最好的使用體驗，請使用Chrome瀏覽器。
未開通阿里云OSS的用戶，點擊鏈接 (https://workbench.aliyun.com/product/open?code=oss)開通OSS服務(wù)。OSS開通免費，有一定的免費額度，超過額度之后按量付費。

2. 創(chuàng)建應(yīng)用

2.1 選擇應(yīng)用中心任意模版創(chuàng)建應(yīng)用

選擇應(yīng)用中心任意模版創(chuàng)建應(yīng)用。如果您之前沒有使用過云開發(fā)平臺，會出現(xiàn)云資源授權(quán)管理的選項，往下拉出現(xiàn)直至同意授權(quán)的字樣，點擊「同意授權(quán)」后出現(xiàn)授權(quán)成功，點擊進入「下一步」。

綁定GitHub賬號。授權(quán)完成后選擇來源倉庫為GitHub，按照提示點擊去綁定，綁定GitHub帳號，登錄后并點擊Authorize AliyunWorkbench允許云開發(fā)平臺構(gòu)建、發(fā)布你的GitHub代碼為可訪問的網(wǎng)站。綁定完成后返回應(yīng)用創(chuàng)建頁面，代碼倉庫按照默認「模板倉庫」以及默認主干分支不用操作，并點擊「下一步」。

填寫應(yīng)用信息完成創(chuàng)建。填寫必要的的應(yīng)用信息完成創(chuàng)建（我們已提供默認配置），成功后進入到應(yīng)用詳情和部署界面。首次登錄并沒有可選所屬生產(chǎn)線，點擊右側(cè)自動創(chuàng)建產(chǎn)品線即可。

2.2 使用自己的倉庫應(yīng)用創(chuàng)建

選擇自己倉庫里需要部署的應(yīng)用。除了可以使用應(yīng)用中心的模版創(chuàng)建網(wǎng)站，云開發(fā)平臺也支持使用本地代碼或者開源代碼創(chuàng)建靜態(tài)網(wǎng)站。與通過模版中心的應(yīng)用創(chuàng)建的區(qū)別在于，在綁定Gihutb之后選擇“自己的倉庫”，找到上一步自己創(chuàng)建的GitHub倉庫及master分支。然后在應(yīng)用詳情頁面根據(jù)以上的步驟繼續(xù)填寫即可。

設(shè)定部署配置。當(dāng)部署的是您自己的代碼倉庫時，開發(fā)平臺需要您根據(jù)具體代碼進行簡單配置來部署成功：

編寫build.sh：代碼從源碼，經(jīng)過npm打包編譯等過程，到生成為純粹HTML/CSS/JS靜態(tài)文件的全過程的shell指令，需要被完整填寫到發(fā)布分支根路徑下的build.sh文件中，例如：

不知道如何操作？您也可直接點擊一次“部署”按鈕，之后，對默認生成的build.sh內(nèi)容進行任意修改：

b. 填寫靜態(tài)文件相對目錄：在build.sh執(zhí)行后，從代碼生成出的靜態(tài)文件所在的相對目錄，需要被填寫到“部署配置-資源路徑”中。

Tip：例如React應(yīng)用（如圖），一般會填寫“./build”；Vue應(yīng)用則一般為“./dist”。

c. 調(diào)整配置：當(dāng)您完成上述步驟后，發(fā)現(xiàn)自己的代碼仍然部署錯誤時，需查看排查部署日志，對上面的build.sh和部署資源路徑進行修改。常見的幾種部署錯誤情況如下：

3. 在日常環(huán)境部署站點

一鍵進行應(yīng)用部署。在應(yīng)用詳情頁面點擊日常環(huán)境的「部署」按鈕進行一鍵部署，部署狀態(tài)變成綠色已部署以后可以點擊訪問部署網(wǎng)站查看效果。

Dinosaurs網(wǎng)站日常環(huán)境部署好了。日常環(huán)境的測試域名也是可以訪問的，點擊訪問已部署網(wǎng)站按鈕會出現(xiàn)一個彈出，點擊彈出上的立即訪問就能夠訪問已經(jīng)部署好的站點了。在部署完成后，可以繼續(xù)本地編碼，并將代碼push到應(yīng)用的“基本信息”中對應(yīng)的代碼倉庫內(nèi)。

4. 配置自定義域名在線上環(huán)境上線

配置線上環(huán)境自定義域名。在功能開發(fā)驗證完成后要在線上環(huán)境進行部署，在線上環(huán)境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們添加一個二級域名 company.workbench.fun 來綁定我們部署的前端應(yīng)用。然后復(fù)制自定義域名下方的API網(wǎng)關(guān)地址對添加的二級域名進行CNAME配置。

配置CNAME地址。復(fù)制好 API網(wǎng)關(guān)域名地址后，來到你自己的域名管理平臺（此示例中的域名管理是阿里云的域名管理控制臺，請去自己的域名控制臺操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創(chuàng)建的二級域名，這里我們輸入「company」，在「記錄值」中粘貼我們之前復(fù)制的 API網(wǎng)關(guān)域名地址，「TTL」保留默認值或者設(shè)置一個你認為合適的值即可。

在線上環(huán)境部署上線。回到云開發(fā)平臺的應(yīng)用詳情頁面，按照部署的操作，點擊線上環(huán)境的「部署按鈕」，部署完成以后就在你自定義的域名進行了上線。CNAME 生效之后，我們輸入 company.workbench.fun（示例網(wǎng)址）可以打開部署的頁面。至此，如何部署一個應(yīng)用到線上環(huán)境，如何綁定自己的域名來訪問一個線上的應(yīng)用就完成了，趕緊部署自己的應(yīng)用到線上環(huán)境，用自己的域名玩起來吧；）

原文鏈接：https://developer.aliyun.com/article/829641?utm_content=g_1000314028

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

態(tài)網(wǎng)頁也叫做平面頁，是一種簡單的網(wǎng)頁形式，它的內(nèi)容在網(wǎng)頁創(chuàng)建時就已經(jīng)被確定，就像是一本已經(jīng)印刷好的紙張。無論你何時打開這頁紙，內(nèi)容都是一樣的。這種網(wǎng)頁通常使用HTML編寫，可能包含CSS和JavaScript，但不包含像PHP、ASP.net等服務(wù)端的動態(tài)腳本。包含文本、圖像、聲音、Flash動畫、客戶端腳本和ActiveX控件及JAVA小程序等。

靜態(tài)網(wǎng)頁沒有后臺數(shù)據(jù)庫、沒有可交互的網(wǎng)頁。做好并上傳到服務(wù)器上，就不能對網(wǎng)站的內(nèi)容進行修改，除非把網(wǎng)站文件下載到自己計算機上，再用專業(yè)的網(wǎng)站制作軟件編輯好上傳（修改源代碼）。

靜態(tài)網(wǎng)頁不能簡單地理解成靜止不動的網(wǎng)頁，主要指的是網(wǎng)頁中沒有程序代碼，只有HTML，網(wǎng)頁URL以.htm、.html、xml等常見形式為后綴。

靜態(tài)網(wǎng)頁也包括一些能動的部分，靜態(tài)網(wǎng)頁上展示的內(nèi)容并非完全靜止的，它也可以有各種視覺上的動態(tài)效果，如GIF動圖、Flash動畫、滾動字幕等。

靜態(tài)網(wǎng)頁優(yōu)點：

1、靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，比較安全，數(shù)據(jù)不會丟失；

2、靜態(tài)網(wǎng)頁的結(jié)構(gòu)清晰，方便搜索引擎爬蟲抓取和理解，因此對搜索引擎優(yōu)化（SEO）更友好；

3、維護簡單：靜態(tài)網(wǎng)頁通常比動態(tài)網(wǎng)頁更容易維護；

4、靜態(tài)網(wǎng)頁被訪問的速度快，訪問過程中無須連接數(shù)據(jù)庫，開啟頁面速度快于動態(tài)頁面。

5、減輕了服務(wù)器的負擔(dān)，工作量減少，也就降低了數(shù)據(jù)庫的成本。

6、靜態(tài)頁面非常適合用于展示固定內(nèi)容的網(wǎng)站，如企業(yè)官方網(wǎng)站、產(chǎn)品介紹頁、博客文章等。

靜態(tài)網(wǎng)頁缺點：

沒有數(shù)據(jù)庫的支持，不能直接對網(wǎng)站內(nèi)容進行修改，更新維護比較麻煩，得修改源代碼，才能改變網(wǎng)頁內(nèi)容；

靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。實現(xiàn)不了會員注冊、在線留言、購買交易等功能，只能簡單地展示信息；

靜態(tài)網(wǎng)頁的優(yōu)點包括加載速度快，安全性高，容易維護和優(yōu)化，適合SEO。然而，對于需要頻繁更新或者具有大量用戶交互的網(wǎng)站，靜態(tài)網(wǎng)頁可能不是最佳選擇。當(dāng)需要對整個網(wǎng)站的靜態(tài)頁面進行批量的修改時，工作量有可能會比較大。

在線咨詢

上一篇：第51節(jié) 可編輯的內(nèi)容-Javascript-零點程序員-王唯
下一篇：分享web前端8款最主流的HTML5開發(fā)工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

WordPress生成HTML靜態(tài)化網(wǎng)站

聚合最熱門的開源應(yīng)用

開源應(yīng)用一鍵同步一鍵部署

簡單幾步使用云開發(fā)平臺上線靜態(tài)應(yīng)用

您的項目需求