https://github.com/hack4impact/bytes-of-good
https://github.com/hack4impact/bytes-of-good
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hack4impact/bytes-of-good
- Owner: hack4impact
- Created: 2020-06-27T20:49:00.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T03:42:03.000Z (over 2 years ago)
- Last Synced: 2025-01-16T10:37:18.341Z (6 months ago)
- Language: SCSS
- Size: 3.01 MB
- Stars: 2
- Watchers: 9
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The Bytes of Good landing site 📣
> The bare-bones, [Pug-driven](https://pugjs.org) landing page for the incredible Bytes of Good org ✨
🚀 [**Visit the live site**](impactpodcast.hack4impact.org)
## Tech stack
This project uses [**Eleventy**](https://11ty.dev) for development and production builds. If you've ever used [Jekyll](https://jekyllrb.com) (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](https://pugjs.org/api/getting-started.html) and [Scss](https://sass-lang.com) 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](https://www.11ty.dev/docs/data-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](https://nodejs.org/en/) installed first. Then, run this terminal command inside the project directory:
```sh
npm install
```
## Spin up the dev server
```sh
npm start
```
This will spin up a local development server (using [Browsersync](https://browsersync.io)) with live reloading on file changes.
## Build for production
```sh
npm run build
```
This should create a `build/` directory that we'll serve using the [Netlify](https://www.netlify.com) 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](https://twitter.com/bholmesdev)
* Github: [@Holben888](https://github.com/Holben888)
* LinkedIn: [@bholmesdev](https://linkedin.com/in/bholmesdev)
👤 **James Wang**
* Website: https://thejameswang.me
* Github: [@thejameswang](https://github.com/thejameswang)
* LinkedIn: [@thejameswang](https://www.linkedin.com/in/thejameswang/)
## Show your support
Give a ⭐️ if this project helped you!
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_