我写 Markdown → 推到 GitHub → Actions 自动编译 → 服务器拉取 → Cloudflare 加速

本地写文章 (Markdown)
        ↓ git push
GitHub main 分支
        ↓ 触发 Actions
GitHub Actions 编译
        ↓ 生成静态文件
gh-pages 分支
        ↓ 服务器 git pull
Nginx 托管静态文件
        ↓ 
Cloudflare CDN 缓存加速
        ↓
用户访问

name: Build Hugo Site

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: 装 Hugo
        run: |
          wget -O hugo.deb https://github.com/gohugoio/hugo/releases/...
          sudo dpkg -i hugo.deb

      - name: 拉代码
        uses: actions/checkout@v4
        with:
          submodules: recursive  # 主题是 submodule

      - name: 编译
        run: hugo --gc --minify

      - name: 推到 gh-pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          publish_dir: ./public
          publish_branch: gh-pages

      - name: 顺手清一下 CDN 缓存
        run: curl -X POST "https://api.cloudflare.com/..." ...

server {
    listen 80;
    server_name blog.kkkk24juastin.asia;
    root /var/www/blog;
    
    # 压缩
    gzip on;
    gzip_types text/css application/javascript text/html;
    
    # 静态资源缓存久一点
    location ~* \.(css|js|png|jpg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

#!/bin/bash
cd /var/www/blog
git fetch origin gh-pages
git reset --hard origin/gh-pages

curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/

# 输出：TTFB: 2.280466s

curl -sI https://blog.kkkk24juastin.asia/ | grep -i cache

# 输出：
# cf-cache-status: DYNAMIC
# cache-control: max-age=3600

匹配条件: 主机名 = blog.kkkk24juastin.asia
缓存设置: 
  - 符合缓存条件: 是
  - 边缘 TTL: 1 个月
  - 浏览器 TTL: 1 天

# 第一次，预热缓存
curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/
# TTFB: 1.1s（回源了）

# 第二次，缓存命中
curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/
# TTFB: 0.045s

# 确认缓存状态
curl -sI https://blog.kkkk24juastin.asia/ | grep cf-cache-status
# cf-cache-status: HIT

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

- name: 清缓存
  run: |
    curl -X POST "https://api.cloudflare.com/client/v4/zones/$CF_ZONE_ID/purge_cache" \
      -H "Authorization: Bearer $CF_API_TOKEN" \
      --data '{"purge_everything":true}'

[minify]
  disableXML = true
  minifyOutput = true

  [minify.tdewolff]
    [minify.tdewolff.css]
      keepCSS2 = false
      precision = 0
    
    [minify.tdewolff.html]
      keepDocumentTags = true
      keepEndTags = true
      keepQuotes = false
      keepWhitespace = false
    
    [minify.tdewolff.js]
      keepVarNames = false
      precision = 0
    
    [minify.tdewolff.json]
      keepNumbers = false
      precision = 0
    
    [minify.tdewolff.svg]
      keepComments = false
      precision = 0

[build]
  writeStats = true

[caches]
  [caches.assets]
    dir = ":resourceDir/_gen"
    maxAge = "720h"  # 30 天
  
  [caches.getcsv]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.getjson]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.getresource]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.images]
    dir = ":resourceDir/_gen"
    maxAge = "720h"

[imaging]
  quality = 80
  resampleFilter = "Lanczos"
  hint = "photo"
  anchor = "Smart"
  bgColor = "#ffffff"
  
  [imaging.exif]
    disableDate = false
    disableLatLong = true  # 保护隐私

<!-- 放在 layouts/partials/extend_head.html -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

document.addEventListener('DOMContentLoaded', function() {
  function addLoadedClass(img) {
    if (img.complete) {
      img.classList.add('loaded');
    } else {
      img.addEventListener('load', function() {
        img.classList.add('loaded');
      });
    }
  }
  
  document.querySelectorAll('.post-content img').forEach(function(img) {
    if (!img.hasAttribute('loading')) {
      img.setAttribute('loading', 'lazy');
      img.setAttribute('decoding', 'async');
    }
    addLoadedClass(img);
  });
});

