本文章没有找到对应的语言版本

基于hugo的博客搭建(github+cloudflare)

本文教你0成本搭建一个静态博客 白嫖党狂喜

博客分为静态和动态2种，动态博客的好处在于他可以从后台上传，有管理页面。

静态博客要考虑的就多了，比如如何上传md方便,怎么实现评论…

本地环境安装

windows

下载后解压，记住文件路径，Win+r输入sysdm.cpl回车后依次点击，高级，环境变量，系统变量的path，

新建，然后把你的目录写进去，保存。

然后打开cmd输入hugo version

如果显示了版本号就安装完成了

hugo v0.156.0-9d914726dee87b0e8e3d7890d660221bde372eec+extended windows/amd64 BuildDate=2026-02-18T16:39:55Z VendorInfo=gohugoio

双击运行安装即可

Linux

都会使用linux系统了，请根据系统选择合适的版本安装，hugo需要extend版本

Github和Cloudflare前置准备

(可选)你可能需要一个域名，在阿里云上可以以1块钱的价格拿到一年的.top .xin域名

image-20260306125303064

第一步：在你的Github主页上点击new新建一个仓库命名为blog，用于存放博客源码

image-20260306125627553

注册一个Cloudflare账号

先简单搭建一个网站

命令

运行以下命令，使用 Ananke 主题创建 Hugo 网站。

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

命令解释

在 quickstart 目录中为您的项目创建 目录结构。

hugo new site quickstart

将当前目录更改为项目的根目录。

cd quickstart

在当前目录中初始化一个空的 Git 仓库。

git init

将 Ananke 主题克隆到 themes 目录中，并将其作为 Git 子模块 添加到您的项目中。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

向站点配置文件中追加一行，指示当前使用的主题。

echo "theme = 'ananke'" >> hugo.toml

启动 Hugo 的开发服务器以查看网站。

hugo server

按下 Ctrl + C 停止 Hugo 的开发服务器。

添加内容

向您的网站添加一个新页面。

hugo new content/posts/my-first-post.md

Hugo 会在 content/posts 目录中创建该文件。使用编辑器打开该文件。

---
title: "我的第一篇文章"
date: 2022-11-20T09:03:20-08:00
draft: true
---

注意 [front matter] 中的 draft 值为 true。默认情况下，Hugo 在构建网站时不会发布草稿内容。了解更多关于草稿、将来和过期内容的信息。

在文章正文中添加一些 [markdown]，但不要更改 draft 值。

---
title: "我的第一篇文章"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## 简介

这是 **粗体** 文本，这是 *斜体* 文本。

访问 [Hugo](https://gohugo.io) 网站！

保存文件，然后启动 Hugo 的开发服务器以查看网站。您可以运行以下命令之一来包含草稿内容。

hugo server --buildDrafts
hugo server -D

在终端中显示的 URL 中查看您的网站。随着继续添加和更改内容，请保持开发服务器运行。

Hugo 的渲染引擎符合 CommonMark 的 规范。CommonMark 组织提供了一个由参考实现驱动的有用的 实时测试工具。

配置网站

使用编辑器打开项目根目录下的 网站配置 文件（hugo.toml）。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = '我的新 Hugo 网站'
theme = 'ananke'

进行以下更改：

  1. 为您的生产网站设置 baseURL。该值必须以协议开头，并以斜杠结尾，如上所示。
  2. 将 languageCode 设置为您的语言和地区。
  3. 为您的生产网站设置 title。

启动 Hugo 的开发服务器以查看您的更改，记得包含草稿内容。

hugo server -D

大多数主题作者提供配置指南和选项。请务必访问您的主题的存储库或文档站点了解详细信息。

Ananke 主题的作者 The New Dynamic 提供了关于配置和使用的 文档。他们还提供了一个 演示站点。

访问http://localhost:1313/如果显示

image-20260306131400118

说明你已经学会了Hugo的基本用法

完成部署

echo "# my-blog" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin 你的仓库名如 https://github.com/xxxxx/my-blog
git push -u origin main

push上去后应该会显示

image-20260306132205876

image-20260306132217509

然后来到Cloudflare的page部署页面

image-20260306132456749

image-20260306132518669

image-20260306132607777

image-20260306132753125

可以看到此时已经可以访问了

image-20260306132835030

以后你只需要

git add .
git commit -m xxxxxxxx
git push

Cloudflare会自动构建部署到网页

结束

你已经学会了搭建静态博客了,以后可能会出一期动态博客搭建的教程。

      说些什么吧！

      giscus