Skip to content

我是如何搭建博客的 原创

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

  • 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 commitBUILD 的时候才执行真正的编译部署。

036145aeb27a905a8d2c6cb387b2c861 MD5

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

Edgeone

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

b58fec40ae45d958e3cbf1c3f821681e MD5

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

44d4f8cf5ebea382893543f72be83e9e MD5

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

cac5b599182fa369289859ffd01f85bd MD5

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

b971b98b71bc445a8a37aa599f30ca51 MD5

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

5ab0183e90b109c99296172877839bf9 MD5

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

最后

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

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

最近更新