首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ng部署到gh-pages:默认页面而不是应用程序

ng部署到gh-pages是指将Angular项目部署到GitHub Pages上,使其成为一个可通过浏览器访问的静态网页。默认情况下,ng部署到gh-pages会将应用程序的根目录作为默认页面,而不是应用程序本身。

具体步骤如下:

  1. 首先,确保你已经安装了Angular CLI,并且已经创建了一个Angular项目。
  2. 在项目根目录下,打开终端或命令行工具,并执行以下命令安装gh-pages模块:
  3. 在项目根目录下,打开终端或命令行工具,并执行以下命令安装gh-pages模块:
  4. 执行以下命令将应用程序构建为静态文件:
  5. 执行以下命令将应用程序构建为静态文件:
  6. 其中,<username>是你的GitHub用户名,<repository>是你的GitHub仓库名。
  7. 执行以下命令将构建好的静态文件部署到gh-pages分支:
  8. 执行以下命令将构建好的静态文件部署到gh-pages分支:
  9. 其中,<project-name>是你的Angular项目名称。
  10. 等待部署完成后,你的Angular项目就可以通过以下链接访问:
  11. 等待部署完成后,你的Angular项目就可以通过以下链接访问:
  12. 注意替换<username><repository>为你自己的GitHub用户名和仓库名。

ng部署到gh-pages的优势是可以将Angular应用程序快速部署为一个静态网页,无需自己搭建服务器和配置环境。适用场景包括个人博客、项目演示、静态网页展示等。

推荐的腾讯云相关产品是腾讯云静态网站托管(COS),它提供了简单易用的静态网站托管服务,可以将静态网页部署到腾讯云上,并通过自定义域名访问。详情请参考腾讯云静态网站托管产品介绍:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 Github Actions 自动部署 Angular 应用到 Github Pages

前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署 github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page 同时,考虑发布项目时...此时,如果是部署自己的服务器上,只需要把这个文件夹拷贝服务器上,通过 nginx 之类的服务器指向文件所在路径即可 同样的,当我们想要部署 github page 时,我们也只需要将文件提交到 github...首先我们需要通过 npm 将插件安装到需要部署的程序中 ng add angular-cli-ghpages 安装完成之后,我们就可以通过 ng deploy 命令来完成部署,插件会自动把打包生成的文件发布...当我们将程序部署 github page 时,实际对应的网站地址是 https://.github.io/,因此,这里如果不指定 href 的话,...命令来还原项目所需的各种依赖,因此这里在执行 install 命令之前,我们可以通过官方的 actions/cache@v2 来缓存项目依赖,以加快构建的过程 这里在还原依赖时,使用到了 npm ci 不是

1.4K10
  • Hexo+GitHub搭建个人博客,实现云端编辑、一键发文

    本地仓库同步GitHub (不同步的话,文章源码只会保留在本地,不易管理) 由于 Hexo 的部署默认使用分支 master,所以如果你同时正在使用 Git 管理你的站点目录,你应当注意你的部署分支应当不同于写作分支...,部署 gh-pages 分支 新建仓库:blog (名字自己起) 本地hexo仓库关联远程GitHub仓库 将本地仓库推送到远端 本地仓库一些必要的修改配置 安装 hexo-deployer-git...分支 hexo结合GitHub创建个人网站指定的分支名,hexo 内默认设置的分支也是叫这个名字 git checkout -b gh-pages git push -u origin gh-pages...远程仓库开启 github pages 指定部署分支:gh-pages 4、手动部署 本地项目执行命令: hexo clean hexo g hexo deploy hexo模板引擎生成静态文件,并推送到...,将 Hexo 项目编译生成静态页面部署 gh-pages 分支,very good!

    1.1K20

    来认真学一下,项目部署 github pages

    本文主要分享基于 vite 创建的前端项目如何部署 github pages 上。你也可以参考其中的内容部署别的前端静态项目。...2、打包 npm run build 在 github 的仓库中,找到如下页面。...5、按需调整 如果不出意外的话,这里就部署成功了。但是意外就产生了。这里要注意区 github pages 给你分配的项目路径,到底是域名根目录,还是根目录下面的其中一个路径。...这个时候我们就通过 vine.usehook.cn 来访问该项目,不是通过 yangbo5207.github.io/vuevinedemo 来访问。...然后在 Pages 配置页面选择 gh-pages 分支,并选中根目录 确保你的远程分支名为 origin 然后执行我们定义好的打包指令。

    26411

    一文教你使用GitHub Pages部署静态网页

    在上一篇文章部署明星关系图谱那些事儿(GitHub Pages) 的最后,古柳讲到了GitHub Pages不仅可以用来搭个人博客,而且能单独部署静态网页(HTML/CSS/JS,不涉及后端),鉴于自身在部署明星关系图谱时...网上说部署网页项目时最好将代码文件提交到gh-pages分支,于是搞不清楚到底是在desertsx.github.io个人博客项目里新建gh-pages分支(我还真这么干过,逃),还是另外开个GitHub...接下来先看看本项目的webapp/文件夹的目录结构,必须放在根目录下index.html,打开:https://desertsx.github.io/yulequan-relations-graph/渲染出来的页面就是...分支 git branch -d master # 添加当前目录的所有文件暂存区 git add . # 提交暂存区仓库区,并添加代码提交信息 git commit -m 'first commit...仓库里就不是空的了,然后查看部署后的网页效果:https://desertsx.github.io/yulequan-relations-graph/,没问题后就大功告成了。

    1.4K20

    github网站部署

    上传打包后的文件 创建仓库后,进入仓库,然后创建一个分支,名字必须叫做gh-pages,可以理解为默认只识别这个名字 创建好的仓库默认主支是 main,现在 GitHub 逐渐让 main 作为默认的主支名...因为 master 主支放的是博客源码, gh-pages 分支放的是主支打包后的博客代码。...,一定是 gh-pages 分支 蓝色框的地址,就是所有人都能访问的地址,访问之后,就能看到你的博客 ::: Github 一旦更新 gh-pages 分支内容,会自动重新部署,所以访问页面是最新的。...也就是脚本部署的脚本,这个脚本会打包项目 gh-pages 目录下。需要配置密钥,env 读取的就是密钥。...,默认是 master,若是其他分支,则需要指定(指定的分支必须存在) branch: gh-pages 值得注意的是 51 行的 gitee-repo 不是 Gitee 的仓库名字

    14410

    Vuepress码云部署及自动跳转404 的问题

    介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档优化的默认主题。它是为了支持 Vue 子项目的文档需求创建的。...然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA)。当用户在浏览站点时,可以按需加载其他页面。...部署 以下指南假设你将文档放置在项目的 docs 目录中,并使用默认的编译输出位置。 GitHub 页面 将 .vuepress/config.js 中的 base 设置为你的仓库名称。...例如,如果你的仓库是 https://github.com/foo/bar ,则已部署页面将在 https://foo.github.io/bar 上可用。...设置中运行此脚本以启用每次推送时的自动部署 码云页面-Gitee Pages config.js的设置和GitHub页面设置的方法是一致的 项目打包完成后将 docs-.vuepress-dist

    40710

    码云正式支持 Pages 功能

    使用前须知 1、Pages 默认的根文件是 index.html 2、静态网页的样式可以自己写,也可以拿一些静态模版来修改,Pages服务本身不提供任何形式的模版,但我们后续会陆续增加例子,供大家参考使用...4、支持 Jekyll 已经有 Pages 项目如何部署码云的 Pages 以 jQuery-File-Upload 项目为例,项目地址:https://github.com/blueimp/jQuery-File-Upload...这里我们默认的Pages服务分支是osc-pages,但是你也已选择自己静态页面所在的分支,这里jQuery-File-Upload项目的静态页面分支是gh-pages,选择gh-pages并点击启动服务...D.选择需要部署的分支,这里选择Master启动服务。 ? E.访问生成的网站地址,即可以查看你部署的静态页面啦! ? ?...,就可以通过http://silentboy.oschina.io/test_pages/pages_intro/ 进行访问了,怎么样,是不是很酷?

    1.7K120

    HEXO系列教程 | 使用GitHub Actions部署Hexo GitHub Pages | 全流程详细介绍

    省流:默认部署方式是Deploy from a branch(以分支部署): 所以这篇文章,夜梦将介绍部署Hexo的另一种方式——借助GitHub Actions部署GitHub Pages。...前面这篇教程仅需要把public/这个文件夹下的内容上传到GitHub中,利用GitHub Actions部署则不需要上传public/这个文件夹。...-b gh-pages 添加文件暂存区,将项目目录中的所有文件添加到 Git 的暂存区: git add ....推送 gh-pages 分支远程仓库: git push origin gh-pages 2、本地分支还没有任何提交 如果你已经创建了 gh-pages 分支,但没有任何提交记录,那么 Git...git commit -m "Initial commit on gh-pages" 推送 gh-pages 分支远程仓库: git push origin gh-pages 3

    23710

    如何快速搭建好看的个人博客(完整配置与源码)

    >=8 才可以 yarn global add vuepress # 或者:npm install -g vuepress 注意 如果你的现有项目依赖了 webpack 3.x,推荐使用 Yarn不是...再到数据库', } 如果这时运行npm run docs:dev或者yarn docs:dev, 会出现页面404页面,vuepress默认打开的是docs下的readme.md文件, 由于你没有创建...,所以找到的是vuepress默认提供的404页面, 关于这有点,我们借助vue-devtools工具来查看一下vue的结构 ?...部署 nginx部署 我的博客采用的是静态文件部署, 感觉方便又便捷, 之前部署在Github Pages上, 访问速度不是很理想....GitHub 仓库中,创建一个名为 gh-pages 的分支,而我们要部署 GitHub Pages 的正是这个分支 第六步: setting Github Pages这是最后一步了,在 GitHub

    1.5K10

    用vuepress2搭建自己的github网站

    最近打算自己做一个博客网站记笔记,然后部署github上,最终选择了vuepress的最新版本v2(使用的是vue3和TypeScript开发,默认使用Vite作为打包工具)。...二、将代码推到github上 最终我们是要部署github上,所以直接在github上新建一个自己的项目仓库就好了 三、用 GitHub Actions 部署 GitHub Pages 具体的各个站点和...CI工具的部署,vuepress文档上也有写,我们这里选择用 GitHub Actions 部署 GitHub Pages,根据步骤直接操作就行了,需要注意的几个地方: 1、官方提供的GitHub Actions...yarn docs:build,实际使用中我们往往会直接改成 yarn dev和yarn build,如果改了GitHub Actions里的打包命令也要同步改下; 3、仓库里的Pages设置分支要选gh-pages...,失败了会是一个红色的小叉叉,点进去可以看到具体的错误位置,成功了是一个绿色的小勾 流水线成功了gh-pages分支里就会自动生成最终打包出来的文件,像下面这这样的: 5、如果部署成功了,但是发现样式和交互都不生效

    40340

    5 分钟搭建一个简洁优雅的静态博客

    cd blog-template vi docs/blog/2021/blog.md npm run build #生成静态文件,一般在 public 目录下,该目录可以部署服务器,使用 nginx...force https://github.com/xxx/xxx.github.io.git master #可以强制提交,这个仓库仅保留静态文件 push 之后去 xxx.github.io 仓库的设置页面...本应用中 master 存放些博客的脚手架,如 md 文件,VuePress 等配置信息,gh-pages 只存放静态文件,两个仓库的文件没有任何共同之处,应该使用两个仓库,不是两个分支。...而且就算用,这两个分支也永远没有合并的可能,何况这样做相当麻烦,每次提交到 gh-pages 你都需要先切换到 gh-pages 分支,然后将 master 分支下的 .git文件夹先移走,提交完在移动回来...博客生成的 public 目录,也可以再部署 gitee pages,或自己的服务器,也可以同时部署

    1.3K10

    .NET Core+Selenium+Github+Travis CI => SiteHistory

    前言 总是三分钟热度的我折腾了一个可以每天自动截取指定网站页面并保存到Github的项目SiteHistory,感觉挺好(每次都这样 ? )。 想知道YouTube今天的首页长啥样么?...yimogit/SiteHistory 技术栈 .NET Core:.NET Core 是.NET Framework的新一代版本,具有跨平台 (Windows、Mac OSX、Linux) 能力的应用程序开发框架...Selenium:一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。结合phantomjs等驱动可以实现页面自动化。...戳这里→→使用travis-ci自动部署github上的项目 项目构建思路 运行程序,传入名称 网址 如:dotnet run baidu https://www.baidu.com 创建一个phanomjs...版本2.0 # Travis CI提供 phantomjs预装 language: csharp dist: trusty dotnet: 2.0.0 # mono:latest Travis CI默认会安装

    91710

    用vuepress2搭建自己的github网站

    最近打算自己做一个博客网站记笔记,然后部署github上,最终选择了vuepress的最新版本v2(使用的是vue3和TypeScript开发,默认使用Vite作为打包工具)。...二、将代码推到github上最终我们是要部署github上,所以直接在github上新建一个自己的项目仓库就好了三、用 GitHub Actions 部署 GitHub Pages具体的各个站点和CI...工具的部署,vuepress文档上也有写,我们这里选择用 GitHub Actions 部署 GitHub Pages,根据步骤直接操作就行了,需要注意的几个地方:1、官方提供的GitHub Actions...和yarn docs:build,实际使用中我们往往会直接改成 yarn dev和yarn build,如果改了GitHub Actions里的打包命令也要同步改下;3、仓库里的Pages设置分支要选gh-pages...,失败了会是一个红色的小叉叉,点进去可以看到具体的错误位置,成功了是一个绿色的小勾流水线成功了gh-pages分支里就会自动生成最终打包出来的文件,像下面这这样的:5、如果部署成功了,但是发现样式和交互都不生效

    37610

    印记中文推出文档CDN + COS部署方案

    Github + Travis-CI 自动构建与部署服务的架构如下图: Sample process 在代码仓库方面,我们需要两个分支,一个是master 分支,用于存放文档源码,另一个是 gh-pages...首先,创建一个 Bucket,没有备案的域名请选择海外的节点,同时选择 CDN 加速(后面需要用): 创建后,会进入 Vue Bucket 的文件列表页面,目前是空的。...进入 缓存配置,添加一些缓存规则,如 js, css, png, jpg等带有 md5 的资源可以长久缓存, html 等资源则不宜缓存。...部署服务器 在部署服务器中,需要部署一个服务,用于监听 Github 或者 Bitbucket 发出来 Webhook 请求,然后根据请求参数,去运行脚本自动将文件部署腾讯云 COS 存储服务当中。...COSCMD 工具 本地同步工具 小型服务根据请求参考,先到本地部署好的文档gh-pages分支代码处,先行更新代码,然后再运行文件上传工具,将文件依次上传到 COS 服务中。

    2.6K00
    领券