建站

Hugo博客部署指南

Hugo博客部署指南

Hugo博客部署指南
用Hugo在ubuntu24上部署一个个人博客记录一些学习笔记，项目总结，技术文章和思考
我们将使用Hugo静态网站生成器在Ubuntu 24上部署个人博客。Hugo是一个用Go编写的快速、现代的静态网站生成器，非常适合构建个人博客、项目文档等。

步骤：

安装Hugo

创建一个新的Hugo站点

选择或创建一个主题

配置站点

创建内容（文章）

本地测试

部署到服务器（假设你已经有一个服务器，并且可以通过SSH访问）

由于你是在Ubuntu 24上部署，我们可以通过包管理器安装Hugo，但为了获得最新版本，我们也可以从GitHub发布页面下载。

这里我们选择使用包管理器安装，因为Ubuntu 24的仓库中可能已经有了较新版本的Hugo。

如果仓库中的版本不够新，我们也可以使用Snap安装，或者从GitHub下载二进制文件。

以下是通过APT安装的步骤：

我来为你提供一个完整的Hugo博客部署指南，适合Ubuntu 24系统。

  1. 安装Hugo
    bash

更新系统包列表

sudo apt update

安装Hugo（Ubuntu 24仓库中的版本可能较旧，建议使用以下方法安装最新版）

sudo apt install -y wget

方法1：从GitHub下载最新版

查看最新版本：https://github.com/gohugoio/hugo/releases

wget https://github.com/gohugoio/hugo/releases/download/v0.128.0/hugo_extended_0.128.0_linux-amd64.deb
sudo dpkg -i hugo_extended_0.128.0_linux-amd64.deb

方法2：使用Snap安装（版本可能不是最新）

sudo snap install hugo

验证安装

hugo version
2. 创建博客项目
bash

创建新的Hugo站点

hugo new site my-blog
cd my-blog

初始化Git仓库（可选但推荐）

git init
3. 选择并安装主题
bash

推荐的主题（选择一个）

1. PaperMod - 简洁现代

git submodule add –depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

2. Stack - 卡片式设计

git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/stack

3. LoveIt - 功能丰富

git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

  1. 基础配置
    编辑 hugo.toml（或 config.toml）：

toml
baseURL = ‘https://yourdomain.com/‘
languageCode = ‘zh-CN’
title = ‘我的技术博客’
theme = ‘PaperMod’

启用评论系统（可选）

[params]
comments = true

启用Google Analytics（可选）

googleAnalytics = ‘G-XXXXXXX’

多语言配置

[languages.zh-CN]
title = ‘我的技术博客’
weight = 1

菜单配置

[[menu.main]]
identifier = ‘posts’
name = ‘文章’
url = ‘/posts/‘
weight = 1

[[menu.main]]
identifier = ‘categories’
name = ‘分类’
url = ‘/categories/‘
weight = 2

[[menu.main]]
identifier = ‘tags’
name = ‘标签’
url = ‘/tags/‘
weight = 3

[[menu.main]]
identifier = ‘about’
name = ‘关于’
url = ‘/about/‘
weight = 4
5. 创建目录结构
bash

创建内容目录

mkdir -p content/posts content/projects content/notes content/about

创建示例文章

hugo new posts/first-post.md
hugo new notes/learning-log.md
hugo new projects/summary-2024.md
hugo new about/index.md
6. 文章模板
编辑 content/posts/first-post.md：

markdown

title: “第一篇博客文章”
date: 2024-12-21T10:00:00+08:00
draft: false
tags: [“Hugo”, “博客”, “教程”]
categories: [“技术”]
summary: “这是我的第一篇博客文章，主要介绍如何使用Hugo搭建个人博客。”

简介

这是我的第一篇博客文章，记录Hugo博客搭建过程。

主要内容

  • Hugo安装
  • 主题配置
  • 文章撰写

代码示例

def hello_world():
    print("Hello, Hugo!")
总结
Hugo是一个优秀的静态网站生成器，适合技术博客。

text

## 7. 本地测试

```bash
# 启动本地服务器
hugo server -D

# 访问 http://localhost:1313
# -D 参数包含草稿文章
8. 部署配置
方案A：GitHub Pages（推荐）
bash
# 创建部署脚本 deploy.sh
cat > deploy.sh << 'EOF'
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# 生成静态文件
hugo

# 进入public目录
cd public

# 初始化Git（如果第一次）
git init
git add .

# 提交更改
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
    msg="$*"
fi
git commit -m "$msg"

# 推送到GitHub Pages仓库
# 修改为你的仓库地址
git push -f git@github.com:username/username.github.io.git main

cd ..
EOF

chmod +x deploy.sh
方案B：Nginx服务器部署
bash
# 安装Nginx
sudo apt install -y nginx

# 生成静态文件
hugo

# 复制到Nginx目录
sudo cp -r public/* /var/www/html/

# 配置Nginx
sudo nano /etc/nginx/sites-available/blog
Nginx配置示例：

nginx
server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/blog;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
9. 自动化脚本
创建 scripts/setup.sh：

bash
#!/bin/bash
# 博客管理脚本

case "$1" in
    "new")
        hugo new "posts/$(date +%Y-%m-%d)-$2.md"
        ;;
    "server")
        hugo server -D
        ;;
    "build")
        hugo --minify
        ;;
    "deploy")
        hugo --minify
        cd public && git add . && git commit -m "Update $(date)" && git push
        ;;
    *)
        echo "用法: $0 {new|server|build|deploy}"
        ;;
esac
10. 优化配置
添加搜索功能
toml
# 在config.toml中添加
[params]
  search = true
添加代码高亮
toml
# 使用Chroma高亮
pygmentsCodeFences = true
pygmentsStyle = "monokai"
添加SEO优化
toml
[params]
  description = "个人技术博客，分享学习笔记、项目总结和技术思考"
  keywords = "技术博客,编程,学习笔记,项目总结"
11. 备份脚本
bash
# backup.sh
#!/bin/bash
DATE=$(date +%Y%m%d_%H%M%S)
BACKUP_DIR="/path/to/backup/hugo-blog-$DATE"

# 备份整个项目
cp -r ~/my-blog "$BACKUP_DIR"

# 备份到远程
# rsync -avz ~/my-blog user@remote:/backup/hugo-blog/
12. 日常使用命令
bash
# 创建新文章
hugo new posts/文章标题.md

# 本地预览
hugo server

# 构建静态文件
hugo

# 清理构建缓存
hugo --gc

# 构建并压缩
hugo --minify
额外建议
版本控制

bash
# 添加.gitignore
echo "public/" >> .gitignore
echo "resources/" >> .gitignore
使用GitHub Actions自动部署
创建 .github/workflows/gh-pages.yml：

yaml
name: Deploy Hugo

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: peaceiris/actions-hugo@v2
      - run: hugo --minify
      - uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
内容组织建议

/content/posts/ - 技术文章

/content/notes/ - 学习笔记

/content/projects/ - 项目总结

/content/drafts/ - 草稿箱

这个方案为你提供了一个完整的、可扩展的技术博客系统。你可以根据自己的需求调整主题和配置。