認識 Hugo 和 Hugo Blox

👋 Hi Stranger

歡迎來到 Hugo 和 Hugo Blox 非官方中文化使用筆記！我研究 Hugo 與 Hugo Blox 的時間不是很長，有時候會遇到不熟悉的功能，這時候就會上官方文件找答案，我在這裡把我的學習筆記整理成文章，希望對你有所幫助。

簡介網站、 Hugo 和 Hugo Blox 間的關係

總結來說，Hugo 就像是建造房子的基礎結構，而 Hugo Blox 則是用來裝飾和完善這個房子。我們可以直接拎著一卡皮箱入住，在 5 分鐘內快速建立一個基本的網站。

為了方便理解，先想像一下…

想像你正在建造一棟房子。首先，你需要一個堅固的結構，像是樑柱、牆壁和地板，這就像是房子的「結構骨架」。在網站的世界裡，Hugo 就是一種骨架，一個用來建造網站的工具。

我們會依據我們的網站需求，選擇適合的骨架，像是自建、WordPress、Hugo、Ghost…等。 Hugo 幫助我們快速地搭建網站的基本結構，讓我們可以專注於填充內容；就像鋼筋、木頭可以快速搭出房子的基本雛形。

網站：就像是一棟房子，ex: 小木屋、城堡、摩天大樓、購物中心…等

Hugo：就像是蓋房子的骨架，ex: 鋼骨、木造、磚造、鋼筋混凝土…等

什麼是 Hugo？

Hugo 是使用 Go 語言開發的靜態網站生成器，是一個快速、輕量、易於使用、可擴展的網站生成器。

Hugo Blox：就像是房子內的隔間配置與基本的裝潢，ex: 一層四戶、磚牆、木牆、系統收納、廚具

接下來，為了讓房子更舒適和美觀，我們會添加家具、裝飾和其他設計元素。這些就像是 Hugo Blox，它提供了許多現成的模板和設計，讓我們可以輕鬆地美化和自訂我們的網站。使用 Hugo Blox，我們不需要懂得寫程式碼，也能夠透過拖放功能、可定制模板和內建的 SEO 工具，快速創建精美的網站。

什麼是 Hugo Blox？

Hugo Blox 是 Hugo 的框架，提供了很多現成的元件，可以快速建立網站。

        <div class="preview-image">
            <div class="preview-photo" style="background-image: url(https://hugoblox.com/social.png)"></div>
        </div>
        
        <div class="preview-content">
            <h4 class="preview-title">Hugo Blox</h4>
            
            <p class="preview-description">Accelerate your growth with the #1 open source marketing platform for creators to easily publish, share, and grow a business around their content. An all-in-one tool to build a website, landing pages, and publish courses. Remove the middleman. Engage your fans directly and make your profile standout from the crowd.</p>
            
            <div class="preview-meta">
                
                <span class="preview-date">edited date: 2025-02-03</span>
                
                <span class="preview-domain">hugoblox.com</span>
            </div>
        </div>
    </div>
</a>

在選擇 Hugo 之前應該要思考的是

網站的用途是？

你的網站是一個靜態的網站，還是一個動態的網站？

靜態網站：就像是個人網站、作品集、公司官網…等，這些網站通常不需要經常更新，也不需要有互動功能。
動態網站：像是電商網站、社群網站、討論區…等，這些網站通常需要經常更新，也需要有互動功能。

靜態網站相當適合，動態網站請選別的。

如何開始建立一個網站

遵循 Hugo 官方文件

可以參考 IT 鐵人賽教學的系列文章，或者是參考線上課程，有蠻詳細的介紹。我自己是試過之後決定砍掉重練，使用 Hugoblox 來建立網站。

使用 Hugo Blox 建立

下一步

Hugoblox 架站指南如果有問題，歡迎透過 Instagram 找我聊聊。透過 IG 聯繫

最近更新於 2025-03-15