手把手部署hugo-teek博客到公网

部署hugo-teek博客到公网

使用eo边缘函数来部署自己的hugo-teek博客到公网。（0服务器方案）😜

写在前面

告警

Hugo-teek 目前正处于xgq作者开发配置中心阶段，可能会频繁地进行更新。且一键web更新还未开发完成，因此，强烈建议新进群的小伙伴不要去修改博客一些自定义的信息，你需要做的就是，把hugo-teek博客部署起来，然后把自己的md文档放到hugo-teek-site\content\docs\40.专题路径。然后发布到自己博客就好。

等后续一键web更新完全开发完成后，我们就可以在配置中心配置下自己的用户信息了，后续有新版出现时，我们一键web更新就可以升级到最新版。

目前的hugo-teek做个人博客/文档库完全是没问题的，但是想更加丝滑体验这款强大的博客，大家再耐心等待下，等我们伟大的xgq群主王者归来。😜

前提条件

有一台windows电脑（本方案是，win本地维护md文档，然后博客托管在腾讯云eo边缘函数上。）
电脑上安装好了git
注册CNb账号（存储hugo-teek仓库代码及md核心文档）
注册腾讯eo账号（托管博客到腾讯云eo边缘函数）
拥有自己的域名
有手就好😜

项目环境

bash

#自己私有库（存放hugo-teek源码及md核心文档）
https://cnb.cool/onedayxyy/hugo-teek-private

#自己公开库（存放hugo-teek博客构建好的公开dist产物）
https://cnb.cool/onedayxyy/hugo-teek-public-dist

##无需云服务器

1、拉取代码

1.拉取项目

我们来到自己的d盘，然后拉取项目：

bash

cd /d/
git clone https://cnb.cool/yuwen-gueen/hugo-teeker-theme.git
cd hugo-teeker-theme

我们再配置下如下.gitignore文件内容：

这里我们再编辑下.gitignore文件下：（后期项目稳定了就不需要再做这里的配置，当前项目处于频繁迭代期，作者本地会有一些测试文件，因此这里做了一定的配置。小伙伴一定要按我这里做下配置，否则后期的docs下目录可能会被git忽略。）

编辑.gitignore文件：

（1）注释第3行内容

（2）59~67行和docs相关的

🟢 双击运行

进入到bin\windows目录，双击运行start.bat脚本：

🟢 访问测试

在浏览器输入http://localhost:8080/ 验证效果：

🟢 我们再将本地项目推送到自己的cnb仓库

具体步骤：

（1）创建私有库（存放hugo-teek源码及md核心文档）

来到自己的CNb主页，创建一个私有仓库，名称叫做hugo-teek-private；

把上面拉取的代码，直接推送到这个私有库：

再推送之前，先把我们本地的项目名称重命名为hugo-teek-private,然后推送；

bash

cd /d/hugo-teek-private
rm -rf .git ##记得先删除之前的.git

git init .
git remote add origin https://cnb.cool/onedayxyy/hugo-teek-private
git add -A
git commit -m"first commit"
git push --set-upstream origin master
# git push

（2）创建公开库（存放hugo-teek博客构建好的公开dist产物）

来到自己的CNb主页，创建一个公开，名称叫做hugo-teek-public-dist即可，其余无需操作。

（3）我们还需要编辑下项目下.cnb.yml文件内容：（这里将用户cnb一键流水线发布博客使用。）

以下文件我们只需要更改如下一处位置即可：（其余无需配置），将这里修改为自己的公开库地址。

yaml

