在GitHub页面上部署next

Nuxt.js让你可以在任何静态托管上托管你的web应用程序,比如GitHub页面例如。

要在GitHub页面上部署,您需要生成静态web应用程序:

npm运行生成

它将创建一个分布文件夹内的一切准备部署在GitHub页面托管。分支gh页面对于项目存储库或分支主人用于用户或组织网站

信息:如果你使用一个自定义域为你的GitHub页面和放置CNAME文件,建议将CNAME文件放在静态目录中。更多文档关于它。

部署到存储库的GitHub页面

首先,你要确保使用静态目标因为我们在GitHub页面上托管:

numxt.config.js文件
出口默认的目标'静态'

如果你正在为一个特定的存储库创建GitHub页面,并且你没有任何自定义域,页面的URL将是以下格式:http://.github.io/

如果你部署分布不添加的文件夹路由器的基础,当您访问已部署的站点时,您会发现该站点由于缺少资产而无法工作。这是因为我们假设网站根目录/,但这次是/ <存储库名>

为了解决这个问题,我们需要添加路由器的基础中的配置numxt.config.js文件

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@v3github_token的秘密。GITHUB_TOKENpublish_dir/分布

使用新的工作流,将以下内容粘贴到名为cd.yml在里面.github /工作流目录:

的名字cd拉取请求工作cd运行在矩阵.os策略矩阵操作系统乌班图-最新的节点14步骤-的名字结帐使用行动/checkout@master-的名字设置节点env使用操作/设置-node@v2.1.2节点信息matrix.node-的名字安装依赖关系运行纱线-的名字生成运行纱线运行生成-的名字部署使用和平行动-“大酒店”-pages@v3github_token的秘密。GITHUB_TOKENpublish_dir/分布

然后将其提交到存储库:

吉特添加.github /工作流/ cd.yml吉特commit - m“添加github页面部署工作流”吉特推动起源

完成后,您将看到gh页面分支更新以及您的网站。

特拉维斯CI

部署与特拉维斯CI,一个免费的开源项目生成服万博lol务器,通过您的GitHub帐户登录,授予Travis查看您的存储库的权限,然后通过在显示的列表中切换存储库名称旁边的开关来启用存储库的生成服务器。

启动Travis Builder服务器

接下来,单击存储库名称旁边的cog图标,以配置构建服务器的常规设置,并启用“只有在.travis时才能构建”。Yml是通过切换开关来实现的。

Travis Builder服务器设置

在同一屏幕上,向下滚动到Environment Variables部分,并创建名为GITHUB\u访问\u令牌并在值字段粘贴你之前创建的GitHub个人访问令牌的副本,然后点击“添加”按钮。

Travis Builder服务器环境变量

最后,创建一个.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中向存储库提交任何更改时,您都会看到一个新的构建启动

Travis Builder服务器输出

完成后,您将看到GitHub页面站点自动更新。

测量员

通过部署测量员,另一个免费的开源项目构建服务器,注册万博lol一个新帐户选择GitHub身份验证选项,使用您的GitHub帐户登录。

登录后,单击“New project”链接,然后单击显示列表中存储库名称旁边的“Add”按钮,以启用存储库上的构建服务器。

Appveyor Builder Server启用

接下来,在存储库的根目录中创建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配置--全局用户电子邮件$envgithub_email#部署到GitHub页面-npm运行部署#没有要运行的测试测试#不要实际建造。建造

注意此配置假定您已经配置了package.json按照命令行部署指令

但是,在提交此文件之前,需要更改ENCRYPTED_GITHUB_ACCESS_TOKEN加密的\u GITHUB \u电子邮件变量与你的GitHub个人访问令牌和你的GitHub电子邮件地址,加密使用Appveyor加密工具

更新后,将文件提交到存储库中

吉特添加appveyor.yml吉特commit - m“添加appveyor部署配置”吉特推动起源

现在,每当您在Appveyor中向存储库提交任何更改时,您将看到一个新的构建启动

Appveyor Builder服务器输出

完成后,您将看到GitHub页面站点自动更新。

贡献者

发现一个错误或想贡献的文件?在GitHub上编辑此页!