Hugo搭建个人博客

1、环境准备

1.1 Hugo安装

官方地址：https://github.com/gohugoio/hugo

官方文档：https://gohugo.io/getting-started/quick-start/

在 GitHub 上下载最新的安装包（windows环境），解压、配置环境变量。
验证是否安装成功：
1
hugo version

1.2 Git安装

官网：https://git-scm.com/

2、本地部署

2.1 新建站点

创建命令：
1
hugo new site myblog

生成的 myblog 文件目录结构（以下命令默认是在此目录下）：

.
├── archetypes  # 存放生成博客的模版
├── config.toml # hugo 配置文件 支持 JSON YAML TOML 三种格式配置文件
├── content     # 存放 markdown 文件
├── data        # 存放 Hugo 处理的数据
├── layouts     # 存放布局文件
├── static      # 存放静态文件 图片 CSS JS文件
└── themes      # 存放主题

2.2 添加主题

主题地址：https://themes.gohugo.io/

以 loveit 主题为例：https://github.com/dillonzq/LoveIt

clone 到本地：

1	git clone https://github.com/dillonzq/LoveIt.git

将 clone 的 LoveIt 文件移动到 ./themes/ 目录下

配置文件设置：

可以直接将主题的配置文件复制过来替换成站点配置

其他配置参考文档：https://hugoloveit.com

部分设置如下：

baseURL = "https://zyu0211.github.io/"

# 更改使用 Hugo 构建网站时使用的默认主题
theme = "LoveIt"

# 网站标题
title = "ZYU个人博客"

# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
languageCode = "zh-CN"
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
languageName = "简体中文"
# 是否包括中日韩文字
hasCJKLanguage = true

# 默认每页列表显示的文章数目
paginate = 12
# 谷歌分析代号 [UA-XXXXXXXX-X]
googleAnalytics = ""
# 版权描述，仅仅用于 SEO
copyright = ""

# 作者配置
[author]
  name = "zyu"
  email = "zyuxud@163.com"
  link = ""

# 菜单配置
[menu]
  [[menu.main]]
    weight = 1
    identifier = "posts"
    # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
    pre = ""
    # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
    post = ""
    name = "文章"
    url = "/posts/"
    # 当你将鼠标悬停在此菜单链接上时, 将显示的标题
    title = ""
  [[menu.main]]
    weight = 2
    identifier = "tags"
    pre = ""
    post = ""
    name = "标签"
    url = "/tags/"
    title = ""
  [[menu.main]]
    weight = 3
    identifier = "categories"
    pre = ""
    post = ""
    name = "分类"
    url = "/categories/"
    title = ""
  [[menu.main]]
    weight = 4
    identifier = "about"
    pre = ""
    post = ""
    name = "关于"
    url = "/abouts/"
    title = ""
  [[menu.main]]
    weight = 5
    identifier = "github"
    pre = "<i class='fab fa-github fa-fw'></i>"
    post = ""
    name = ""
    url = "https://github.com/zyu0211"
    title = "GitHub"

# Hugo 解析文档的配置
[markup]
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false
    
[params]
  # 网站默认主题样式 ["auto", "light", "dark"]
  defaultTheme = "auto"
  # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
  gitRepo = ""
  # LoveIt 新增 | 0.1.1 哪种哈希函数用来 SRI, 为空时表示不使用 SRI
  # ["sha256", "sha384", "sha512", "md5"]
  fingerprint = ""
  # LoveIt 新增 | 0.2.0 日期格式
  dateFormat = "2006-01-02"
  # 网站标题, 用于 Open Graph 和 Twitter Cards
  title = "zyu blog"
  # 网站描述, 用于 RSS, SEO, Open Graph 和 Twitter Cards
  description = "zyu的个人博客"
  # 网站图片, 用于 Open Graph 和 Twitter Cards
  images = ["/logo.png"]
  
  # 页面头部导航栏配置
  [params.header]
    # 桌面端导航栏模式 ["fixed", "normal", "auto"]
    desktopMode = "fixed"
    # 移动端导航栏模式 ["fixed", "normal", "auto"]
    mobileMode = "auto"
    # LoveIt 新增 | 0.2.0 页面头部导航栏标题配置
    [params.header.title]
      # LOGO 的 URL
      logo = ""
      # 标题名称
      name = "zyu'blog"
      # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
      pre = ""
      # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
      post = ""
      # LoveIt 新增 | 0.2.5 是否为标题显示打字机动画
      typeit = false

  # 页面底部信息配置
  [params.footer]
    enable = true
    # LoveIt 新增 | 0.2.0 自定义内容 (支持 HTML 格式)
    custom = ''
    # LoveIt 新增 | 0.2.0 是否显示 Hugo 和主题信息
    hugo = true
    # LoveIt 新增 | 0.2.0 是否显示版权信息
    copyright = true
    # LoveIt 新增 | 0.2.0 是否显示作者
    author = true
    # 网站创立年份
    since = 2022
    # ICP 备案信息，仅在中国使用 (支持 HTML 格式)
    icp = ""
    # 许可协议信息 (支持 HTML 格式)
    license = 'zyu的博客 BY zyu'
   
  # 主页配置
  [params.home]
    # LoveIt 新增 | 0.2.0 RSS 文章数目
    rss = 10
    # 主页个人信息
    [params.home.profile]
      enable = true
      # Gravatar 邮箱，用于优先在主页显示的头像
      gravatarEmail = ""
      # 主页显示头像的 URL
      avatarURL = "/imgs/微信头像.jpg"
      # LoveIt 更改 | 0.2.7 主页显示的网站标题 (支持 HTML 格式)
      title = "zyu"
      # 主页显示的网站副标题 (允许 HTML 格式)
      subtitle = "盛年不重来，一日难再晨"
      # 是否为副标题显示打字机动画
      typeit = true
      # 是否显示社交账号
      social = true
      # LoveIt 新增 | 0.2.0 免责声明 (支持 HTML 格式)
      disclaimer = ""
    # 主页文章列表
    [params.home.posts]
      enable = true
      # 主页每页显示文章数量
      paginate = 6
      # LoveIt 删除 | 0.2.0 被 params.page 中的 hiddenFromHomePage 替代
      # 当你没有在文章前置参数中设置 "hiddenFromHomePage" 时的默认行为
      defaultHiddenFromHomePage = false

2.3 创建第一篇文章

命令：
1
hugo new posts/my-first-post.md
则会在 ./content/post/ 下生成对应的 Markdown 文件，使用markdown语法编写文章。

启动 Hugo

1
2
3

hugo server --theme=LoveIt --buildDrafts
# 或
hugo server -D

本地预览网站：http://localhost:1313

3、部署到GitHub

3.1 github创建仓库

新建一个仓库，仓库名为：用户名.github.io
之后可以通过 https://用户名.github.io 访问

3.2 部署

命令（生成静态资源（即 ./public 目录））

1
2
3

hugo --theme=LoveIt  --baseURL="https://zyu0211.github.io/" --buildDrafts
# 或
hugo -D

将 ./public 目录推送到创建的GitHub仓库

git init
git add *
git commit -m ''
git remote add origin git@github.com:zyu0211/zyu0211.github.io.git
git push origin main