master:
  push:
    - runner:
        cpus: 64

      # imports:
      #   - https://cnb.cool/onedayxyy/secret/-/blob/main/envs.yml            

      docker:
        image: docker.cnb.cool/yuwen-gueen/docker-images-chrom/hugo-teek-blog:latest

      env:
        # 公开产物仓库 (修改位置一)
        TARGET_REPO: "https://cnb.cool/onedayxyy/hugo-teek-public-dist.git"
        # 产物分支
        DIST_BRANCH: dist

      stages:
        # ------------------------------
        # 1️⃣ 记录开始时间
        # ------------------------------
        - name: set env
          script: echo -n $(date +%s)
          exports:
            info: CUSTOM_ENV_START_TIME

        # ------------------------------
        # 4️⃣ 构建 Hugo
        # ------------------------------
        - name: build
          script: |
            make build-docker

        # ------------------------------
        # 5️⃣ 部署到 public/dist
        # ------------------------------
        - name: deploy
          script: |
            REPO_URL=${TARGET_REPO}
            DEPLOY_DIR="/workspace/deploy"
            mkdir -p ${DEPLOY_DIR}
            cd ${DEPLOY_DIR}
            git init -b ${DIST_BRANCH} >/dev/null 2>&1
            git remote add origin ${REPO_URL}
            cp -al ../hugo-teek-site/public/. . >/dev/null 2>&1
            git add -A >/dev/null 2>&1
            git diff --cached --quiet || git commit -m "d:$(date +%s)" --no-gpg-sign >/dev/null 2>&1
            git push --force --quiet origin ${DIST_BRANCH}

        # ------------------------------
        # 6️⃣ 计算耗时
        # ------------------------------
        - name: ⏱️ 计算耗时
          script: |
            end_time=$(date +%s)
            duration=$((end_time - $CUSTOM_ENV_START_TIME))
            minutes=$((duration / 60))
            seconds=$((duration % 60))
            echo -n "${minutes}分${seconds}秒"
          exports:
            info: CUSTOM_ENV_BUILD_TIME

        # # ------------------------------
        # # 7️⃣ 钉钉通知
        # # ------------------------------
        # - name: 钉钉通知
        #   image: docker.cnb.cool/yuwen-gueen/docker-images-chrom/tencentcom-dingtalk-bot-msg:latest_amd64
        #   settings:
        #     content: "「Hugo-Teek Blog」发布完成，耗时: ${CUSTOM_ENV_BUILD_TIME}"
        #     c_type: "text"
        #     secret: $SECRET
        #     webhook: $WEBHOOK
        #     isAtAll: false
        #     debug: false

include:
  - .cnb/vscode.yml

2.更新文档

以上，我们的hugo-teek博客已经下载并部署好了，那么该如何新增自己的md文档呢?

把自己的md文档放到hugo-teek-site\content\docs\40.专题路径下就好（无论是目录或者md文档都行），就这么简单。

我的截图如下：

3.配置信息

待xgq作者把hugo-teek的配置中心配置完成后，我们就可以本地运行图形化来配置博客选项了，非常简单。我们耐心等待吧。😉

以上，我们的hugo-teek博客是可以在本地快乐地运行了，但是如何把这个博客部署到公网，别人也可以访问呢？请看下文。

本次我们使用eo边缘函数来部署自己的hugo-teek博客到公网。（0服务器方案）😜

2、发布博客

1.边缘函数

来到自己主域名下，再到底部的边缘函数，新建自己的边缘函数：（这里默认选择第一个就好）

然后把下面的代码修改成自己代码后，拷贝进去：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const BASE = 'https://cnb.cool/onedayxyy/hugo-teek-public-dist/-/git/raw/dist'

async function handleRequest(request) {
  const url = new URL(request.url)
  let uri = url.pathname

  // 去掉开头的 /
  if (uri.startsWith('/')) uri = uri.slice(1)

  if (!uri || uri === '') {
    uri = 'index.html'
  }

  if (uri.endsWith('/')) {
    uri = uri + 'index.html'
  }

  let target = `${BASE}/${uri}`

  let resp = await fetch(target, {
    headers: {
      'User-Agent': 'curl/8.0.0',
      'Accept': '*/*',
      'Accept-Encoding': 'identity'
    }
  })

  // fallback：目录尝试 index.html
  if (!resp.ok) {
    if (!isFile(uri)) {
      target = `${BASE}/${uri}/index.html`
      resp = await fetch(target, {
        headers: {
          'User-Agent': 'curl/8.0.0',
          'Accept': '*/*',
          'Accept-Encoding': 'identity'
        }
      })
    }
  }

  if (!resp.ok || !resp.body) {
    return new Response('Page Not Found', {
      status: 404,
      headers: {
        'Content-Type': 'text/html; charset=utf-8'
      }
    })
  }

  return new Response(resp.body, {
    status: resp.status,
    headers: {
      'Content-Type': getContentType(uri) || resp.headers.get('content-type'),
      'Cache-Control': 'public, max-age=3600'
    }
  })
}

function isFile(path) {
  return /\.[^\/]+$/.test(path)
}

function getContentType(uri) {
  const map = {
    html: 'text/html',
    css: 'text/css',
    js: 'application/javascript',
    json: 'application/json',
    png: 'image/png',
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    svg: 'image/svg+xml',
    webp: 'image/webp',
    avif: 'image/avif'
  }
  const ext = uri.split('.').pop()
  return map[ext]
}