4 minutes
用 Hugo 建立靜態網站教學
本章結束後你會學到
- 為何使用 hugo / 以及hugo 的好處
- 如何安裝 Hugo
- 選擇適合的 theme 並將首頁替換文字
靜態網站
靜態網站和動態網站的差異可以用一個簡單的比喻來理解。想象一下,靜態網站就像是一本已經印刷完成的書。當你打開這本書時,不論是今天、明天還是一年後,它的內容都是一樣的。這種網站因為內容固定,所以打開速度很快,就像迅速翻閱一本書一樣。但如果想要更改書中的內容,就需要重新印刷,這就像是更新靜態網站一樣,需要重新製作和上傳網頁文件。
而動態網站就像是一個每天都在更新菜單的餐廳。這個餐廳會根據季節、當天可用的食材來調整他們的菜單。每當你訪問這家餐廳,你都可能會遇到全新的體驗和選擇,這就像動態網站根據用戶的需求和互動實時更新其內容。
靜態網站的優勢
- 快速載入:因為內容是固定的,就像快速翻閱一本書一樣,網站可以很快地展示給你看
- 安全性高:就像印刷好的書很難被隨意更改內容一樣,靜態網站也比較不容易被黑客攻擊
- 維護成本更低廉:不像動態網站還需要虛擬機以及資料庫
Why Hugo?
使用 Hugo 作為靜態網站生成器有幾個顯著的好處:
- 速度快:Hugo 以其生成網頁的速度聞名,它可以在幾毫秒內生成一個完整的網站,這對於大型項目尤其有用。
- 易於使用:Hugo 的設計初衷是簡單易用。即使是對編碼不太熟悉的人,也可以相對輕鬆地開始使用 Hugo。
- 靈活性:Hugo 支持多種內容格式和自定義模板,可以滿足各種不同的網站需求,從簡單的個人博客到複雜的公司網站。
- 無需數據庫:Hugo 生成的是靜態文件,因此不需要數據庫支持。這使得網站更加輕便,易於部署。
- 安全性高:由於缺乏數據庫和動態後端處理,靜態網站本質上比動態網站更安全,減少了被黑客攻擊的風險。
- 開源和免費:作為一個開源項目,Hugo 不僅免費使用,還有一個活躍的開發者和用戶社區,這意味著豐富的插件、主題和支持。
- 易於集成現代開發工具:Hugo 可以輕鬆集成到現代的開發工作流程中,包括版本控制系統(如 Git)和持續集成/持續部署(CI/CD)工具。
- 支持Markdown:Hugo 原生支持 Markdown,這是一種廣泛使用的輕量級標記語言,用戶可以很方便地撰寫和格式化內容。
這些特點使 Hugo 成為一個非常受歡迎的靜態網站生成器,特別適合那些尋求速度、安全性和靈活性的開發者和內容創作者。
Install hugo
brew install hugo
hugo --version
確認已安裝成功
hugo new site YOUR_SITE_NAME
cd YOUR_SITE_NAME
Themes
尋找自己喜歡的 style
找到後照著裡面的安裝指示完成安裝,會將主題裝在 themes 中並在 hugo.toml 中套用 theme 參數
theme = "hello-friend-ng" # 舉例
接著針對 hugo.toml 進行修改
hugo.toml 的範例
baseURL = "https://example.com"
title = "Hello Friend NG"
languageCode = "en-us"
theme = "hello-friend-ng"
PygmentsCodeFences = true
PygmentsStyle = "monokai"
paginate = 10
rssLimit = 10 # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
# googleAnalytics = ""
# disqusShortname = ""
archetypeDir = "archetypes"
contentDir = "content"
dataDir = "data"
layoutDir = "layouts"
publishDir = "public"
buildDrafts = false
buildFuture = false
buildExpired = false
canonifyURLs = true
enableRobotsTXT = true
enableGitInfo = false
enableEmoji = true
enableMissingTranslationPlaceholders = false
disableRSS = false
disableSitemap = false
disable404 = false
disableHugoGeneratorInject = false
[permalinks]
posts = "/posts/:year/:month/:title/"
[author]
name = "Jane Doe"
[blackfriday]
hrefTargetBlank = true
[taxonomies]
tag = "tags"
category = "categories"
series = "series"
[params]
dateform = "Jan 2, 2006"
dateformShort = "Jan 2"
dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04"
# Metadata mostly used in document's head
#
description = "Nice theme for homepages and blogs"
keywords = ""
images = [""]
# Home subtitle of the index page.
#
homeSubtitle = "Hello Friend NG"
# Set a background for the homepage
# backgroundImage = "assets/images/background.jpg"
# Prefix of link to the git commit detail page. GitInfo must be enabled.
#
# gitUrl = ""
# Set disableReadOtherPosts to true in order to hide the links to other posts.
#
disableReadOtherPosts = false
# Enable theme toggle
#
# This options enables the theme toggle for the theme.
# Per default, this option is off.
# The theme is respecting the prefers-color-scheme of the operating system.
# With this option on, the page user is able to set the scheme he wants.
enableThemeToggle = false
# Sharing buttons
#
# There are a lot of buttons preconfigured. If you want to change them,
# generate the buttons here: https://sharingbuttons.io
# and add them into your own `layouts/partials/sharing-buttons.html`
#
enableSharingButtons = true
# Global language menu
#
# Enables the global language menu.
#
enableGlobalLanguageMenu = true
# Integrate Javascript files or stylesheets by adding the url to the external assets or by
# linking local files with their path relative to the static folder, e.g. "css/styles.css"
#
customCSS = []
customJS = []
# Toggle this option need to rebuild SCSS, requires extended version of Hugo
#
justifyContent = false # Set "text-align: justify" to .post-content.
# Integrate Plausible.io
# plausibleDataDomain = 'test.com'
# plausibleScriptSource = 'https://plausible.io/js/script.js'
# Custom footer
# If you want, you can easily override the default footer with your own content.
#
[params.footer]
trademark = 2023
rss = true
copyright = true
author = true
topText = []
bottomText = [
"Powered by <a href=\"http://gohugo.io\">Hugo</a>",
"Made with ❤ by <a href=\"https://github.com/rhazdon\">Djordje Atlialp</a>"
]
# Colors for favicons
#
[params.favicon.color]
mask = "#1b1c1d"
msapplication = "#1b1c1d"
theme = "#1b1c1d"
[params.logo]
logoMark = ">"
logoText = "$ cd /home/"
logoHomeLink = "/"
# Set true to remove the logo cursor entirely.
# logoCursorDisabled = false
# Set to a valid CSS color to change the cursor in the logo.
# logoCursorColor = "#67a2c9"
# Set to a valid CSS time value to change the animation duration, "0s" to disable.
# logoCursorAnimate = "2s"
# Append the current url pathname to logoText
# logoCursorPathname = true
# Commento is more than just a comments widget you can embed —
# it’s a return to the roots of the internet.
# An internet without the tracking and invasions of privacy.
# An internet that is simple and lightweight.
# An internet that is focused on interesting discussions, not ads.
# A better internet.
# Uncomment this to enable Commento.
#
# [params.commento]
# url = ""
# Uncomment this if you want a portrait on your start page
#
# [params.portrait]
# path = "/img/image.jpg"
# alt = "Portrait"
# maxWidth = "50px"
# Social icons
[[params.social]]
name = "twitter"
url = "https://twitter.com/"
[[params.social]]
name = "email"
url = "mailto:nobody@example.com"
[[params.social]]
name = "github"
url = "https://github.com/"
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/"
[[params.social]]
name = "stackoverflow"
url = "https://www.stackoverflow.com/"
[languages]
[languages.en]
weight = 1
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
[languages.en.params]
subtitle = "Hello Friend NG Theme"
[languages.fr]
weight = 2
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
[languages.fr.params]
subtitle = "Hello Friend NG Theme"
[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "about/"
[[menu.main]]
identifier = "posts"
name = "Posts"
url = "posts/"
可以嘗試將不需要的東西註解掉,hugo 通常會有設定預設值
運行
hugo server
會在本地端運行暫時的 server,並可以使用 browser 查看,在每次變動檔案時,都會自動 reload,個人認為非常方便
好好調整 hugo.toml 吧