next 生成的静态页面放在 GitHub Pages 上访问不到资源

最新推荐文章于 2024-08-27 09:35:08 发布
最新推荐文章于 2024-08-27 09:35:08 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45209973/article/details/107871556
版权

稍微记一记，刚学了点 nextjs 就急着写个人博客，结果······被这个坑折磨了一下午，我自己肯定是不会忘记了，如果能被关键字检索到这里，帮到别人，也挺好 😜

next 生成静态页面

使用下面命令导出静态页面

	npm run build && next export

如果没有特别配置，导出的文件目录是 out，这个 out 还不要紧，主要是 _next 目录，GitHub Pages 默认会忽略以下划线开头的文件夹，不会读取里面的资源

.nojekyll

（大一点，醒目😁）

在资源文件夹中添加 .nojekyll文件就行了，就添加这个空文件，GitHub Pages 就能读取 _next文件夹中的资源了

使用 GitHub Actions 构建、部署 Next.js 并将其托管到 GitHub Pages
didilinkin的博客
04-20 807
是 GitHub 的持续集成服务是 GitHub的静态站点托管服务Next.js是 基于 React构建 服务端渲染 (SSR)应用的框架。
如何将 github pages 迁移到 vercel 上托管
itclanCoder
01-06 1030
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）前言早期...
nextjs-githubpages:使用GitHub Actions将静态Next.js Web应用程序部署到GitHub Pages的模板
05-17
nextjs-githubpages 使用部署到的静态 Web应用程序的模板。 该回购的结果可以在上看到 开始吧 安装和 （可选） 单击此页面顶部的绿色“使用此模板”按钮，然后按照说明进行操作。 这将创建此仓库的副本。 您可以阅读有关使用模板的更多信息。 在GitHub上打开您的新仓库。 克隆回购。 git clone [your repository URL] 安装依赖项。 yarn # or npm i 启动本地服务器。 yarn dev # or npm run dev 打开验证一切正常。 现在您应该已经准备就绪。 通过编辑/pages/index.js开始构建自己的Web应用程序。 我可以帮忙吗？ 是的！ 以下是一些建议： pages/index.js图像URL使用已部署的应用程序的基本URL /nextjs-githubpages-example/进行了硬编
【开发工具】解决GitHub Pages制作的个人博客无法访问的问题
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
01-21 6611
一、前言 最近一段时间应该有很多小伙伴发现自己辛苦做的个人博客无法访问了吧。 比如这样： 二、问题原因 经常访问github 的小伙伴都知道，这个通常是域名解析的问题，DNS解析 然后我就ping了一下这个地址： 发现DNS都被解析为127.0.0.1，怪不得无法访问呢，具体原因咱不知道，但是解决方案就很简单了 三、解决方案 去https://www.ipaddress.com/输入764424567.github.com查询到真实IP地址 随便选一个地址，我通常选最上面的，然后修改host文件： W
记录一次next.js 生产环境无法访问静态资源的问题
hahhahaxixixi的博客
08-22 795
上面底部说的是,如果你想引入前缀,你必须在使用静态资源时手动加入前缀。后来经过发现他在2个文件夹下的cache的文件不一样,一个有。我在配置文件中,配置了他打包后的文件夹名称。后来找了很多文章都没有相关的解决方案。我后来仔细阅读了官方文档。
GitHub 部署静态网站（js 和 css 文件资源显示404）
qq_43651168的博客
06-27 2444
GitHub 部署静态网站（js 和 css 文件资源显示404）。GitHub 部署 vue 打包的静态文件，
actions-gh-pages:GitHub页面的GitHub操作:rocket:部署静态文件并轻松发布您的网站。 静态站点生成器友好
04-28
这是一个GitHub Action，用于将静态文件部署到GitHub Pages 。 该部署操作可以与简单，自由地组合在一起。 （Hugo，MkDocs，Gatsby，mdBook，Next，Nuxt等。） 下一示例步骤将./public目录部署到远程gh-pages分支...
GitHub Actions自动化部署Next.js应用到GitHub Pages教程
资源摘要信息:"nextjs-githubpages是一个使用GitHub Actions自动化工具将静态Next.js Web应用程序部署到GitHub Pages的模板。Next.js是一个流行的React框架，用于构建服务器端渲染和静态网站。GitHub Pages是一个...
搭建基于Hexo和Next的个人博客并部署至Github Pages
后端则是由Hexo生成的静态文件，这些文件在服务器上不需要额外的运行环境就可以直接提供服务。 - 此外，整个开发部署流程涉及到了版本控制工具Git和GitHub平台的使用，这些都是现代Web开发中不可或缺的技能。 6. ...
Next.js GitHub Pages 项目教程
最新发布
gitblog_01085的博客
08-27 666
Next.js GitHub Pages 项目教程 nextjs-github-pages???? Deploy a Next.js app to Github Pages via Github Actions.项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-github-pages 1. 项目的目录结构及介绍 gregrickaby/nextjs-gith...
nextjs 导出静态资源文件报错
pgLi
10-21 3239
问题：使用next export编译导出静态资源文件后，本体打开html文件一直抱静态资源找不到的错误 原因：资源路径都是/static/的绝对路径 解决方案：放到本地服务或者增加assetPrefix前缀（绝对路径前缀） ...
github pages部署显示资源引用显示404
Liubingzhe
01-12 2094
github pages部署静态页面 引用仓库静态资源 不要写根目录 要写绝对路径 比如正确写法 否则会404
解決 Next.js&Nextra 在 GitHub Pages 部署時出現的 ‘TypeError: error must be an instance of Error‘ 錯誤
JTnnnnn的博客
05-16 671
這issue十分空泛，或許對某些人有幫助。
next项目部署到GitHub模板
kart jim的CSDN博客
11-18 669
使用github action 将next项目部署到GitHub pages的模板
Next.js读取本地文件
weixin_44428467的博客
05-26 1566
next.js使用本地图片，需要放在public的文件夹下，并且路径直接以 ‘/’开头。例如图片放在public文件夹写的imgs的文件夹中，则 使用网络图片则直接是src直接写的是网络路径。
GitHub上传静态网站
前端踩坑之路
04-01 884
一、准备工作 第一步：建立git仓库 cd到你的本地项目根目录下，执行git命令 　　git init 第二步：将项目的所有文件添加到仓库中 　　git add . 如果想添加某个特定的文件，只需把.换成特定的文件名即可 第三步：将add的文件commit到仓库 　　git commit -m “注释语句” 　　 　　第四步：打开登录并github账号，新建Repositor
前端框架 Nextjs React 部署
热门推荐
qq_50909707的博客
01-05 1万+
Nextjs React 打包 部署 踩坑总结
next.js导出静态文件
galoiszhou的博客
06-06 1318
你不能同时对使用服务器端渲染 (SSR) 的页面进行静态导出 (Static Export)。但是，你可以在同一个应用中混合使用静态生成和服务器端渲染。通过选择适合的渲染策略，可以在保持性能和灵活性的同时，满足不同页面的需求。
解决GitHub Pages自有域名二级目录无法访问问题
深山老猿
10-10 4453
通常新建个项目，通过GitHub上创建gh-pages分支可以访问项目主页。然而我访问usename.github.io/repo,或者自定义域名 yoursite.com/repo ，跳转到了 404 页面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值