Benji

screenshot of Benji
eleventy
scss

Personal website built with 11ty

Overview

Building a personal website can be a daunting task, but with the right tools and guidance, it can become a seamless experience. This website, powered by 11ty (Eleventy), offers a clean and efficient way to manage your personal web space with a focus on simplicity and speed. The structured deployment process ensures that your site is always up-to-date and functional, allowing you to focus on creating content rather than troubleshooting technical difficulties.

The production version runs on a dedicated server, while still allowing you flexibility with deployments to platforms like GitHub Pages and Netlify. The straightforward commands make both development and deployment approachable for those familiar with npm, making this an excellent option for developers at any level.

Features

  • Efficient Build Process: Simply run npm install and npm run build to compile your website quickly, streamlining your workflow.

  • Live Development: Use npm run start to monitor changes in real-time during active development, allowing for instant feedback as you build.

  • Easy Deployment: Upload the generated _site directory to your server after a successful build, or use the Netlify Deploy button for a hassle-free setup.

  • Versatile Hosting Options: Easily deploy your site to GitHub Pages or Netlify, giving you flexibility depending on your hosting preferences.

  • Example Configuration: The repository includes an .env.example file to simplify environment variable management, ensuring a smooth setup process for newcomers.

  • Community Focused: Built with IndieWeb principles, encouraging users to take control of their online presence in a decentralized manner.

  • Responsive Design: Crafted to provide a user-friendly experience, ensuring your website looks great on any device.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.