问题标签 [static-site-generation]

我正在使用 React、Redux 和 Firebase 构建 Next.js 应用程序。

我的应用程序状态分为两种。一个是全局的（应该进入 Redux 存储），另一个是每个特定页面的本地。

我将预渲染页面（它们需要数据），因此我要getStaticProps为每个页面添加一个函数。但任何页面要正确呈现，它还需要“全局”状态。

在每个页面getStaticProps函数中构建和添加全局状态将是非常重复的。我想在一个地方做这件事，并确保 Next.js 会将该全局状态添加到每个页面渲染中。

https://nextjs.org/docs/advanced-features/custom-app

从上面的链接看来，做它的地方是在自定义_app.tsx文件中：

这是示例代码：

从上面的评论看来，如果我使用它getInitialProps，_app.tsx它将禁用执行自动静态优化的能力，从而导致您的应用程序中的每个页面都在服务器端呈现。

而且我不希望我的应用程序完全在服务器端呈现。我希望它使用带有重新验证选项（增量静态再生）的静态侧生成。

这样做的正确方法是什么？

我正在处理以下代码：

这是一个 blogPost 动态页面：/post/[slug].tsx

这是我得到的错误：

似乎该GetStaticProps类型是通用的，可以为我的类型定制。

我创建了这两种类型来尝试自定义GetStaticProps类型：

这是我正在尝试的：

但它仍然认为这params可能是未定义的。我应该处理它吗？从上面的代码来看，它似乎params是未定义的吗？我没想到。

我正在尝试为经过处理的图像指定一个输出目录eleventy-img。

但是当我运行时我得到的是这个错误消息npx eleventy

如果没有outputDir指定选项，它可以正常工作。这是它的文档：https ://www.11ty.dev/docs/plugins/image/#output-directory

没有使用它的实际示例，但从逻辑上讲，它应该以与widths参数相同的方式传递。

在5 分钟内创建 AWS S3 网站 YT 视频并在 Amazon S3 Pulumi 上托管静态网站教程中有很好的解释如何使用 Pulumi 在 S3 上创建网站托管。

在示例代码中使用了 Pulumi 的Bucket和BucketObject。第一个创建一个 S3 存储桶，后者创建对象，这些对象主要index.html用于公共访问，如下所示：

现在使用基于 Vue.js / Nuxt.js 的应用程序，我需要上传多个生成的文件，这些文件位于dist我的项目根目录中。它们由 a 生成npm run build并生成以下文件：

我的问题是这些文件还包含嵌套在子目录中的文件，这些文件本身也可能是子目录 - 例如dist/_nuxt/fonts/element-icons.4520188.ttf. 教程中提供的方法不评估子目录，我不知道如何使用 Pulumi/TypeScript 做到这一点。

我们在下一个导出模式（静态 HTML 导出）中使用 Next.Js，我们需要高级动态路由。

我们的路线看起来像/[config1]/[config2]/[optionalConfig?]/page，其中一个段是可选的，并且页面名称是固定的。例如a/b/c/page1或a1/b1/page2。页面需要配置段数据来呈现。

我还没有找到使用内置路由的任何方法。我可以/pages/[config1]/[config2]/page1.tsx，但那个可选部分似乎是个问题。请注意，自定义服务器似乎不是一个选项，因为由于其他限制，我们必须使用下一个导出模式。

注意：我们不知道构建时的路径；它们代表了我们运行时配置的一部分。这必须使用客户端路由。（我们确实知道有限的页面集 - 例如 page1 ... page10 - 但到这些页面的路径会有所不同。）

我尝试切换到 React Router，设置useFileSystemPublicRoutes: false和添加路由到pages/_app.tsx（自定义应用程序）。这几乎可以工作，但我在控制台中看到许多 404on-demand-entries-utils.js以及一些“检测到可能的 EventEmitter 内存泄漏”警告（在开发模式下）。

有效的解决方案（必须 100% 在客户端工作）：

• 使用内置路由的方法
• 将 React Router 与 Next.Js 集成的示例
• 替代库（我查看了下一条路线，但 3 年内没有更新）

更新

我们也许能够消除可选段的要求。但是，似乎我们必须实现getStaticPaths并指定所有路由。例如：

页面/[配置]/foo.tsx

这将产生

问题是我们在构建时不知道配置。

我们需要动态的客户端路由。我们希望继续使用 Next.js，因为最终我们可能能够使用 SSR，但目前这不是一个选项。

