Hugo on 404_@林达

DigitalPlat 免费域名配置教程：从领取到 Cloudflare 解析

Wed, 03 Jun 2026 12:00:00 +0800

这篇文章记录一次从零领取免费域名并接入 Cloudflare 的过程。示例域名使用 linsk27.dpdns.org，平台是 DigitalPlat FreeDomain，DNS 托管使用 Cloudflare。

免费域名适合学习、测试、个人项目展示和临时服务入口。真正重要的生产项目，还是建议使用自己购买并长期持有的独立域名，方便迁移和品牌沉淀。

准备工作

开始之前需要准备三样东西：

一个 DigitalPlat Domains 账号
一个 Cloudflare 账号
一个想注册的域名前缀，例如 linsk27

本文示例最终得到的完整域名是：

`1`	`linsk27.dpdns.org`

如果你想用自己的名字，可以把 linsk27 换成其他前缀。前缀尽量使用小写字母、数字和短横线，避免使用商标、敏感词或容易被误判滥用的词。

第一步：在 DigitalPlat 里检查域名

在注册页面里填写：

1
2

Domain: linsk27
Suffix: .dpdns.org

然后勾选服务条款，点击检查可用性。

如果页面提示可用，就可以进入下一步。.dpdns.org 通常适合免费测试使用；如果选择其他后缀，可能会遇到 slot、订阅或 key 的限制，以页面实际提示为准。

第二步：先去 Cloudflare 添加站点

DigitalPlat 在注册时会要求填写外部 nameserver，所以需要先在 Cloudflare 里添加这个域名。

进入 Cloudflare 控制台，点击 Add a site，输入完整域名：

`1`	`linsk27.dpdns.org`

套餐选择 Free plan 即可。添加完成后，Cloudflare 会分配两个 nameserver，格式一般类似：

1
2

gerardo.ns.cloudflare.com
sue.ns.cloudflare.com

注意：这里的 nameserver 每个账号或域名可能不同，实际使用时要复制 Cloudflare 页面上给你的两个地址。

第三步：回 DigitalPlat 填写 nameserver

回到 DigitalPlat 的注册弹窗，把 Cloudflare 给出的两个 nameserver 填进去：

1
2

NS1: gerardo.ns.cloudflare.com
NS2: sue.ns.cloudflare.com

其他 NS 输入框可以留空。不要填写 ns1.digitalplat.net、ns2.digitalplat.net 或类似 DigitalPlat 自己的 nameserver，因为当前注册流程要求使用外部 nameserver。

Delegation mode 保持：

`1`	`External nameservers only`

然后选择 Use Free Slot，点击 Register。

注册成功后，DigitalPlat 的域名列表里应该能看到这个域名。进入管理页后，可以看到注册日期、到期时间和当前 nameserver。

第四步：等待 Cloudflare 检测生效

回到 Cloudflare 的域名 Overview 页面，会看到类似提示：

`1`	`Waiting for your registrar to propagate your new nameservers`

这是正常状态。点击 Check nameservers now 可以手动触发检查。

通常几分钟到几小时内会生效，最长可能需要 24 小时。只要 DigitalPlat 里已经保存了 Cloudflare 的两个 nameserver，就耐心等待即可。

也可以用命令检查 NS 是否已经切换：

`1`	`nslookup -type=ns linsk27.dpdns.org`

如果结果里出现 Cloudflare 的 nameserver，说明 NS 委派已经生效。

第五步：在 Cloudflare 添加 DNS 解析

Cloudflare 激活后，进入左侧 DNS 页面，添加解析记录。

如果你有服务器 IP，可以添加 A 记录：

Type: A
Name: @
IPv4 address: 你的服务器 IP
Proxy status: Proxied 或 DNS only

如果你想让 www 也能访问，可以再添加一条 CNAME：

1
2
3

Type: CNAME
Name: www
Target: linsk27.dpdns.org

如果你要绑定 GitHub Pages，可以使用 CNAME 指向：

1
2
3

Type: CNAME
Name: @
Target: linsk27.github.io

GitHub Pages 侧也需要在仓库设置里绑定自定义域名，否则只做 DNS 解析还不够。

第六步：配置 SSL/TLS

Cloudflare 激活后，进入 SSL/TLS 页面。

如果你只是用 GitHub Pages、Vercel、Netlify 这类静态托管，通常保持 Cloudflare 默认设置即可。

如果你自己有服务器，建议：

有 HTTPS 证书：使用 Full 或 Full (strict)
没有 HTTPS 证书：先配置证书，不建议长期使用 Flexible

Flexible 看似方便，但它只加密用户到 Cloudflare 的连接，Cloudflare 到源站之间仍可能是 HTTP，不适合长期使用。

常见问题

1. DigitalPlat 注册时报 403

先检查 nameserver 是否只填了 Cloudflare 给你的两个地址。不要把 ns3.digitalplat.net 或其他 DigitalPlat hosted DNS 填进去。

推荐配置：

1
2
3

NS1: Cloudflare 给你的第一个 nameserver
NS2: Cloudflare 给你的第二个 nameserver
NS3-NS8: 留空

如果仍然 403，可以刷新页面、重新登录后再提交一次。

2. Cloudflare 一直显示等待 nameserver

确认 DigitalPlat 的域名管理页里已经保存了 Cloudflare 的 nameserver。

如果保存没问题，那就是 DNS 委派还在传播。可以过几分钟再点 Check nameservers now，或者等待更久。

3. 域名注册成功但打不开网站

注册成功只代表域名属于你的账号，还需要在 Cloudflare 里添加 DNS 记录。

