前言

《為什麼要有自己的部落格?》中交代了建部落格的原因,想必你各位點進來就是做好建立部落格的覺悟了!

那就讓我們開始吧~

為什麼選 Hugo

  1. 既然官網 都說他是全世界最快的框架,捨他其誰?

The world’s fastest framework for building websites

hugo-logo.png

  1. 完全免費的 open-source Go 專案。

open-source.png

  1. 身為一個 Gopher 當然就要支持一下呀,說不定之後用一用覺得哪裡可以優化,還有機會可以貢獻一下。

用 Hugo 在本地建立網站

1. 安裝 Hugo

身為 macOS 使用者,這邊就用 homebrew 安裝

  1. 打開終端機 Terminal command + space

    terminal.png

  2. 終端機輸入(以下皆為終端機輸入)

    brew install hugo
    

    brew-install-hugo.png

  3. 其他安裝方式可以參考這裡

2. 安裝 Git

  1. 一樣打開終端機用 homebrew 安裝

    brew install git
    
  2. 其他安裝方式可以參考這裡

3. 建立網頁

  1. 建立網頁

    hugo new site <你的網站名稱>
    

    hugo-new-site.png

  2. 這邊以 cyanSky 為例,你會看到 cyanSky 資料夾,架構如下

    cyanSky
    ├── archetypes
    │   └── default.md
    ├── assets
    ├── content
    ├── data
    ├── hugo.toml
    ├── i18n
    ├── layouts
    ├── static
    └── themes
    
    8 directories, 2 files
    
  3. 進入資料夾啟動 git

    cd cyanSky # 把 cyanSky 改成 <你的網站名稱>
    git init
    
  4. 套上 PaperModHugo Theme (網頁主題)

    git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
    
  5. 把 PaperMod 主題加入 hugo.toml 檔案

    echo "theme = 'PaperMod'" >> hugo.toml
    
  6. 啟動網頁

    hugo server
    
  7. 打開網址 http://localhost:1313/

    登愣!恭喜你的本地網頁跑起來拉~

    hugo-server.png

    如果要關掉,就回到執行 hugo server 的地方按下 Ctrl+C 即可

