引言#

曾经我写过一篇文章叫做：Fuwari静态博客搭建教程。

文中的Fuwari是基于Astro的，并且使用了服务器+客户端的混合渲染，尽管UI确实好看，但因为本人不会写Astro导致日后维护特别困难（比如手动添加Giscus评论后和上游分支发生冲突需要手动解决冲突才能合并上游）。

最后我放弃了，既然我就是菜我为什么不找一个原生使用HTML+JS+CSS的框架呢？

于是我便询问AI，Claude推荐我使用Hugo。

其实我早就曾听闻Hugo的大名，但是并没有深入研究，但是Claude又告诉我Hugo采用Go语言进行编译，速度快，而且想要二次开发也只需要改改我最熟悉的HTML+JS+CSS。

于是我便花了2小时深入研究、部署、调优。发现Hugo确实很强大：迁移方便，二改简单，构建迅速

正式开始#

请全程在Windows上操作

我们首先需要安装Scoop，这是一个适用于Windows的包管理器，个人认为非常好用

Scoop默认会安装到C盘，如果你想要换盘请按需更改

1
$env:SCOOP='D:\Scoop'
2
$env:SCOOP_GLOBAL='D:\ScoopApps'
3
[Environment]::SetEnvironmentVariable('SCOOP', $env:SCOOP, 'User')
4
[Environment]::SetEnvironmentVariable('SCOOP_GLOBAL', $env:SCOOP_GLOBAL, 'Machine')

安装Scoop：

1
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
2
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

如果你以管理员的身份会安装失败，请切换为普通用户。若想强制以管理员身份安装Scoop请使用

github原帖

出于安全考虑，默认情况下已禁用管理员控制台下的安装。如果您知道自己在做什么并希望以管理员身份安装Scoop，请下载安装程序并在提升的控制台中手动执行它，使用 -RunAsAdmin 参数。以下是示例：

1
irm get.scoop.sh -outfile 'install.ps1'
2
.\install.ps1 -RunAsAdmin [-OtherParameters ...]
3
# 如果你想要一行解决：
4
iex "& {$(irm get.scoop.sh)} -RunAsAdmin"

安装Hugo框架：

1
scoop install hugo

然后选择一个你喜欢的文件夹创建你的站点。 myblog 即你的站点文件夹名称

1
hugo new site myblog
2
cd myblog

安装PaperMod主题：

1
git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

站点根目录会有一个 hugo.toml。我推荐使用YAML。将文件重命名为 hugo.yaml。粘贴并更改以下内容

1
baseURL: "https://站点url"
2
title: "网站标题"
3
LanguageCode: "zh-CN"
4
theme: "PaperMod"
5

6
# 启用首页个人简介展示
7
params:
8
  # 是否启用评论。你需要自己配置，或者直接引入Giscus等评论系统
9
  comments: false
10
  # 是否显示代码复制按钮
11
  ShowCodeCopyButtons: true
12
  # 是否显示面包屑导航
13
  ShowBreadCrumbs: false
14
  # 是否显示阅读时间
15
  ShowReadingTime: true
16
  # 是否显示分享按钮
17
  ShowShareButtons: true
18
  # 分享按钮配置
19
  # ShareButtons: ["linkedin", "twitter"]
20
  # 是否禁用主题切换按钮
21
  disableThemeToggle: false
22
  assets:
23
    favicon: "/你的/网站图标.jpg" # 需要在static文件夹放置对应的图片
24
    iconHeight: 35
25
  # 首页信息配置
26
  homeInfoParams:
27
    Title: "首页展示的标题"
28
    Content: >
29
      首页展示的文本
30

31
  # 设置网站头像和首页头像
32
  profileMode:
33
    enabled: false # 设为 true 将完全替换 homeInfoParams
34

35
  # 网站头像设置 (显示在导航栏)
36
  label:
37
    text: "左上角显示的文本"
38
    icon: "/你的/左上角显示的图片.jpg" # 这将显示在导航栏标题旁边。需要在static文件夹放置对应的图片
39
    iconHeight: 35
40

41
  # 社交图标 (显示在简介下方)
42
  socialIcons:
43
    - name: bilibili
44
      url: ""
45
    - name: github
46
      url: ""
47
    - name: telegram
48
      url: ""
49
    # 可以添加更多社交图标 https://github.com/adityatelange/hugo-PaperMod/wiki/Icons
50

51
# 顶部导航栏的快捷链接
52
menu:
53
  main:
54
    - identifier: categories
55
      name: 分类
56
      url: /categories/
57
      weight: 10
58
    - identifier: tags
59
      name: 标签
60
      url: /tags/
61
      weight: 20
62
    - identifier: archives
