经过几天的努力整理出最直观,最快捷的搭建hugo,以及部署github和netlifyCMS进行后台更新的完整教程,希望能对大家有所帮助,下面我就一步一步教给大家。
首先选择linux系统的debian12吧,个人喜欢,ubuntu24也可以,不多数了,这里省略了,首先配置环境,我这里以docsy主题为例,因为这个主题比较特殊,要求环境太高了,所以就把必要的环境全部安装上了。
第一步:安装 Go 语言
# 下载并安装 Go
cd /tmp
wget https://golang.org/dl/go1.21.0.linux-amd64.tar.gz
# 如果系统安装过就删掉执行以下命令
sudo rm -rf /usr/local/go
# 没有安装过不执行上边这个
sudo tar -C /usr/local -xzf go1.21.0.linux-amd64.tar.gz
rm -f go1.21.0.linux-amd64.tar.gz
# 配置环境变量
cat >> ~/.bashrc << 'EOF'
export PATH=/usr/local/go/bin:$PATH
export GOPATH=$HOME/go
export GOBIN=$GOPATH/bin
export PATH=$GOBIN:$PATH
EOF
source ~/.bashrc
mkdir -p $HOME/go/{bin,src,pkg}
# 设置 Go 代理(国内用户)
go env -w GOPROXY=https://goproxy.cn,direct
go env -w GOSUMDB=off
# 验证安装
go version
第二步:安装 Git
# 安装 Git
sudo apt update
sudo apt install git -y
# 配置 Git
git config --global user.name "您的用户名"
git config --global user.email "您的邮箱@example.com"
git config --global init.defaultBranch main
# 验证安装
git --version
第三步:安装 Node.js 和 npm
# 安装 Node.js 18.x
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
# 验证安装
node --version
npm --version
第四步:安装 Hugo Extended 版本
# 下载指定版本的 Hugo Extended
cd /tmp
wget https://github.com/gohugoio/hugo/releases/download/v0.150.1/hugo_extended_0.150.1_linux-amd64.tar.gz
# 安装到系统
sudo tar -xzf hugo_extended_0.150.1_linux-amd64.tar.gz -C /usr/local/bin/
sudo chmod +x /usr/local/bin/hugo
rm -f hugo_extended_0.150.1_linux-amd64.tar.gz
# 验证安装
hugo version
# 应该显示: hugo v0.150.1+extended linux/amd64 BuildDate=unknown
第五步:安装 PostCSS 和相关依赖
# 全局安装 PostCSS CLI
sudo npm install -g postcss-cli
# 安装常用 PostCSS 插件
sudo npm install -g autoprefixer postcss-import cssnano
# 验证安装
postcss --version
至此hugo和相关主题环境都已经安装完成,下面开始docsy主题的安装。要创建一个新的 Hugo 站点项目,然后将 Docsy 主题添加为 Hugo 模块,请从项目的根目录运行以下命令。
cd /www/wwwroot
hugo new site maccmsrust.com
cd maccmsrust.com
选项 2:使用 GitHub UI(本地副本 + 关联的 GitHub 仓库)
由于 Docsy 示例站点 repo 是一个模板存储库,因此创建此 Docsy 示例站点 repo 的自己的远程 GitHub 克隆非常容易:
- 转到Docsy 示例站点的 repo 。
- 使用切换分支/标签的下拉菜单来更改为最新发布的标签
v0.12.0。 - 单击“使用此模板”按钮并
Create a new repository从下拉菜单中选择选项。 - 为新仓库选择一个名称(例如),并在“仓库名称”
my-new-site字段中输入。您还可以添加可选的“描述”。 - 点击“从模板创建仓库”来创建新的仓库。恭喜,您刚刚创建了远程 Github 克隆,现在可以将其作为您自己网站的起点!
- 使用 创建新创建的 GitHub 存储库的本地副本
git clone,并将存储库的 Web URL 作为最后一个参数。
git clone https://github.com/me-at-github/my-new-site.git
# 进入项目目录
cd /www/wwwroot/maccmsrust.com
# 创建 package.json 文件
cat > package.json << 'EOF'
{
"name": "maccmsrust",
"version": "1.0.0",
"description": "MacCMS Rust documentation site",
"scripts": {
"build": "hugo --gc --minify"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.0",
"postcss-cli": "^10.0.0",
"rtlcss": "^4.0.0"
}
}
EOF
# 安装依赖
npm install
然后测试构建
hugo --gc --minify
预览您的网站
要在本地构建和预览您的网站:
hugo server
启动服务器查看效果
hugo server -D --bind 0.0.0.0 --port 1313
http://你的服务器IP:1313
推送代码到 GitHub:
git add .
git commit -m "修复PostCSS依赖,构建成功"
git push origin main
方法一:使用 Personal Access Token(推荐)
- 生成 Token:
- 访问 https://github.com/settings/tokens
- 点击 "Generate new token"
- 选择 "classic" token
- 设置过期时间(建议 90 天或 1 年)
- 勾选 "repo" 权限
- 点击 "Generate token"
- 复制生成的 token(重要!只显示一次)
- 使用 Token 推送:
# 使用 token 作为密码
git push origin main
# 用户名: feimao5787
# 密码: 粘贴你的 token
Netlify 高级配置详细位置
第一步:进入部署配置页面
- 在 "Import an existing project" 后
- 选择你的仓库
feimao5787/maccmsrust - 进入 "Configure your site deployment" 页面
或者使用 netlify.toml:
在项目根目录创建文件:
# 在项目根目录创建配置文件
cd /www/wwwroot/maccmsrust.com
cat > netlify.toml << 'EOF'
[build]
command = "hugo --gc --minify"
publish = "public"
[build.environment]
HUGO_VERSION = "0.150.1"
NODE_VERSION = "18"
EOF
# 提交到 GitHub
git add netlify.toml
git commit -m "添加 Netlify 构建配置"
git push origin main
然后重新在 Netlify 导入项目,它会自动读取配置。
下面配置后台更新文章
请按顺序:
- 点击 "Project configuration"
- 在子菜单中找到 "Identity"
- 点击启用
第一步:点击 "Identity"
在左侧菜单中点击 "Identity"
第二步:启用 Identity 服务
进入 Identity 页面后:
- 点击 "Enable Identity" 按钮
- 等待几秒钟启用完成
第三步:配置 Git Gateway
启用 Identity 后:
- 点击 "Settings and usage"
- 找到 "Services" 部分
- 点击 "Git Gateway"
- 点击 "Enable Git Gateway"
- 按照提示授权 Netlify 访问你的 GitHub 仓库
第四步:设置注册选项
在 Identity 的 "Settings and usage" 中:
- Registration preferences: 选择 "Invite only"(推荐)
- 或者选择 "Open" 允许自由注册
