Run the app in development mode

Build distribution files for the app in production

Introduction

GoPablo is a static site generator with a modern development workflow, integrated web server, auto-reload, CSS preprocessors, and ES6 ready.

Features

👇

Includes

📦

Live Server

🔥

Hot Reload & CSS Injection

⚙

Babel 7

🤖

Express Server

🎒

Code Minification

🌈

Image Compression

🕸

Templating & Partial HTML Injection

🎨

PostCSS & Next Generation CSS

✂️

Cache-Busting

🛎

Distribution Files

1. Installing Node

GoPablo requires Node v7.5+. This is the only global dependency. You can download Node here.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Install GoPablo from NPM

Create a directory for the new website and from there run GoPablo to generate the file structure:

gopablo

Install GoPablo from Repository

To install GoPablo you need to clone the repository from GitHub:

git clone https://github.com/luangjokaj/gopablo

This will clone the repository on your local machine. Navigate to the newly created folder.

Replace the file: ./package.json with ./installer/package.json and continue with the dependency installation.

INSTALL DEPENDENCIES

npm install

START WORKFLOW

We are ready to start our development server with the command:

npm run dev

Templating and HTML Partials

To avoid repetitive HTML code, GoPablo uses gulp-file-include. It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory:

New pages

To create new pages, simply create new .html files in the src/ directory.

Generate production files

To generate your distribution files run the command:

npm run prod

The files will be generated in the dist/ directory.

3. CSS, PostCSS and Sass

PostCSS

By default GoPablo supports PostCSS, a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. postcss-preset-env is installed by default. Read more about PostCSS here.

POSTCSS PLUGINS

GoPablo has two different sets of PostCSS plugins - one for the development environment (pluginsListDev) and one for the production task (pluginsListProd).

5. JavaScript ES6

GoPablo supports ES6 JavaScript with Babel. Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

Write ES6 JavaScript

Your JavaScript code should be located in:

src/assets/js/

GoPablo will watch for changes under the js directory and bundle the code in a single file, which will be included in the footer of the page as:

footer-bundle.js

Check the gulp configuration to learn more about how JavaScript is generated.

6. External Libraries

Including external JavaScript libraries is as simple as installing the npm script and including it in the gulpfile.js

You can include the scripts in the head of the page before the DOM is loaded by placing them in the headerJS array or in the footer of the page after the DOM is loaded in the footerJS array. Only footer scripts are processed with Babel thus supporting ES6, however you can change this in the configuration if you want to run both header and footer scripts with Babel.

A build restart is required for changes to take effect.

7. Code Style Rules

GoPablo comes with its own set of code style rules:

.stylelintrc

Lint CSS

Before pushing changes make sure you have clean and consistent CSS. Run stylelint with the command:

npm run lint

8. Deploy

There are a lot of possiblities and different ways to deploy your static website. The most traditional one being: generating your distribution files and uploading them manually, usually FTP.

Heroku

With the help of a simple Express server, with GoPablo we can deploy to heroku out of the box.

Create Heroku application: heroku create.

Push the branch to Heroku origins: git push heroku master

Automated Netlify deployments

Netlify is a great service that can be used to deploy generated websites. All you have to do is: