The Shifter Headless 11ty Starter Template is a starting point for building headless WordPress websites using 11ty and Shifter. It offers a solid foundation for creating fast, scalable, and SEO-friendly websites with a decoupled frontend and WordPress as a headless CMS.
Key Features:
- Built with 11ty: A static site generator that transforms templates into HTML, CSS, and JavaScript.
- Headless WordPress: Utilize WordPress as a headless CMS to manage content.
- Shifter: Seamless integration with Shifter, a serverless WordPress hosting and deployment platform.
- Scalable architecture: Easily scale your website as your content grows and traffic increases.
These features provide a solid foundation for building headless WordPress websites using 11ty and Shifter. The template allows you to create fast, scalable, and SEO-friendly websites with a decoupled frontend and WordPress as the content management system.
- Clone this repository:
git clone https://github.com/getshifter/shifter-headless-11ty-tailwind.git site
- Change into the working directory:
cd site
- Install dependencies:
npm install
- Start local development server:
npm run serve
This command watches for changes and serves the site locally on http://localhost:8080.
- Create a production build:
npm run build
The top navigation is the main feature of this starter template and can be found in /src/_includes/components/navigation.njk.
To add links to the navigation, add the eleventyNavigation object to any page with the desired order:
---
eleventyNavigation:
key: Your Page Name
order: 1
---The navigation bar will automatically include the pages specified in the eleventyNavigation object. The active state will be highlighted based on the currently opened URL, even for subpages.
To change the styles of the navigation items, modify the code in /_includes/components/navigation.njk.
To add a blog post, create a new file in _src/blog/posts. The post will automatically appear in the post list.
Place your images in _src/img and reference them in your markup like this:
<img src="/img/example-image.jpg">