使用hugo生成靜態博客

前言#

hugo 是一個用 Go 語言編寫的靜態網頁生成器，用來做博客很合適，開搞！

下載程序#

git.exe// 安裝

hugo.exe// 無需安裝，放到一個合適的地方即可

配置環境變量#

打開此電腦 - 右鍵屬性 - 高級系統設置 - 高級環境變量 - 系統變量 - 選中 path - 編輯 - 新建環境變量 -"填入 hugo 所在的文件夾路徑" - 確定即可

記得 CMD 執行 hugo -version 檢查一下有沒有配置好

建立博客#

進入 hugoblog 文件夾，右鍵點擊 Open Git Bash here

把下面代碼逐個粘貼到黑窗口執行

hugo new site hugoblog //創建名為hugoblog項目 hugo new site hugoworks
cd hugoblog            //進入hugoblog
hugo new about.md      //創建一個 about 頁面，可以進入隨便寫點東西先，不寫也行

下載主題#

1. 下載喜歡的主題（官網有）放在 bugoblog/themes 文件夾下，我這裡下 papermod, 主題項目都在 github, 找到項目克隆下來

git clone https://github.com/nanxiaobei/hugo-paper.git

2. 把 exampleSite 整個拷貝到 hugoblog 目錄，config.toml 更名為 hugo.toml。提示有同名文件覆蓋即可

查看博客#

hugoblog 文件夾，右鍵點擊 Open Git Bash here

hugo server --theme=blist --buildDrafts  #調試替換主題名

然後黑窗口中會給你一個地址，打開選中右鍵 open，或者瀏覽器裡打開： http://localhost:1313/，不出意外的話就會看到和官網主題 demo 頁一樣的頁面。

出了意外跳轉查看
可能遇到的問題

配置主題#

下面把頁面的一些東西改成自己想要的樣子

notepad 或者記事本打開 hugo.toml
帶 ### 的是必須要修改的，可以參照我的改一下，其它可改可不改
頁面是實時顯示的，這邊修改完，那邊瀏覽器就能看到效果

baseURL = "https://junxinjay.github.io" #頁面地址 
# title = "君心的博客"
author = "君心jay"
copyright = "Copyright © 2008–2024, Steve Francia and the lee.so; all rights reserved."
paginate = 5 #頁面數量
languageCode = "zh"
DefaultContentLanguage = "zh"
enableInlineShortcodes = true
# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
ignoreErrors = ["error-remote-getjson"]

# ------------------------------
theme = "paper"
title = "君心Jay" 

[params]
  # color style
  color = 'gray'                           # linen, wheat, gray, light
  logo = "/apple-touch-icon.png" 


  twitter = 'Jay80820750'
  qq = 'q/ki1zhngt6E'
  rss = true                                # show rss icon

# ------------------------------

# needed to  render raw HTML (e.g. <sub>, <sup>, <kbd>, <mark>)
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
[menu]
  
  [[menu.main]]
    identifier = "blog"
    name = "文章"
    url = "/blog/"
    weight = 1
  
  [[menu.main]]
    identifier = "about"
    name = "關於"
    url = "/about/"
    weight = 2

  [[menu.main]]
    identifier = "contact"
    name = "友鏈"
    url = "/contact/"
    weight = 3

  [[menu.main]]
    identifier = "serach"
    name = "搜索"
    url = "/serach/"
    weight = 4


[taxonomies]
category = "categories"
tag = "tags"
series = "series"

[privacy]

  [privacy.vimeo]
    disabled = false
    simple = true

  [privacy.twitter]
    disabled = false
    enableDNT = true
    simple = true

  [privacy.instagram]
    disabled = false
    simple = true

  [privacy.youtube]
    disabled = false
    simple = true

  [privacy.qq]
    disabled = false
    simple = true
  
  [privacy.WeChat]
  disabled = false
  simple = true

  [privacy.bilibili]
  disabled = false
  simple = true


[services]

  [services.instagram]
    disableInlineCSS = true

  [services.twitter]
    disableInlineCSS = true

修改主題（這一步可跳過）#

主題下 static 文件夾是主題要用的圖片，可根據需要進行修改
主題下 layouts 文件夾是整個主題框架頁面，小白就別動了，否則頁面報錯

寫博客#

博客是用 markdown 編輯器寫，當然你用 txt 也是可以的，前提你要熟悉 mark 語法，這邊推薦 Typora 寫文章，也可以選其它的編輯器。

寫好後都放到 content 文件夾下的 post 目錄，文章引用圖片放在 static 目錄

生成靜態頁面文件#

每次寫完博客，都要重新生成靜態頁面，在 hugoblog 目錄下執行

hugo -F --cleanDestinationDir

執行完後生成的文件會在 public 文件夾下

部署到 github#