我不确定我是否做错了什么。这就是我所做的一切，我按照文档进行安装。我预先安装了 git 和 nodejs，安装 hexo cli 我运行了这个， sudo npm install -g hexo-cli 然后我通过运行检查是否安装了 hexo hexo -v，它显示了版本和所有内容，这就是它显示的内容。

然后继续使用此命令创建一个名为 hexosite 的新文件夹， hexo init hexosite它创建了文件夹和所有内容。所以为了看看是否一切正常，我跑了 hexo server。并想出了这个错误，我没有在任何地方改变任何东西。这是错误信息。

我没有使用 hexo 的经验，这是我第一次决定使用它。我阅读了他们关于故障排除的文档，但没有找到任何关于此的内容。

如果您对此有任何了解，请随时回答，在此先感谢您！

我正在尝试使用构建一个博客，lektor CMS为此..我需要一个标签系统，在搜索后我在 lektor docs上找到了一个名为lektor 的插件lektor-tags

我遵循文档的每一步，费了很大力气，甚至访问了 github repo以查看文档中是否还有其他内容。

我的问题是当我尝试访问时localhost:5000/{the_tag_name}说就像localhost:5000/python我总是404 Not Found说

在服务器上找不到请求的 URL。如果您手动输入了 URL，请检查您的拼写并重试。

这是我到目前为止所做的：

使用前lektor-tags：

1. 我将博客帖子的路线更改为/posts而不是/blog.

2. models/blog.ini向in添加了 slug 格式[children]

3. 创建了 3 个帖子，一切正常。

此时我想使用标签系统，所以我选择使用lektor-tags，我所做的是：

1. 安装

2. configs/tags.ini使用此配置创建：

3. templates/tags.html使用以下内容创建：

4. 编辑models/blog-post.ini并添加：

5. 在templates/blog-post.html我添加以下内容以显示指向包含具有特定标签的所有帖子列表的页面的链接：

6. 最后我更新了一个帖子以包含来自管理员的一些标签，并确保它在content.lr那个帖子中。所以我停止了 lektor 开发服务器并再次运行它lektor servor，没有出现任何错误。

标签的链接在帖子中，但是当我单击并点击链接时，例如localhost:5000/python我得到的 python 标签404 Not Found。我是 lektor 的新手。我想知道我做错了什么，我怎样才能让它正常工作？

注意：我使用的其他插件是lektor-minify，lektor-disqus-comments这些插件的文档很简单，我没有感到困惑，但是当谈到这个特定的插件时，我感到困惑，挣扎：文档不是那么好和解释，我完全迷失了！

更新

我创建了一个github 存储库，其中包含代码以及到目前为止我所做的事情，因此您可以轻松地复制它。

更新 2

我设法使它正常工作，请参阅下面的答案，但是现在我想知道如何将根设置为父级，换句话说，如何编辑此表达式：

为每个博客文章的标签生成一个源路径，但使用 root 作为父级。如您所见，我尝试了这个：

但这不能正常工作。

值得一提的是，lektor 使用jinja2模板语言。

我正在设置一个项目以使用 Jigsaw 静态站点生成器，但我想用 Bootstrap 5 框架替换 Tailwindcss。我知道如何在 index.blade.php 中链接到 Bootstrap 和 popper 的 CDN，但我宁愿只拉入 Bootstrap sass 文件并编译它们，然后在构建之前运行 PurgeCSS。

这是一个链接到原始 Jigsaw 存储库，它引入了 TailwindCss。https://github.com/tighten/jigsaw-docs-template.git ,

这是我为这个项目分叉的回购协议，但我无法让它们一起玩（不断收到错误消息）。任何帮助将不胜感激。 https://github.com/JackieGable/jigsaw-dummy.git

在 Eleventy 的文档 ( https://www.11ty.dev/docs/data-global-custom/ ) 中，它声明您可以使用以下选项作为添加自定义全局数据的一种选择：

当尝试在.eleventy.js项目配置文件中使用它时，它会失败并显示：

但是，可以在eleventyConfig使用时定义自定义集合，eleventyConfig.addCollection而不会出现任何问题。

这里有什么问题？

我有一个 CRA，并希望静态生成第一页以改善加载时间和 SEO。这个想法是运行一个 NodeJS 脚本，在 index.html 中呈现 App 文档。

这是我的代码：

但是，我在使用 NodeJS 运行它时遇到问题：

显然，我必须构建源代码，但我不知道该怎么做。我正在使用 CRA 来构建我的 React 文件（实际上，我正在使用 react-app-rewired，所以如果我只知道如何去做，我就可以自定义构建过程）。

我应该怎么做才能让它工作？