Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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


πŸ“ Table of contents


βš™οΈ Prerequisites

⌨️ 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

πŸ€œπŸ€› 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.

You can’t perform that action at this time.