Hugo个人博客搭建

Hugo 能做什么

通过 Hugo 你可以快速搭建你的静态网站，比如博客系统、文档介绍、公司主页、产品介绍等等。相对于其他静态网站生成器来说，Hugo 具备如下特点：

极快的页面编译生成速度。（ ~1 ms 每页面）
完全跨平台支持，可以运行在 Mac OS X, Linux, Windows, 以及更多!
安装方便 Installation
本地调试 Usage 时通过 LiveReload 自动即时刷新页面。
完全的皮肤支持。
可以部署在任何的支持 HTTP 的服务器上。

安装部署简要说明：

操作系统是Ubuntu 22.04.4 LTS
Hugo生成静态页面
Nginx发布服务

Go环境安装

前往go.dev下载最新的go程序

wget https://go.dev/dl/go1.22.1.linux-amd64.tar.gz

解压安装

sudo rm -rf /usr/local/go && sudo tar -C /usr/local -xzf go1.22.1.linux-amd64.tar.gz

加入环境变量

sudo vim /etc/profile

在文件最后增加

export PATH=$PATH:/usr/local/go/bin

退出登录或者source /etc/profile重新加载环境配置，检查go是否正常运行，能正常输出版本信息就正常

go version

Hugo安装

由于Ubuntu源里的版本不是最新版，这里直接采用go的编译安装模式，在主目录下运行

go install github.com/gohugoio/hugo@latest

加入环境变量

vim ~/.bashrc

在文件最后增加

export PATH=$PATH:~/go/bin

退出登录或者source ~/.bashrc重新加载环境配置，检查hugo是否正常运行，能正常输出版本信息就正常

hugo version

现在使用的hugo版本信息

hugo v0.124.1 linux/arm64 BuildDate=unknown

下面开始使用Hugo创建网站目录，做一些配置

Hugo使用

创建网站

Hugo创建网站目录，配置文件采用yaml格式

hugo new site bytejog --format yaml

运行之后，会生成以下目录

bytejog
├── archetypes       # 站点文章模板
│   └── default.md
├── assets           # 需要被处理的资源 (SCSS、TypeScrpt 等)
├── content          # 站点文章
├── data             # 配置文件
├── hugo.yaml        # 站点配置文件
├── i18n             # 国际化文件
├── layouts          # 站点样式
├── static           # 静态资源 (图片、CSS、JavaScript 等)
└── themes           # 主题

安装主题

参考不少博主的都是使用PaperMod，可以在Release下载，这里直接使用Github上的最新文件，因为Release很久没有更新了

wget https://github.com/adityatelange/hugo-PaperMod/archive/refs/heads/master.zip

解压文件，然后移到bytejog/themes文件夹下

unzip master.zip
mv hugo-PaperMod-master/ bytejog/themes/

以下配置尽量不修改hugo-PaperMod的原文件，在网站目录的对应文件夹内，采用覆盖式的方式修改。

Hugo参数设置

参数参考了Aixin.me，做了一些微调，修改hugo.yaml文件vim hugo.yaml