63
      name: 归档
64
      url: /archives/
65
      weight: 30
66
    - identifier: search
67
      name: 搜索
68
      url: /search/
69
      weight: 40
70
    # 可以添加更多导航链接。weight的值越高排序越靠后
71

72
# 如果要启用搜索功能，需要添加这个
73
outputs:
74
  home:
75
    - HTML
76
    - RSS
77
    - JSON # 必须，用于搜索功能

然后我们需要分别配置分类、标签、归档和搜索页

创建 content\categories\_index.md 写入：

1
---
2
title: 分类
3
layout: categories
4
---

创建 content\tags\_index.md 写入：

1
---
2
title: 标签
3
layout: tags
4
---

创建 content\archives.md 写入：

1
---
2
title: 归档
3
layout: archives
4
---

创建 content\search.md 写入：

1
---
2
title: "搜索"
3
layout: "search"
4
---

然后我们要更改默认的文章创建模板

在 archetypes\default.md 写入：

1
---
2
title: {{ replace .File.ContentBaseName "-" " " | title }}
3
published: {{ .Date }}
4
summary: "文章简介"
5
cover:
6
  image: 文章封面图。也支持HTTPS
7
tags: [标签1, 标签2]
8
categories: '文章所处的分类'
9
draft: false
10
lang: ''
11
---

接下来我们就可以通过命令来创建文章，并开始写作了。注意，最终构建的文章URL是你的文章的文件名。比如：https://你的网站.com/posts/first 所以文章文件名尽量简短，这并不会影响你的文章标题

1
hugo new posts/first.md

当我们写完一篇文章想要预览网站，可以使用

1
hugo server

当我们想要将站点发布到Vercel、Cloudflare Pages等静态网站托管平台可以将我们的 myblog 作为一个Git存储库提交到Github

根目录：./

输出目录：public

构建命令：hugo --gc

环境变量： Key：HUGO_VERSION Value：0.145.0

对象存储存图中间件代码：#

1
import keyboard
2
import pyperclip
3
from PIL import ImageGrab, Image
4
import io
5
import boto3
6
from botocore.config import Config
7
import time
8
import uuid
9
import pyautogui
10
import os
11
from io import BytesIO
12
# 示例配置
13
# # R2 配置
14
# R2_CONFIG = {
15
#     'account_id': '11111111111111111',
16
#     'access_key_id': '11111111111111111',
17
#     'secret_access_key': '11111111111111111',
18
#     'bucket_name': '11111111111111111'
19
# }
20

21
# # OSS 配置
22
# OSS_CONFIG = {
23
#     'url': 'sb-eo-r2.2x.nz',
24
#     'prefix': '/fuwari-blog/img'
25
# }
26
#########################################################
27
# R2 配置
28
R2_CONFIG = {
29
    'account_id': '',
30
    'access_key_id': '',
31
    'secret_access_key': '',
32
    'bucket_name': ''
33
}
34

35
# OSS 配置
36
OSS_CONFIG = {
37
    'url': '',
38
    'prefix': ''
39
}
40
#########################################################
41
def init_r2_client():
42
    """初始化 R2 客户端"""
43
    return boto3.client(
44
        's3',
45
        endpoint_url=f'https://{R2_CONFIG["account_id"]}.r2.cloudflarestorage.com',
46
        aws_access_key_id=R2_CONFIG['access_key_id'],
47
        aws_secret_access_key=R2_CONFIG['secret_access_key'],
48
        config=Config(signature_version='s3v4'),
49
        region_name='auto'
50
    )
51

52
def get_image_from_clipboard():
53
    """从剪贴板获取图片"""
54
    try:
55
        image = ImageGrab.grabclipboard()
56
        if image is None:
57
            return None
58

59
        # 如果是列表（多个文件），取第一个
60
        if isinstance(image, list):
61
            if len(image) > 0:
62
                # 如果是图片文件路径，打开它
63
                try:
64
                    return Image.open(image[0])
65
                except Exception as e:
66
                    print(f"打开图片文件失败: {e}")
67
                    return None
68
            return None
69

70
        # 如果直接是 Image 对象
71
        if isinstance(image, Image.Image):
72
            return image
73

74
        return None
75
    except Exception as e:
76
        print(f"获取剪贴板图片失败: {e}")
77
        return None
78

79
def convert_to_webp(image):
80
    """将图片转换为 webp 格式"""
81
    if not image:
82
        return None
83

84
    try:
85
        buffer = BytesIO()
86
        # 确保图片是 RGB 模式
87
        if image.mode in ('RGBA', 'LA'):
88
            background = Image.new('RGB', image.size, (255, 255, 255))
89
            background.paste(image, mask=image.split()[-1])
