Louie

Gulp-powered static site generator, named after the dog who was sitting at my feet when I wrote it.

Louie...

• compiles your Sass to prefixed and minified CSS
• supports partials and templating
• comes with normalize.css and some base styles
• auto-reloads pages when changes are made
• allows cross-device testing with BrowserSync
• can optimize image assets (.gif, .jpeg, .png and .svg)
• can deploy your site to Surge.

Getting started

1. Install Gulp

Gulp needs to be installed globally for Louie to work. If it is, skip to the next step. In case it isn't already set up this way, punch this into your terminal:

npm install -g gulp

If you're on a Mac, you'll need admin rights to install Gulp globally. Run the same command with sudo.

2. Clone/Download this repository.

3. Navigate to project folder you just cloned/downloaded in your terminal

4. Install Dependencies

In your terminal, run:

npm install

This should install all necessary dependencies to get you up and running with Louie.

5. Compile

Once you're done installing dependencies, run:

gulp

If gulp builds the project suuccessfully, it'll open a new tab in your browser and point it to localhost:8888. At this point, you should see a picture of Louie. Isn't he cute?

How it works

Tasks

Louie understands the following commands:

• Rungulp to build the project. By default, Louie watches for changes as well.
• Run gulp clean to delete your current _build folder.
• Run gulp deploy to deploy your current _build folder to Surge. You'll need an account with Surge to do this.

This is how Louie's structured:

Louie/
├── _assets/
│   ├── img/
│   ├── js/
├── _build/
├── _pages/
│   ├── index.html
├── _partials/
│   ├── head.html
│   ├── scripts.html
├── _sass/
│   ├── base/
│   │	├── _grid.scss
│   │	├── _mixins.scss 
│   │	├── _normalize.scss 
│   │	├── _typography.scss 
│   │	├── _utilities.scss
│   │	├── _variables.scss
│   └── custom/
│   └── style.scss
└── gulpfile.js

• _assets: Contains all your static assets.
• _build: This is where your generated site goes! More on this in a little bit.
• _pages: This is where you put all your HTML. To add new pages and subdirs, just create them and put them in this folder. All of thse are eventually compiled into _build.
• _partials: Contains all the partials and templates you include in your HTML. Louie uses Swig for templating. Swig's very well documented – check it out Swig's docs, or look at the simple example in _pages/index.html to learn how to use it.
• _sass: Contains all your styles. Default styles are split into modules and then imported into style.scss.
• gulpfile.js: All the tasks that are performed every time you build the project are defined here.

Note: the _build folder is generated by the gulpfile, and won't exist until the first time you run gulp.

The _build folder will look something like this once it's been generated:

Louie/
├── _build/
│   ├── assets/
│   │	├── css/
│   │	├── img/
│   │	├── js/
│   ├── index.html

License

All parts of Louie are free to use under the MIT license.