⚠️不建議部署到 gitee。因為原因審核太慢，還有部署完了頁面沒多久就不能用了，還不能外鏈，審核比較嚴格

・部署到 github#

⚠️沒有 github 先去註冊個賬號

1. 打開 github, 創建項目，點擊 New repository，Repository name 填你的用戶名（這步很重要），其它的都不用填，點擊 Create repository，把倉庫地址記下來，下面要用

2. 進入 public 目錄，右鍵點擊 Open Git Bash here

逐行執行

cd public

git init #第一次用這句, 下次更新博客就不用了
#git remote add origin https://github.com/junxinjay/hugo.git #這裡換成你的倉庫地址，第一次用這句, 下次更新博客就不用了
#git remote   #第一次用這句, 下次更新博客就不用了

git add .                     //添加所有文件到暫存區
git status                    //查看狀態
git commit -m 'MyFristCommit'      //把文件提交到倉庫 -m 後面的是備註信息
#git push -u origin master # 第一次用這句，下次更新博客用 git push 這個即可

這裡我用 GitHub Desktop 進行推送

下載 GitHub Desktop 軟件地址在這https://desktop.github.com ，安裝完進行登錄，登錄完會出現 Let's get start!, 我們選擇 add an Existing Repository from you local drive... 進行選擇 public 文件夾，點擊 Fetch origin 進行推送

3. 這時就可以打開https://github.com/junxinjay/blog.io 地址就出現頁面了，因為懂得都懂的原因，導致國內訪問 git 地址很慢，所以我們還要用到 netlify 進行一鍵托管

4. 打開 github 項目的設置，選擇 page, 在 brach 一欄選擇 master 進行保存

4. 打開 netlify，登錄使用 github 進行登錄即可

可能會遇到的問題#

・可能會遇到#

Error: error building site: POSTCSS: failed to transform "/css/styles.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: binary with name "npx" not found

需要安裝 node.js，去官网下载并安装
安裝一下即可，如果再不行就執行

npm install
npm i -g postcss-cli

・可能會遇到 status 失敗#

On branch main
Your branch is ahead of 'origin/main' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

執行

git push origin master

或者

git reset
git clean -f
git checkout -- .

・可能會遇到 push 失敗#

$ git push
fatal: unable to access 'https://github.com/junxinjay/hugoblog.github.io.git/':
 Failed to connect to github.com port 443 after 2081 ms: Couldn't connect to ser
ver

進入網址獲取 ip

https://sites.ipaddress.com/www.github.com/

把 ip 和 github.com 一起寫入 hosts

如

140.82.112.4 github.com

再次 push 即可

・可能會遇到#

$ git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

執行

git fetch

再 git push

・可能會遇到#

fatal: detected dubious ownership in repository at 'D:/Software/12code/hugo/myblog/public'
'D:/Software/12code/hugo/myblog/public' is owned by:
        'S-1-5-32-544'
but the current user is:
        'S-1-5-21-3826342517-2274634027-510025631-1001'
To add an exception for this directory, call:

        git config --global --add safe.directory D:/Software/12code/hugo/hugoblog/public

執行

git config --global --add safe.directory "*";

・可能會遇到#

Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'Jay@DESKTOP.(none)')

// 分別執行

git config --global user.email "你的郵箱"
 
git config --global user.name "你的名字"

字符串綁定無效

git config --system --unset credential.helper

・可能會遇到#

fatal: unable to access 'https://gitclone.com/github.com/XXXXXXX': The requested URL returned error: 502

把目錄 C:\Users\ 用戶名.gitconfig 文件中這兩行前面加一個#

[url "https://gitclone.com/"] 
[url "https://github.com/"]

・可能會遇到#

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for  'https://github.com/junxinjay/hugoblog.github.io.git/'

大概意思：你原先的密碼憑證從 2021 年 8 月 13 日開始就不能用了，必須使用個人訪問令牌（personal access token），就是把你的密碼替換成 token！

打開 github-Settings-Developer Settings

・可能會遇到#

fatal: unable to access 'https://github.com/test/test.git/': schannel: failed to receive handshake, SSL/TLS connection failed

修改 D:[應用數據目錄]\Documents\GitHub\test.git

[core]
    repositoryformatversion = 0
    filemode = false
    bare = false
    logallrefupdates = true
    symlinks = false
    ignorecase = true
[submodule]
    active = .
[remote "origin"]
    url = https://github.com/test/test.git
    fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
    remote = origin
    merge = refs/heads/main
# 添加入下面這段保存就可以了
[http]
    sslbackend = openssl

・可能會遇到#

Failed to find a valid digest in the 'integrity' attribute for resource - The resource has been blocked - Host on Github

git 中的 config 配置文件中添加

params:
    assets:
        disableFingerprinting: true

・可能會遇到#

 Failed to connect to github.com port 443 after 21480 ms: Couldn't connect to server

開梯子再推送