Pleasure Static Site Generator

Twig based Static Site generator powered by gulp.

Motivation

There are a lot of static site generator out there but we always found ourselves tweaking and adjusting them. The idea is to use it as a boiler plate for basic static web sites. Tailored to our needs and workflows, its intended to use as it is with no config required. Heavily inspired on Jekyll.

Prerequisites

Node.js
- Basic installation, nothing fancy. https://nodejs.org

Download

From: https://github.com/oierbravo/pleasure/archive/0.3.zip
Last release recommended.

Installation

Launch npm installer
```
npm install
```

Development

Launch development environment
```
npm start
```

Deploy (production ready)

Clean previous builds.
```
npm run clean
```
Compile everything for production.
```
npm run build
```

Deploy (Netlify)

Build command: npm run build
Publish directory: build

Automatic Netlify Deploy

Structure

Some simples and some advanced.

Folders

|-- build/  (generated production build)
|-- build-dev/  (generated development build)
|-- src/assets/fonts/  (font sources)
|-- src/assets/images/  (image sources)
|-- src/assets/js/  (js sources)
|-- src/assets/scss/  (SMACSS based sass setup)
|-- src/assets/svg/  (svg sources)
|-- src/assets/videos/  (video sources)
|-- gulpfile.js  (configured gulp file)
|-- node_modules/  (modules generated by npm)
|-- package.json  (configured to load dependencies by npm)
|-- config.vendors.js (javascript vendor configuration file example)
|-- README.md (Documentation)

Sass

BEM & Atomic design structure.

src/assets/sass/
  |-- 01_tools/
  |-- 02_settings/
  |-- 03_generic/
  |-- 04_elements/
  |-- 05_objects/
  |-- 06_components/
  |-- 07_pages/
  |-- 08_utilities/
  |-- style.scss

Pages

src/pages/
  |-- _components/ (reusable twig components)
  |-- _data/ (site data and specific page data)
  |-- _includes/ (common place for include files)
  |-- _layouts/ (html and page layout)
  |-- page1/index.twig (example page)
  |-- page2/index.twig (example page with partials)
  |-- dev-guide.twig (pages, components and svg icons index, for development purposes)
  |-- index.twig

NetlifyCMS

Admin Configuration: `src/static/admin/config.yml`

Normal NetlifyCMS config file. Modify as needed. name act as machinename. Important for folder naming and final url.

Template convention

src/pages/content-name
  |-- list.twig (content list page)
  |-- item.twig (content item page)

Content convention

content/content-name
  |-- slug.json (a file per item)

Twig Template System

Custom functions

SVG Spritesheet

Nuts and bolts

and how to use them.

Favicon
JS Vendors
SASS Vendors
Critical CSS splitting
Fonts
Image optimization, responsive images and lazyloading
SVG Icon Spritesheet
Defaults
GRDP
NetlifyCMS

ToDo:

Critical split - missing string inject into style
Responsive images
Documentation
Default non intrusive html and sass
Favicon gen

aitorrl / bikolabs-web Goto Github PK

bikolabs-web's Introduction

Pleasure Static Site Generator

Motivation

Prerequisites

Node.js

Download

Installation

Development

Deploy (production ready)

Deploy (Netlify)

Automatic Netlify Deploy

Structure

Folders

Sass

Pages

NetlifyCMS

Admin Configuration: src/static/admin/config.yml

Template convention

Content convention

Twig Template System

Custom functions

SVG Spritesheet

Nuts and bolts

Favicon

JS Vendors

SASS Vendors

Critical CSS splitting

Fonts

Image optimization, responsive images and lazyloading

SVG Icon Spritesheet

Defaults

GRDP

NetlifyCMS

ToDo:

bikolabs-web's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Admin Configuration: `src/static/admin/config.yml`