從0開始建立Github個人博客(hugoPaperMod)

從0開始建立Github個人博客(hugo&PaperMod)

github提供給每個用戶一個網址，用戶可以建立自己的靜態網站。

一、Hugo

hugo是一個快速搭建網站的工具，由go語言編寫。

1.安裝hugo

到hugo的github標簽頁Tags · gohugoio/hugo選擇一個版本，下載對應的安裝包。比如hugo_extended_withdeploy_0.147.0_windows-amd64.zip。

解壓后，在根目錄打開cmd，輸入

hugo new site YourSiteName

為你的網站建立文件夾。YourSiteName更改為你的網站的名字。
根目錄會出現YourSiteName文件夾。

3.將根目錄的hugo.exe復制到YourSiteName里。
在YourSiteName文件夾里打開cmd，輸入

hugo server -D

會返回如下信息：

                   | EN
-------------------+-----Pages            | 11Paginator pages  |  0Non-page files   |  0Static files     |  0Processed images |  0Aliases          |  2Cleaned          |  0Built in 79 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

在瀏覽器中輸入http://localhost:1313/，顯示Page Not Found，說明服務器正常運行，但是此時網站還沒有頁面。

2.選擇網站主題

在Hugo Themes選擇你想要的theme，然后根據theme的安裝說明操作就行了。
在此以PaperMod為例。官方安裝教程界面：Installation · adityatelange/hugo-PaperMod Wiki

安裝PaperMod，可以：

  1. 在你的網站的theme文件夾使用：

    git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

  2. 或者，在Tags · adityatelange/hugo-PaperMod選擇版本，下載zip并解壓到theme文件夾。

在你的網站的根文件夾里的hugo.yml文件里添加

theme: ["PaperMod"]

3.新建一個筆記

在你的網站的根頁面下使用cmd：

hugo new  posts/first.md

YourSiteName/content/posts/first.md 就會建立，打開后，內容為：

---
date: '2025-05-01T18:41:05+08:00'
draft: true
title: 'first'
---

這三條短線圍起來的是該筆記的屬性。第一行是創建時間；第二行為false時表示草稿狀態，改為true才會顯示在網站中；第三行為該筆記的標題。之后還可以添加其他的屬性。

打開http://localhost:1313/，刷新后就能看到剛才創建的筆記了。如果沒有就重新hugo server -D。

你可以通過cmd，或者直接新建md文件來添加筆記。

4.定制個人博客

4.1添加菜單

在hugo.yml文件中添加：

menu:main:- identifier: categoriesname: categoriesurl: /categories/weight: 10- identifier: tagsname: tagsurl: /tags/weight: 20- identifier: examplename: example.orgurl: https://example.orgweight: 30

在網站的右上角就能看到菜單了

4.2置頂帖子

在筆記的md文件里添加：

---
...
weight: 1
---

weight為正整數，表示筆記順序。放到最頂上就設為1。

4.3hugo.yaml的可選項

hugo.yaml是網站根目錄的配置文件

baseURL: https://Rook1eChan.github.io
languageCode: zh-cn
title: Chan's Bolg
theme: ["PaperMod"]
buildDrafts: falseparams: ShowBreadCrumbs: true  ShowReadingTime: falseShowShareButtons: falseShowCodeCopyButtons: truefuseOpts:isCaseSensitive: falseshouldSort: truelocation: 0distance: 1000threshold: 0.4minMatchCharLength: 0keys: ["title", "permalink", "summary", "content"]homeInfoParams: Title: "你好，歡迎來到我的博客 \U0001F44B"Content: "welcome!"socialIcons: - name: githuburl: "https://github.com/Rook1eChan"# - name: twitter#   url: "twitter.com"# - name: facebook#   url: "facebook.com"assets:favicon: "/apple-touch-icon.png"label:icon: /apple-touch-icon.pngiconHeight: 35outputs:home:- HTML- RSS- JSONmenu:main:# - identifier: categories#   name: categories#   url: /categories/#   weight: 10# - identifier: tags#   name: tags#   url: /tags/#   weight: 20- identifier: 搜索name: searchurl: /search/weight: 25

  • baseURL: 網站的基礎URL，這里是 “https://Rook1eChan.github.io”，必須要寫，不然導航出現錯誤。不要寫example.com

  • languageCode: 網站語言代碼，“zh-cn” 表示簡體中文

  • title: 網站標題

  • theme: 使用的主題

  • buildDrafts: false 表示不設置草稿文章，所有文章都會被展示

  • 顯示相關:

    • ShowBreadCrumbs: true 顯示面包屑導航
    • ShowReadingTime: false 不顯示文章閱讀時間
    • ShowShareButtons: false 不顯示分享按鈕
    • ShowCodeCopyButtons: true 顯示代碼塊的復制按鈕

  • 搜索功能 (fuseOpts):

    • 配置了基于 Fuse.js 的搜索功能參數，包括不區分大小寫、排序方式等

  • 主頁信息 (homeInfoParams):

    • Title：標題
    • Content：內容

  • 主頁社交媒體圖標 (socialIcons):

    • 只啟用了 GitHub 鏈接，指向 “https://github.com/Rook1eChan”
    • Twitter 和 Facebook 鏈接

  • 資源 (assets):

    • 設置了網站圖標 (favicon) 為 “/apple-touch-icon.png”

  • 標簽 (label):

    • 設置了圖標及其高度

  • 指定了主頁的輸出格式為 HTML、RSS 和 JSON

  • 主菜單 (main) 中只配置了一個 “搜索” 項:

    • 標識符: “搜索”
    • 名稱: “search”
    • URL: “/search/”
    • 權重: 25 (用于菜單項排序)

  • 分類和標簽菜單項自選

二、在GitHubPage部署網站

基本思路：建立兩個倉庫，一個網站倉庫負責展示頁面，另一個源倉庫負責存儲源碼、更新內容并自動更新同步到網站倉庫。

1.建立網站倉庫

在Github頁面點擊最上面的加號-New repository
Repository name 填寫 你的GitHub用戶名.github.io，這樣GitHub才會把它識別為網站倉庫
選擇Public
點擊綠色的Create repository

2.建立源倉庫

同上建立倉庫，隨便命名，Public或Private都行
這里我命名為mywebsite

3.GitHub 個人訪問令牌 (Token) 生成&配置

  1. 點擊右上角 頭像
  2. 選擇 Settings
  3. 左側菜單選擇 Developer settings
  4. 選擇 Personal access tokens → Tokens (classic)
  5. 點擊 Generate new token → Generate new token (classic)
  6. 設置 Token 信息：
    • Token name：輸入名稱（如 mywebsite）
    • Expiration：選擇 No expiration（永不過期）
    • 權限勾選：
      • ? repo（全倉庫權限）
      • ? admin:repo_hook（倉庫管理權限）
  7. 點擊綠色按鈕 Generate token
  8. 重要：立即復制生成的密鑰并妥善保存（離開頁面后將無法再次查看）
  9. 進入源倉庫
    1. 點擊settings
    2. 左側Secrets and variables-Actions
    3. New repository secret
    4. 填寫剛才的名稱和密鑰
    5. Add sercet

4.配置workflow腳本

在本地網站根目錄新建文件夾及文件.github/workflows/hugo.yaml
寫入：

name: github pages # 名字自取on:push:branches:- main  jobs:deploy: # 任務名自取runs-on: ubuntu-latest	# 在什么環境運行任務steps:- uses: actions/checkout@v2	# 引用actions/checkout這個action，與所在的github倉庫同名with:submodules: true  # Fetch Hugo themes (true OR recursive) 獲取submodule主題fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod- name: Setup Hugo	# 步驟名自取uses: peaceiris/actions-hugo@v2	# hugo官方提供的action，用于在任務環境中獲取hugowith:hugo-version: 'latest'	# 獲取最新版本的hugoextended: true- name: Buildrun: hugo --minify	# 使用hugo構建靜態網頁- name: Deployuses: peaceiris/actions-gh-pages@v3	# 一個自動發布github pages的actionwith:# github_token: ${{ secrets.GITHUB_TOKEN }} 該項適用于發布到源碼相同repo的情況，不能用于發布到其他repoexternal_repository: Rook1eChan/Rook1eChan.github.io	# 發布到哪個repopersonal_token: ${{ secrets.MYWEBSITE2 }}	# 發布到其他repo需要提供上面生成的personal access tokenpublish_dir: ./public	# 注意這里指的是要發布哪個文件夾的內容，而不是指發布到目的倉庫的什么位置，因為hugo默認生成靜態網頁到public文件夾，所以這里發布public文件夾里的內容publish_branch: main	# 發布到哪個branch

