建立優秀的網站並不容易。即使在科技發達的 2022 年也不容易。如果有人跟你說做一個網站很簡單，那麼，他一定是外行的！你肯定是被他豪洨了！😂

大部分的建站網站說得其實也沒有錯 —— 技術上說，任何人都可以"建立一個網站" —— 但這只會導致你對你要做的任務本身產生一種完全錯誤的認知。

建一個網站 - 很容易。但把網站"做好做對” - 就沒這麼容易了，為什麼這麼說？恩...無論你的產業是在任何類型的利基市場，為了取得不錯的銷售成果，你"通常"都需要在一些關鍵因素上"做好做對"。

殘酷的事實是，經驗、知識和編寫至少一些 HTML 代碼的能力肯定會對你的建站旅途有所幫助。所以，網站管理員、設計師、開發人員歡呼吧！沒有人會取代你的工作 —— 即使是在到處充滿著"一鍵建站"網站廣告的時代。

[我的故事]

我已經工作了大約 15 年，身兼各種網站的管理員 - 在過去的十年裡，我主要開發和支持一些 WordPress 主題和插件。這讓我有機會查看數百個由不同人組成的 wp-admin 後台面板 - 我已經看了太多普通人對 WordPress 的操作 - 以及經常做出哪種災難級操作。

<免責聲明>

在深入研究之前，讓我說句 ❤️❤️ 我很愛 WordPress ❤️❤️。我從 2005 年開始使用它，2.0 版 - 我認為它是一個非常有價值的工具，可以做非常多非常多非常多事情。WordPress 當然是 Blog 界的王者，也適用於大多數類型的網站 —— 當然也包刮電子商務，即使還是有一些限制。

幾乎無限的主題和套件生態系統是 WordPress 一個巨大的優點 —— 直到你意識到，嗯...裡面有很多很棒的東西，但也有很多根本用不到的功能...：你需要準確地選擇要裝的東西。與電子用品還有軟體一樣，保持簡單 ( keep it simple ) 是減少故障與提高穩定度的黃金法則。

身為一個會寫一點代碼的工程師，我個人在許多項目中使用原生 WordPress，主要是作為一個框架，然後安裝 2~5 個非常有名的套件，然後從頭開始編寫一個或多個自訂套件來處理自定義的邏輯。遵循這種工作方式，我從來沒有遇到過升級 WordPress 核心或插件的問題 —— （ 我一直都這樣做 ）而且它在任何性能一般的主機上瀏覽網站或後端時的性能都很好。

</免責聲明>

[問題]

那麼，哪個是我看到一遍又一遍看到可怕行為😵‍💫？就是，當我看到人們安裝了 20 多個插件，一個具有 200K 的主題和一個頁面編輯器 —— 實際上他們的中小企業只要做一頁網站就夠了 —— 這種情況純靜態的 HTML 就可以做到了。安裝、載入了不必要的套件與功能，然後得到糟糕的結果🤮 - 你通常會得到一個緩慢、低性能的網站，需要很長時間才能在手機上完成加載。對我來說，它就像海灘上的金字塔 - 完全不受約束的消費主義 - 一直裝一直裝一直裝。

當我不得不在這些"無用的怪物站點"上調試問題時，它把我嚇死了😬 —— 因為需要花很多時間才能理解問題在哪裡 —— 這種感覺就像"治標不治本"，完全沒有解決真正的問題。當這個網站使用了頁面編輯器以及合理數量的套件時，還有另一件事困擾著我。因為我有 SEO 的相關知識，所以我無法忽視下面這點 —— 頁面編輯器產生的 HTML 標記：為什麼每個頁面編輯器都必須產生十數個嵌套的 DIV ？我想在地獄中一定有這些 DIV 的容身之處😈。

[簡單說就是]

頁面編輯器認為人們無需編寫代碼就可以做任何事情，確實如此，但他們沒有告訴他們這樣做的成本還有代價。那麼，我們可以改變一些事情嗎？作為一名網站管理員，我覺得在臃腫的頁面編輯器和傳統的手刻代碼編輯器中間還有一個 空間 / 機會 。

理想上，難道不能有一個工具來使網站開發過程：有趣、靈活、對新手安全、...但對於會寫代碼的人來說又有極高的擴展性嗎？不知道怎麼的，我想出了一個工具，"假設"我不會寫代碼的狀況下，可以直接操作簡單的可視界面 ( 100%與前端畫面一致 ) 來快速構建頁面，而又不會給開發人員在使用可視頁面編輯器時帶來"綁手綁腳"的感覺。

