快速上手
学习在几分钟内创建一个 Hugo FixIt 站点。
在本教程中,你将学会:
- 创建站点
- 添加内容
- 配置站点
- 发布站点
先决条件
在开始本教程之前,你必须:
你还必须熟悉使用命令行。
创建网站
命令
验证你是否安装了 Hugo v0.112.0 或更高版本。
|
|
运行以下命令来创建一个带有 FixIt 主题的 Hugo 网站。下一节将对每个命令进行解释。
|
|
通过终端中显示的 URL 查看你的站点。按 Ctrl + C
停止 Hugo 的开发服务器。
命令解释
在 my-blog
目录中为你的项目创建 目录结构骨架。
|
|
将当前目录更改为项目的根目录。
|
|
在当前目录中初始化一个空的 Git 存储库。
|
|
将 FixIt 主题作为 Git 子模块 添加到你的项目中的 themes
目录。
|
|
在站点配置文件中添加一行,指定当前主题。
|
|
在站点配置文件中添加一行,指定默认的内容语言。
|
|
启动 Hugo 的开发服务器以查看站点。
|
|
按 Ctrl + C
停止 Hugo 的开发服务器。
添加内容
给你的网站添加新页面。
|
|
Hugo 在 content/posts
目录中创建了该文件,使用编辑器打开文件。
|
|
请注意,front matter 中的 draft
值为 true
。默认情况下,Hugo 在你构建网站时不会发布草稿内容。详细了解 草稿、未来和过期内容。
在帖子正文中添加一些 Markdown,但不要更改 draft
值。
|
|
保存文件,然后启动 Hugo 的开发服务器来查看站点。你可以运行以下任一命令来包含草稿内容。
|
|
由于本主题使用了 Hugo 中的 .Scratch
和 .Store
来实现一些特性,
非常建议你为 hugo server
命令添加 --disableFastRender
参数来实时预览你正在编辑的文章页面。
当对新内容感到满意时,将 front matter 中的 draft
值更改为 false
,然后保存文件。
发布网站
在此步骤中,你将发布你的网站,但不会 部署 它。
当你发布站点时,Hugo 在项目根目录的 public
目录中创建整个静态站点。这包括 HTML 文件以及图像、CSS 文件和 JavaScript 文件等资源。
当你发布网站时,你通常不希望包含 草稿、未来或过期的内容,命令很简单。
|
|
我们的大多数用户使用 CI/CD 工作流程部署他们的网站,通过推送1到他们的 GitHub 或 GitLab 存储库会触发构建和部署。流行的提供商包括 Vercel2、Netlify3、AWS Amplify、CloudCannon、Cloudflare Pages、 GitHub pages 和 GitLab pages。
要了解如何部署站点,请参阅 托管和部署 部分。
寻求帮助
所有的反馈都是欢迎的!详见 议题、讨论 或者加入 QQ 群:814031017
。
Git 存储库包含整个项目目录,通常不包括 public 目录,因为站点是在推送后构建的。 ↩︎