只需要更改personal_token和external_repository

5. SSH 密鑰配置

  1. 檢查是否已有 SSH Key

    • Windows：
      進入 C:\Users\你的用戶名\.ssh，查看是否存在 id_rsa（私鑰）和 id_rsa.pub（公鑰）文件。

      • 若有，說明已生成過 SSH Key，可直接使用。
      • 若無，需重新生成。

    • Linux：

      cd ~/.ssh
ls

      檢查是否存在 id_rsa 和 id_rsa.pub 文件。

  2. 生成 SSH Key（若無）
    運行以下命令（替換 xxx@xxx.com 為你的 GitHub 注冊郵箱）：

ssh-keygen -t rsa -C "xxx@xxx.com"
  • 連續按 3 次回車（使用默認路徑，不設密碼）。
  • 生成的文件：
    • id_rsa：私鑰（切勿泄露）。
    • id_rsa.pub：公鑰（需添加到 GitHub）。
  1. 將公鑰添加到 GitHub
  2. 復制公鑰內容（id_rsa.pub）：
  3. 登錄 GitHub → 點擊頭像 → Settings → SSH and GPG Keys → New SSH Key。
  4. 測試 SSH 連接
    在終端運行：
ssh -T git@github.com
  • 若顯示 Hi 你的用戶名!，說明配置成功。

之后clone或push時都選擇SSH地址，而不是https地址。

6.上傳

本地網站根目錄使用cmd，git@github.com:XXX/mywebsite.git改為源倉庫地址：

git init
git add .
git remote add origin git@github.com:XXX/mywebsite.git
git commit -m "Update"
git push -u origin main

然后在源倉庫的Action下，能看到正在Deploy，變綠色說明成功。此時網站倉庫已自動更新了內容。

進入網站倉庫-settings-Pages-Build and deployment選擇Deploy from a branch
剛才workflow腳本里寫的是main，這里就選擇main

然后進入xxx.github.io，就可以看到你的網站了！🎉

三、如何更新網站內容

不要在github和本地同時更改內容！不然會導致內容不同步，無法push。

最好是一直都在本地更改，然后push到源倉庫。

1.本地更改后，比如新建了筆記，在網站根目錄使用cmd：
不要復制注釋！

git init   //初始化git文件夾git add .  //添加變更內容git remote add origin git@github.com:XXX/mywebsite.git   //最后一項改為源倉庫的地址，如果使用ssh連接的就復制ssh地址git commit -m "new"   //設置本次操作的名稱，new可以隨便改git push -u origin main  //把本地文件push到github上，增量更新

常見問題：

git push -u origin main的時候報錯：
error: src refspec master does not match any
error: failed to push some refs to ‘github.com:Rook1eChan/mywebsite.git’

使用git branch -a，查看branch的名稱是不是main。如果是master，就把main改為master。

To github.com:Rook1eChan/mywebsite.git ! [rejected] main -> main (fetch first) error: failed to push some refs to ‘github.com:Rook1eChan/mywebsite.git’ hint: Updates were rejected because the remote contains work that you do not

說明你的GitHub和本地不同步。不建議強制合并，可以把GitHub整個repo clone到本地另一個文件，把變化的文件手動更改，再把新文件夾push上去。

感謝GitHub、Hugo和Deekseek。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/79371.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/79371.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/79371.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【AI論文】WebThinker：賦予大型推理模型深度研究能力

【AI論文】WebThinker：賦予大型推理模型深度研究能力

摘要：大型推理模型（LRMs），如OpenAI-o1和DeepSeek-R1，展示了令人印象深刻的長期推理能力。 然而，他們對靜態內部知識的依賴限制了他們在復雜的知識密集型任務上的表現，并阻礙了他們生成需要綜合各…
閱讀更多...
Linux_sudo命令的使用與機制

Linux_sudo命令的使用與機制

1、sudo命令的作用 sudo（全稱 superuser do）是 Linux/Unix 系統中權限管理的核心工具。 允許普通用戶在授權下以其他用戶（默認是 root）的權限執行命令，而無需直接登錄賬戶。 2、sudo命令的典型使用場景 sudo 覆蓋了系…
閱讀更多...
Scrapy框架之 中間件的使用

Scrapy框架之 中間件的使用

爬蟲中間件 特點：主要處理蜘蛛（Spider）和下載器（Downloader）之間的請求和響應。可以對蜘蛛生成的請求進行攔截、修改或過濾，也可以對下載器返回給蜘蛛的響應進行處理。適用場景： 請求過濾與修改…
閱讀更多...
供應鏈算法整理（一）--- 銷量預估

供應鏈算法整理（一）--- 銷量預估

在供應鏈管理領域有較多的預估場景，例如送達時長預估、銷量預估、用電量預估。特別的在智能供應鏈領域，銷量和庫存的管理的智能化也依賴銷量預估，因此在本文我們整理了 銷量預估的算法詳細的技術方案。 時間序列預測在最近兩年內發生了巨大的…
閱讀更多...
第4篇：服務層抽象與復用邏輯

第4篇：服務層抽象與復用邏輯

在業務系統復雜度指數級增長的今天，服務層（Service Layer）的合理設計直接影響著系統的可維護性和擴展性。本文將深入剖析 Egg.js 框架中的服務層架構設計，從基礎實現到高級封裝，全方位講解企業級應用的開發實踐。 一、…
閱讀更多...
Java學習手冊：Spring 數據訪問

Java學習手冊：Spring 數據訪問

一、Spring JDBC JdbcTemplate ：Spring JDBC 提供了 JdbcTemplate 類，它簡化了數據庫操作，提供了豐富的 API 來執行數據庫訪問任務。JdbcTemplate 可以自動處理數據庫連接的獲取、釋放，SQL 語句的執行，結果集的處理等…
閱讀更多...
遞歸、搜索和回溯算法《遞歸》

遞歸、搜索和回溯算法《遞歸》

在之前的優選算法當中我們已經學習了一些基本的算法，那么接下來我們就要來學習算法當中的一大重要章節——遞歸、搜索和回溯算法，其實也就是大家常常聽到的dfs、bfs；其實本質就是遞歸，在學習搜索、回溯等算法的過程當中我們會先來…
閱讀更多...
Java進階--設計模式

Java進階--設計模式

設計模式是一套被反復使用的、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。設計模式使代碼編制真正工程化，設計模式是軟件工程的基石，如同大廈的一塊塊磚石一樣&#xff0…
閱讀更多...
如何禁止AutoCAD這類軟件聯網

如何禁止AutoCAD這類軟件聯網

推薦二、三方法，對其他軟件影響最小 一、修改Hosts文件 Hosts文件是一個存儲域名與IP地址映射關系的文本文件，通過修改Hosts文件可以將AutoCAD的域名指向本地回環地址（127.0.0.1），從而實現禁止聯網的目的。具體步驟如…
閱讀更多...
深度學習框架搭建（Vscode/Anaconda/CUDA/Pytroch）

深度學習框架搭建（Vscode/Anaconda/CUDA/Pytroch）

目錄 ??????一 Vscode安裝 二、Anaconda安裝 三、更新顯卡驅動 四、安裝CUDA 五、安裝Pytorch 六、Vscode配置 七、出現的問題匯總 ??????一 Vscode安裝 在 Windows 上安裝 訪問 VS Code 官網 https://code.visualstudio.com/，點擊 "Downl…
閱讀更多...
結構模式識別理論與方法

結構模式識別理論與方法

我們在前文《模式識別的基本概念與理論體系》中就已經提及“模式分類”。 具體內容看我的CSDN文章：模式識別的基本概念與理論體系-CSDN博客 模式的識別方法主要有統計模式識別方法和結構模式識別方法兩大類。統計模式識別方法提出得較早，理論也較成熟…
閱讀更多...
12.多邊形的三角剖分 (Triangulation) ： Fisk‘s proof

