Skip to main content

3 posts tagged with "front-end"

View All Tags

· 2 min read
李春蕾 Chunlei Li

请务必参考docusaurus的官方文档

https://www.docusaurus.cn/docs

详细讲解请参考这个视频

https://www.bilibili.com/video/BV1rW4y1i7zC?spm_id_from=333.999.0.0&vd_source=e15eb8f98a9dde1c9cc874314025b575

总的来说就三步：

  1. 下载脚手架
npx create-docusaurus myPage classic
提示

请先安装npm，以及docusaurus

  1. 更改/新增markdown

新增一个md就是新增一个页面。

  1. 部署

把改好的repo push到github上去，然后采用vercel自动导入github repo。当你push的时候，就自动部署。

使用vercel是比较方便快捷的，但是缺点是你必须能翻墙才能看到页面。

另一种方案是github pages。就是设置一个github repo的名为为<你的名字>.github.io，然后新建一个gh-pages分支。这个分支和你的master分支要分开。master分支存的是你写的源码，而gh-pages分支存的是build出来的代码。然后用

cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'

这个命令来部署，如果没有安装yarn就要先npm install yarn一下。

· 2 min read
李春蕾 Chunlei Li

前文说了如何部署，但是每次都要运行yarn deploy也太麻烦了。主要是如果你想在一台没有安装docusaurus的电脑上更新你的博客，那就没办法了。只能配环境然后yarn deploy。

但是好在有许多自动化部署的工具。其中GitHub Action是github自己在2018年推出的服务。你只需要在项目的根目录下增加.github/workflow/xxx.yml即可

如图所示

dir

每个文件都是单独的一个工作流。

工作流也很简单，就是类似于你在自己的电脑上运行安装等等命令。

假如你的workflow中间出问题了，github就会自动报错，然后给你发个邮件。如图

不成功的workflow是这样的

点开会看到

再点开，会看到具体哪里错了 我这里显然是版本号错误

修改之后可以看到正确的

经过不断的探索，我终于把所有的工作流报错解决了

在此分享一下我的deploy.yml文件

# .github/workflows/deploy.yml

name: GitHub Pages

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    name: Deploy to my Github Pages
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
          cache: yarn
          cache-dependency-path: './package-lock.json'

      - name: build website
        run: |
          yarn install --frozen-lockfile
          yarn build

      - name: Deploy to my Github Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
          user_name: github-actions[bot]
          user_email: 41898282+github-actions[bot]@users.noreply.github.com

· One min read
李春蕾 Chunlei Li

我们测试一下如何部署到github-pages

  1. 首先建立新的分支gh-pages。这个不要和main分支搞混，这个分支不用去管，deploy的时候会自动更新代码。
  1. 然后把docusaurus.config.js中的部分代码更改为
  organizationName: 'chunleili', // Usually your GitHub org/user name.
  projectName: 'chunleili.github.io', // Usually your repo name.
  deploymentBranch: 'gh-pages',
  trailingSlash: false,
  1. 最后运行部署

假如是windows

cmd /C 'set "GIT_USER=chunleili" && yarn deploy'

假如是linux

GIT_USER=chunleili yarn deploy