作为技术人,相信大家都会想有一个自己的专属博客,用于记录自己走过路的,趟过的坑,或是沉淀工作和学习心得!
首先讲下行业现状,目前主流搭建博客用到的方式:
dumi: 蚂蚁金服出品,一款为组件开发场景而生的文档工具VuePress:Vue 官方出品,支持第三方主题,可搭配 commento 实现博客评论Hexo: 一个快速、简洁且高效的博客框架,热度蛮高GitHub Pages: Github 官方提供的为项目提供的文档[Github issue]: 本是用于提交代码缺陷的,但目前发现有很多人用作写博客手写博客源码,搭建真正属于自己的博客,技术胖博客(https://jspang.com/)…本文主要讲下使用 Dumi 搭建一个属于自己博客
dumi官网: https://d.umijs.org/zh-CN
一、创建静态站点脚手架 $ npx @umijs/create-dumi-app# or$ yarn create @umijs/dumi-app安装依赖
yarn install启动文档
yarn start效果图
接下来可根据自己需要是否使用国际化,我就去掉了国际化支持,只考虑中文内容
查阅官方文档可以根据自己配置修改自己的博客配置
二、创建 github 仓库 1、创建 blog 仓库在刚创建的文档根目录运行如下命令,将工作目录下所有上传 github 远程仓库
git remote add origin https://github.com/hefeng6500/blog-test.gitgit branch -M maingit push -u origin main 2、创建 [username].github.io 仓库username 指的是你的 github 用户名
三、Github生成访问令牌github -> setting -> Developer settings -> Personal access tokens -> Generate new token
为保证后续发布顺利,可以将下面所有的权限全部勾选
四、配置 github Actions 流水线设置 blog 的 DEPLOY_KEY
打开当前仓库的 Actions
配置 yml 文件
# This workflow uses actions that are not certified by GitHub.# They are provided by a third-party and are governed by# separate terms of service, privacy policy, and support# documentation.# This workflow will install Deno and run tests across stable and nightly builds on Windows, Ubuntu and macOS.# For more information see: https://github.com/denolib/setup-denoname: release blog to hefeng6500.github.ioon: push: branches: [main] pull_request: branches: [main]jobs: build: runs-on: ${{ matrix.os }} # runs a test on Ubuntu, Windows and macOS strategy: matrix: node: [12] os: [ubuntu-latest] steps: - uses: actions/checkout@v1 - name: Use Node.js 15.x uses: actions/setup-node@v1 with: node-version: 15.x - name: yarn install, build run: | yarn yarn build - name: Deploy uses: JamesIves/github-pages-deploy-action@3.7.1 with: ACCESS_TOKEN: ${{ secrets.DEPLOY_KEY }} BRANCH: master FOLDER: dist REPOSITORY_NAME: hefeng6500/hefeng6500.github.io TARGET_FOLDER: blog env: CI: true on: push、pull request 会触发该 CIACCESS_TOKEN: ${{ secrets.DEPLOY_KEY }} 即为刚刚配置的 ACCESS_TOKENREPOSITORY_NAME:[username]/[username].github.ioFOLDER: 发布的包文件夹TARGET_FOLDER: 发布到哪个目录下 五、触发 CI后续只要 push 或者 pull request 代码到 main,都会触发 CI 推送代码到 [username].github.io 仓库
参考: https://www.codenong.com/j5ec65e7df265da771a1fc356/