4. 建立內容

  1. 建立內容

    hugo new content content/posts/my-first-post.md
    

    會看到在 contents 底下多了一個 posts 資料夾,資料夾內有 my-first-post.md 檔案

    .
    ├── archetypes
    │   └── default.md
    ├── assets
    ├── content
    │   └── posts
    │       └── my-first-post.md --> 剛創建的檔案
    ├── data
    ├── hugo.toml
    
  2. 用你的編輯器(VSCode)打開 my-first-post.md 會看到以下內容

    +++
    title = 'My First Post'
    date = 2024-01-14T07:07:07+01:00
    draft = true
    +++
    
  3. 接著可以在 +++ 底下開始用 markdown 語法輸入內容

    +++
    date = '2024-12-29T14:02:12+08:00'
    draft = true
    title = 'My First Post'
    +++
    
    This is **bold** text, and this is _emphasized_ text.
    
    Visit the [Hugo](https://gohugo.io) website!
    
  4. 再 run 一次你的網站

    這次要加上 -D 參數,這樣才會把 front matter 設定 draft=true 的文章也一併顯示出來,有興趣可以參考官網文件 command line flags

    hugo-front-matter-draft.png

    hugo server -D
    

    登愣~恭喜你的第一篇文章就出來拉 🎉

    hugo-server-D.png

5. 客製化你的網頁成自己喜歡的樣子 ⭐

這超重要拉~東西很多很雜,慢慢調整成你們自己喜歡的樣子吧!

  1. 刪掉 hugo.toml 這能調整的東西太少惹

  2. 新增 config.yaml 這份文件是從 PaperMod 的範例 來的

    • config.yaml

      baseURL: "https://examplesite.com/"
      title: ExampleSite
      paginate: 5
      theme: PaperMod
      
      enableRobotsTXT: true
      buildDrafts: false
      buildFuture: false
      buildExpired: false
      
      minify:
        disableXML: true
        minifyOutput: true
      
      params:
        env: production # to enable google analytics, opengraph, twitter-cards and schema.
        title: ExampleSite
        description: "ExampleSite description"
        keywords: [Blog, Portfolio, PaperMod]
        author: Me
        # author: ["Me", "You"] # multiple authors
        images: ["<link or path of image for opengraph, twitter-cards>"]
        DateFormat: "January 2, 2006"
        defaultTheme: auto # dark, light
        disableThemeToggle: false
      
        ShowReadingTime: true
        ShowShareButtons: true
        ShowPostNavLinks: true
        ShowBreadCrumbs: true
        ShowCodeCopyButtons: false
        ShowWordCount: true
        ShowRssButtonInSectionTermList: true
        UseHugoToc: true
        disableSpecial1stPost: false
        disableScrollToTop: false
        comments: false
        hidemeta: false
        hideSummary: false
        showtoc: false
        tocopen: false
      
        assets:
          # disableHLJS: true # to disable highlight.js
          # disableFingerprinting: true
          favicon: "<link / abs url>"
          favicon16x16: "<link / abs url>"
          favicon32x32: "<link / abs url>"
          apple_touch_icon: "<link / abs url>"
          safari_pinned_tab: "<link / abs url>"
      
        label:
          text: "Home"
          icon: /apple-touch-icon.png
          iconHeight: 35
      
        # profile-mode
        profileMode:
          enabled: false # needs to be explicitly set
          title: ExampleSite
          subtitle: "This is subtitle"
          imageUrl: "<img location>"
          imageWidth: 120
          imageHeight: 120
          imageTitle: my image
          buttons:
            - name: Posts
              url: posts
            - name: Tags
              url: tags
      
        # home-info mode
        homeInfoParams:
          Title: "Hi there \U0001F44B"
          Content: Welcome to my blog
      
        socialIcons:
          - name: x
            url: "https://x.com/"
          - name: stackoverflow
            url: "https://stackoverflow.com"
          - name: github
            url: "https://github.com/"
      
        analytics:
          google:
            SiteVerificationTag: "XYZabc"
          bing:
            SiteVerificationTag: "XYZabc"
          yandex:
            SiteVerificationTag: "XYZabc"
      
        cover:
          hidden: true # hide everywhere but not in structured data
          hiddenInList: true # hide on list pages and home
          hiddenInSingle: true # hide on single page
      
        editPost:
          URL: "https://github.com/<path_to_repo>/content"
          Text: "Suggest Changes" # edit text
          appendFilePath: true # to append file path to Edit link
      
        # for search
        # https://fusejs.io/api/options.html
        fuseOpts:
          isCaseSensitive: false
          shouldSort: true
          location: 0
          distance: 1000
          threshold: 0.4
          minMatchCharLength: 0
          limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
          keys: ["title", "permalink", "summary", "content"]
      menu:
        main:
          - identifier: categories
            name: categories
            url: /categories/
            weight: 10
          - identifier: tags
            name: tags
            url: /tags/
            weight: 20
          - identifier: example
            name: example.org
            url: https://example.org
            weight: 30
      # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
      pygmentsUseClasses: true
      markup:
        highlight:
          noClasses: false
          # anchorLineNos: true
          # codeFences: true
          # guessSyntax: true
          # lineNos: true
          # style: monokai
      

    換完後網頁瞬間變了一個樣

    paper-mod-regular-mode.png

  3. PaperMod 有三種模式:

    我們就還換看看 Profile Mode

    打開 config.yaml,找到

    profileMode:
      enabled: false
    

    false 改成 true

    paper-mod-config-enable-profile-mode.png

    然後你又會再次驚艷

    paper-mod-profile-mode.png

後面還有很多可以調整,這邊就不贅述,留給你們慢慢玩

接著來看看,怎麼把網頁伺服器,從地端送上雲端《手把手打造你的專屬部落格之二 — Hugo 網站上雲伺服器 CloudFlare Pages》《手把手打造你的專屬部落格番外篇 — Hugo 網站上雲伺服器 Netlify vs CloudFlare》

Reference

  1. Hugo Doc

  2. Hugo Theme - PaperMod