快速上手 - 拾趣资源

聪收录于文档

2023-03-15 2023-03-16 约 1411 字预计阅读 3 分钟 - 次阅读 - 条评论

警告

本文最后更新于 2023-03-16，文中内容可能已过时。

学习在几分钟内创建一个 Hugo FixIt 站点。

以下步骤可帮助您初始化新网站。如果您根本不了解 Hugo，我们强烈建议您通过阅读此快速入门文档进一步了解它。或者如果你已经了解 Hugo，你也可以从一个模板直接开始：

准备

由于 Hugo 提供的便利性，Hugo 本身是这个主题唯一的依赖。

只需为您的机器（macOS、Linux、Windows、BSD，以及任何可以运行 Go 编译器工具链的机器）安装最新版本的 Hugo 扩展版 (>=0.89.0) 即可。

创建网站

Hugo 提供了一个 new 命令来创建一个新的网站：

1
2


hugo new site my_website
cd my_website

安装主题

FixIt 主题的仓库 https://github.com/hugo-fixit/FixIt

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

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

1
2


git init 
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

之后，你可以在站点目录通过这条命令来将主题更新至最新版本：

1

git submodule update --remote --merge

基础配置

以下是 FixIt 主题的基本配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


title = "我的 Hugo FixIt 网站"
baseURL = "http://example.org/"
# 设置默认的语言 ["en", "zh-cn", "fr", "pl", ...]
defaultContentLanguage = "zh-cn"
# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
languageCode = "zh-CN"
# 是否包括中日韩文字
hasCJKLanguage = true

# 更改使用 Hugo 构建网站时使用的默认主题
theme = "FixIt"

[params]
  # FixIt 主题版本
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    name = "文章"
    url = "/posts/"
    weight = 1
  [[menu.main]]
    identifier = "categories"
    name = "分类"
    url = "/categories/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "tags"
    name = "标签"
    url = "/tags/"
    weight = 3

# Hugo 解析文档的配置
[markup]
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false 是必要的设置 (https://github.com/hugo-fixit/FixIt/issues/43)
    noClasses = false

添加内容

以下是创建第一篇文章的方法：

1

hugo new posts/first_post.md

Hugo 在 content/posts 目录中创建了文章文件。

使用您的编辑器打开它，通过添加一些示例内容并替换文件开头的标题，你可以随意编辑文章。

1
2
3
4
5
6
7


---
title: 我的第一篇文章
date: 2023-02-20T20:14:22+08:00
draft: true
---

博客（英语：Blog）是一种在线日记型式的个人网站，借由张帖子章、图片或视频来记录生活、抒发情感或分享信息。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

This is a tip

一个技巧横幅

注意

一个注意横幅

摘要

一个摘要横幅

信息

一个信息横幅

成功

一个成功横幅

问题

一个问题横幅

警告

一个警告横幅

失败

一个失败横幅

危险

一个危险横幅

Bug

一个 Bug 横幅

示例

一个示例横幅

引用

一个引用横幅

注意

默认情况下，所有文章和页面均作为草稿创建。如果想要渲染这些页面，请从元数据中删除属性 draft: true, 设置属性 draft: false 或者在以下步骤中为 hugo 命令添加 -D/--buildDrafts 参数。

启动网站

保存文件后，使用以下命令在本地启动网站：

1

hugo server

信息

当你运行 hugo server 时，当文件内容更改时，页面会随着更改自动刷新。

注意

由于本主题使用了 Hugo 中的 .Scratch 来实现一些特性，非常建议你为 hugo server 命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面。

1

hugo server --disableFastRender

去查看 http://localhost:1313。

完整配置下的预览

构建网站

当你准备好部署你的网站时，运行以下命令：

1

hugo

会生成一个 public 目录，其中包含你网站的所有静态内容和资源。现在可以将其部署在任何 Web 服务器上。

我们的大多数用户使用 CI/CD 工作流程部署他们的网站，通过推送 1 到他们的 GitHub 或 GitLab 存储库会触发构建和部署。流行的提供商包括 Vercel 2、Netlify 3、AWS Amplify、CloudCannon、Cloudflare Pages、 GitHub pages 和 GitLab pages。

在托管和部署部分了解更多信息。

寻求帮助

所有的反馈都是欢迎的！详见议题、讨论或者加入 QQ 群：403144966。

Git 存储库包含整个项目目录，通常不包括 public 目录，因为站点是在推送后构建的。 ↩︎
如何使用 Vercel 部署 Hugo 站点 ↩︎
在 Netlify 上部署 Hugo ↩︎

给作者买杯卡布奇诺～

赞赏

支付宝

微信