简介&安装

本博客平台使用到的技术，hugo和HB框架的安装使用

一、简介

我在大四寒假期间搭建了这个博客平台，这个专栏记录了我搭建这个博客平台的过程，并且汇集了一些使用HB框架写文章时经常用到的函数或者说方法，方便查阅。

• 这个网站是基于hugo框架搭建的静态博客
• 主题是HB Framework
• 网站托管在github page上
• 使用自定义域名yaoyifeng.top
• 使用腾讯云的cdn来加快国内的访问速度

二、环境安装

1.安装hugo

Hugo 是一个广受欢迎的静态网站生成器，由 Go 语言编写。它能够将Markdown、HTML等格式的文件和模板转换为静态网页。Hugo 以其快速生成网站的能力而闻名，这使得它成为许多开发者和博客作者的首选工具。 安装 Hugo 的方法取决于操作系统。以下是几种常见操作系统的安装步骤：

Windows

1. 访问 Hugo 的 GitHub 发布页面。
2. 下载适合你系统的 .exe 文件（例如 hugo_extended_0.111.3_windows-amd64.zip）。
3. 解压下载的文件，并将 hugo.exe 文件移动到一个在系统 PATH 环境变量中的目录下，这样你就可以在命令行中全局访问 Hugo 命令。
4. 打开命令提示符或 PowerShell，输入 hugo version 来验证安装是否成功。

macOS

1. 打开终端。
2. 使用 Homebrew 安装 Hugo。如果尚未安装 Homebrew，请先安装它。安装 Homebrew 后，输入以下命令：

   1brew install hugo
   

3. 安装完成后，输入 hugo version 来验证安装是否成功。

Linux

1. 打开终端。
2. 使用包管理器安装 Hugo。例如，在 Ubuntu 或 Debian 上，可以使用以下命令：

   1sudo apt-get install hugo
   

3. 安装完成后，输入 hugo version 来验证安装是否成功。

通过 Go 语言安装 如果已经安装了 Go 语言环境，也可以通过以下命令安装 Hugo：

1go install github.com/gohugoio/hugo@latest

安装完成后，应该能够通过在命令行中输入 hugo 来访问 Hugo 命令。

2.安装go

一般来说使用hugo时并不需要使用go，但我用的HB Framework主题是一个模块化的框架，需要使用go语言来下载和更新hugo模块，具体见HB - Hugo Bootstrap 框架 (hbstack.dev)

要下载和安装 Go 语言（也称为 Golang），请遵循以下步骤。请注意，步骤可能会因您的操作系统而异。

Windows

1. 访问 Go 官方下载页面。
2. 根据系统是 32 位还是 64 位，下载相应的 .msi 安装包。
3. 运行下载的 .msi 文件，并按照安装向导的指示完成安装。
4. 安装过程中，确保将 Go 安装路径添加到系统环境变量的 PATH 中。
5. 安装完成后，重启任何已打开的命令提示符或 PowerShell 窗口。
6. 在命令行中输入 go version 来验证安装是否成功。

macOS

1. 访问 Go 官方下载页面。
2. 下载适用于 macOS 的 .pkg 安装包。
3. 打开下载的 .pkg 文件，并按照安装向导的指示完成安装。
4. 安装完成后，在终端中输入 go version 来验证安装是否成功。

Linux

1. 访问 Go 官方下载页面。
2. 下载适用于 Linux 的 .tar.gz 压缩包。
3. 打开终端，切换到您想要安装 Go 的目录（例如 cd /usr/local）。
4. 使用 tar 命令解压下载的文件，例如：

   1sudo tar -C /usr/local -xzf go$VERSION.$OS-$ARCH.tar.gz
   

   将 $VERSION、$OS 和 $ARCH 替换为适当的值，例如 go1.18.3.linux-amd64.tar.gz。
5. 将 Go 的 bin 目录添加到 PATH 环境变量中。可以通过修改 ~/.profile 或 ~/.bashrc 文件来实现这一点，例如：

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

6. 在终端中输入 source ~/.profile 或 source ~/.bashrc 来更新当前会话的环境变量。
7. 输入 go version 来验证安装是否成功。

3.安装git

关于git的介绍，安装使用方法详见环境配置专栏

4.安装node.js

要求 Node.js 16 或后续版本。

Windows

1. 访问 Node.js 官方网站 nodejs.org。
2. 下载适合系统的安装包（建议选择 LTS 版本，因为它更稳定）。
3. 运行下载的安装程序 .msi 文件。
4. 按照安装向导的指示完成安装。默认情况下，安装程序会自动将 Node.js 添加到系统路径中。
5. 安装完成后，打开命令提示符或 PowerShell。
6. 输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否正确安装。

macOS

1. 访问 Node.js 官方网站 nodejs.org。
2. 下载适合系统的安装包（建议选择 LTS 版本）。
3. 打开下载的 .pkg 文件。
4. 按照安装向导的指示完成安装。
5. 安装完成后，打开终端。
6. 输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否正确安装。

