web前端(七):gh-pages部署到GitHub


有时需要将一些前端静态资源部署到GitHub上,如博客、在线简历这类的情况。
这只涉及一些简单的页面和静态文件,为了减少一些脚本的使用,前端有gh-pages这样一个模块,可以帮助部署到GitHub上。

1.注册 GitHub 账号

确保有一个GitHub账号,新建仓库,并设置与本地关联,具体步骤参考网上的资料。

2.创建 gh-pages 分支

为了不影响项目的开发,在 GitHub 上创建一个 gh-pages 分支。

git checkout --orphan gh-pages 
git remote add origin {远程仓}   # 添加关联
git push origin gh-pages        # 推送远程

3.安装 node.js

确保有 node 环境,安装 npm,一般安装nodejs的安装包都集成了。
nodenpm 添加到环境变量,具体流程可去网上搜索。
这里推荐一款修改Windows环境变量的软件:rapidee

4.安装插件 gh-pages

cd project_path  # 进入项目目录
npm install gh-pages --save

5.修改 package.json

{
  //配置homepage
  "homepage":"https://yaojusheng.github.io/dynamic-resume",
  //配置scripts
  "scripts":{
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "predeploy":"npm run build",
    "deploy":"gh-pages -d public"
  },
}

6.修改 config/index.js

build: {
  ...,
  assetsPublicPath: ''  // 置空
},

6.推送到 gh-pages 分支

npm run deploy

7.设置 GitHub Pagessource

点击项目的 Settings 按钮,找到 GitHub Pages 选项,然后选择之前创建的 gh-pages 分支作为 source,等待部署完成。


原文:web前端(七):gh-pages部署到GitHub

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个错误通常是由于缺少正确的SSH密钥或没有正确设置访问权限引起的。你可以按照以下步骤解决这个问题: 1. 检查SSH密钥:首先,确保你的本地机器上有正确的SSH密钥。你可以通过运行以下命令来检查: ``` ls -al ~/.ssh ``` 如果没有任何密钥,请生成一个新的SSH密钥。可以使用以下命令生成SSH密钥: ``` ssh-keygen -t rsa -b 4096 -C "your_email@example.com" ``` 确保将`your_email@example.com`替换为你的GitHub注册邮箱。 2. 添加SSH密钥到GitHub账户:将生成的SSH公钥添加到你的GitHub账户中。你可以使用以下命令来复制公钥内容: ``` pbcopy < ~/.ssh/id_rsa.pub ``` 然后,登录到你的GitHub账户,导航到"Settings" -> "SSH and GPG keys"页面,点击"New SSH key"按钮,将公钥粘贴到对应的输入框中,最后保存即可。 3. 检查远程仓库URL:确保你的远程仓库URL是正确的。你可以使用以下命令来检查: ``` git remote -v ``` 如果URL不正确,可以使用以下命令进行修改: ``` git remote set-url origin git@github.com:your-username/your-repo.git ``` 将`your-username`和`your-repo`替换为你的GitHub用户名和仓库名称。 4. 再次尝试推送代码:完成上述步骤后,再次执行`git push -f git@github.com:your-username/your-repo.git master:gh-pages`命令。这次应该不会再出现权限拒绝的错误。 如果你仍然遇到问题,请确保你具有正确的访问权限,并且你的仓库存在。如果问题仍然存在,请提供更多错误信息,以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值