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

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

后來，我想到過利用WordPress插件導出全靜態化網站的方法，用這個方法，對于少量文章挺方便，但文章數量一旦多了，就經常出錯。

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

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

wget在Windows、Linux、Mac都有，用wget下載網站的命令是：

wget -m 網站地址

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

聚合最熱門的開源應用

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

• 個人學習：輕松創建個人主頁、博客等網站，邊部署邊學習。
• 協同開發：創建信息管理系統、CMS等前端項目，多人協同維護開發。

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

開源應用一鍵同步一鍵部署

阿里云云開發平臺前端應用部署功能旨在為前端開發者改善工作環境，優化前端開發和部署體驗。同時還可以結合云開發平臺云原生的架構能力和主機應用的部署能力，讓前后端應用能夠更高效地協同。

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

簡單幾步使用云開發平臺上線靜態應用

1. 賬號準備工作

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

2. 創建應用

2.1 選擇應用中心任意模版創建應用

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

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

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

2.2 使用自己的倉庫應用創建

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

• 設定部署配置。當部署的是您自己的代碼倉庫時，開發平臺需要您根據具體代碼進行簡單配置來部署成功：

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

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

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

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

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

3. 在日常環境部署站點

• 一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以后可以點擊訪問部署網站查看效果。

• Dinosaurs網站日常環境部署好了。日常環境的測試域名也是可以訪問的，點擊訪問已部署網站按鈕會出現一個彈出，點擊彈出上的立即訪問就能夠訪問已經部署好的站點了。在部署完成后，可以繼續本地編碼，并將代碼push到應用的“基本信息”中對應的代碼倉庫內。

4. 配置自定義域名在線上環境上線

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

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

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

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

本文為阿里云原創內容，未經允許不得轉載。

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

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

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

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

靜態網頁優點：

1、靜態網頁的內容相對穩定，比較安全，數據不會丟失；

2、靜態網頁的結構清晰，方便搜索引擎爬蟲抓取和理解，因此對搜索引擎優化（SEO）更友好；

3、維護簡單：靜態網頁通常比動態網頁更容易維護；

4、靜態網頁被訪問的速度快，訪問過程中無須連接數據庫，開啟頁面速度快于動態頁面。

5、減輕了服務器的負擔，工作量減少，也就降低了數據庫的成本。

6、靜態頁面非常適合用于展示固定內容的網站，如企業官方網站、產品介紹頁、博客文章等。

靜態網頁缺點：

沒有數據庫的支持，不能直接對網站內容進行修改，更新維護比較麻煩，得修改源代碼，才能改變網頁內容；

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

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