Multipage Pug Boilerplate | Webpack + Pug + SASS + ES6 🚀

📚 General information

This project was born when one developer time to time needed to create simple sites. And usually it must be a multi-page site. Use this boilerplate and don't think about configuration all of these tools together:

• Babel 📝
• Pug 🐶
• SASS 🎨
• Webpack 📦

Usage: For start clone this repository and install dependencies with command yarn.

Commands: yarn start - for start development.

yarn build - for generate HTML/CSS.

yarn serv - run node-static for build folder

Aliases:

• media: source/media
• styles: source/styles

Production folder structure: All files related to scripts / images / styles will have hash-name to avoid caching on the server. Only fonts don't have it.

.pug
├── build                     # build folder
│   ├── images                # images
│   ├── js                    # script files
|   ├── styles                # styles
|   └── index.html            # html files placed in root build folder

🔎 Structure

.pug
├── build                     # public folder for host on server
├── source                    # sources (pages, styles, js)
│   │── media                 # all static files (images, fonts, music, videos, files for localization)
│   │   ├── fonts
│   |   └── images
│   └── pug                   # general folder
│       ├── pages             # separate folder for each page
│       └── styles            # common styles related to all pages (theme, mixins, variables, etc)
├── pages.js                  # list of pages (file for adding new pages)
├── webpack.config.js         # general webpack fonfig file

？ Common questions

• How to add a new page

  Necessarily

  • Add new_page_title in pages.js located in root project folder.
  • Create folder for new page in source/pug/pages/[new_page_title].
  • Create two reqiered files inside created folder [new_page_title].pug and [new_page_title].js.

  Optional

  • if you need, import main.sass file in your [new_page_title].sass file for including common styles (mixins, variables, etc)

• Add image from media in tag <img>

  

• Add fonts to project

  • You need to prepare font in four formats: TTF, EOT, WOFF, WOFF2
  • Place font files in ./source/media/fonts
  • Connect your font with awesome mixin and pass two params: +font('Name In Project As You Want', 'font-file-name')
  • Done!

  P.S. You can find example with Roboto Reagular in ./source/styles/parts/base.sass