使用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

开梯子再推送