全网最详细的GitHub Pages上部署项目

全网最详细的GitHub Pages上部署项目

在本文中，我们将详细探讨如何在GitHub Pages上部署项目的步骤。GitHub Pages是一个由GitHub提供的静态网站托管服务，允许用户直接通过GitHub仓库来托管静态网站。无需购买服务器或进行复杂的配置，只需将静态文件推送到特定的分支，GitHub Pages就会自动为你托管网站。预览地址

在 GitHub Pages 上部署项目非常简单，以下是详细步骤：

1. 创建或使用现有的 GitHub 仓库

首先，确保你有一个 GitHub 仓库。如果还没有，可以创建一个：

1. 登录到 GitHub。
2. 点击页面右上角的 “+” 按钮，选择 “New repository”。
3. 输入仓库名称和描述，选择公开或私有，点击 “Create repository”。

2. 准备项目

确保你的项目包含需要部署的静态文件（HTML、CSS、JavaScript 等）。如果你的项目需要构建（例如使用 React、Vue 或 Angular），请确保已经构建好，并且所有构建输出文件在一个目录中（例如 dist 或 build）。

3. 将项目推送到 GitHub 仓库

如果你还没有将项目推送到 GitHub 仓库，请按照以下步骤操作：

1. 打开终端或命令行。
2. 初始化 Git 仓库（如果还没有初始化）：

   git init
   1

3. 添加所有文件并提交：

   git add .
   git commit -m "Initial commit"
   1
   2

4. 连接到你的 GitHub 仓库：

   git remote add origin https://github.com/your-username/your-repository.git
   1

5. 推送到 GitHub：

   git push -u origin main
   1

4. 启用 GitHub Pages

1. 打开你的 GitHub 仓库页面。
2. 点击页面顶部的 “Settings”。
3. 在左侧菜单中选择 “Pages”。
4. 在 “Source” 部分，选择要发布的分支（通常是 main 或 master），并选择要部署的目录（例如 /root 或 /docs）。
5. 点击 “Save” 按钮。

GitHub Pages 会自动生成一个 URL，你可以在上面访问你的项目。

5. 部署子目录（如果适用）

如果你的构建输出在子目录（例如 dist 或 build），你需要确保该目录中的内容被推送到 GitHub 仓库。以下是一个使用 gh-pages 分支的示例：

1. 安装 gh-pages 包（假设使用 npm）：

   npm install --save-dev gh-pages
   1

2. 在 package.json 中添加部署脚本：

   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }
   1
   2
   3
   4

   将 build 替换为你的构建目录，例如 dist。

3. 运行部署脚本：

   npm run deploy
   1

这会将构建输出推送到 gh-pages 分支，并自动启用 GitHub Pages。

6. 访问你的 GitHub Pages 网站

GitHub Pages 启用后，你可以通过以下 URL 访问你的项目：

https://your-username.github.io/your-repository/
1

替换 your-username 和 your-repository 为你的 GitHub 用户名和仓库名。

通过这些步骤，你可以轻松地在 GitHub Pages 上部署你的静态网站或项目。

亿点小知识 项目中可能遇到的问题

• 配置SSH Key
  为了提高Git操作的便捷性和安全性，建议配置SSH Key。
  检查SSH Key：在终端（或Git Bash）中运行

ssh-keygen -l -f ~/.ssh/id_rsa.pub（如果你使用的是默认的SSH Key文件名）。如果已有SSH Key，请复制其内容。
1

添加SSH Key到GitHub：登录GitHub，点击头像 -> Settings -> SSH and GPG keys -> New SSH key，粘贴你的SSH Key并保存。

• 项目部署

1. 编写或准备静态资源
   你需要准备静态资源，如HTML、CSS、JavaScript文件等。这些文件将构成你的网站。

2. 配置打包工具（可选）
   如果你的项目是一个单页应用（SPA），你可能需要使用打包工具（如Webpack、Vite等）来构建项目。

以Vite为例，你需要修改vite.config.js配置文件，确保构建后的资源能正确指向GitHub Pages的URL。

javascript
// vite.config.js  
export default defineConfig({  
  base: process.env.NODE_ENV === 'production' ? '/你的仓库名/' : '/',  
  build: {  
    outDir: 'docs' // 打包后的文件输出到docs目录  
  }  
});
1
2
3
4
5
6
7
8

• 注意事项
  history路由问题：如果你的项目使用了history路由模式（如Vue Router的history模式），你可能需要配置重定向或使用HTML5 History API的fallback来确保页面正确加载。
  SEO优化：确保你的网站包含适当的元数据和语义化标签，以提高搜索引擎的可见性。
  性能优化：优化你的静态资源，如压缩图片、合并和压缩CSS/JavaScript文件等，以提高页面加载速度。
  通过遵循上述步骤，你可以轻松地将项目部署到GitHub Pages上，并拥有一个无需额外服务器的静态网站。

ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞 仓库地址、预览地址

如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…