12.多邊形的三角剖分 (Triangulation) ： Fisk‘s proof

目錄 1.Fisks proof Trangulation Coloring Domination Pigeon-Hold Principle Generation 2.Orthogonal Polygons (正交多邊形) Necessity of floor(n4) Sufficiency by convex Quadrilateralization Generalization 1.Fisks proof Trangulation 引入內對角線&…
閱讀更多...
面經-計算機網絡——OSI七層模型與TCP/IP四層模型的對比詳解

面經-計算機網絡——OSI七層模型與TCP/IP四層模型的對比詳解

OSI七層模型與TCP/IP四層模型的對比詳解 一、圖示解析：分層封裝結構 你提供的圖清晰展示了網絡通信中從應用層到物理層的封裝過程，每一層都會對上層的數據加上自己的頭部信息（Header）： 應用層： 應用…
閱讀更多...
React Native本地存儲方案總結

React Native本地存儲方案總結

1. AsyncStorage（鍵值對存儲） 適用場景：簡單鍵值對存儲（如用戶配置、Token、緩存數據）。特點：異步、輕量、API 簡單，但性能一般，不推薦存儲大量數據。安裝：npm install …
閱讀更多...
Arduino程序函數詳解與實際案例

Arduino程序函數詳解與實際案例

一、Arduino程序的核心架構與函數解析 Arduino程序的核心由兩個函數構成：setup() 和 loop()。這兩個函數是所有Arduino代碼的骨架，它們的合理使用決定了程序的結構和功能。 1.1 setup() 函數：初始化階段 setup() 函數在程序啟動時僅執行一次，用于完成初始化配置，例如設置…
閱讀更多...
【Unity】使用Socket建立客戶端和服務端并進行通信的例子

【Unity】使用Socket建立客戶端和服務端并進行通信的例子

Socket服務端: using System; using System.Collections.Generic; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; public class SocketServer { public static Socket listenSocket;//監聽Socket public static List<Socket>…
閱讀更多...
Qt connect第五個參數

Qt connect第五個參數

在 Qt 中&#xff0c;QObject::connect 函數的第五個參數用于指定 連接類型&#xff08;Qt::ConnectionType&#xff09;&#xff0c;它決定了信號與槽之間的通信方式。以下是各枚舉值的詳解及使用場景&#xff1a; 1. Qt::AutoConnection&#xff08;默認值&#xff09; 行為…
閱讀更多...
【2025域適應科研日報】

【2025域適應科研日報】

本筆記主要為了記錄自己的科研日報&#xff0c;前段時間剛開始想寫的初衷也是為了自己的思考不跑偏&#xff0c;但是有幾天又沒有堅持下來&#xff0c;看到一位學長的文章&#xff0c;發現這種形式還是很有必要的&#xff0c;所以自己也打算堅持記錄下來&#xff0c;由于還正在…
閱讀更多...
XrayR啟動失敗

XrayR啟動失敗

公司要用服務器之間進行數據加密&#xff0c;這里用的XrayR 我使用的Centos 7。 我這里使用一鍵腳本安裝后&#xff0c;/etc/XrayR目錄下沒有配置文件。 解決方案 XrayR安裝時&#xff0c;系統沒有unzip工具&#xff0c;也是會安裝失敗的&#xff0c;因為Centos7已經停止維…
閱讀更多...
鴻蒙文件上傳-從前端到后端詳解，對比jq請求和鴻蒙arkts請求區別，對比new FormData()和鴻蒙arktsrequest.uploadFile

鴻蒙文件上傳-從前端到后端詳解，對比jq請求和鴻蒙arkts請求區別，對比new FormData()和鴻蒙arktsrequest.uploadFile

需要權限&#xff1a;ohos.permission.INTERNET 1.nodejs自定義書寫上傳后端接口 傳輸過來的數據放在files?.image下 router.post(/upload,(req, res) > {var form new multiparty.Form();form.uploadDirpublic/images/uploads; //上傳圖片保存的地址(目錄必須存在)fo…
閱讀更多...
最新文章

Copyright @ 2022~2023