如何设置 Eleventy (11ty) 将工作静态站点输出到 _site 文件夹？答案

【问题标题】：How can I set Eleventy (11ty) to output a working static site to _site folder?如何设置 Eleventy (11ty) 将工作静态站点输出到 _site 文件夹？
【发布时间】：2020-12-18 04:25:15
【问题描述】：

在过去的几年里，我一直在使用 Hexo.io 来生成我的静态网站。当我运行“hexo g”时，它会输出一个静态站点，我可以在没有服务器的情况下在本地打开。这就是我想让 11ty 做的事情。

将我的网站转换为 11ty 后，它在我使用本地开发服务器时运行良好。但是当我打开 _site > index.html 时，它无法正确呈现。所有的样式、js和图片都丢失了，因为它们都以“/”开头。

我觉得我错过了一些明显的东西。必须有一种方法可以设置 11ty 以输出一个正常工作的静态站点。

我一直在研究 11ty 文档并在线查看是否有其他人有此问题。大多数情况下，我看到人们想要部署到子目录或使用 Netlify 之类的东西。我宁愿避免这种情况。

我尝试使用一个使用 pathPrefix 输出相对路径的 URL 过滤器。但似乎没有删除“/”的路径前缀。

任何建议将不胜感激。谢谢。

【问题讨论】：

请检查任何现有的十一模板，因为它有效。至于设置，有一种简单的方法来配置目录。使用 11ty，您可以微调所有内容，但这会花费您时间。如果您不关心 HEXO 强加给您的目录和本地资产文件夹结构，那么我会选择 HEXO。 HUGO 也很棒，如果您采用现有主题之一...

标签： eleventy

【解决方案1】：

确保您正确配置 11ty。然后还要记住，您需要为 assets 设置 pass-through 副本。

module.exports = function (eleventyConfig) {
    
    // NOTE: unlike in hugo, not the content of the assets folder, but the asset folder itself (with it's subfolders) will be copied...
    eleventyConfig.addPassthroughCopy("src/assets/**/!(*.scss)");

    eleventyConfig.addLayoutAlias('default', 'base.njk')

    eleventyConfig.setFrontMatterParsingOptions({ excerpt: true, excerpt_separator: '---' });

    return {

        passthroughFileCopy: true,

        dataTemplateEngine: 'njk',
        htmlTemplateEngine: "njk", 
        markdownTemplateEngine: "njk",

        templateFormats: [
            "html",
            "njk",
            "ejs",
            "md"
        ],

        dir: {
            input: "src",
            output: "_site",
            includes: "includes",
            layouts: "includes/layouts",
            data: "data",
        },

        pathPrefix: "/abc"
    };

}

【讨论】：

没有问题。我没有意识到我可以不加修改地上传 _site 文件夹的内容。一切正常。

【解决方案2】：

我不确定是否有简单的方法可以做到；我曾经在 Jekyll 论坛上问过同样的问题，但没有人知道答案。

我认为困难在于文件夹结构，因为 foo.com/bar 在 Eleventy 中具有底层结构 bar/index.htm（当您想要的离线站点是 bar.htm 时）。

当我研究这个时，Hexo 似乎是唯一具有离线功能的生成器。

【讨论】：

谢谢。我确实计划将网站上传到 Github Pages。但是，我想将源文件和生产静态文件分开。这是我使用 Hexo 的方式。