前言#
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
开梯子再推送