Static site starter is a starter template for static sites.
Stack: Babel, Browsersync, Gulp, minireset.css, Pug, Sass, Webpack.

---

📝 Table of contents

• Prerequisites
• Commands
• Project structure
• Layout structure
• Cache busting
• Setting meta tags
• Authors
• Contributing
• License

---

⚙️ Prerequisites

• asdf
• Make
• Node.js
• Yarn

⌨️ Commands

Serve

## Serve site at http://localhost:3000 with live reloading

make

💡 This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Build

## Build site for production use

make build

💡 This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Help

## List available commands

make help

🗄️ Project structure

.
├── documentation-images    # PROJECT DOCUMENTATION IMAGES
│
│
├── gulp                    # GULP/WEBPACK CONFIGURATION AND TASKS
│   ├── env                 # Gulp configuration per environment
│   │   ├── dev.js          # Development environment
│   │   └── prod.js         # Production environment
│   │
│   ├── helpers             # Gulp helpers
│   │   └── url.js          # Helper for URL creation
│   │
│   ├── tasks               # Gulp tasks
│   │   ├── pug.js          # Pug task declaration
│   │   ├── sass.js         # Sass task declaration
│   │   └── script.js       # JavaScript task declaration
│   │
│   ├── webpack             # Webpack configuration per environment
│   │   ├── common.js       # Shared between development and production environments
│   │   ├── dev.js          # Development environment
│   │   └── prod.js         # Production environment
│   │
│   └── index.js            # Script to invoke proper environment and dynamically load Gulp tasks
│
│
├── js                      # JAVASCRIPT SOURCE FILES
│   ├── foo.js              # Sample script imported in scripts.js
│   └── scripts.js          # Main JavaScript file used as entry by Webpack
│
│
├── sass                    # SASS STYLE
│   ├── base                # Base style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   ├── generic.sass    # Style for generic elements (html, body, etc.)
│   │   └── helpers.sass    # Helper classes (modifiers)
│   │
│   ├── dev                 # Development utilities
│   │   ├── shame.sass      # WIP style or dirty hacks
│   │   └── structure.sass  # Highlighting site structure (import commented by default)
│   │
│   ├── fonts               # Fonts style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   └── roboto.sass     # @font-face style for Roboto
│   │
│   ├── layout              # Layout style
│   │   ├── _all.sass       # Importing all stylesheets
│   │   └── layout.sass     # Very light starter style for structure elements and titles
│   │
│   ├── utilities           # Utilities
│   │   ├── _all.sass       # Importing all stylesheets
│   │   ├── animations.sass # Some basic animations
│   │   ├── functions.sass  # Functions
│   │   ├── mixins.sass     # A few useful mixins
│   │   └── variables.sass  # Variables for colors, typography, etc.
│   │
│   └── style.sass          # Main Sass file used as source by Gulp
│
│
├── site                    # SITE BUILD DESTINATION FOLDER
│   ├── fonts               # Font assets
│   │   └── roboto          # Roboto from Google Fonts (TTF, WOFF, WOFF2)
│   │
│   └── images              # Image assets
│       ├── favicon.ico     # Favicon (placeholder by default)
│       ├── og-image.jpg    # Image for og:image meta tag (placeholder by default)
│       └── unicorn.jpg     # Sample image
│
│
├── templates               # PUG TEMPLATES
│   ├── layouts             # Layouts
│   │   └── default.pug     # Default layout
│   │
│   ├── partials            # Partials
│   │   └── unicorn.pug     # Sample partial featuring an image
│   │
│   ├── index.pug           # Home page
│   └── page.pug            # Sample page
│
│
├── .babelrc                # Presets and plugins to use, used by Babel
├── .gitignore              # Files and folders ignored by Git
├── .tool-versions          # Which version to use locally for each language, used by asdf
├── gulpfile.js             # Gulp configuration
├── LICENSE                 # License
├── Makefile                # Commands for this project
├── package.json            # JavaScript dependencies, used by Yarn
├── README.md               # Project documentation
└── yarn.lock               # Tracking exact versions for JavaScript dependencies, used by Yarn

🖥 Layout structure

The starter comes with a simple layout, structured like the following:

// Wrapper
.wrapper
  // Header
  header.header
    .container
      …

  // Main
  main.main
    // Section (repeatable)
    section.section
      .container
        …

  // Footer
  footer.footer
    .container
      …

Highlighting site structure

There is also a Sass utility allowing to highlight the site structure (pretty useful in development). Simply uncomment @import "dev/structure.sass" in style.sass if you want to use it.

🍱 Cache busting

Our strategy for cache busting is to automatically append a ?v=[version] to each asset query. When you need to bust the cache, simply update version in package.json.

In Pug templates an assetVersion variable is available. Usage:

img(src="images/unicorn.jpg" + assetVersion, alt="")

In Sass files an urlVersion function is available. Usage:

background-image: urlVersion("/images/unicorn.jpg")

⚙️ Setting meta tags

It is required to do some configuration to get title, description and og: meta tags ready for production. You can read more about OG meta tags in the Open Graph protocol documentation.

Step 1: Set the following variables in default.pug:

- var siteTitle = "Site title";
- var siteDescription = "Site description";
- var baseUrl = "https://site-url.com";

Step 2: Set pageTitle variable for each page. For example in index.pug:

- pageTitle = "Home";

Step 3: Customize the OG image.

✍️ Authors

• @Awea - Idea and initial work
• @mmaayylliiss - Design, code/documentation review

🤜🤛 Contributing

Contributions, issues and feature requests are welcome! See the list of contributors who participated in this project.

📄 License

Static site starter is licensed under the GNU General Public License v3.0.