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

Question

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

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

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

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

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

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

Answer 1

I'm not sure there's a simple way to do it; I once asked the same question on a Jekyll forum and no one knew the answer.

I think the difficulty is in the folder structure, as foo.com/bar has the underlying structure bar/index.htm in Eleventy (when what you want for an offline site is bar.htm).

When I was looking into this, Hexo seemed to be the only generator with an offline capability.

Answer 2

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

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"
    };

}