VuePress website hosted on GitHub Pages | Slava Arapov Notes

VuePress website hosted on GitHub Pages

I started Jekyll project first to host on Github Pages but GitHub released new GitHub Actions integrations on July 27th, 2022open in new window so I moved to VuePress.

You can use GitHub Actions to build any static website and GitHub Pages to host it quick and for free.

GitHub Actions and VuePress documentation is great so I list the sequence of steps briefly.

Static website setup instructions

  1. Register (sub)domain and set DNS CNAME record to <your-username>
  2. Create VuePress site and make a repository
  3. Host the repository on GitHub
  4. Add new workflow at GitHub Actions tab according to VuePress Guideopen in new window
  5. If you use sample config and custom domain add fqdn parameter in the last docs job step
    # please check out the docs of the workflow for more details
    # @see
    - name: Deploy to GitHub Pages
    uses: crazy-max/ghaction-github-pages@v2
      # deploy to gh-pages branch
      target_branch: gh-pages
      # deploy the default output dir of VuePress
      build_dir: docs/.vuepress/dist
      # domain name to set in CNAME file

  6. GitHub action will build and push updated static site to gh-pages branch at any commit
  7. Check your repository Settings -> Pages page and select gh-pages branch to deploy from