大数跨境
0
0

2026年终极保姆级教程:手把手教你用 Cloudflare + GitHub + Hugo 搭建永久免费个人博客

2026年终极保姆级教程:手把手教你用 Cloudflare + GitHub + Hugo 搭建永久免费个人博客 跨境电商AI时代2030
2026-01-01
3
导读:为什么我认为每个想在网上建立IP或是单纯的营销的人都应该有个自己的博客,无论写什么内容都可以。

为什么我认为每个想在网上建立IP或是单纯的营销的人都应该有个自己的博客,无论写什么内容都可以。

对于想要拥有个人博客的小白来说,市面上的方案要么太贵(买服务器每年几百块),要么太不可控(第三方博客平台随时会封号或倒闭)。

今天我介绍的这种采用的“铁三角”方案(Hugo + GitHub + Cloudflare)是目前全球开发者最推崇的黄金组合:

Hugo(装修队):目前世界上最快的静态网站生成器,它在你电脑上把文章瞬间变成漂亮的网页。

GitHub(仓库):免费帮你保管所有网站代码和文章,安全可靠。

Cloudflare Pages(发行商):全球顶级大厂,免费帮你把网站发布到全世界,速度快,自带 HTTPS 安全锁。

最重要的是:这套方案完全免费,且一旦搭建好,只要 GitHub 不倒闭,你的博客就永久存在。

准备工作

在开始“敲代码”之前,请确保你已经准备好了以下三个东西:

一台电脑(Windows 或 Mac 均可)。

GitHub 账号:去注册一个。

Cloudflare 账号:去注册一个。

第一步:在电脑上安装“建站工具

就像盖房子需要锤子和锯子,我们需要先安装两个核心软件:Git(用来传输文件)和Hugo(用来生成网站)。

Windows 用户(推荐最简单的命令行安装法)

现在的 Windows 自带一个很方便的软件商店命令行。

按下键盘上的 Win 键,输入 cmd,在出来的“命令提示符”上右键选择“以管理员身份运行”

安装 Hugo:复制下面的命令粘贴进黑框框,按回车。

bash

wingetinstallHugo.Hugo.Extended

(安装过程中如果问你是否同意协议,输入 Y 并回车即可)

安装 Git

bash

wingetinstallGit.Git

(安装完成后,建议重启一下电脑,保证软件生效)

Mac 用户

打开终端(Terminal)。

输入以下命令并回车(前提是你装过 Homebrew):

bash

brewinstallhugogit

检查是否安装成功

重新打开一个命令行窗口,输入 hugo version,如果能看到类似 hugo v0.140.0... 的一串版本号,说明工具已经准备就绪!

第二步:在本地创建你的博客基地

我们要先在你的电脑上把博客的雏形搭建起来。

选个风水宝地

在你的硬盘里找个地方(比如 D 盘),新建一个文件夹,命名为 Blog。

打开命令行

进入这个 Blog 文件夹,在空白处右键 -> 选择Open in Terminal(在终端打开) 或者Git Bash Here

一键生成博客

在弹出的窗口里输入下面这行命令(myblog 是你的博客名字,可以随意改):

bash

hugo new site myblog

系统会瞬间在文件夹里生成一堆文件。

初始化 Git

依次输入下面两行命令,进入博客目录并初始化:

bash

cdmybloggitinit

第三步:给博客“精装修”(安装主题)

Hugo 默认的样子是“裸奔”的,我们需要给它穿上一件漂亮的衣服(主题)。这里推荐PaperMod主题,它是目前最流行、最简洁、速度最快的主题之一,非常适合小白。

下载主题

直接在刚才的命令行里复制粘贴这行命令:

bash

gitsubmoduleadd--depth=1https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

(这行命令会自动把主题文件下载到你的 themes 文件夹里)

配置主题

打开你的博客文件夹 myblog,找到一个叫 hugo.toml 的文件(这是博客的控制中心)。用记事本或者代码编辑器(如 VS Code)打开它。

把里面的内容全部清空,替换成下面这些最基础的配置:

text

baseURL = 'https://你的名字.pages.dev/'  

languageCode = 'zh-cn'

title = '我的个人博客'

theme = 'PaperMod'

[params]

 # 你的个人简介,会显示在首页

 description = "记录生活,分享技术"

 # 开启深色模式自动切换

 defaultTheme = "auto"

[menu]

 [[menu.main]]

 name = "首页"

 url = "/"

 weight = 1

 [[menu.main]]

 name = "文章"

 url = "/posts"

 weight = 2

保存并关闭文件。

第四步:写下你的第一篇文章

博客建好了,得写点东西测试一下。

回到命令行窗口,输入:

bash

hugo new content posts/hello-world.md

去文件夹 content/posts/ 里找到 hello-world.md,用记事本打开。你会看到最上面有一段被 --- 包裹的内容,那叫“元数据”(Front Matter),千万别乱删。

你可以修改成这样:

text

---title: '我的第一篇博客文章'date: 2026-01-01T12:00:00+08:00draft: false---

大家好!这是我用Cloudflare + GitHub + Hugo 搭建的静态博客。在这里,我拥有数据的绝对掌控权。

注意:一定要确保 draft: false。如果是 true(草稿状态),发布的时候文章会被隐藏。

本地预览(看看效果)

在命令行输入:

bash

hugo server

你会看到提示 Web Server is available at http://localhost:1313/。

打开浏览器访问这个地址,见证奇迹的时刻!你的博客已经在浏览器里跑起来了。满意后,在黑框框里按 Ctrl + C 停止预览。

第五步:在 GitHub 建立“云端仓库”

