乔克视界

主题

2025-08-012025-07-31博客随笔
1236
5.3m
0

我是如何搭建博客的 原创 ​

熟悉我的朋友或者关注《运维开发故事》公众号的朋友都知道我喜欢写作，时常在公众号上发布分章，除此之外呢，我对博客也挺感兴趣。

  • 2018年，第一次搭建博客，那时候用的是 word press，域名是 coolops.cn。
  • 2020年，开始着重使用语雀知识库记录，地址是https://yuque.com/coolops，好久没维护了。
  • 2022年，注册jokerbai.com域名，博客开始使用hugo。
  • 2023年，因为太懒，博客改用halo带后台管理。
  • 2025年，博客迁移到vitpress，感兴趣的可以到https://jokerbai.com进行浏览。

为什么使用 vitpress 呢，因为轻量，整体风格也比较简单，下面简单介绍一下搭建过程，也解释一下为啥说博客人狂喜呢？

整体搭建涉及以下工具：

  • CNB：Cloud Native Build
  • EdgeOne
  • Obsidian
  • 一台服务（也可以用github pages等）
  • OSS

Obsidian ​

Obsidian 是一个写文档、写博客很好的工具，没有使用语雀之后，我就经常用它来写博客。

Obsidian 有很多的插件，不过对于我写博客来说就两个插件比较重要：

  • Image Upload Toolkit
  • Local Image Plus

Local Image Plus 是用于下载网络图片的，可以将图片下载到本地文件夹，这个插件没有太多需要配置的地方。

Image Upload Toolkit 是用于上传图片到 OSS 图库的。主要配置远端存储，比如我这里配置的是 腾讯COS。

aaf7f779c3f56a7307ea10ee3d560b89 MD5

CNB ​

CNB 是腾讯出品的一个新产品，它是一个基于云原生构建的一个平台，它将替代腾讯之前的 CODING 产品。你只需要在你代码仓库下配置 .cnb.yml ，然后推送后就会自动构建，比如配置：

yaml
main:
  push:
    - docker:
        image: node:20
      stages:
        - node -v
        - npm install
        - npm test

4b47a8f504fda62edc9d6eab49892e03 MD5

比如我的博客的配置如下：

yaml
main:
  push:
    - runner:
        cpus: 16
      services:
        - docker
        - git-clone-yyds
      docker:
        image: ccr.ccs.tencentyun.com/jokerbai/node:22.12.0-pnpm-git-alpine
        volumes:
          - /data/.cache:copy-on-write #声明式的构建缓存
      imports: https://cnb.cool/jokerbaix/jokberi-blog/-/blob/main/env.yaml
      stages:
        - name: 🖨️ 打印环境
          script: |
            node -v && npm -v && yarn -v && pnpm -v && echo $DOCKER_TAG && echo "版本号: $VERSION"
        - name: 📦️ 安装依赖 
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]          
          script: |
            pnpm install
        
        - name: DOCKER LOGIN
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          script: |
            echo $DOCKER_PASSWORD | docker login -u $DOCKER_USERNAME --password-stdin ccr.ccs.tencentyun.com

        - name: 获取DOCKER IMAGE
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          script: |
            echo -n "ccr.ccs.tencentyun.com/jokerbai/joker-blog:${VERSION}"
          exports:
            info: IMAGE_TAG

        - name: ⚗️ 编译项目
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]        
          script: |
            pnpm docs:build   # VitePress 专用命令
        - name: BUILD DOCKER IMAGE
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          script: |
            docker build -t ${IMAGE_TAG} .
        
        - name: PUSH DOCKER IMAGE
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          script: |
            docker push ${IMAGE_TAG}

        - name: 更新博客
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          image: tencentcom/ssh
          imports: https://cnb.cool/jokerbaix/jokberi-blog/-/blob/main/env.yaml
          settings:
            host: ${ECS_IP}
            username: ${SSH_USER}
            password: ${SSH_PASS}
            # key: ${SSH_KEY}
            port: 22
            script: |
              cd /opt/1panel/docker/compose/joker-blog/
              echo "当前目录内容:"
              ls -l
              
              echo "更新 docker-compose.yaml 中的镜像版本为: ${IMAGE_TAG}"
              sudo sed -i "s|image: ccr.ccs.tencentyun.com/jokerbai/joker-blog:.*|image: ${IMAGE_TAG}|g" docker-compose.yml
              
              echo "检查更新后的配置:"
              cat docker-compose.yml
              
              echo "重启服务"
              sudo docker-compose down
              sudo docker-compose up -d
              
              echo "检查服务状态:"
              sudo docker-compose ps


        - name: 🔔 发布通知
          image: tencentcom/wecom-message
          if: |
            [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ]
          settings:
            robot: ${WECOM_BOT}
            msgType: markdown
            content: |
              > **🎉 乔克视界 又一次发布啦！**
              > **版本号:** ${VERSION}
              > **构建时间:** $CUSTOM_ENV_DATE_INFO
              > **提交信息:** $CNB_COMMIT_MESSAGE_TITLE
              > **仓库地址:** [$CNB_REPO_URL_HTTPS]($CNB_REPO_URL_HTTPS)
              > **镜像地址:** ${IMAGE_TAG}

在这整个流水线中都加了一个 [ "$CNB_COMMIT_MESSAGE_TITLE" = "BUILD" ] 判断，只有当 git commit 是 BUILD 的时候才执行真正的编译部署。

036145aeb27a905a8d2c6cb387b2c861 MD5

现在就可以把博客写完，git push 到仓库就OK了，省心，省力。

Edgeone ​

EdgeOne 才是让搭建博客人狂喜的东西，就算个人版都完全够用。

b58fec40ae45d958e3cbf1c3f821681e MD5

现在应该还可以参加内测，申请内测资格。

44d4f8cf5ebea382893543f72be83e9e MD5

然后可以直接在这里配置域名。

cac5b599182fa369289859ffd01f85bd MD5

配置 SSL 证书的时候可以申请免费证书，自动续期。

b971b98b71bc445a8a37aa599f30ca51 MD5

另外，该产品还可以直接链接 Page，方便用户快速接入，也会给网站加速，比如之前是用 Github Page，可以让你网站速度快不少。

5ab0183e90b109c99296172877839bf9 MD5

这是不是搭建博客人的利器？

最后 ​

晚上下班后，想着写点东西，就絮絮叨叨写点平时是如何写博客的。

自从进入了 运维 这一行，每天都在互联网上吸取大量的知识，好的，坏的，难的，易的。如果平时不把这些知识整理成自己的体系，很难记住太多的东西，毕竟人的脑力是有限的。所以之前不了是知识库、博客还是公众号都是知识积累，不论何时对自己的行业发展都有一定的用。

最近更新