Gulp-powered static site generator, named after the dog who was sitting at my feet when I wrote it.
- 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.
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
2. Clone/Download this repository.
3. Navigate to project folder you just cloned/downloaded in your terminal
4. Install Dependencies
In your terminal, run:
This should install all necessary dependencies to get you up and running with Louie.
Once you're done installing dependencies, run:
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
Louie understands the following commands:
gulpto build the project. By default, Louie watches for changes as well.
gulp cleanto delete your current
gulp deployto deploy your current
_buildfolder 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
_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.htmlto learn how to use it.
_sass: Contains all your styles. Default styles are split into modules and then imported into
gulpfile.js: All the tasks that are performed every time you build the project are defined here.
_build folder is generated by the gulpfile, and won't exist until the first time you run
_build folder will look something like this once it's been generated:
Louie/ ├── _build/ │ ├── assets/ │ │ ├── css/ │ │ ├── img/ │ │ ├── js/ │ ├── index.html
All parts of Louie are free to use under the MIT license.