博客搭建

方案一：纯静态博客搭建（Hugo + Stack + Vercel）

这是最推荐的方式，完美复刻原博客。

第一步：安装 Hugo

  1. 下载 Hugo：
    • 前往 Hugo GitHub Releases 页面：https://github.com/gohugoio/hugo/releases
    • 根据你的操作系统下载扩展版（extended版本，支持Sass/SCSS）。例如 Windows 就下载 hugo_extended_0.XXX.0_windows-amd64.zip。
  2. 安装：
    • Windows：解压下载的ZIP文件，将里面的 hugo.exe 放到一个你喜欢的目录（如 C:\Hugo\bin），然后将该目录添加到系统的 PATH 环境变量中。
    • Mac：推荐使用 Homebrew：brew install hugo
    • Linux：下载解压后，将二进制文件移动到 /usr/local/bin/ 即可。
  3. 验证：打开终端/命令提示符，输入 hugo version，如果显示版本号（且包含extended字样），说明安装成功。

第二步：创建本地博客项目

  1. 创建新站点：

    1
2

    hugo new site my-java-blog
cd my-java-blog

  2. 初始化 Git（为后续部署做准备）：

    1

    git init

第三步：安装和配置 Stack 主题

  1. 将主题添加为子模块（这是Hugo官方推荐的方式）：

    1

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

    这会将主题代码克隆到你的 themes/stack 目录下。

  2. 基本配置：

    • 在项目根目录下，创建配置文件 config.yaml (或 config.toml)。YAML格式更易读，推荐使用。
    • 将以下基础配置复制到 config.yaml 中：
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

    baseURL: "https://your-blog-domain.vercel.app/" # 稍后替换为你自己的域名
languageCode: "zh-cn"
title: "我的Java技术博客"
theme: "stack"

# 设置默认内容语言
defaultContentLanguage: 'zh'

# 主题相关配置
params:
  # 网站副标题
  subtitle: "探索编程与架构之美"
  # 首页模式：'grid' 网格 | 'list' 列表
  home_mode: 'grid'
  # 主题颜色： 'auto' | 'light' | 'dark'
  defaultTheme: 'auto'

# 菜单配置
menu:
  main:
    - identifier: "home"
      name: "首页"
      url: "/"
      weight: 1
    - identifier: "about"
      name: "关于"
      url: "/about"
      weight: 2

# 评论系统（可选，后期可配置）
# services:
#  disqus:
#    shortname: "your-disqus-shortname"

# 谷歌分析（可选）
# googleAnalytics: "G-XXXXXXXXXX"

# 允许渲染 Emoji
enableEmoji: true

第四步：创建你的第一篇文章

  1. 新建文章：

    1

    hugo new posts/my-first-post.md

    这会在 content/posts/ 目录下生成一个Markdown文件。

  2. 编辑文章： 用任何文本编辑器打开 content/posts/my-first-post.md，内容如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    ---
title: "我的第一篇文章"
date: 2023-10-27
draft: false # 发布时改为 false
tags: ["Java", "Hugo"]
categories: ["技术"]
---

## 欢迎使用 Hugo

这是一篇用 Markdown 写的文章。**加粗**，*斜体*，[链接](https://java.com)。

​```java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, Hugo and Java!");
    }
}

第五步：本地预览和调试

  1. 启动本地服务器：

    1

    hugo server -D
    • -D 参数表示包含草稿（draft: true）的文章。

  2. 查看博客： 在浏览器中打开 http://localhost:1313。你现在应该能看到和原博客风格几乎一样的网站了！你对代码和配置的任何修改都会实时热重载。

第六步：部署到 Vercel（免费且高速）

  1. 将代码推送到 GitHub：

    • 在 GitHub 上创建一个新的代码仓库（如 my-java-blog）。
    • 按照指引将你本地的代码推送上去。

  2. 注册并连接 Vercel：

    • 访问 Vercel 官网，使用 GitHub 账号注册。
    • 点击 “Import Project” -> “Import Git Repository”，选择你刚创建的仓库。

  3. 一键部署：

    • Vercel 会自动检测到这是 Hugo 项目并配置好构建命令（hugo）和输出目录（public）。
    • 你几乎不需要修改任何设置，直接点击 “Deploy”。

  4. 访问线上博客： 部署完成后，Vercel 会为你分配一个 *.vercel.app 的域名。你现在就有了一个和原博客一样的、全球高速访问的个人博客了！

方案二：为静态博客添加 Java 后端（可选）

纯静态博客无法实现评论、点赞等动态功能。如果你需要这些，可以按以下架构添加一个独立的Java后端。

架构图 

1
2
3
4
5
6

用户浏览器 (访问博客)      <-- 静态文件 (HTML, CSS, JS) -->   Vercel (托管Hugo博客)
         |
         | (Ajax API 调用，如提交评论)
         |
        \|/
Java后端API (Spring Boot)  <--> 数据库 (MySQL/PostgreSQL)

实现步骤（以评论功能为例）：

  1. 创建 Spring Boot 项目：

    • 使用 Spring Initializr 创建一个新项目，选择 Web, JPA, PostgreSQL 等依赖。

  2. 设计评论实体和API：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

    // Comment.java Entity
@Entity
@Data
public class Comment {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String postUrl; // 通过文章URL关联静态博客的文章
    private String author;
    private String content;
    private LocalDateTime createdAt;
}

// CommentController.java
@RestController
@RequestMapping("/api/comments")
@CrossOrigin(origins = "https://your-blog-domain.vercel.app") // 允许你的博客域名调用
public class CommentController {
    @Autowired
    private CommentRepository commentRepository;

    @GetMapping
    public List<Comment> getComments(@RequestParam String postUrl) {
        return commentRepository.findByPostUrlOrderByCreatedAtDesc(postUrl);
    }

    @PostMapping
    public Comment addComment(@RequestBody Comment comment) {
        comment.setCreatedAt(LocalDateTime.now());
        return commentRepository.save(comment);
    }
}

  3. 部署 Java 后端：

    • 你可以将打包好的Jar包部署到任何支持Java的云平台，如：
      • 阿里云/腾讯云轻量应用服务器：性价比高，完全控制。
      • Railway / Render：新兴的部署平台，对开源项目有免费额度。
      • Heroku：老牌云应用平台。

  4. 在 Hugo 博客中调用 API：

    • 在你的Hugo主题模板（layouts/partials/comments.html）或使用自定义JS文件，添加Ajax代码来调用你的Java后端。
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    // 获取当前文章的URL
const postUrl = window.location.pathname;

// 从你的Java后端获取评论列表
fetch(`https://your-java-api.railway.app/api/comments?postUrl=${postUrl}`)
  .then(response => response.json())
  .then(comments => {
      // 将评论渲染到页面上
  });

// 处理用户提交评论的表单
// ... 提交到 POST /api/comments

最终建议

  1. 先从方案一开始：完美复刻你想要的博客，成本极低，流程顺畅。这是核心。
  2. 运行起来后，再根据实际需求，考虑是否要启动方案二，用Java去实现一些动态功能。绝大多数情况下，纯静态博客已经完全够用，评论等功能可以使用第三方的Utterances（基于GitHub Issues）或Giscus（基于GitHub Discussions）来替代自建Java后端，这样更简单。