DEV Community

Leo
Leo

Posted on

使用 gh-pages 插件部署GitHub Pages

#github #git #vue #vite

以vite+vue项目为例，使用 gh-pages 插件部署GitHub Pages的步骤：

1.创建 GitHub 仓库

首先，在 GitHub 上创建一个新的仓库。可以选择任何名字，通常，如果是个人主页，仓库名需要为 username.github.io，但是如果是项目页面，名字则可以自由选择。

创建成功后将项目推送到仓库:

git init

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/username/username.github.io.git

git push -u origin main
Enter fullscreen mode Exit fullscreen mode

2.安装 gh-pages 插件

gh-pages 插件可以帮助我们将构建后的项目推送到 GitHub Pages。

npm install --save-dev gh-pages
Enter fullscreen mode Exit fullscreen mode

3.配置 package.json 部署脚本 

{
  "scripts": {
    "build": "vite build", 
    "deploy": "gh-pages -d dist" 
  }
}
Enter fullscreen mode Exit fullscreen mode

4.构建项目 

npm run build
Enter fullscreen mode Exit fullscreen mode

5.部署到 GitHub Pages 

npm run deploy
Enter fullscreen mode Exit fullscreen mode

6.设置部署源

登录到 GitHub，进入你的仓库页面，点击仓库页面顶部的 Settings，滚动到 “GitHub Pages” 部分，在 Source 部分，选择部署源：选择 gh-pages 分支

Top comments (0)