Building a Site with Eleventy (11ty) and DaisyUI

In this tutorial, we will go over how to quickly get started with a ready-to-use template to build a website that uses Eleventy and DaisyUI, tailored just for our website visitors.

First, we will clone the repository and install the dependencies. Then, we will go over the project structure and how to customize the template to fit your needs.

Prerequisites

Before we start, make sure you have the following installed:

Node.js Git Your IDE of choice

Step 1: Clone the Repository

To get started, clone the repository from GitHub:

git clone https://github.com/EliCarenza/Eleventy-DaisyUI-Template.git

Step 2: Install Dependencies

Next, navigate to the project directory and install the dependencies:

cd Eleventy-DaisyUI-Template
npm install

Step 3: Start the Development Server

Once the dependencies are installed, you can start the development server:

npm start

Step 4: Customize the Template

(You may need to stop the server if you don't want it refreshing constantly, otherwise you can leave it running)

Open the project in your IDE and start customizing the template to fit your needs.

The structure:

src/
|-- data/
|   `-- site.json5
|-- _includes/
|   |-- partials/
|   |   |-- footer.njk
|   |   `-- header.njk
|   |-- base.njk
|   `-- blogPost.njk
|-- assets/
|   |-- css/
|   |   |-- base.css
|   |   |-- tailwind-in.css
|   |   `-- tailwind-out.css
|   |-- images/
|   `-- js/
|       `-- theme.js
|-- blog/
|   |-- example-01.md
|   `-- example-02.md
|-- 404.njk
|-- about.njk
|-- blog.njk
|-- contact.njk
|-- eleventy.config.js
|-- package.json
|-- tailwind.config.js
`-- README.md

The _data folder contains the site data, such as the site title, description, and navigation links. You can customize this data in the site.json5 file.

The _includes folder contains the templates for the site layout and partials, such as the header and footer. You can customize these templates to fit your design.

The assets folder contains the CSS, images, and JavaScript files for the site. You can customize the CSS via base.css and JavaScript files to add your styles and functionality. Ignore tailwind-in.css and tailwind-out.css, they are used for the build process.

The blog folder contains the blog posts in Markdown format. You can add, remove, or edit the blog posts to fit your content. You want to make sure the front matter at the top of each post is correct as well.

The root folder contains the main pages of the site, such as the home page, about page, blog page, and contact page. You can customize these pages to fit your content.

The eleventy.config.js file contains the Eleventy configuration, such as the input and output directories, and the template formats. You can customize this configuration to fit your needs.

The package.json file contains the project dependencies and scripts. You can add, remove, or update the dependencies and scripts as needed.

The tailwind.config.js file contains the Tailwind CSS configuration. You can customize this configuration to fit your design.

The README.md file contains the project documentation. You can update this file to provide information about your project.

Deploying Your Site

Once you are happy with your changes, you can deploy your site to a hosting provider of your choice.

That's it! You now have a website built with Eleventy and DaisyUI. Enjoy!