本章結束後你會學到

  1. 為何使用 hugo / 以及hugo 的好處
  2. 如何安裝 Hugo
  3. 選擇適合的 theme 並將首頁替換文字

靜態網站

靜態網站和動態網站的差異可以用一個簡單的比喻來理解。想象一下,靜態網站就像是一本已經印刷完成的書。當你打開這本書時,不論是今天、明天還是一年後,它的內容都是一樣的。這種網站因為內容固定,所以打開速度很快,就像迅速翻閱一本書一樣。但如果想要更改書中的內容,就需要重新印刷,這就像是更新靜態網站一樣,需要重新製作和上傳網頁文件。

而動態網站就像是一個每天都在更新菜單的餐廳。這個餐廳會根據季節、當天可用的食材來調整他們的菜單。每當你訪問這家餐廳,你都可能會遇到全新的體驗和選擇,這就像動態網站根據用戶的需求和互動實時更新其內容。

靜態網站的優勢

  • 快速載入:因為內容是固定的,就像快速翻閱一本書一樣,網站可以很快地展示給你看
  • 安全性高:就像印刷好的書很難被隨意更改內容一樣,靜態網站也比較不容易被黑客攻擊
  • 維護成本更低廉:不像動態網站還需要虛擬機以及資料庫

Why Hugo?

使用 Hugo 作為靜態網站生成器有幾個顯著的好處:

  1. 速度快:Hugo 以其生成網頁的速度聞名,它可以在幾毫秒內生成一個完整的網站,這對於大型項目尤其有用。
  2. 易於使用:Hugo 的設計初衷是簡單易用。即使是對編碼不太熟悉的人,也可以相對輕鬆地開始使用 Hugo。
  3. 靈活性:Hugo 支持多種內容格式和自定義模板,可以滿足各種不同的網站需求,從簡單的個人博客到複雜的公司網站。
  4. 無需數據庫:Hugo 生成的是靜態文件,因此不需要數據庫支持。這使得網站更加輕便,易於部署。
  5. 安全性高:由於缺乏數據庫和動態後端處理,靜態網站本質上比動態網站更安全,減少了被黑客攻擊的風險。
  6. 開源和免費:作為一個開源項目,Hugo 不僅免費使用,還有一個活躍的開發者和用戶社區,這意味著豐富的插件、主題和支持。
  7. 易於集成現代開發工具:Hugo 可以輕鬆集成到現代的開發工作流程中,包括版本控制系統(如 Git)和持續集成/持續部署(CI/CD)工具。
  8. 支持Markdown:Hugo 原生支持 Markdown,這是一種廣泛使用的輕量級標記語言,用戶可以很方便地撰寫和格式化內容。

這些特點使 Hugo 成為一個非常受歡迎的靜態網站生成器,特別適合那些尋求速度、安全性和靈活性的開發者和內容創作者。

Install hugo

offical site

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 &#10084; 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 吧