电脑上的博客做好了,现在我们要把它上传到 GitHub 存起来。

登录,点击右上角的+号,选择New repository(新建仓库)。

Repository name(仓库名):填 my-blog(或者其他你喜欢的名字)。

Public/Private:选择Public(公开)。

重要:其他选项(如 Add a README file)全都不要勾选,我们要创建一个纯净的空仓库。

点击Create repository

创建成功后,页面会显示一堆代码,你只需要找到那个HTTPS开头的链接(例如 https://github.com/你的用户名/my-blog.git),复制它。

第六步:把博客推送到云端

回到你电脑上的命令行窗口(确保你还在 myblog 文件夹里),依次执行下面三行“魔法命令”:

关联仓库(把你的电脑和GitHub连接起来):

bash

注意:把下面的链接换成你刚才复制的那个!gitremoteaddorigin https://github.com/你的用户名/my-blog.git

准备文件

bash

gitadd.

提交并推送

bash

gitcommit -m"第一次发布博客"gitpush -u origin main

(如果是第一次使用,GitHub 可能会弹窗让你输入账号密码登录,照做即可。如果提示分支名不对,尝试把 main 换成 master)

当黑框框里显示 100% 和 done 时,说明你的博客代码已经成功上传到 GitHub 了!

第七步:用 Cloudflare Pages 正式发布

代码在 GitHub 了,最后一步是用 Cloudflare 把它变成真正的网站。

登录。

在左侧菜单栏找到Workers & Pages,点击进入。

点击蓝色的Create application(创建应用程序) -> 选择Pages标签 -> 点击Connect to Git(连接到 Git)。

登录 GitHub 授权,选择你刚才创建的 my-blog 仓库,点击Begin setup(开始设置)。

关键配置环节(Cloudflare 会自动识别 Hugo,但为了保险请检查):

点击Save and Deploy(保存并部署)。

等待几十秒,你会看到满屏绿色的日志滚动。当出现Success!时,点击顶部的链接(例如 https://my-blog-xyz.pages.dev)。

恭喜你!你的个人博客已经正式上线,全世界的任何人都可以通过这个链接访问它!

以后怎么写新文章?

这一套流程最爽的地方在于“后期维护”。以后你想写新文章,只需要做三步:

在电脑上用 hugo new content posts/新文章.md 创建文件并写作。

在命令行里执行三连击:

bash

gitadd.gitcommit -m"写了篇新文章"gitpush

Cloudflare 会自动感应到你的推送,并在几分钟内自动更新你的网站。

无需像 WordPress 那样担心插件冲突,也不用担心数据库被黑。这是一套真正属于你、干净、纯粹的文字家园。

如果要把这个博客绑定到自己的域名,我建议直接花个1美元买个.xyz等数字域名。

具体流程如下:

DigitalPlat FreeDomain确实是目前(2026年)开源社区里非常火的一个替代方案。它是由非营利组织运营的,提供.us.kg、.dpdns.org等后缀的免费域名。

虽然这些在技术上属于“二级域名”或“三级域名”(类似 .edu.cn),但在 Cloudflare 眼里,它们和普通的 .com 没什么区别,完全可以用来绑定你的个人博客。

以下是详细的注册和使用教程:

第一步:访问官网并注册账号

打开官网:

访问(如果不稳定,也可以尝试它的主页找入口)。

注册(Sign Up):

激活账号:

去你的邮箱里查收激活邮件,点击链接激活。

第二步:搜索并申请域名

登录后进入Dashboard(控制台)。

找到"Order New Domain"(订购新域名)或者顶部的搜索框。

输入你想要的名字:

比如输入zhangsan,系统会列出可用的后缀,目前主流的是:

下单(Checkout):

如果显示Available(可用),点击Order或Register。价格应该是$0.00。

填写用途:

有些后缀会要求你简单写一句申请理由(Reason),用英文简单写即可,例如:For my personal blog and learning web development.(用于我的个人博客和学习Web开发)。

第三步:修改 DNS (关键步骤)

为了让 Cloudflare 接管这个域名,你需要把它的 DNS 服务器改成 Cloudflare 的。

先在 Cloudflare 这边操作:

回到 DigitalPlat 后台:

第四步:等待生效

修改 DNS 通常需要几分钟到几小时才能在全球生效。

你可以回到 Cloudflare 页面点击"Check nameservers"。

一旦 Cloudflare 显示绿色的Active,你就可以去 Pages 里绑定这个域名了(绑定方法参考之前的教程“第四步”)。

⚠️ 避坑指南

不要滥用:DigitalPlat 是公益项目,对钓鱼、诈骗网站查得很严。如果是正经博客没问题,乱搞会被封号。

续期问题:虽然说是永久免费,但建议每隔几个月登录一下后台,看看有没有要求手动“Renew”(续期)的提示,防止被系统回收。

稳定性:相比于花钱买的 .com 或 .xyz,这种免费域名的所有权其实不在你手里。如果你的博客做大了,强烈建议还是花几块钱买个正规域名(比如 .xyz 每年也就不到 10 块钱),这才是长久之计。

【声明】内容源于网络
0
0
跨境电商AI时代2030
AI工具实用知识分享,bard,claude,stable diffusion技巧学习,以及如何应用这些AI工具做跨境电商和自媒体。
内容 372
粉丝 0
认证用户
跨境电商AI时代2030 跨境电商AI时代2030 AI工具实用知识分享,bard,claude,stable diffusion技巧学习,以及如何应用这些AI工具做跨境电商和自媒体。
总阅读7.4k
粉丝0
内容372