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

部署时Gh页面未呈现src或公共文件夹w/ React

部署时Gh页面未呈现src或公共文件夹w/ React是指在使用React框架进行开发时,将应用部署到GitHub Pages(Gh页面)时,页面无法正确显示src文件夹或公共文件夹中的内容。

解决这个问题的方法是:

  1. 确保在项目的根目录下存在一个名为public的文件夹,该文件夹用于存放公共文件,例如图片、字体等。如果没有该文件夹,可以手动创建一个。
  2. 确保在public文件夹中存在一个名为index.html的文件,该文件是应用的入口文件。
  3. 确保在src文件夹中存在一个名为index.js的文件,该文件是应用的主要逻辑文件。
  4. index.js文件中,确保使用了正确的路径引入了index.html文件,例如:import './index.html';
  5. package.json文件中,确保设置了正确的homepage字段,该字段应该指向GitHub Pages的URL,例如:"homepage": "https://your-username.github.io/your-repo"
  6. 在终端中运行npm run build命令,将项目打包生成静态文件。
  7. 将生成的静态文件上传到GitHub仓库的gh-pages分支中。
  8. 在GitHub仓库的设置中,将默认分支设置为gh-pages分支。
  9. 等待一段时间,GitHub会自动构建和部署你的应用。在部署完成后,你可以通过GitHub Pages的URL访问你的应用。

总结一下,部署React应用到GitHub Pages时,确保存在正确的文件夹结构、正确引入文件、设置正确的homepage字段,并将生成的静态文件上传到gh-pages分支中,即可解决部署时Gh页面未呈现src或公共文件夹的问题。

腾讯云相关产品推荐:腾讯云静态网站托管(CloudBase)是一种无服务器的静态网站托管服务,可以帮助你快速部署和管理静态网站。它提供了简单易用的界面和丰富的功能,可以轻松地将React应用部署到云端。了解更多信息,请访问腾讯云静态网站托管产品介绍页面:腾讯云静态网站托管

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

相关·内容

【总结】1796- 原生 canvas 如何实现大屏?

