Hugo + Github Pages/Cloudflare Pages —>自建部落格

下載寫部落格用軟體:Obsidian
步驟1:安裝Obsidian
安裝網址:obsdmdobsdmdDownload - Obsidian 步驟2:建1個資料夾名為「posts」
notion image
PS:僅有此資料夾檔案會公開至網站
 
notion image
notion image
PS:點右鍵「顯示資料夾」可以看到
 
架設Git、GO、Hugo
安裝Git:
notion image
安裝GO:golanggolangAll releases - The Go Programming Language
notion image
架設Hugo
安裝Hugo:GoHugoIOv2GoHugoIOv2Installation
  • 放入指定目錄
    • 將解壓後的 hugo.exe 放入指定的目錄,例如:D:\tools\hugo_extended\hugo.exe
  • 添加系統環境變數
    • 按下 Win + R,輸入 sysdm.cpl,按 Enter。
    • 進入 進階 → 環境變數
    • 系統變數 中找到 Path 變數,點擊 編輯
    • 點擊 新增,將 hugo.exe 所在的目錄加入,例如:D:\tools\hugo_extended
    • 確認後保存變更。
  • 確認安裝成功
    • 打開 cmd,輸入以下命令:
      • notion image
使用Hugo建立Blog相關:
notion image
notion image
notion image
下載Hugo主題:
從此連結尋找主題:
Complete List
  • 請按照主題的下載說明進行操作。最推薦的方式是以 Git 子模組(submodule)的方式安裝。
應用Hugo主題:(以stack為例)

配置與美化

  1. 複製配置文件
    1. 進入 根目錄\themes\hugo-theme-stack\exampleSite 資料夾,將 hugo.yaml 文件複製到 根目錄 下。如果根目錄下已存在其他配置文件(如 hugo.tomlhugo.json),請將其刪除。然後打開 hugo.yaml,根據範本進行修改。
  1. 網站圖示 (favicon) 設定
      • favicon.ico 放置於 根目錄\static 資料夾下。
      • 在配置文件中設定:
    1. 側邊欄頭像 (avatar) 設定
        • avatar.png 放置於 根目錄\assets\img 資料夾下。
        • 在配置文件中設定:
      1. 啟用搜尋與歸檔欄
          • 主題模板根目錄\themes\hugo-theme-stack\exampleSite\content\page 中找到對應的 .md 文件,並將其放置到根目錄對應的資料夾內。例如:
            • 根據需求修改該文件內容。
        1. 樣式美化
            • 根目錄\assets\scss 資料夾下新建 custom.scss,並編輯以下內容:
           
          同步「posts」資料夾 -(Hugo & Obsidian)
          步驟1:建立資料夾 posts
          到根目錄(hugo blog的目錄)
          notion image
          步驟2:測試
          notion image
          同步文章、資料夾內的圖片-「image.py」
          image.py
          注意:記得要改成你自己的相關位置
          創建Github儲存庫
          步驟1:點擊 「New」
          notion image
          步驟2:
          2-1:隨意命名
          2-2:選Public
          2-3:創造
          notion image
          點創建後會出現以下畫面
          notion image
          創建SSH-Key並匯入SSH-Key至Githun帳號
          步驟1:創建SSH-Key
          notion image
          步驟2:匯入SSH-Key至Githun帳號
          notion image
          把SSH_Key複製進Key的欄位
          notion image
          notion image
          git上傳至repo
          notion image
          notion image
          notion image
           
           
           

          以上資料來源參考至: YouTubeYouTubeI started a blog.....in 2024 (why you should too) Yukari BlogYukari BlogHugo + Github Pages/Cloudflare Pages搭建个人博客
           
          其他指令
          作者:SecBeater
          著作權聲明:本文使用 CC BY-NC-SA 4.0 著作權許可,使用請標注出處。

          Previous

          3步驟簡單快速利用閒置GPU挖狗狗幣(DogeCoin)

          Next

          風花雪月攻略統整

          留言