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

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

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

在 GitHub Pages 上部署项目非常简朴，以下是详细步调：
1. 创建或使用现有的 GitHub 仓库

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

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

2. 预备项目

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

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

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

  复制代码
• 添加所有文件并提交：
  1. git add .
  2. git commit -m "Initial commit"

  复制代码
• 连接到你的 GitHub 仓库：
  1. git remote add origin https://github.com/your-username/your-repository.git

  复制代码
• 推送到 GitHub：
  1. git push -u origin main

  复制代码

4. 启用 GitHub Pages

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

GitHub Pages 会自动生成一个 URL，你可以在上面访问你的项目。
5. 部署子目录（如果实用）

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

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

  复制代码
• 在 package.json 中添加部署脚本：
  
  1. "scripts": {
  2.   "predeploy": "npm run build",
  3.   "deploy": "gh-pages -d build"
  4. }

  复制代码
  将 build 替换为你的构建目录，例如 dist。
  
• 运行部署脚本：
  
  1. npm run deploy

  复制代码

这会将构建输出推送到 gh-pages 分支，并自动启用 GitHub Pages。
6. 访问你的 GitHub Pages 网站

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

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

复制代码

替换 your-username 和 your-repository 为你的 GitHub 用户名和仓库名。
通过这些步调，你可以轻松地在 GitHub Pages 上部署你的静态网站或项目。
亿点小知识 项目中可能遇到的标题

• 配置SSH Key
  为了进步Git操纵的便捷性和安全性，发起配置SSH Key。
  查抄SSH Key：在终端（或Git Bash）中运行
  

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

复制代码

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

• 项目部署
  

• 编写或预备静态资源
  你需要预备静态资源，如HTML、CSS、JavaScript文件等。这些文件将构成你的网站。
  
• 配置打包工具（可选）
  如果你的项目是一个单页应用（SPA），你可能需要使用打包工具（如Webpack、Vite等）来构建项目。
  

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

1. javascript
2. // vite.config.js  
3. export default defineConfig({  
4.   base: process.env.NODE_ENV === 'production' ? '/你的仓库名/' : '/',  
5.   build: {  
6.     outDir: 'docs' // 打包后的文件输出到docs目录  
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、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞 仓库地点、预览地点
  如碰到其他的标题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。