11ty-landing-page - GitLite

KO | EN

gitlite — search

#hacktoberfest #go #machine-learning #deep-learning #linux #docker #macos #windows #awesome-list #vue #security #pytorch #mcp #open-source

11ty-landing-page

(★ 167)

A simple landing page built with 11ty and Tailwind CSS.

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- - normalize.min.css
  - page.css
- - github.svg
  - logo.svg
  - undraw_asset_selection_ix3v.svg
  - undraw_Friends_online_re_r7pq.svg
- - index.html
- - index.html
- index.html
- robots.txt
- - env.js
  - features.json
  - site.json
- - footer.njk
  - head.njk
  - js.njk
  - navbar.njk
  - section.about.njk
  - section.features.njk
  - section.header.njk
  - section.register.njk
- - base.njk
  - page.njk
- - page.11ty.js
- - about.md
  - features.md
  - register.md
  - sections.json
- - robots.txt
- imprint.md
- index.njk
- privacy.md
.gitignore
.nvmrc
eleventy.config.js
LICENSE
package-lock.json
package.json
README.md
tailwind.config.cjs

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 11ty-landing-page

A simple landing page built with 11ty and Tailwind CSS.

**Other versions**

- [Astro](https://github.com/ttntm/astro-landing-page)
- [Hugo](https://github.com/ttntm/hugo-landing-page)

## How to use this template

**Requirements:**

1. Eleventy (developed and tested with version 0.12.1)
2. Tailwind CSS

All other dependencies are either linked from a CDN or included in this repository.

**Setup:**

1. Fork, clone or download
2. `cd` into the root folder
3. run `npm install`
4. run `npm run serve`
5. open a browser and go to `http://localhost:8080`

**Basic configuration:**

1. Eleventy -> `./.eleventy.js`
2. Tailwind -> `./tailwind.config.js`
3. Netlify -> `./netlify.toml`

CSS is built via PostCSS and based on `./src/_includes/css/_page.css`. Building CSS gets triggered by `./src/css/page.11ty.js` and Tailwind's config is set to JIT (see: [Tailwind docs](https://tailwindcss.com/docs/just-in-time-mode))

Please note that this CSS build _does not_ include the `normalize.css` file used for the 2 regular pages (imprint, privacy) - a minified production version is stored in `./src/static/css` and gets included in the build by default.

**Change Content:**

Page content is stored in

- `./src/`
  - `imprint.md`
  - `privacy.md`
- `./src/sections/`
- `./src/_data/features.json`

**Change Templates/Layout:**

Page structure and templates are stored in `./src/_layouts/` and can be edited there.

Best have a look at `./layouts/base.njk` first to understand how it all comes together - the page itself is constructed from partial templates stored in `./src/includes/` and each section has a corresponding template file (`section.**.njk`) stored there.

`index.njk` in `./src/` arranges everything, meaning that sections can be added/re-ordered/removed/... there.

**Change images:**

Images are stored in `./static/img/`; everything in there can be considered a placeholder that should eventually be replaced with your actual production images.