vuepress搭建的博客结合github里的Action自动发布到github上

一、vuepress搭建本地博客

  1. 创建并进入一个新目录
    mkdir vuepress-starter && cd vuepress-starter
    
  2. 使用你喜欢的包管理器进行初始化
    yarn init # npm init
    
  3. 将 VuePress 安装为本地依赖我们已经不再推荐全局安装 VuePress
    yarn add -D vuepress # npm install -D vuepress
    

    注意

    如果你的现有项目依赖了 webpack 3.x,我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。

  4. 创建你的第一篇文档
    mkdir docs && echo '# Hello VuePress' > docs/README.md
    
  5. 在 package.json 中添加一些 scripts(opens new window)这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。
    {
      "scripts": {
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
      }
    }
    
  6. 在本地启动服务器
    yarn docs:dev # npm run docs:dev
    

    VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

     

    二、利用github上的Actions添加工作流

    • 从 GitHub 上的仓库,在 .github/workflow 目录中创建一个名为 superlinter.yml 的新文件。 更多信息请参阅“创建新文件”。
    • 将以下 YAML 内容复制到 superlinter.yml 文件中。 注: 如果您的默认分支不是 main,请更新 DEFAULT_BRANCH 的值以匹配您仓库的默认分支名称。
      YAML
      name: Super-Linter
      
      # Run this workflow every time a new commit pushed to your repository
      on: push
      
      jobs:
        # Set the job key. The key is displayed as the job name
        # when a job name is not provided
        super-lint:
          # Name the Job
          name: Lint code base
          # Set the type of machine to run on
          runs-on: ubuntu-latest
      
          steps:
            # Checks out a copy of your repository on the ubuntu-latest machine
            - name: Checkout code
              uses: actions/checkout@v2
      
            # Runs the Super-Linter action
            - name: Run Super-Linter
              uses: github/super-linter@v3
              env:
                DEFAULT_BRANCH: main
                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    • 要运行您的工作流程, 滚动到页面底部,然后选择 为此提交创建一个新分支并开始拉取请求。 然后,若要创建拉取请求,请单击 Propose new file(提议新文件)
      提交工作流程文件

       

  7. 在仓库中提交工作流程文件会触发 push 事件并运行工作流程。

    查看工作流程结果

      1. 在 GitHub 上,导航到仓库的主页面。
      2. 在仓库名称下,单击 Actions(操作)
        主仓库导航中的操作选项卡

         

      3. 在左侧边栏中,单击您想要查看的工作流程。
        左侧边栏中的工作流程列表

         

      4. 从工作流程运行列表中,单击要查看的运行的名称。
        工作流程运行的名称

         

      5. 在 Jobs(作业)下或可视化图中,单击 Lint code base(Lint 代码基础)作业。
        Lint 代码库作业

         

      6. 任何失败的步骤都会自动展开以显示结果。
        Super linter 工作流程结果