跳过正文
Hello Hugo!
  1. 文档/

Hello Hugo!

文档 教程
Hugo+Cloudflare - 系列文章
§ 1: 本文

Hello,Hugo! 这是一个使用 Blowfish 主题创建的网站,本文将教会你如何使用Hugo 来创建自己的静态网站。并使用 Blowfish来美化你的网站。让我们开始吧!

一、安装 Hugo
#

你可以从Hugo官网下载安装Hugo,官方文档有很详细的安装说明,这里不做过多赘述

二、新建网站
#

  1. Hugo提供了很多命令来创建网站,你可以使用以下命令来创建一个网站:
hugo new site newsite
  1. 为了方便后期使用cloudflare托管网站,首先在github上创建一个仓库,名称为你的博客名称,比如myblog
  2. clone仓库到本地,将第一步,hugo创建的myblog文件夹内容全部复制到第二步clone下来的github仓库目录中,删除newsite目录,myblog目录即为网站的开发目录,包阔以后新增或者编辑文章,都在myblog目录中进行。
注意: 如果想要使用Cloudflare部署,仓库名称不能使用大写字母和下划线。Cloudflare要求仓库名称使用小写和连接符,例如 xxx-site

三、创建文章
#

  1. 进入myblog目录,执行以下命令:
hugo new posts/my-first-post.md
  1. 打开my-first-post.md文件,你会看到以下内容:
---
title: "My First Post"
date: 2025-06-01
draft: true
---
This is my first post on my new website!    
  1. 你可以根据自己的需要修改title、date、draft等字段,然后保存文件。你也可以不使用命令创建文章,而是手动创建一个md文件,在文件头部添加以上内容即可。
  2. 执行以下命令,启动本地服务器:
hugo server -D

启动成功后你会看到以下内容:

Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

此时打开浏览器,访问http://localhost:1313,就能看到你的网站了。 如果你修改了文章内容,保存文件后,浏览器会自动刷新。

四、安装主题
#

这里以我使用的Blowfish主题为例,当然,你也可以去Hugo官网上搜索其他主题,安装方式都一样。

Blowfish是一个简洁、易用的Hugo主题,它提供了很多功能,比如文章分类、标签、分页、评论、搜索等,本站就是使用Blowfish主题来搭建的。

主题的安装方式有很多,这里仅介绍使用git submodule安装,具体的安装步骤:

  1. 如果服务已经启动,先停掉服务,打开终端,进入你的网站目录,执行以下命令:
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

执行成功后,进入themes/blowfish目录下的config文件夹复制到myblog目录下, 然后修改myblog目录下的hugo.toml文件删除 执行以下命令,启动本地服务器:

hugo server -D

Tips: 在/themes/blowfish目录下,有一个exampleSite目录,里面是一个示例网站,你可以参考它的目录结构和文件内容,来修改你自己的网站

Hugo+Cloudflare - 系列文章
§ 1: 本文