Angular CLI: 发布到 GitHub Pages
发布 Angular 应用的简单方式是使用 GitHub Pages.
点击这里 可以查看发布之后的应用。
首先需要创建一个 GitHub 账号,随后,为您的项目创建一个仓库。记下 GitHub 中的用户名和项目名称。
例如,我的 GitHub 账号是 haoguanjun,我创建的项目名称是 ng-hello。
然后,您要做的就是运行
ng build --prod --output-path docs --base-href ng-hello
这个 PROJECT_NAME 就是您的项目在 GitHub 中的名称。这个示例中使用的项目名称是 ng-hello,将 docs/index.html 复制为 docs/404.html。
提交修改并 Push 到仓库中。
您应该在项目的主页 https://github.com/haoguanjun/ng-hello 上,看到一个 docs 的文件夹,其中包含了一个 404.html 页面。
页面内容如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello</title> <base href="ng-hello"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> </head> <body> <app-root></app-root> <script type="text/javascript" src="inline.97a5517db35cb02cdd8d.bundle.js"></script> <script type="text/javascript" src="polyfills.f20484b2fa4642e0dca8.bundle.js"></script> <script type="text/javascript" src="main.352a0febf476a50f1de9.bundle.js"></script> </body> </html>
在 GitHub 项目的页面上,配置为 publish from the docs folder.
点击项目中的 ,进入项目配置页面。找到 GitHub Pages 配置部分。
在 Source 下面的下拉列表中,找到 master branch/docs folder ,选中并保存。如下所示。
这就是所有您需要做的!现在可以访问地址 https://USER_NAME.github.io/PROJECT_NAME 来访问页面了。
这个示例的寄宿在 GitHub 的 https://haoguanjun.github.io/ng-hello/ 中,可以直接点击查看。
这个示例所有的代码都保存在 https://github.com/haoguanjun/ng-hello 中,您可以直接下载查看。
您还可以使用 angular-cli-ghpages,这是一个全功能的包,可以帮助您做所有这些工作,且还有额外的功能。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?