在業餘時間，我開始開發一些概念與驗證原型，探索開發這種頁面編輯器的可能性，它能夠簡化網頁的創建和編輯 - 可以 控制 / 編寫 整頁 HTML 代碼的頁面 - 但又能節省時間。簡單講就是，一種自動化寫 HTML 代碼的工具。

我真的覺得一路走來的經驗很有用。經過幾年的實驗後，結論是 —— 這個頁面編輯器的想法完全可行，但可能是一個很小的利基市場，不容易做大。

[技術選型]

基本上，我希望 LiveCanvas 是：

• 一種構建超快速網站的方法，它可以存在於 WordPress 中，也可以作為靜態 HTML 網站發佈 ( 獨立於 WordPress 和 Livecanvas )

• 一個可視化編輯器，允許您重用經過良好測試的 RWD 組件並製作自己的組件

• 一個實時的 HTML 代碼編輯器，可以輕鬆優化所有可視化生成的代碼，並將頁面 HTML 保持為的"真實來源"( 因為例如 Elementor 是存入 HTML + JSON ，而 Divi 和 Avada 的 Fusion Builder 都是存入 shortcode 短碼 )

• 一個與 WordPress 配合良好的插件，將標準的頁首和頁尾留給主題，允許對頁面進行邊到邊( edge-to-edge )的製作 - 同時保持原本 WordPress 的版型覆寫機制 ( Override )，例如自定義文章類型 ( post type )
  

• 一個極度輕量級的套件，完全不會對網站添加任何額外的 Javascsript 或 CSS 文件

• 一個沒有任何限制的工具 - 可用於製作小型和大型網站

• 一個令人振奮的工具，具有嵌入式"現成的" HTML ，可滿足現代化的網站設計需求，整合了 SVG 圖庫、Unsplash 免授權圖庫的搜尋 API，以及您需要的一切

• 一個我真的很想建立網頁的地方，並在使用它的時候玩得開心！

為了達到這個目標，技術上需要一些時間才能找到正確的選擇。主要問題之一是使用哪個 CSS 框架；順便說，我在拆解一些流行的 WordPress 頁面編輯器時，我發現他們加載了額外的 CSS 框架，該 CSS 框架被添加到主題中。所以...您最終會擁有一個使用兩種不同網格系統的網站 —— 一種用於前端畫面，一種用於編輯器畫面。這只是頁面編輯器問題中的冰山一角...拜託不要讓我繼續往下說......

我想擁有一個精簡、可靠、開源技術來與 LiveCanvas "合作" —— 以一種可重複、良好且快速的方式開始構建新網站並保證良好的性能，最大限度地減少臃腫。在我探索和測試了許多 CSS 框架的負載、設計思想和入門主題之後...

最終，我決定選擇 Bootstrap 4 ( 現在已經升到 Bootstrap 5 了 ) 作為 CSS 框架。我認為這是當今最好的妥協，用一個真正經歷過實戰考驗的工具來製作一個完美 RWD 的網站 - 特別是它還有龐大的用戶和社群 - 前端開發人員應該會感到痛哭流涕。

為了"合併" WordPress 和 Bootstrap，我需要一個好的入門主題。我最後選擇了 UnderStrap —— 是 GitHub 上最受歡迎的 Bootstrap 4 WordPress 主題 —— 而且它的設定真的很簡單。另一個有趣的替代方案是 Roots.io 的 Sage，但是它對於新手來說開始使用它太複雜了。我想要一些簡單的東西就好。未來我們會支持更複雜的東西。我就是這麼看的。

雖然搭載了主題，但依然擁有完全的 CSS 樣式自由 - 您可以選擇在 UnderStrap 中重新用 SCSS 編譯 Bootstrap 並根據需要在視覺上調整啟動主題 - UnderStrap 是為了特定目的而製作的 - 對懶人來說，我構建了一個免費的 UnderStrap 子主題 - 包含 30+ 現成的 Bootstrap 樣式，以及一些方便的工具 —— 而且一樣保持苗條和純粹。

[未來展望]

今天，LiveCanvas 已經是一個產品，來自英國、德國、澳大利亞、西班牙、法國的一群設計師投入了他們的心血，讓 LiveCanvas 每天都變得更好。我將永遠感激他們 —— 實際上每當我看到他們用 LiveCanvas 建立的網站，不止一次讓我驚艷到不行🤩。 LiveCanvas 已完全準備好在生產環境 ( production environment ) 上使用 - 順便說， LiveCanvas 官網當然也是用 LiveCanvas 做的。我發誓，用 LiveCanvas 工作一定很有趣！

Jeff @ dopewp.com (現在為 LiveCanvas.com)