mirror of
https://github.com/stronk-dev/RandomChad.git
synced 2025-07-05 10:35:08 +02:00
93 lines
4.0 KiB
Markdown
93 lines
4.0 KiB
Markdown
# 👋 🔫 HI PEW - High Performance Website Boilerplate
|
|
|
|
<img height="50px" style="float: left;" alt="webpack" src="http://i.imgur.com/xz36f45.png" /> <img height="50px" style="float: left;" alt="browsersync" src="http://i.imgur.com/L5peje9.png" /> <img height="50px" style="float: left;" alt="pug" src="http://i.imgur.com/x4sHEg4.png" /> <img height="50px" style="float: left;" alt="sass" src="http://i.imgur.com/O9ikKdz.png" />
|
|
|
|
A static website generator that implements best practices for page speed. [ Click here for a live demo ]( https://actuallymentor.github.io/hi-pew/ ).
|
|
|
|
- input: Markup in [pug]( https://github.com/pugjs ), styling in [Sass]( https://github.com/sass/sass ) and Javascript with [Babel]( https://babeljs.io/ )
|
|
- output: deployment-ready minified, prefixed and compressed build files
|
|
|
|
Benefits:
|
|
|
|
- 🚀 100% Google Page Speed Score ([view score]( https://developers.google.com/speed/pagespeed/insights/?url=https://actuallymentor.github.io/hi-pew/ ))
|
|
- 👩💻 Use `pug`, `sass` and the newest `js` with zero setup time
|
|
- 👓 SEO best practices auto-implemented
|
|
- 🇪🇺 Built-in multilanguage support
|
|
- 🌐 Built-in broken link checker through `npm test`
|
|
- 🧪 Advanced performance options and compatibility warnings
|
|
|
|
## Getting started
|
|
|
|
Dependencies:
|
|
|
|
- [node.js]( https://nodejs.org/en/ )
|
|
- [nvm]( https://github.com/nvm-sh/nvm ) ( optional, recommended )
|
|
|
|
### Basic usage
|
|
|
|
1. Clone this repository
|
|
2. Run `npm start`, your browser will open with a live-updating preview
|
|
3. Edit the source files in `src/`
|
|
4. Configure SEO settings in `modules/config.js`
|
|
|
|
To create a production build in `docs/`:
|
|
|
|
```shell
|
|
npm run build
|
|
```
|
|
|
|
### Advanced usage
|
|
|
|
1. Customise auto-image compression
|
|
- Edit the `system.images` key to include your compression preferences for `jpeg`, `webp` and `avif`
|
|
- Use the `rimg` (responsive img) mixin found in `src/pug/_helpers`
|
|
- Use the `cimg` (compressed img) mixin found in `src/pug/_helpers`
|
|
- Note: images are not compressed in `NODE_ENV=development` mode which is the `npm start` default, `npm run build` does trigger that actual file optimisation
|
|
2. Separate your CSS for meaningful-paint optimisation
|
|
- Use `src/css/essential-above-the-fold.sass` for essential above the fold styles
|
|
- Use `src/css/styles.sass` for below the fold styles
|
|
3. Set per-page SEO settings
|
|
- Every `.pug` file may contain it's own metadata and sharing image
|
|
- The `page` object can set `title`, `desc`, `url`, `published`, `featuredimg` which are used in the `head` meta tags and the footer `application/ld+json` rich snipped data
|
|
4. Confgure deeper browser compatibility
|
|
- By default `npm start` runs a [ caniuse ]( https://caniuse.com/ ) compatibility check on your SASS
|
|
- Javascript backwards compatibility in `.babelrc`
|
|
- CSS compatibility in `modules/config.js` at `browsers`
|
|
4. Enable auto-deployment
|
|
- Templates for Github pages, Firebase and AWS are available in `.github/workflows`
|
|
5. Use subpages (like `/category/people/john.html`)
|
|
- Any `.pug` file in `src` will be compiled except those that are in reserved folders or begin with `_`
|
|
- `src/index.pug` \> `index.html`
|
|
- `src/pages/contact.pug` \> `/pages/contact.html`
|
|
- `src/{ assets, content, css, js }/template.pug` \> not rendered
|
|
- `src/pug/_footer.pug` \> not rendered (unless included in another pug)
|
|
|
|
### Multiple languages
|
|
|
|
Every `.json` or `.js` file in `src/content` will result in a duplicate of your website using the content in that file.
|
|
|
|
```js
|
|
module.exports = {
|
|
slug: "/", // The relative URL of this language
|
|
lang: "en", // The language code of this language (use W3 compliant codes)
|
|
|
|
// You can creat any keys and access them inside pug files
|
|
hero: {
|
|
"title": "something",
|
|
"explanation": "lorem ipsum"
|
|
},
|
|
usps: [ "It's good", "It's free" ]
|
|
}
|
|
```
|
|
|
|
The attributes can be read inside any pug template under the `content` variable, for example:
|
|
|
|
```pug
|
|
div.hero
|
|
p#title #{ content.hero.title }
|
|
a( href=content.slug ) home
|
|
div.usp
|
|
each usp in content.usps
|
|
p= usp
|
|
```
|