/* assets/css/extended/custom.css */

.post-content img,
.entry-cover img {
  background-color: var(--code-bg);
  transition: opacity 0.3s ease-in-out;
}

.post-content img[loading="lazy"],
.entry-cover img[loading="lazy"] {
  opacity: 0;
}

.post-content img.loaded,
.entry-cover img.loaded {
  opacity: 1;
}

.post-content img {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

<script src="https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0/dist/autoload.js"></script>

<%# 看板娘组件 %>
<% if (theme.live2d && theme.live2d.enable) { %>
  <%
    // 读取配置，给个默认值兜底
    const cdnPath = (theme.live2d.cdn && theme.live2d.cdn.url) 
      ? theme.live2d.cdn.url 
      : 'https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0/dist/';
    const modelId = (theme.live2d.model && theme.live2d.model.id !== undefined) 
      ? theme.live2d.model.id 
      : 0;
    const modelCdnPath = (theme.live2d.model && theme.live2d.model.cdnPath) 
      ? theme.live2d.model.cdnPath 
      : 'https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/';
    const toolItems = (theme.live2d.tools && theme.live2d.tools.items) 
      ? theme.live2d.tools.items 
      : ['hitokoto', 'asteroids', 'switch-model', 'switch-texture', 'photo', 'info', 'quit'];
    const drag = theme.live2d.drag !== undefined ? theme.live2d.drag : false;
    const logLevel = theme.live2d.logLevel || 'warn';
  %>

  <script>
    const live2d_path = '<%= cdnPath %>';
    
    // 动态加载资源
    function loadExternalResource(url, type) {
      return new Promise((resolve, reject) => {
        let tag;
        if (type === 'css') {
          tag = document.createElement('link');
          tag.rel = 'stylesheet';
          tag.href = url;
        } else if (type === 'js') {
          tag = document.createElement('script');
          tag.type = 'module';
          tag.src = url;
        }
        if (tag) {
          tag.onload = () => resolve(url);
          tag.onerror = () => reject(url);
          document.head.appendChild(tag);
        }
      });
    }
    
    (async () => {
      // 手机上就别加载了，太占地方
      if (screen.width < 768) return;
      
      // 处理图片跨域（这个坑踩了好久）
      const OriginalImage = window.Image;
      window.Image = function(...args) {
        const img = new OriginalImage(...args);
        img.crossOrigin = "anonymous";
        return img;
      };
      window.Image.prototype = OriginalImage.prototype;
      
      // 加载资源
      await Promise.all([
        loadExternalResource(live2d_path + 'waifu.css', 'css'),
        loadExternalResource(live2d_path + 'waifu-tips.js', 'js')
      ]);
      
      // 初始化
      initWidget({
        waifuPath: live2d_path + 'waifu-tips.json',
        cdnPath: '<%= modelCdnPath %>',
        cubism2Path: live2d_path + 'live2d.min.js',
        cubism5Path: 'https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js',
        modelId: <%= modelId %>,
        tools: <%- JSON.stringify(toolItems) %>,
        drag: <%= drag %>,
        logLevel: '<%= logLevel %>'
      });
    })();
  </script>
<% } %>

<%- partial('_partial/live2d') %>

# Live2D 看板娘
live2d:
  enable: true
  model:
    id: 0                    # 默认模型
    cdnPath: https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/
  tools:
    items:
      - hitokoto             # 一言
      - asteroids            # 小游戏
      - switch-model         # 切换模型
      - switch-texture       # 切换皮肤
      - photo                # 拍照
      - info                 # 关于
      - quit                 # 关闭
  drag: false
  logLevel: warn
  cdn:
    url: https://fastly.jsdelivr.net/npm/live2d-widgets@1.0.0/dist/

const OriginalImage = window.Image;
window.Image = function(...args) {
  const img = new OriginalImage(...args);
  img.crossOrigin = "anonymous";
  return img;
};

if (screen.width < 768) return;