11ty-Netlify-Jumpstart 项目教程

11ty-Netlify-Jumpstart 项目教程

11ty-netlify-jumpstartQuickly launch an 11ty-generated static site. Includes a minimal Sass framework, generated sitemap, and RSS feed.项目地址:https://gitcode.com/gh_mirrors/11/11ty-netlify-jumpstart

1. 项目的目录结构及介绍

11ty-netlify-jumpstart/
├── _data/
│   └── site.js
├── _includes/
│   ├── layouts/
│   │   └── base.njk
│   └── partials/
│       └── footer.njk
├── src/
│   ├── _assets/
│   │   └── css/
│   │       └── main.scss
│   ├── _includes/
│   │   └── head.njk
│   ├── index.njk
│   └── about/
│       └── index.njk
├── .eleventy.js
├── .gitignore
├── netlify.toml
├── package.json
└── README.md

• _data/：存放全局数据文件，如 site.js 包含站点配置信息。
• _includes/：存放模板文件，包括布局文件和部分文件。
• src/：项目的源代码目录，包含页面模板和资源文件。
• .eleventy.js：Eleventy 配置文件。
• netlify.toml：Netlify 配置文件。
• package.json：项目依赖和脚本配置。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本部分。通常包含以下命令：

"scripts": {
  "start": "eleventy --serve",
  "build": "eleventy"
}

• start：启动开发服务器。
• build：构建生产环境代码。

3. 项目的配置文件介绍

.eleventy.js

Eleventy 的配置文件，定义了项目的构建规则和插件配置：

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/_assets/css");
  return {
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data"
    },
    passthroughFileCopy: true
  };
};

netlify.toml

Netlify 的配置文件，定义了部署和构建的设置：

[build]
  command = "npm run build"
  publish = "_site"

• command：构建命令。
• publish：发布目录。

通过以上配置，项目可以在本地开发和部署到 Netlify 上。

11ty-netlify-jumpstartQuickly launch an 11ty-generated static site. Includes a minimal Sass framework, generated sitemap, and RSS feed.项目地址:https://gitcode.com/gh_mirrors/11/11ty-netlify-jumpstart