90
            image = background
91
        elif image.mode != 'RGB':
92
            image = image.convert('RGB')
93

94
        image.save(buffer, format="WEBP", quality=80)
95
        return buffer.getvalue()
96
    except Exception as e:
97
        print(f"转换图片失败: {e}")
98
        return None
99

100
def upload_to_r2(image_data):
101
    """上传图片到 R2"""
102
    if not image_data:
103
        return None
104

105
    client = init_r2_client()
106

107
    # 生成基础文件名
108
    base_filename = f"{uuid.uuid4()}.webp"
109
    filename = base_filename
110

111
    try:
112
        # 检查文件是否已存在
113
        attempt = 1
114
        while True:
115
            try:
116
                # 尝试获取文件信息，如果文件存在会返回数据，不存在会抛出异常
117
                client.head_object(
118
                    Bucket=R2_CONFIG['bucket_name'],
119
                    Key=f"{OSS_CONFIG['prefix'].strip('/')}/{filename}"
120
                )
121
                # 如果文件存在，修改文件名
122
                name_without_ext = base_filename.rsplit('.', 1)[0]
123
                filename = f"{name_without_ext}_{attempt}.webp"
124
                attempt += 1
125
                print(f"文件名已存在，尝试重命名为: {filename}")
126
            except client.exceptions.ClientError as e:
127
                # 如果是 404 错误，说明文件不存在，可以使用这个文件名
128
                if e.response['Error']['Code'] == '404':
129
                    break
130
                raise e  # 其他错误则抛出
131

132
        # 上传文件
133
        client.put_object(
134
            Bucket=R2_CONFIG['bucket_name'],
135
            Key=f"{OSS_CONFIG['prefix'].strip('/')}/{filename}",
136
            Body=image_data,
137
            ContentType='image/webp'
138
        )
139
        return filename
140
    except Exception as e:
141
        print(f"上传失败: {e}")
142
        return None
143

144
def generate_markdown_link(filename):
145
    """生成 Markdown 图片链接"""
146
    if not filename:
147
        return None
148

149
    url = f"https://{OSS_CONFIG['url']}{OSS_CONFIG['prefix']}/{filename}"
150
    return f"![]({url})"
151

152
def type_markdown_link(markdown_link):
153
    """模拟键盘输入 Markdown 链接"""
154
    if not markdown_link:
155
        return
156

157
    pyperclip.copy(markdown_link)
158
    pyautogui.hotkey('ctrl', 'v')
159

160
def handle_upload():
161
    """处理图片上传的主函数"""
162
    print(f"\n[{time.strftime('%Y-%m-%d %H:%M:%S')}] 收到粘贴请求")
163

164
    print("正在检查剪贴板...")
165
    # 获取剪贴板图片
166
    image = get_image_from_clipboard()
167
    if not image:
168
        print("❌ 剪贴板中没有图片")
169
        return
170
    print("✅ 获取到剪贴板图片")
171

172
    # 转换为 webp
173
    print("正在转换为 WebP 格式...")
174
    image_data = convert_to_webp(image)
175
    if not image_data:
176
        print("❌ 图片转换失败")
177
        return
178
    print(f"✅ 转换完成，大小: {len(image_data)/1024:.2f}KB")
179

180
    # 上传到 R2
181
    print("正在上传到 R2...")
182
    filename = upload_to_r2(image_data)
183
    if not filename:
184
        print("❌ 上传失败")
185
        return
186
    print(f"✅ 上传成功，文件名: {filename}")
187

188
    # 生成并输入 Markdown 链接
189
    markdown_link = generate_markdown_link(filename)
190
    if markdown_link:
191
        print(f"生成的 URL: https://{OSS_CONFIG['url']}{OSS_CONFIG['prefix']}/{filename}")
192
        print(f"模拟键入: {markdown_link}")
193
        type_markdown_link(markdown_link)
194
        print("✅ 操作完成")
195

196
def main():
197
    """主函数"""
198
    print("=" * 50)
199
    print("R2 图片上传插件已启动")
200
    print(f"当前配置:")
201
    print(f"- OSS 域名: {OSS_CONFIG['url']}")
202
    print(f"- 存储路径: {OSS_CONFIG['prefix']}")
203
    print(f"- R2 存储桶: {R2_CONFIG['bucket_name']}")
204
    print("使用 Ctrl+Alt+V 上传剪贴板中的图片")
205
    print("=" * 50)
206

207
    # 注册快捷键
208
    keyboard.add_hotkey('ctrl+alt+v', handle_upload)
209

210
    # 保持程序运行
211
    keyboard.wait()
212

213
if __name__ == "__main__":
214
    main()