If you’re looking to create a static site with a powerful combination of a static site generator and a CSS framework, look no further! With 11straps, which combines **[11ty](https://www.11ty.dev)** and **[Bootstrap 5](https://getbootstrap.com)**, you can effortlessly bring your website ideas to life. This guide will walk you through the installation, building, and running of your new site.

What is 11straps?

Think of 11straps as your trusty toolkit for web development. Just like a chef combines various ingredients to create a delectable dish, 11straps mixes the static site generator 11ty with the CSS framework Bootstrap 5. All this is blended with some npm and Gulp magic dust, which helps in minifying and purging CSS files, and setting up a static server with browser sync support for smooth local development.

For a taste of what 11straps can create, you can visit the live demo.

Requirements

Before you dive in, make sure you have Node (at least v8+) on your computer. To check if you have Node and what version, simply run the following command in your terminal:

node --version

Installation

Ready to set it all up? Here’s how:

• Download and extract the latest release or checkout the main branch of the repository.
• Open up your terminal, navigate to the new folder, and run:

npm install

• And just like that, you’re good to go!

Building for Development

To build your static website for local development, run the following command:

npm run build-dev

This builds the static website into the dev folder without all the minifying and purging stuff. It’s faster and generates more human-friendly code, albeit a bigger package.

Running in Development Mode

Want to see changes in real-time? To run the build-dev task automatically on file changes, execute:

npm run watch

This initiates a local server from the dev folder and connects browser sync to it. It will automatically run the build-dev command on changes in your src folder and refresh your browser.

Building for Production

Once you’re satisfied with your development, it’s time to deploy your masterpiece into the wild. To build your static website for production deployment, run:

npm run build

This command outputs the full site, with purged and minified CSS and HTML. The final product will be stored in the public folder, ready to go live!

Troubleshooting

If you encounter any issues throughout the process, here are some troubleshooting tips:

• Ensure you have Node installed, and it meets the minimum version required.
• Check your terminal for any error messages during installation. They can offer clues on what went wrong.
• Make sure you are in the correct directory of your project folder when running commands.
• If you’re experiencing browser sync issues, verify your browser settings or try a different browser.

For more insights, updates, or to collaborate on AI development projects, stay connected with **[fxis.ai](https://fxis.ai/edu)**.

An Analogy for Clarity

Think of the building process with 11straps like constructing a house:

• Installation: This is akin to laying the foundation of your house. You gather the necessary materials (Node.js and the project files) and set everything up.
• Building for Development: Here, you create a skeleton for your house. It’s a temporary structure that’s not painted or furnished, allowing you to see where everything will go.
• Running in Development Mode: In this phase, you’re simulating daily living in your home with an open house. You adjust as needed, keeping everything in view.
• Building for Production: This is when you finalize everything. You paint, furnish, and decorate your house to make it ready for visitors.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.