GitHub拥有一个自己的静态网站

741 阅读2分钟

首先你需要有一个 github 账号。是个程序员的都知道👌,所以就不说怎么注册了

操作步骤:

  1. 登录github,点击右上角New创建一个新的仓库

image.png 2. 填写仓库的相关信息

  • 这里的 Repository name,有且只能起一个名字,才能变成你的域名 , [你的github账号名].github.io。以后就可以用 [你的github账号名].github.io 这个网址来访问你的网站啦。

⚠你也可以起其他名字,但会成为一个普通的仓库,没有网站的功能。

  • 需要选择 public公共对外,否则无法通过链接地址访问

image.png

  1. 🎉然后就创建成功属于你的仓库了,你可以通过https or ssh的方式来克隆或连接你的仓库 image.png

  2. 🔧可以将你打包后的 dist 文件夹内的内容上传到仓库,然后github page会自动更新你的文件。

github-pages-deploy-action 自动简化打包部署上传

github-pages-deploy-action是一个开源的工作流配置,配置后你将不再需要手动打包推送更新。只需要每次修改完代码直接提交就可以,它会自动根据你的配置,基于指定的[branch]打包成一个[gh-page]作为你的静态文件

image.png

搭建过程

新建一个仓库,然后配置你的工作流。你可以直接使用官方提供的 配置案例

image.png

main.yml

name: Build and Deploy
on: [push]
permissions:
  contents: write
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build # The folder the action should deploy.

在设置中修改你部署github page的分支为默认创建的gh-page,即可大功告成🎉~~

image.png

对你有帮助

如何搭建一个免费的作品集网站

如何在码云Gitee上拥有自己的静态网站

github-pages-deploy-action简化你的部署操作