2025-05-14

博客架构

本博客采用无服务器方式部署

博客框架：hugo

博客主题：clannad （基于hugo-theme-reimu修改，原主题是幻想乡灵梦）

代码托管：gitlab

网站部署：vercel（执行编译部署等）

博客管理（cms）：decap（一个优秀的gitbasedCMS 开源项目，可以管理发布文章，体验堪比动态wordpress）

关于主题

喜欢团子大家族的可以使用本站主题，主题长期更新！

我很喜欢clannad这部作品，想要把他作为一种博客样式来使用，但是因为前端技术属实差强人意，在hugo官网看到了优秀的reimu主题，大佬写的非常优秀。

其原主题也是相当有年代感。加上二次元属性浓烈，功能相对完善，代码架构整洁，于是决定在此项目上进行二次开发clannad主题，有大佬喜欢clannad的可以提出一些意见。

目前和原主题差别不是很大，有时间就会慢慢修改，最终与原主题大相径庭

搭建

安装hugo

预构建二进制文件方式安装：

预构建的二进制文件可用于各种操作系统和体系结构。访问最新版本页面，然后向下滚动到资产部分。

下载所需版本、操作系统和体系结构的压缩包（这方面不清楚可以看我关于此文章）
解压（推荐7z）
将可执行文件移动到所需目录
将此目录添加到PATH环境变量（教程）
验证您是否具有文件的执行权限

初始化博客并安装主题

方式 1：Hugo Module（推荐）

适用于熟悉 Go 生态的用户，支持版本管理和自动更新。

hugo new site quickstart
cd quickstart
hugo mod init github.com/<your-github-username>/quickstart  # 请替换 <your-github-username>
echo 'theme = ["github.com/afsry/hugo-theme-clannad"]' >> hugo.toml
hugo server

方式 2：Git Submodule

适用于希望手动管理主题版本的用户。

hugo new site quickstart
cd quickstart
git init
git submodule add git@github.com:afsry/hugo-theme-clannad.git themes/clannad
echo 'theme = "clannad"' >> hugo.toml
hugo server

把代码推送到gitlab仓库

注册一个gitlab账号并创建一个仓库，添加ssh

git add .
git commit -m "first commit"
git push

部署到vercel

本地添加vercel.json文件,并推送到gitlab仓库。

{
    "build": {
      "env": {
        "HUGO_VERSION": "0.145.0"
      }
    }
    
}

然后选择hugo就可以自动部署了

添加decapCMS管理

在public文件夹下创建admin文件夹，并创建如下两个文件 /public/admin index.html config.yml

index.html文件内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Decap CMS -->
    <script src="https://cdn.jsdelivr.net/npm/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  </body>
</html>

config文件内容如下: appid获取方式为打开setting 然后点击application，然后新建一个就可以，唯一需要注意的是填两个地方，一个是 Redirect URI：填你的博客的地址，比如我的clannad.site/admin/

第二是取消勾选：Confidential

第三是勾选api

生成后的appid就可以填写在这里

backend:
  name: gitlab
  repo: afsry/clannad # 写你的博客所在仓库
  branch: main
  auth_type: pkce # Required for pkce
  app_id:  # gitlab 设置里application里面创建的id

media_folder: static/img
public_folder: /img
local_backend: true
locale: 'zh-cn'
site_url: #你的网站链接
display_url: #你的网站链接
logo_url: #写你的logo链接
search: false


collections:
  - name: "blog"
    label: "Blog"
    folder: "content/post"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "标题", name: "title", widget: "string" }
      - { label: "描述", name: "description", widget: "string" }
      - { label: "关键字", name: "keywords", widget: "string" }

      - { label: "发布日期", name: "date", widget: "datetime" }
      - { label: "更新日期", name: "lastmod", widget: "datetime" }

      - { label: 'math', name: 'math', widget: 'boolean' }
      - { label: 'mermaid', name: 'mermaid', widget: 'boolean' }

      - { label: '标签', name: 'tage', widget: 'string', tagname: 'h1' }


    
      - { label: "内容", name: "body", widget: "markdown" }

然后就运行成功了