文章 标签 分类 关于

Hello World

crazt
     约 1187 字  预计阅读 3 分钟 
警告
本文最后更新于 2021-12-21，文中内容可能已过时。

只是想整一个 dev 域名，搭一个静态博客。

在挑选主题时主要考虑到：有无目录，是否简洁，文章头图显示效果如何。综合考虑下面的主题后，选用了在 Lovelt 基础上制作的 DoIt。

  • LoveIt 该主题已经许久没有维护 见此 issue，因此我选用了 Dolt

  • Stack 和我的另一个博客有些像，主题优化做的不错，但风格比较清淡，部分功能的支持程度未知。主题作者似乎已经没那么多精力去写博客了，他的旧博客也不知为何删除了内容。

  • Eureka 看上去很棒，但是About和主页分不太清，头图显示效果并不好

  • Even 很简洁，但不适合带头图的博文

站点的目录名选定为 blog , Hugo 提供了一个 new 命令来创建一个新的网站

1
2

hugo new site blog 
cd blog

初始化你的项目目录为 git 仓库, 并且把 Dolt 主题仓库作为你的网站目录的子模块:

1
2
3

git init
git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt
git submodule update --init --recursive

修改主题的默认配置文件 config.toml

 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
41
42
43
44
45
46
47
48
49
50
51
52

baseURL = "https://blog.crazt.moe/"
# [en, zh-cn, fr, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"
# 网站语言, 仅在这里 CN 大写
languageCode = "zh-CN"
# 是否包括中日韩文字
hasCJKLanguage = true
# 网站标题
title = "Crazt Blog"

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

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

[menu]
  [[menu.main]]
    identifier = "posts"
    # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
    pre = ""
    # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
    post = ""
    name = "文章"
    url = "/posts/"
    # 当你将鼠标悬停在此菜单链接上时, 将显示的标题
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "标签"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "分类"
    url = "/categories/"
    title = ""
    weight = 3

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

1

hugo new posts/hello-world.md

然后修改内容 vim .\content\posts\hello-world.md

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

在本地启动网站，进行预览：

1

hugo serve

构建网站

1

hugo

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

设置 gitignore。由于使用 CF pages 时不需要本地创建的 public 文件夹，这里将其排除。参见 hugo/.gitignore at master · gohugoio/hugo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# Hugo default output directory
/public

### OS Files
# Windows
Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/

# OSX
.DS_Store

Create a new GitHub repository by visiting repo.newOpen external link. After your repository is set up, push your application to GitHub by running the following commands in your terminal:

1
2
3

$ git remote add origin https://github.com/yourgithubusername/githubrepo
$ git branch -M main
$ git push -u origin main

Deploy your site to Pages by logging into the Cloudflare dashboardOpen external link > Account Home > Pages and selecting Create a project. Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:

Configuration option Value
Production branch main
Build command hugo
Build directory public

After deploying your site, you will receive a unique subdomain for your project on *.pages.dev. Every time you commit new code to your Hugo site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to preview deployments on new pull requests, so you can preview how changes look to your site before deploying them to production.

由于 Cloudflare Pages 默认使用较旧的 Hugo版本进行构建，这会导致部分主题构建失败，因此需要在环境变量中设置为较新的版本才能正常使用。此处有详细解释：Known issues · Cloudflare Pages docs

Deploy a Hugo site · Cloudflare Pages docs

Dolt - 主题文档 - 基本概念

更新于 2021-12-21
阅读原始文档
返回 | 主页