Linux

对于大多数 Linux 发行版，可以使用包管理器来安装 Node.js，以下是一些示例：

使用 Ubuntu 或 Debian 的 apt-get：

1curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
2sudo apt-get install -y nodejs

使用 CentOS 或 Fedora 的 yum：

1curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
2sudo yum install -y nodejs

使用 Arch Linux 的 pacman：

1sudo pacman -S nodejs npm

安装完成后，打开终端并输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否正确安装。

使用 nvm (Node Version Manager)

如果需要管理多个 Node.js 版本，可以使用 nvm（Node Version Manager）

安装 nvm：

对于 macOS 和 Linux，可以使用以下命令：

1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
2# 或
3wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

对于 Windows，可以使用 nvm-windows。

使用 nvm 安装 Node.js：

1nvm install node # 安装最新版本
2nvm install --lts # 安装 LTS 版本
3nvm use node # 使用已安装的最新版本
4nvm use --lts # 使用已安装的 LTS 版本

安装完成后，可以通过输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否正确安装。

安装node.js包 HB 依赖以下 Node.js 包。

NPM 已被包含于 Node.js 安装中，你可以选择局部或全局地安装这些包。

• 局部安装

1npm i -D postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss

局部安装将依赖写入 package.json，以便部署时通过 npm i 安装这些包，而无需记住这些繁杂的包名。

• 全局安装

1sudo npm i -g postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss

该命令只需执行一次，后续的 HB 站点无需再次执行此命令。

两者都是有效的，HB 会优先局部查找需要的包。

三、HB主题安装

1.克隆仓库

1git clone --depth 1 https://github.com/hbstack/theme blog
2cd blog

其中的 blog 是本地目录名称，请随意修改。

2.修改模块路径

首先修改位于 go.mod 的模块路径，将其中的 module github.com/hbstack/theme 替换为你的，如：module github.com/user/repo。

11sed -i -e 's/module\ github.com\/hbstack\/theme/module\ github.com\/user\/repo/' go.mod

3.提交改动到本地仓库

1git add .
2git commit --amend

修改提交信息保存即可，如：First commit。

4.修改远程仓库

1git remote set-url origin https://github.com/user/repo

5.推送

1git push origin main

四、Hugo 模块代理

Go 官方的模块代理服务器于国内是无法正常使用的。不过可以通过设置代理服务器解决，本文将列出一些可用的 Go 代理服务器。而这也同样适用于 Hugo 模块。

下面给出在windows上设置代理服务器的方法：

1$env:GOPROXY = "https://goproxy.cn/,direct"
2$env:HUGO_MODULE_PROXY = "https://goproxy.cn/,direct"

五、启动 Hugo 服务器

1.安装构建工具

1npm ci

2.启动hugo服务器

于开发模式下预览

1npm run dev

于生产模式下预览

1npm run prod

package.json文件里面记录了npm所能运行的脚本

{

  "devDependencies": {
    "glob": "^10.3.10",
    "prettier": "^3.0.0",
    "prettier-plugin-go-template": "^0.0.15"
  },
  "scripts": {
    "dev": "hugo server -p 7070 --gc --buildDrafts --enableGitInfo",
    "prod": "npm run clean && hugo server -e production --minify --gc --renderToDisk --disableFastRender --enableGitInfo -b http://localhost:7080 -p 7080",
    "docker": "docker run -v $PWD:/src -p 7070:7070 -p 7071:7071 -p 7072:7072 hugomods/hugo:exts hugo server --bind 0.0.0.0 -p 7070",
    "docker-prod": "docker run -v $PWD:/src -p 7080:7080 -p 7081:7081 -p 7082:7082 hugomods/hugo:exts hugo server --bind 0.0.0.0 -e production --minify --gc --renderToDisk --disableFastRender --enableGitInfo -b http://localhost:7080 -p 7080",
    "build": "hugo --gc --minify --enableGitInfo",
    "clean": "del hugo_stats.json && rmdir /s /q public",
    "clean-build": "npm run clean && npm run build",
    "update": "hugo mod get -u && hugo mod tidy",
    "translate": "node ./scripts/translate.js",
    "decap-server": "npx decap-server"
  },
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "autoprefix": "^1.0.1",
    "autoprefixer": "^10.4.13",
    "postcss-cli": "^10.1.0",
    "postcss-purgecss": "^5.0.0",
    "rtlcss": "^4.0.0"
  }
}

Hugo Server 生产模式的必要参数

若需要在生产模式下使用 Hugo Server，需要指定 --disableFastRender 和 --renderToDisk，否则 PurgeCSS 和 PostCSS 会出现意想不到的问题。

1hugo server \
2  --disableFastRender \
3  --renderToDisk \
4  -e production \
5  -b http://localhost:1314 \
6  -p 1314