下载Hugo并准备文件#

打开Hugo，Github开源地址 https://github.com/gohugoio/hugo/releases/tag/v0.152.2，往下拉，右边有一个releases点它，然后继续往下拉。

找到自己架构对应的版本，一般电脑是Windows AMD64，其他架构就需要自己摸索啦。

下载下来的zip压缩包，用任意一个压缩文件管理器打开，里面就3个文件，把它解压到任意目录。在解压的目录下再新建一个文件夹，我这里叫dev，然后去WebStack的开源地址https://github.com/shenweiyan/WebStack-Hugo，点击右上角的绿色Code按钮，下面有个download zip，点一下下载。

下载zip包之后，把里面的examplesite拖放到刚刚创建的dev目录下。在dev目录下再新建一个themes文件夹，把压缩文件（包括第一层目录）全部解压到themes文件夹里，解压之后要把后缀“-main”删除。

回到刚才放Hugo的文件夹，把它移到自己的dev文件夹里。

打开dev文件夹，在顶部地址栏敲cmd，按回车打开命令提示符。

生成静态站点并部署到Cloudflare Pages#

在命令行输入hugo生成静态站点文件，没报错且正常显示页数就成功了（笔者第一次报错是因为themes目录名没写对），静态文件就在public目录下啦。

我们回到Cloudflare，点击菜单栏中的“计算和AI”，再点击“Workers and Pages”，然后点右上角“创建应用程序”，选择“Pages”。

项目名可以随便写，上传文件这里如果直接上传，可能提示文件数量超限，其实给public文件夹打个zip包就能上传了（Cloudflare可以认zip包）。

上传成功后点“继续部署”，给自己的项目添加自定义域就能访问到了。

如何修改导航站内容#

网址和其他一些配置文件主要在data文件夹里，站点的一些配置在根目录的hugo.toml中，想要改链接的图标在themes\WebStack-Hugo\static\assets\images里面，关于页面的内容在content\about.md里修改。

准备代码仓库并部署到Cloudflare#

打开GitHub开源链接：https://github.com/x-dr/telegraph-Image/tree/static，点击“Fork”，然后创建Fork。

我们回到Cloudflare，点击左边“计算和AI”下面的“Workers和Pages”，选择“创建Pages项目”，然后“导入现有的Git存储库”，选择刚刚Fork的telegraph-image，点下面的“开始设置”。

这里要注意框架预设，选择“Next.js”，然后“保存并部署”，这需要几分钟。此时先不要访问，还需要再做一点设置。

配置D1数据库和R2对象存储#

接下来展开左侧的“存储和数据库”，找到“D1 SQL数据库”，然后创建数据库，名称可以自己填。

创建好之后，点击“控制台”，粘贴下面的代码，点击“执行”。

1
DROP TABLE IF EXISTS tgimglog;
2
CREATE TABLE IF NOT EXISTS tgimglog (
3
 `id` integer PRIMARY KEY NOT NULL,
4
 `url` text,
5
 `referer` text,
6
 `ip` varchar(255),
7
 `time` DATE
8
);
9
DROP TABLE IF EXISTS imginfo;
10
CREATE TABLE IF NOT EXISTS imginfo (
11
 `id` integer PRIMARY KEY NOT NULL,
12
 `url` text,
13
 `referer` text,
14
 `ip` varchar(255),
15
 `rating` text,
16
 `total` integer,
17
 `time` DATE
18
);

数据库初始化完之后，再点击“存储和数据库”下的“R2对象存储”，点击右上角“创建存储桶”，自己取个名字，创建好之后返回项目。

请注意

进入R2对象存储页面需绑定支付方式，可以绑定自己的银联卡，要是没有的话，可以去小黄鱼上面买一张验证卡。

回到刚才的项目选择“设置”，点击“绑定”，然后添加刚才的两个绑定。

添加D1数据库，变量名称是大写的IMG，数据库选择刚刚创建的，保存。

重复添加R2存储桶，变量名称是大写的IMGRS，存储桶选择刚刚创建的，保存。

此时直接打开是打不开的，我们需要到 Pages 设置-运行时-兼容性标志，输入 nodejs_compat ，然后保存，回到首页，点击重试部署。

改用TG频道作为存储（突破R2限制）#

接下来，你的图床就可以访问了，而且能用R2接口上传图片。要是你想不受R2限制，也可以跟我一样把上传接口改为TG频道。

首先添加机器人好友https://t.me/BotFather，点击下面的“Start”。

接下来会让你给机器人取个名字，最好取个少见点的，或者用密码生成器来取，直到显示“Done”，选中的就是你的机器人Token。

在你的频道或者群聊中邀请@get_id_bot（没有的话就创建一个），然后在聊天框里输入/my_id@get_id_bot，机器人会回复“channel info”下面的Chat ID。记得把你刚创建的机器人对应的用户名拉进群，然后设置成管理员。

开发者介绍的环境变量#

以下是开发者介绍的一些环境变量：