至少需要一条 A 记录或 CNAME 记录，否则浏览器不知道这个域名要指向哪里。

4. 是否需要开启 WHOIS Privacy

建议开启。免费域名注册时通常会填写姓名、邮箱、地址、电话等 WHOIS 信息，开启隐私保护可以减少个人信息暴露。

在 DigitalPlat 的域名管理页里找到 WHOIS Privacy，按页面提示启用即可。

总结

整个流程可以理解成三步：

在 Cloudflare 添加完整域名，拿到两个 nameserver
在 DigitalPlat 注册免费域名，并把 Cloudflare nameserver 填进去
等 Cloudflare 激活后，添加 A 记录或 CNAME 记录

完成后，linsk27.dpdns.org 就可以作为个人项目、测试服务或博客入口使用了。

【Hugo】主题美化教程

Sat, 19 Oct 2024 00:00:00 +0000

修改站点背景颜色

在"assets/scss/variables.scss"中找到

`1`	`--body-background: #f6f6f6;`

或在"assets/scss/customs.scss"中找到

`1`	`--body-background: #f6f6f6;`

参考自：Hugo | Hugo-stack-theme 主题魔改版

友链的添加

在"content/page/links"的 index.md 中有详细解释，图标可通过图床或者本地渲染，模仿格式即可，或可直接把文件内容换为

---
title: 友情链接
links:
  - title: 爱吃鱼的小林 - linsk
    description: 一个大三程序员,博客讲述了hugo中许多美化stack的主题的教程、前端领域知识以及其他
    website: https://linsk27.github.io/
    image: fish.png
menu:
  main:
    weight: -50
    params:
      icon: link

comments: false
---

显示文章更新时间

手动添加更新时间

hugo 默认位置为 archetypes/default.md 或者主题下目录下 xx 主题/archetypes/posts.md，加lastmod字段，在创建文章模板里添加以下一行，创建时会以主题目录下的模板来创建。

`1`	`lastmod: { { .Date } }`

添加lastmod，有个好处就是可自由修改这个字段的时间。

在 “config.toml/yaml/json/” 中写明调整这里顺序即可

`1`	`frontmatter: lastmod = [":git", "lastmod", ":fileModTime", ":defalut"]`

自动添加更新时间

记得在"config.toml/yaml/json"开启 gitinfo

1
2

#获取git信息
enableGitInfo = true #设为true

这样就提交代码时，就会去读取 git 时间，来更新文章的更新时间!

但是后面我发现了一个问题：每次重新 git push 之后所有文件最近更新时间 mtime 都变成推送的时刻，这是 git 的一个部署配置问题,因此我搜索了许多博客，终于在hugo github action|vecel 部署后文章更新时间异常修复这篇文章找到了解决方法，总的来说：

在 “.github/workflows/xx.yml”,新增以下配置，主要是quotePath，默认情况下，文件名包含中文时，git 会使用引号吧文件名括起来，这会导致 action 中无法读取:GitInfo 变量，所以要设置Disable quotePath

- name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

使用checkout的话 fetch-depth 需要设为 0，depth默认是为 1，默认只拉取分支最近一次 commit，可能会导致一些文章的 GitInfo 变量无法获取，设为 0 代表拉去所有分支所有提交。

1
2
3

uses: actions/checkout@v4
with:
  fetch-depth: 0 #设为0

以下是我的最终的 yml 配置文件,大家可以参考

name: deploy

# 代码提交到main分支时触发github action
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai # 添加正确的时区
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "latest"
          extended: true

      - name: Build Web
        run: hugo -D

      - name: Deploy Web
        uses: peaceiris/actions-gh-pages@v4
        with:
          PERSONAL_TOKEN: ${{ secrets.TOKEN }}
          EXTERNAL_REPOSITORY: linsk27/linsk27.github.io
          PUBLISH_BRANCH: main
          PUBLISH_DIR: ./public
          commit_message: auto deploy

更新时间显示在卡片

stack 主题的文章更新时间在文章底部
若想在文章开头就显示更新时间，修改 “layouts/partials/article/components/detail.html”，在指定位置引入以下代码

<div class="article-details">
  ...
  <footer class="article-time">
    ...
    <!-- 更新时间 -->
    {{- if ne .Lastmod .Date -}}
    <div class="article-lastmod">
      {{ partial "helper/icon" "clock" }}
      <time>
        {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02,
        2006 15:04 MST" ) }}
      </time>
    </div>
    {{- end -}} ....
  </footer>
  ...
</div>

这样就会文章开头显示修改时间

显示文章字数统计

在"config.toml/yaml/json"的.params.article中，添加

`1`	`wordCount: true #打开字数统计`

注意的是默认 WordCount 是不统计中文字数的，你需要在"config.toml/yaml/json"中添加

`1`	`hasCJKLanguage: true`

在"layouts/partials/article/components/details.html"中的 <footer class="article-time">内，打开本地 hugo 静态调试，按照位置添加

1
2

<i class="fa fa-regular fa-message" style="color: #ff8e2d;"></i>
本文有 {{ .WordCount }} 个字

效果如图

修改分类标签的颜色

在"content/categories"创建与分类同名的文件夹，并且在文件夹中创建"_index.md"文件并添加下面的内容,文件内会有一个 Test 的例子，可以模仿 Test 文件夹里面的内容

----
title: 这里写分类名称
description: 分类简介，不需要可以删了
image: "categories.png" // 分类的题图
style:
    background: "#80aba9" //分类标签底色
    color: "#fff"
----

背景脚本放置位置

dev\themes\hugo-theme-stack\layouts\partials\footer