在GitHub页面上部署next
Nuxt.js让你可以在任何静态托管上托管你的web应用程序,比如GitHub页面例如。
要在GitHub页面上部署,您需要生成静态web应用程序:
npm运行生成
它将创建一个分布
文件夹内的一切准备部署在GitHub页面托管。分支gh页面
对于项目存储库或分支主人
用于用户或组织网站
信息:如果你使用一个自定义域为你的GitHub页面和放置CNAME
文件,建议将CNAME文件放在静态
目录中。更多文档关于它。
部署到存储库的GitHub页面
首先,你要确保使用静态目标因为我们在GitHub页面上托管:
出口默认的{目标:'静态'}
如果你正在为一个特定的存储库创建GitHub页面,并且你没有任何自定义域,页面的URL将是以下格式:http://
.
如果你部署分布
不添加的文件夹路由器的基础,当您访问已部署的站点时,您会发现该站点由于缺少资产而无法工作。这是因为我们假设网站根目录/
,但这次是/ <存储库名>
.
为了解决这个问题,我们需要添加路由器的基础中的配置numxt.config.js文件
:
出口默认的{目标:'静态',路由器:{基地:'/<存储库名称>/'}}
这样,所有生成的路径资源都会加上前缀/ <存储库名> /
,下次你将代码部署到GitHub Pages库时,网站应该能正常工作。
命令行部署
你也可以使用push-dir包:
首先通过npm安装它:
npm安装push-dir——save-dev
添加部署
命令你package.json
分支为gh页面
对于项目存储库或主人
用于用户或组织网站。
“脚本”:{“开发人员”:“nuxt”,“生成”:“nuxt生成”,“开始”:“nuxt开始”,“部署”:# #删除文件目录# #删除文件目录# #},
然后生成并部署静态应用程序:
npm运行生成npm运行部署
构建服务器部署
你可以更进一步地进行部署,而不必从本地安装手动编译和部署文件,你可以使用构建服务器来监控GitHub存储库的新提交,然后自动为你签出、编译和部署一切。
在配置构建服务器之前,首先需要生成一个GitHub个人访问令牌以便授予构建服务器代表您执行任务的权限。一旦您创建了您的令牌,请保存一个安全的副本,以便稍后使用。
GitHub操作
通过部署GitHub操作,GitHub的官方软件自动化工具,如果您没有工作流,则需要创建新工作流或将新步骤附加到现有工作流中。
它使用GitHub页面操作从分布
文件夹到默认的GitHub Pages分支gh页面
.
对于现有工作流,添加以下步骤:
-的名字:生成页面运行:纱产生-的名字:部署使用:和平行动-“大酒店”-pages@v3与:github_token:${{的秘密。GITHUB_TOKEN}}publish_dir:/分布
使用新的工作流,将以下内容粘贴到名为cd.yml
在里面.github /工作流
目录:
的名字:cd在:[推,拉取请求]工作:cd:运行在:${{矩阵.os}}策略:矩阵:操作系统:[乌班图-最新的]节点:[14]步骤:-的名字:结帐使用:行动/checkout@master-的名字:设置节点env使用:操作/设置-node@v2.1.2与:节点信息:${{matrix.node}}-的名字:安装依赖关系运行:纱线-的名字:生成运行:纱线运行生成-的名字:部署使用:和平行动-“大酒店”-pages@v3与:github_token:${{的秘密。GITHUB_TOKEN}}publish_dir:/分布
然后将其提交到存储库:
吉特添加.github /工作流/ cd.yml吉特commit - m“添加github页面部署工作流”吉特推动起源
完成后,您将看到gh页面
分支更新以及您的网站。
特拉维斯CI
部署与特拉维斯CI,一个免费的开源项目生成服万博lol务器,通过您的GitHub帐户登录,授予Travis查看您的存储库的权限,然后通过在显示的列表中切换存储库名称旁边的开关来启用存储库的生成服务器。
接下来,单击存储库名称旁边的cog图标,以配置构建服务器的常规设置,并启用“只有在.travis时才能构建”。Yml是通过切换开关来实现的。
在同一屏幕上,向下滚动到Environment Variables部分,并创建名为GITHUB\u访问\u令牌
并在值字段粘贴你之前创建的GitHub个人访问令牌的副本,然后点击“添加”按钮。
最后,创建一个.travis.yml
存储库根目录中的配置文件,包含以下内容
语言:node_jsnode_js:-“12”缓存:目录:-“node_modules”分支:只有:-主人安装:-npm安装-npm运行生成脚本:-回声“跳过测试”部署:提供者:页skip-cleanup:是的github令牌:$GITHUB\u访问\u令牌#设置在travis-ci.org仪表板,标记为安全https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token目标分支:“大酒店”-页本地目录:分布在:分支:主人
然后将其提交到存储库
吉特添加.travis.yml吉特commit - m“添加travis部署配置”吉特推动起源
现在,每当您在Travis中向存储库提交任何更改时,您都会看到一个新的构建启动
完成后,您将看到GitHub页面站点自动更新。
测量员
通过部署测量员,另一个免费的开源项目构建服务器,注册万博lol一个新帐户选择GitHub身份验证选项,使用您的GitHub帐户登录。
登录后,单击“New project”链接,然后单击显示列表中存储库名称旁边的“Add”按钮,以启用存储库上的构建服务器。
接下来,在存储库的根目录中创建appveyor.yml
包含以下内容的配置文件
环境:#Nuxt至少需要节点v12nodejs_version:“12”#加密敏感数据(https://ci.appveyor.com/tools/encrypt)github_access_token:安全:ENCRYPTED_GITHUB_ACCESS_TOKENgithub_email:安全:加密的\u GITHUB \u电子邮件只在主分支上运行分支:只有:-主人#安装脚本(复制后运行)安装:#切换nodejs版本-ps:安装-产品节点env美元:nodejs_version#安装模块-npm安装#生成静态文件-npm运行生成#配置全局git凭证存储(https://www.appveyor.com/docs/how-to/git-push/)-git配置--全局凭据.helper存储-ps:添加-内容”env美元:USERPROFILE \ .-凭证”“https:/ / (env美元:github(访问令牌):x-oauth-basic@github.com`n“-git配置--全局用户电子邮件$env:github_email#部署到GitHub页面-npm运行部署#没有要运行的测试测试:关#不要实际建造。建造:关
注意此配置假定您已经配置了package.json
按照命令行部署指令
但是,在提交此文件之前,需要更改ENCRYPTED_GITHUB_ACCESS_TOKEN
和加密的\u GITHUB \u电子邮件
变量与你的GitHub个人访问令牌和你的GitHub电子邮件地址,加密使用Appveyor加密工具.
更新后,将文件提交到存储库中
吉特添加appveyor.yml吉特commit - m“添加appveyor部署配置”吉特推动起源
现在,每当您在Appveyor中向存储库提交任何更改时,您将看到一个新的构建启动
完成后,您将看到GitHub页面站点自动更新。