baseURL: "https://bytejog.com"
title: ByteJog
paginate: 10
theme: hugo-PaperMod-master
#defaultContentLanguage: zh
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ByteJog
  description: "慢跑和技术分享"
  keywords: [Blog, Run, Jog]
  # author: Aixin.me
  author: ["Byter", "Jogger"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: false
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: true
  hidemeta: false
  hideSummary: false
  showtoc: true
  tocopen: true
  math: true #先配置好math然后在这儿开启
  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "/images/favicon.ico"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "ByteJog"
    #icon: "/images/logo.png"
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Welcome to ByteJog.com 🏃💨"
    Content: \"明明这么痛苦，这么难过，为什么就是不能放弃跑步？因为全身细胞都在蠢蠢欲动，想要感受强风迎面吹拂的滋味。\" <br>––《强风吹拂》

  cover:
    hidden: false # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.8
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: about
      name: About
      url: /about/
      weight: 10
    - identifier: archives
      name: Archives
      url: /archives/
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - identifier: search
      name: Search
      url: /search/
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  defaultMarkdownHandler: goldmark
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai
  goldmark:
    renderer:
      unsafe: true

  # 设置目录级别
  tableOfContents:
    startLevel: 1
    endLevel: 6
    
defaultContentLanguage: zh
languages:
    # en:
    #     languageName: "English"
    #     weight: 2
    #     menu:
    #         main:
    #             - name: Archive
    #               url: archives
    #               weight: 5
    #             - name: Search
    #               url: search/
    #               weight: 10
    #             - name: Tags
    #               url: tags/
    #               weight: 10
    #             - name: Categories
    #               url: categories/
    #               weight: 10
    zh:
        languageName: "中文"
        weight: 1
        menu:
            main:
                - name: 标签
                  url: tags/
                  weight: 1
                - name: 存档
                  url: archives
                  weight: 2
                - name: 搜索
                  url: search/
                  weight: 3
                
                #- name: 分类
                #  url: categories/
                #  weight: 10
                - name: 关于
                  url: about/
                  weight: 5
taxonomies:
  category: categories
  tag: tags
  
outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search
services:
  disqus:
    shortname: #shortname

说一下需要注意修改的几个点：

主题

theme: hugo-PaperMod-master

markdown渲染引擎修改为goldmark，支持表格使用<br>实现换行

markup:
  defaultMarkdownHandler: goldmark
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai
  goldmark:
    renderer:
      unsafe: true
  # 设置目录级别
  tableOfContents:
    startLevel: 1
    endLevel: 6

分类字段定义

taxonomies:
  category: categories
  tag: tags

增加disqus评论

services:
  disqus:
    shortname: #shortname

Hugo常用命令

启动hugo服务，可以在本地访问服务

hugo server -D

访问服务http://localhost:1313
生成静态文件

hugo -D -F --cleanDestinationDir

文章管理

在hugo.yaml文件里配置了About、Archives和Search的连接，可以配置http链接，也可以配置个人站点的地址。

content
├── about.md
├── archives.md
├── assets
├── posts
└── search.md

关于页面（content/about.md)

---
title: 关于ByteJog
date: 2024-03-30T09:08:19+08:00
showtoc: false
comments: false
---

## 关于内容

title: 关于页面名称
date: 文章日期
showtoc: 配置统一显示目录，关于设置不显示目录
comments: 配置统一加载评论，关于设置不加载评论

归档页面（content/archives.md）

---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---

title: 归档页面名称
layout: 采用archives模版展示内容
url: 模版链接
summary: 摘要内容

搜索页面（content/search.md）

---
title: "搜索" # in any language you want
layout: "search" # necessary for search
summary: "搜索 - ByteJog"
placeholder: "搜索ByteJog内容"
---

title: 搜索页面名称
layout: 采用search模版展示内容
summary: 摘要内容
placeholder: 占位符

文章页面

assests文件夹存放资源
posts文件夹存放文章文章示例：

---
title: 跑步总结（2024-04-02 更新）
created: 2018-12-15T07:33:48+08:00
date: 2024-04-02T07:28:29+08:00
author: Jogger
tags: [跑步]
---

## 累计数据  
累计跑步: 234 天  
累计里程: 1911.33 km  
平均心率: 157 bpm  
![run-stats](/assets/run-stats.svg)

title: 文章名称
created: 创建时间
author: 作者
tags: 分类，多个用逗号分隔

Nginx发布

server {
    listen       443  ssl;
    # listen       [::]:8079  ssl;
    server_name  _;
    root         /xxx/ByteJog/public;
    access_log /var/log/nginx/access.log forwarded if=$log_format_choice;
    # ssl on;
    ssl_certificate /xxx/xxx/ca.pem;
    ssl_certificate_key /xxx/xxx/private.key;
}

root目录路径为Hugo发布的public目录，需要注意的是权限问题，在个人主目录里nginx没有访问权限，一是发布介绍后讲public拷贝到nginx里配置的目录，二是个人网站目录不要放到主目录下。

Hugo 能做什么#

Go环境安装#

Hugo安装#

Hugo使用#

创建网站#

安装主题#

启用disqus#

启用mermaid#

在post meta里显示标签#

左侧显示文章目录#

代码高亮块固定高度#

集成ECharts生成心仪的图表#

Hugo参数设置#

Hugo常用命令#

文章管理#

Nginx发布#

Hugo 能做什么

Go环境安装

Hugo安装

Hugo使用

创建网站

安装主题

启用disqus

启用mermaid

在post meta里显示标签

左侧显示文章目录

代码高亮块固定高度

集成ECharts生成心仪的图表

Hugo参数设置

Hugo常用命令

文章管理

Nginx发布