github使用gh-pages部署vue静态网站(简单易懂)

原创 已于 2024-08-07 16:12:44 修改 · 851 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #github #前端框架 #vue

于 2024-08-02 16:52:30 首次发布

github使用gh-pages部署vue静态网站

当我们想把自己的网站部署到一个静态网站上，Github Pages是一个很好的选择（稳定、可靠、不花钱）

假设你已经有一个项目并且已经发布到github上了，先把项目git clone到本地 ，接着在项目中安装

1、安装gh-pages
npm i -D gh-pages

在这里插入图片描述

2、初始化仓库，提交代码到远程仓库

在这里插入图片描述

在这里插入图片描述

3、在package.json文件中添加script脚本
 "deploy":
最低0.47元/天 解锁文章

200万优质内容无限畅学
github pages 部署vue项目
啊哦
12-16 1408
1.新建分支 在项目中新建分支gh-pages，把项目打包后放到这个分支或者直接在这个分支打包 2.打包 找到vue.config.js文件 把这一行的值从 ‘/’ 改成 ‘./’ 点图上这个直接运行，或者cmd运行 npm run build:prod 目录中出现dist文件夹，这样就是打包好了 然后把框框里面这一部分文件夹移到项目根目录 【总之就是让这部分文件的位置处在gh-pages分支根目录下】 这个时候可以打开index.html看看能不能打开网页，能打开看的话说明打包的文件没问题 3
GitHub发布静态网站
2201_75715995的博客
03-14 2869
在仓库管理界面，点击“设置（setting）”按钮，然后在侧边栏中选择“Pages”选项，打开配置界面；关于“初始化仓库”、“设置模板”和“选择分支模型”这几个设置，可根据自身需求进行设置，不设置也行。可以通过点击“上传现有文件”按钮来进入上传文件管理界面，手动上传所需的文件。推荐使用方式一，通过拖拽的方式上传文件，因为它既支持文件也支持文件夹的上传。在首页的右上角，点击“+”号图标，从弹出的选择菜单中选择“新建仓库”选项。最后，确认所有信息填写无误后，点击“创建”按钮以完成仓库的创建。
githubPage部署Vue项目
maohangfei.cn
09-03 1053
vue项目如何部署到github Page中
静态网站部署：如何通过GitHub免费部署一个静态网站
最新发布
ztK63LrD的博客
05-18 3029
GitHub Pages 是 GitHub 提供的一项免费服务，允许用户托管静态网站，如个人博客、项目展示等。它支持 HTML、CSS 和 JavaScript 文件，且完全免费，支持自定义域名。使用 GitHub Pages 无需配置和维护服务器，适合个人开发者和小型项目。然而，它仅支持静态内容，不支持后端应用或动态功能，且每个仓库有 100MB 的文件大小限制。部署过程包括创建 GitHub 仓库、上传网站文件、设置 GitHub Pages 分支，并通过 Git 提交更新。对于需要复杂功能的项目，Gi
推荐使用 gh-pages：轻松发布到 GitHub Pages
gitblog_00065的博客
08-28 814
推荐使用 gh-pages：轻松发布到 GitHub Pages 项目介绍 gh-pages 是一个强大的 npm 模块，旨在简化将文件发布到 GitHub 的 gh-pages 分支的过程。无论您是个人开发者还是团队成员，gh-pages 都能帮助您快速部署静态网站或文档到 GitHub Pages，而无需手动操作复杂的 Git 命令。 项目技术分析 gh-pages 模块基于 Node.js ...
在github上免费搭建静态网站服务
lulu_678的博客
02-28 1438
对于静态的项目可以免费部署到github上，这样不论是自己还是别人访问都比较方便，且免费。但如果涉及到性能比较高、有数据库存储的需求就不推荐。 在Github上免费部署静态网站的简单的操作步骤如下： 1. 安装git 2. 配置SSH密钥（方便代码提交） 在git-bash中输入命令，类似如下： ssh-keygen -t rsa -C “您的邮箱”。 当看到Enter passphrase时，...
Tyom Semonov的简历：静态站点部署与简历生成指南
该简历使用了Sapper框架来构建，并将网站部署在GitHub Pages上。同时，简历中的内容可以从YAML文件中读取并转换为JSON格式，以供前端和后端使用。" 知识点： 1. GitHub Pages：GitHub Pages是一个静态站点托管服务...
前端Vue,后端node，可以如何部署
03-04
- GitHub Pages：推送至`gh-pages`分支 --- ### 三、Node.js后端部署 1. **进程管理** ```bash npm install pm2 -g pm2 start app.js --name "my-api" pm2 save # 保存进程列表 pm2 startup # 设置开机自启 ...
bwindi-website:Bwindi 社区孤儿和弱势中心项目网站
06-21
GitHub Pages是一个免费的服务，允许用户将他们的静态网站部署到web上。"gh-pages"分支通常用于存放GitHub Pages项目文件。这可能意味着项目的源代码和资源文件（如HTML、CSS、JavaScript、图片等）都存储在一个名为...
探索NaxiDemo在GitHub页面的应用实践
GitHub Pages是GitHub提供的一个服务，允许用户发布自己的网站或项目页面。这通常用于展示个人的项目、博客或者是静态网站。GitHub Pages可以与Git仓库直接关联，当仓库内容更新时，网站也可以相应更新。 7. 项目...
Vue,GitHub - vue项目打包成静态资源，部署到Github实现pages在线访问
L_rucine的博客
04-06 1125
因为自己进行vue项目在github上的pages中在线预览时，出现很多问题，找了很多教程，每个教程适合自己的配置内容都有但都不完全，所以总结了自己的实现过程，希望对大家有帮助。
github部署静态页面
slnsuya的博客
04-16 536
上传项目到github，根目录下面有一个index.html 在目录找到setting 3.选择pages 4.在resource里面选择分支配置 使用一个你要用到的分支，以及目录（如果index在doc就选doc，在root根目录就选root） 5.然后save保存就行 6.查看配置结果 view all branches查看所有分支， 就能找到你正在配置的分支的结果表示配置成功，如果是×，可以点进去查看为什么配置失败，哪一步失败。我遇到了一个bug Error: fatal: No url fou
在github上部署静态页面
热门推荐
qq_58832911的博客
11-24 1万+
假如你辛辛苦苦写好了一个静态网页，很想要炫耀一下，让大家都可以通过公网访问看到我的网页。这里有一种最简单的方式，使用gitpage功能，将你的网页通过gitpage部署，大家都可以通过公网看到你的网页了。
github托管静态页面
2301_79385221的博客
05-01 2623
免费在线上空间，不用简直就是浪费，关键还不限流量赶紧去折腾一下这是搭建的GitHub托管网页，由于是GitHub的服务器，国内访问会非常！慢。
在github上托管网站： gh-pages
Lam's IT Story
08-09 1452
通过gh-pages分支，可以在GitHub上创建一个可以预览的网站，进行网站托管。 以下为步骤总结 在GitHub上新建一个repository目录 在本地相应的文件目录打开命令行窗口或者git bash窗口 初始化git ,创建一个git文件 git init 添加文件到git仓储 git add . 添加备注： git commit -m "first commit" 关联路径： git remote add origi...
通过github pages部署自己写的vue个人网站（亲测保熟）
m0_74773277的博客
01-12 2849
其实在最开始的我就一直想写一个自己的个人网站，毕竟打算在这行长久下去（虽然是小白），就必须要给自己留一点脚步印记。虽然之前写过如何部署项目，但是那个项目的服务器却是有时间限制的（新用户白嫖一个月----->点击查看），后续就一直在想要一个永不失联的个人网站，在网上冲浪的时候就发现了github pages（只能是静态页面），写这个的原因就是记录一下，顺便看看能不能帮到其他人。
使用github搭建静态网站
m0_37166734的博客
03-16 1822
使用github搭建静态网站 今天惊喜地发现原来使用github搭建静态网站很简单，为什么不能搭建动态网站呢，原因是虽然github可以称为一个外网访问静态资源的站点，但是不支持创建自己的数据库和安装自己的web服务器。 步骤一：如果你没有github账号，首先申请一个账号，github是全世界有名的代码托管工具，如果你是程序员，还没有github账号，你就真out了。 步骤二：创建一个re...
黑猴子的家：GitHub 之 gh-pages 新手入门
黑猴子的博客
10-12 1241
1、官网地址，通过邮箱注册一下 https://github.com/ 2、登录 3、创建一个新仓库 4、Git window 客户端 安装 https://www.jianshu.com/p/c62a4f4bbb13 5、GitHub Init 初始化 在window7新建first文件夹，在first文件夹中操作 $ git init $ git ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值