问题标签 [static-site-generation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 我如何在 Node.js Web 服务器上根据请求生成 SPA 构建(例如,根据用户“发布”请求)并将构建文件上传到 S3?
我正在尝试搭建和生成单页应用程序(可能使用 React.js、Vue.js 或更好的 Next.js/Nuxt.js)
在收到“发布” POST HTTP 请求后,在 Node.js 服务器上为用户动态/编程,
让服务器直接或通过环境变量修改源文件
然后让同一台服务器从它刚刚创建的源文件生成一个构建
并将它们上传到静态站点托管服务,如 S3。
以编程方式为 Node.js Web 应用程序上的每个用户生成静态站点(Nuxt.js 或 Next.js 构建)并将其上传到 AWS S3 的最理想和最有效的方法是什么?
可能我应该阅读的任何文章/文档/服务都可以帮助我想到一种方法或解决方案。
例如:对于每个注册允许上传徽标、选择颜色并通过请求将此数据发送到 Node.js 后端的用户。然后让服务器利用徽标图像和颜色生成单页应用程序构建并将其上传到 S3。因此,如果有 5 个用户,每个用户都应该有一个托管在 S3 上的 SPA 静态站点。
我不确定我是否应该让 Node.js 服务器从服务器上的一些样板 React.js/Vue.js 源文件生成构建,然后将构建的内容(捆绑)文件上传到 S3 以进行静态 -站点托管,然后在将构建文件上传到 S3 后删除它。这种方法对我来说似乎很昂贵。
reactjs - Next.js,在按钮单击时发出 POST 请求(SSG)
我正在做一个 ssg 网站,它没有后端,但它确实开始具有一些从另一台服务器获取一些数据的功能。我检查了 SWR 并且它工作正常,问题是我需要在按钮单击时发出发布请求,它给我一个错误:
我看到的是我可以创建一个函数组件,在其中设置一个调用,然后在单击按钮时安装这个组件,它可以工作,但我对这种方法有疑问。这可能是为了处理获取请求,但我发了一个帖子。
ExportComponent 在页面或另一个组件中呈现。
这是错的吗?有没有更好的办法?
next.js - 如何在不使用 +150k 静态页面重建应用的情况下添加新页面?
我有一个 MERN 应用程序,其中集成了 NextJS。第一次使用 NextJS,所以请多多包涵。我最初在任何地方都使用过 SSR ( getServerSideProps
)。
关键点:
- 我有超过 150,000 个静态内容的页面,这些内容永远不会改变。
- 每周我都会添加大约 100 个新页面。
我想这里的理想情况是使用getStaticProps
andgetStaticPaths
并且在初始构建这 150k 页面之后,只需每周构建新添加的页面并保持我已经构建的内容不变,因为它永远不会改变。
我怎样才能做到这一点?我应该在这里使用revalidate
吗?我一直在文档中阅读它,但我并不完全理解它。
web - Hugo 中的两级菜单
我想使用 Hugo 创建一个具有深层菜单的网站。我希望能够使子项成为新的较低级别项的父项。我尝试使用本网站的教程。 https://codingnconcepts.com/hugo/nested-menu-hugo/
我能够创建一级子菜单,但我想要一个可以继续自动创建子页面的逻辑系统。
上面的这个示例创建了一个子菜单,但我不知道如何使两个级别起作用。
vue.js - 网站的一部分可以是静态网站生成的,而另一部分是传统的水疗中心吗?
所以,我在 Nuxt 建立了一个网站并使用了 ssg。这很棒,但对于另一个网站,90% 的内容都是静态文本和图像,但我想要一个客户登录门户,他们可以在其中查看其产品的状态。以我的理解,我不明白这怎么可能是 ssg 。那么可以两者兼得吗?
gitlab - 哪个静态站点生成器具有最完整的 GitLab Flavored Markdown 支持?
我想创建一个静态站点,它将存储用 GitLab Flavored Markdown 编写的文档。哪个静态站点生成器具有最完整的 GitLab Flavored Markdown 支持?
javascript - getStaticProps 的 "notFound" 属性对页面 http 状态码没有影响
我刚刚安装了一个新的 Next.js 应用程序。它有以下页面:
当浏览器导航到一个不存在的页面(例如 http://localhost:3000/articles/d)时,它会返回默认的 nextjs 404 页面,正如预期的那样。
但是浏览器网络选项卡显示主文档的状态 200(404 错误页面)。网络选项卡中状态为 404 的唯一内容是 d.json 和 404.js。
我认为主文件也应该有 404 状态。getStaticProps文档说明了返回值:
- notFound - 允许页面返回 404 状态和页面的可选布尔值
但是在这种情况下,页面状态是 200 而不是 404。返回状态 404 是否还需要做其他事情?
如果没有回退,状态为 404。
javascript - 如何在 vuex 商店中存储 nuxtjs 动态生成的路由
我试图通过创建一个静态网站来利用 nuxtjs SSG 功能,其中页面内容和导航是从 API 获取的。
我已经找到了如何通过定义一个模块来动态生成路由的方法,在该模块中我使用generate:before
钩子来获取页面内容和路由。创建路由时,我将页面内容存储为路由有效负载。下面的代码就是这样做的,并按预期工作。
现在我面临的问题是我有一些导航组件需要生成的路线,我正在考虑将它们存储到 vuex 商店中。
我尝试了generate:done
钩子,但我不知道如何从那里获取 vuex 存储上下文。我最终使用的是nuxtServerInit()
动作,因为如文档中所述:
这正是我所需要的,所以我尝试将它与以下代码一起使用:
确实调用了该操作,并且我得到了所有预期值,但是似乎每次调用nuxtServerInit()
存储状态都会重置。我在控制台中打印了这些值(因为我不确定是否可以调试它),这就是它们的样子:
我已经在这个主题上搜索了所有我能找到的东西,尽管我没有找到与我相似的例子,但我把所有我能找到的部分放在一起,这就是我想出的。
我的想法是只向 API 发出一个请求(在构建期间),将所有内容存储在 vuex 中,然后在组件和页面中使用该数据。
要么有办法做得更好,要么我没有完全掌握这个nuxtServerInit()
动作。我被卡住了,不知道如何解决这个问题,也看不到其他解决方案。
如果你能做到这一点,谢谢你的时间!
eleventy - 如何从 Eleventy 网站删除页面?
我想删除我在 Eleventy 生成的网站中创建的页面,我们称之为a-post.md
。而且我不知道什么是正确的方法。
我只是删除了“源”页面,果然,它从网站上消失了。但是,它在_site
目录中生成的文件仍然存在。我应该用手“清理”这些东西还是我做错了什么?
我知道这类东西不应该成为 Stackoverflow 上的问题——但作为 Eleventy(和静态网站生成器)世界的新手,我对缺乏对新手友好的文档感到困惑。还有很多关于如何创建和自定义页面的文章和帖子,但没有关于如何正确处理它们。
node.js - Gatsby 3 – `gatsby build` 在“为页面构建静态 HTML”时失败,并出现错误“WebpackError: ReferenceError: ... is not defined”(firebase/app)
运行时gatsby build
,该过程在 Gatsby v3 上失败。
一些上下文... firebase 模块包含在自定义挂钩中(显示此代码的代码如下)。
在 gatsby-node 中有一个自定义的 webpack 配置函数,它使用 webpack 外部特性在构建阶段延迟加载这个模块,直到用户浏览器中的运行时(代码也在下面)。
我已将所有相关软件包更新到当前版本,并且没有相关的依赖错误或过时的软件包。
如果需要任何其他上下文,请告诉我,更多信息和示例如下。
gatsby build
产生以下错误:
我已经修复了一个先前的错误,即自 gatsby 2 更新到 gatsby 3 以来自定义 webpack 外部函数被错误调用。
gatsby-node 中配置 webpack 外部的代码可能直接相关,目前看起来像这样:
由于这似乎也与 firebase 模块直接相关,因此下面是我的自定义 useFirebase 钩子中的导入行(这之前取自另一个堆栈溢出线程或 github 问题,并在 gatsby 2.
来自 package.json 的相关模块版本和分辨率(我认为这就是全部):
如果有人对这个问题有任何经验或想法,我将不胜感激,谢谢!
更新 我尝试用以下替代代码替换 onCreateWebpackConfig:
它摆脱了旧错误并产生以下错误:
但是,我不确定这是否比上次尝试更进一步......