https://github.com/actuallymentor/hi-pew

An extremely performanc webpage/frontend boilerplate using webpack.
https://github.com/actuallymentor/hi-pew

browser-sync frontend pug sass webpack

Last synced: 4 days ago
JSON representation

An extremely performanc webpage/frontend boilerplate using webpack.

• Host: GitHub
• URL: https://github.com/actuallymentor/hi-pew
• Owner: actuallymentor
• Created: 2017-03-27T18:46:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-28T19:59:29.000Z (almost 2 years ago)
• Last Synced: 2024-07-30T20:06:39.416Z (4 months ago)
• Topics: browser-sync, frontend, pug, sass, webpack
• Language: JavaScript
• Homepage:
• Size: 10.5 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 👋 🔫 HI PEW - High Performance Website Boilerplate

   

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

```