优点:数据与视图分离的心智模型,不再需要在 React 组件 hooks 里用 useState 和 useReducer 定义数据,或者在 useEffect 里发送初始化请求,或者考虑用 context...代码位于 src/utils/cache interface CacheNode { /** * 节点状态 * - 0:执行 * - 1:已执行 * - 2:出错...当节点数量在 500 W 的时候,如果没有开启切片,页面白屏时间在 MacBook Pro M1 上白屏时间大概是 8.5 S;开启分片渲染页面不会出现白屏,而是从左到右逐步绘制背景图,每个任务的执行时间在...如何做自动化部署呢,对于一些不依赖后端的项目来说,我们可以借助 github 提供的 gh-pages 服务来做自动化部署,CI、CD 仅需配置对应的 actions 即可,在仓库 settings/pages...例如项目里面的.github/workflows/gh-pages.yml,表示当 master 分支有代码提交,会执行对应的 jobs,并借助 peaceiris/actions-gh-pages@

23640

原生 canvas 如何实现大屏?

看完这篇文章(这个项目),你将收获: 全局状态真的很简单,你只需 5 分钟就能上手 如何缓存函数,当入参不变,直接使用缓存值 千万节点的图如何分片渲染,不卡顿页面操作 项目单测该如何写?...优点:数据与视图分离的心智模型,不再需要在 React 组件 hooks 里用 useState 和 useReducer 定义数据,或者在 useEffect 里发送初始化请求,或者考虑用 context...代码位于 src/utils/cache interface CacheNode { /** * 节点状态 * - 0:执行 * - 1:已执行 * - 2:出错...当节点数量在 500 W 的时候,如果没有开启切片,页面白屏时间在 MacBook Pro M1 上白屏时间大概是 8.5 S;开启分片渲染页面不会出现白屏,而是从左到右逐步绘制背景图,每个任务的执行时间在...例如项目里面的.github/workflows/gh-pages.yml,表示当 master 分支有代码提交,会执行对应的 jobs,并借助 peaceiris/actions-gh-pages@

16320
  • 怎样开发可重用组件并发布到NPM

    含有 package.json 文件的任何文件夹都可以作为可共享包上传到NPM。 虽然NPM主要与JavaScript相关联,但包中也可以包含 CSS 和标记。...这里面 React 出现的异常值,希望能在 React 17 中解决。 制作Web组件 定义一个自定义元素 生成 made-up-tag 标记并使其内容显示在页面上。...在添加、更改删除属性时运行 attributeChangedCallback 。 它可以用于监听标准化本机属性(如 disabled src )的更改,以及我们定义的任何自定义属性。...HTML 属性可以有相应的值(例如 href,src,alt,value 等),而其他值可以是truefalse (例如 disabled, selected, required)。...尽管目前还存在缺点,但对于普遍可共享的组件而言,它们是唯一的选择,并且在未来它们提供的令人兴奋的新功能非常值得期待【https://github.com/w3c/webcomponents/blob/gh-pages

    1.1K20

    React进阶-1】从0搭建一个完整的React项目(入门篇)

    这篇文章带领大家从零开始手动撸一个React项目的基础框架,集成React全家桶。万字长文,请各位有足够的时间再来阅读和学习。...安装完成后,我们打开命令行工具或者win10的powershell窗口,输入以下命令,如果成功输入信息,即表明Node环境安装部署成功: node -v npm -v Node环境部署成功后,...\myreactproject\ npm init 当我们进入到新建的项目文件夹的时候,通过”npm init”来初始化一个基础的项目框架,命令行中会出现有一些问答信息,这些信息是在询问我们关于初始化的这个项目的一些基础信息...配置文件,然后在文件夹中新建”webpack.config.js”文件,用于编写webpack的核心配置代码;在项目根目录新建一个”index.html”文件,是后期我们的项目打包运行的主页面,同时项目打包后自动将打包的文件添加在该文件中...首先是安装依赖模块,如下: npm install react-router-dom --save-dev 模块安装完成之后,我们在src目录下新建一个pages文件夹,然后在此文件夹下新建两个

    7.9K33

    你可能不知道的15个有用的Github功能

    在命令行中输入回车键就会在浏览器中打开授权页面,点击授权即可: ? 授权成功回到命令行,我们发现通过gh issue list指令已经拿到了issue列表: ? 我这边列举几个常用的操作。...action (动作):每个 step 可以依次执行一个多个命令(action)。...创建 React 项目 使用create-react-app初始化一个 React 应用: $ npx create-react-app github-actions-demo $ cd github-actions-demo...gh-pages(GitHub Pages 读取的分支) FOLDER:需要部署的文件在仓库中的路径,也就是我们使用 npm run build 生成的打包目录 ❝这里有一点需要注意:我使用的是 v3...团队中一般都会有公共的代码库,submodule和subtrees可以让我们在不同项目中使用这些公共的代码,避免因拷贝产生重复代码,甚至导致相同代码出现不同修改产生多个版本。

    1.1K60

    react+redux+webpack教程5

    我们的目标是要把react用起来,并且是很舒坦的用起来,所以我觉得这节并没跑题,而且很重要。 打包部署文件 我们的源代码是没法直接跑起来的。ES6语法大部分浏览器还不完全支持,有些浏览器完全不支持。...现在我们的项目目录里多出了一个名为dist的文件夹,这里面就是要部署的全部内容。...别忘了在所有的页面里都把commons.js引进去。 按需加载 当项目非常大的时候,拆分多个入口文件是一种方案,还有一种方案是按需加载,也就是懒加载异步加载。...我们可以让用户真正进入一个路由才把对应的组件加载进来,要实现这个非常简单,只需要一个webpack的loader:react-router-loader,先用npm把它安装上,然后修改src/routs.js...\\w+\\.'

    1.2K110

    梳理 6 项 webpack 的性能优化

    /src`), // 当看到@/src这个路径字符串的时候,实际上指向的是.....例如,一些位于 src/ 文件夹下的常用模块: alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates:...CND加速的原理 CDN通过将资源部署到世界各地,使得用户可以就近访问资源,加快访问速度。要接入CDN,需要把网页的静态资源上传到CDN服务上,在访问这些资源,使用CDN服务提供的URL。...如果把公共文件提取出一个文件,那么当用户访问了一个网页,加载了这个公共文件,再访问其他依赖公共文件的网页,就直接使用文件在浏览器的缓存,这样公共文件就只用被传输一次。...应用方法 把多个页面依赖的公共代码提取到common.js中,此时common.js包含基础库的代码 把多个页面依赖的公共代码提取到common.js中,此时common.js包含基础库的代码 找出依赖的基础库

    1.8K20

    前端基建规范参考

    1.1 按功能类型来划分 按文件的功能类型来分,比如 api,组件,页面,路由,hooks,store,不管是全局使用到的,还是单独页面局部使用到的,都按照功能类型放在src下面对应的目录里面统一管理...│ │ └─Kind # 分类页面公共的状态 │ ├─pages # 页面 │ │ └─Home # 首页页面...按领域模型划分 按照页面功能划分,全局会用到的组件,api等还是放到src下面全局管理,页面内部单独使用的api和组件放到对应页面文件夹里面,使用的时候不用上下查找文件,在当前页面文件夹下就能找到,...│ │ └─Home # 首页页面 │ │ └─components # Home页面组件文件夹 │ │ ├─api...# Home页面api文件夹 │ │ ├─store # Home页面状态 │ │ ├─index.tsx # Home页面 │ │ └─Kind

    26630

    hexo+github搭建博客(超级详细版,精细入微)

    如果页面变成了之前本地调试的样子,说明上传以及完成了。没变的话查看一下上传命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。...动态标题 先放上效果图再说: 离开当前页面 返回当前页面 实现方法,引入js文件,在主题文件下的/source/js/下新建FunnyTitle.js,然后在添加到themes...当站点配置文件的builtin的值为true,生成页面的功能会嵌入到**hexo g**和**hexo s**中,在进行部署生成操作,会自动生成相应的页面。...图片懒加载(缓载):延迟加载图片符合某些条件才加载某些图片。这样做的好处是减少不必要的访问数据库延迟访问数据库的次数,因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据才会创建。.../gh/jquery/jquery@3.2.1/src/core.min.js // 在末尾添加 / 以获取资源目录列表 https://cdn.jsdelivr.net/gh/jquery/jquery

    5.6K85

    基于 React 开发了一个 Markdown 文档站点生成工具

    就像 create-react-app 一样,开发者可以使用 Create React Doc 来开发、部署 markdown 站点或者博客而不用关心站点环境配置信息。...当准备发布到生产环境,执行 npm run build 就能将文档站点打包压缩。 使用 create-react-doc 非常容易上手。...开发者不需要额外安装配置 webpack 或者 Babel 等工具,它们被内置隐藏在脚手架中,因此开发者可以专心于文档的书写。...create-react-doc my-doc 一旦安装执行完毕,执行 npm install 然后进入项目文件夹: npm install && cd my-doc 在新创建的项目中, 可以执行内置的一些命令...npm run build or yarn build 将要发布的文档站点进行打包构建, 此时的文档网站已准备好进行部署

    82750

    React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

    /dist -w 如果你遇到一个错误,让拷贝 wn.js 文件,请按提示信息将 node_modules 中的 node_modules/wn-cli/dist/wn.js 文件拷贝到 modules ...API 注册小程序 创建 app.jsx 文件,这也是小程序的入口文件,可能像下面这样写 // src/app.jsx import { App } from 'wn'; // 引入所有的页面,相对路径...创建页面 创建第一个页面,在 src/pages 下面创建页面文件,如 index/index.jsx,可以这样写: // src/pages/index/index.jsx import { Page.../pages/index 文件夹下面创建同名 css 文件 index.css,不用再导入,只需要命名和同文件下的 .jsx 文件相同就可以了 /* src/pages/index/index.css.../* src/components/header/header.css */ .header { color: blue; } 使用组件 创建了组件后,在页面中使用,首先在页面中导入: import

    1.1K60

    使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)

    TypeScript 是 JavaScript 的超集,可在构建实现类型检查。 通过终端进入项目的根目录,运行 yarn add -D -W typescript。...首先,从添加新文件夹开始: src/ 文件夹,包含包的代码。...创建此文件夹后,将以下文件添加到其中: src/index.ts export const APP_TITLE = 'my-app'; 现在我们有一些要导出的代码,我们想告诉 TypeScript 从其他包中导入它在哪里寻找它..."@types/react-dom": "^17.0.2" } } 文件 要创建我们的 React 应用程序,我们将需要添加两个新文件夹: 一个 public/ 文件夹,它将保存基本 HTML 页面和我们的...首先为其创建以下文件夹: 一个 src/ 文件夹,包含我们服务器的代码。

    4.1K31

    动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)

    Next.Js 将每个页面单独打包,打开首页时会加载应用基础代码和首页代码,其它页面代码只会在打开才去加载,这对于大型应用来说非常有用。...并且 NextJS 还支持页面预加载,在链接页面可以选择是否在打开本页就预先获取被链接页面的代码,这样打开链接就不需要再发送网络请求,直接渲染!...Next.js 同时提供 SSR 技术渲染页面,在服务器上运行页面逻辑和呈现可以避免向客户端发送大量JavaScript,这有助于实现快速的交互时间 (TTI);同时利用搜索引擎(SEO)优化,搜索引擎来抓取页面的时候...        ); } 当点击 /about 链接,Next.js 会以 Ajax 的方式加载内容一次,并缓存起来,并在页面呈现它。...八、创建页面模板 一个网站,比如页面的头部、底部大部分都是一样的,因此我们需要把这些公共部分抽离出来,Next.js 可以使用React的方式进行创建。

    4.1K51

    管理用hexo写的博客的内容源码(md)

    但这样比较烦的是,要进行新建修改文章: 更新博客源码的项目,然后将源码拷贝到博客项目 在博客项目中,新建修改文章,并部署 将博客项目中的博客源码拷贝到博客源码项目 提交博客源码项目 看着都麻烦那~...具体是: 先更新blog_source分支的内容,将blog_source分支内容拷贝到master分支中对应的地方 在博客项目中,新建修改文章,并部署 将master分支的博客源码和配置拷贝到blog_source...把博客的源码和其他一些需管理的配置信息都复制到build文件夹下。grunt-contrib-copy可以实现这个功能。 build文件夹下的内容放到blog_source分支。...grunt-gh-pages可以实现这个功能。...: ['**'] } }); grunt.registerTask('bac_src', ['clean','copy','gh-pages']); 这样,每次新建修改完博客,

    65810

    webpack使用优化(react篇)

    src目录下一级的文件,除了page文件夹react的主体逻辑文件之外,其它的像img, js, css, libs,都属于各个页面都会用到的公共文件,如utils, 上报等。...page目录下,common文件夹主要旋转跟React相关的一些公共的文件,如公共的component,中间件等。而其它的文件夹就是每个页面的主体逻辑和资源,另外就是页面对应的html文件。...由于家校群采用的是React+ Redux这套方案,我们文件夹的名字也很能体现这套方案的特色。...如果你还用到React-Router,可能你还需要多加一个route的文件夹,里面用存放项目route的配置文件。...这样顺着写下来比较流畅,毕竟我们是先考虑开发,等开发完之后才会去构思生产环境的部署。这时我们可以直接用Object.assign去复制开发环境写好的配置,进行修改便是。

    1.6K60

    Github 部署个人网页 | 一键部署

    好,以上就是一个最最最简单的 Github 页面部署了。下面来聊一聊原理。...目前我的个人网站就是这么部署的:开发一个仓库,部署把产物推到另一个仓库,以另一个仓库来部署静态网页。 第三方部署工具 上面的部署脚本我也是抄了 Vue 官方提供的部署脚本。...Vue 官方是让开发者自己抄这个脚本来部署的,而 React 则可以用 react-gh-pages 这个第三方工具来部署。 第三方部署工具的好处就是可以自己不写 bash 脚本。...,在以前并不能像现在这么自如地想在哪个分支部署就哪个分支部署,只能在 gh-pages 这个特殊分支上部署。...对于需要打包的项目,部署前需要 cd 到打包后的目录,常见的有 /build /dist 目录,然后通过 git init 创建本地仓库,然后将整个目录所有东西都强推到项目分支上就好了。

    1.2K20
    领券