The Bytes of Good landing site 📣

The bare-bones, Pug-driven landing page for the incredible Bytes of Good org ✨

🚀 Visit the live site

Tech stack

This project uses Eleventy for development and production builds. If you've ever used Jekyll (maybe for building sites on GitHub pages), this is super similar! The only real difference is using JavaScript packages for all our plugins instead of Ruby. This makes setup a lot simpler across devices from our experience.

For the pages themselves, we use a combination of Pug / Jade templates and Scss for our styles. No, we don't use bootstrap or any other CSS library! We write our CSS with our bare hands 💪

Project structure

src/ -> all our assets, pug templates, scripts, and styles
| 🗄 _assets -> images, fonts, etc copied directly to build/
| 📶 _data -> global data pulled in from the Contentful CMS
| 📦 _includes -> pug templates and SVG assets imported into pages
| 💅 _sass -> sass files loaded into your HTML templates
  | _imports -> sass files that are imported, *not* copied directly to build/
| 🚏 [route files] -> templates outside _includes = *routes* on our site
build/ -> generated from src/ when running build commands

Some important frontmatter properties

If you open a page like src/index.pug you'll notice some variables assigned between some ---s. These are called frontmatter properties:

• title - the page title displayed in your browser's tab.
• layout - the name of the Pug template file to use as a "wrapper" around the page. For example, layout: layout points to the _includes/layout.pug file.
• styles - any page-specific styles to load from the _sass directory. For example, styles: home points to the _sass/home.scss file.

Install Dependencies

Make sure you have NodeJS installed first. Then, run this terminal command inside the project directory:

npm install

Spin up the dev server

npm start

This will spin up a local development server (using Browsersync) with live reloading on file changes.

Build for production

npm run build

This should create a build/ directory that we'll serve using the Netlify deploy service. Just don't edit any of these files directly! These files are generated from src/, so make all your edits in there.

Contributors

👤 Ben Holmes

• Website: https://bholmes.dev
• Twitter: @bholmesdev
• Github: @Holben888
• LinkedIn: @bholmesdev

👤 James Wang

• Website: https://thejameswang.me
• Github: @thejameswang
• LinkedIn: @thejameswang

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator