快速搭建hugo部署github部署netlifyCMS

微信扫一扫,分享到朋友圈

快速搭建hugo部署github部署netlifyCMS

经过几天的努力整理出最直观,最快捷的搭建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 克隆非常容易:

  1. 转到Docsy 示例站点的 repo 。
  2. 使用切换分支/标签的下拉菜单来更改为最新发布的标签v0.12.0
  3. 单击“使用此模板”按钮并Create a new repository从下拉菜单中选择选项。
  4. 为新仓库选择一个名称(例如),并在“仓库名称”my-new-site字段中输入。您还可以添加可选的“描述”
  5. 点击“从模板创建仓库”来创建新的仓库。恭喜,您刚刚创建了远程 Github 克隆,现在可以将其作为您自己网站的起点!
  6. 使用 创建新创建的 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(推荐)

  1. 生成 Token
    • 访问 https://github.com/settings/tokens
    • 点击 "Generate new token"
    • 选择 "classic" token
    • 设置过期时间(建议 90 天或 1 年)
    • 勾选 "repo" 权限
    • 点击 "Generate token"
    • 复制生成的 token(重要!只显示一次)
  2. 使用 Token 推送
# 使用 token 作为密码
git push origin main
# 用户名: feimao5787
# 密码: 粘贴你的 token

Netlify 高级配置详细位置

第一步:进入部署配置页面

登录 https://app.netlify.com

  1. 在 "Import an existing project" 后
  2. 选择你的仓库 feimao5787/maccmsrust
  3. 进入 "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 导入项目,它会自动读取配置。

下面配置后台更新文章

请按顺序

  1. 点击 "Project configuration"
  2. 在子菜单中找到 "Identity"
  3. 点击启用

第一步:点击 "Identity"

在左侧菜单中点击 "Identity"

第二步:启用 Identity 服务

进入 Identity 页面后:

  1. 点击 "Enable Identity" 按钮
  2. 等待几秒钟启用完成

第三步:配置 Git Gateway

启用 Identity 后:

  1. 点击 "Settings and usage"
  2. 找到 "Services" 部分
  3. 点击 "Git Gateway"
  4. 点击 "Enable Git Gateway"
  5. 按照提示授权 Netlify 访问你的 GitHub 仓库

第四步:设置注册选项

在 Identity 的 "Settings and usage" 中:

  • Registration preferences: 选择 "Invite only"(推荐)
  • 或者选择 "Open" 允许自由注册
快速搭建hugo部署github部署netlifyCMS插图
展开阅读全文

微信扫一扫,分享到朋友圈

快速搭建hugo部署github部署netlifyCMS
上一篇

在 Ubuntu 系统上安装 MongoDB 数据库工具

下一篇

修改hugo分类和推送的注意事项

你也可能喜欢

  • 暂无相关文章!

评论已经被关闭。

插入图片
返回顶部