A simple static pages develop workflow (Convention over Configuration)
# npm
$ npm i -g x-pages
# or yarn
$ yarn global add x-pages# make project directory & cd into
$ mkdir my-project && cd $_
# init project structure
$ x-pages init
# dev hot reload serve
$ x-pages serve
# development build
$ x-pages build
# production build (minify css, minify js, autoprefixer css, non sourcemaps)
$ x-pages build --production
# deploy to gh pages (make sure proj root is github repo, and it has gh-pages branch)
$ x-pages deploy --production└── my-project ·········································· proj root
├── assets ·········································· static assets
│ ├── css ········································· styles (auto compile scss)
│ │ ├── _variables.scss ························· partials scss (dont output)
│ │ └── style.scss ······························ entry scss
│ ├── img ········································· images (auto minify)
│ │ └── rock.png ································ image file
│ └── js ·········································· scripts (auto uglify)
│ └── global.js ······························· script file
├── layouts ········································· layouts (dont output)
│ └── basic.html ·································· layout file
├── partials ········································ partials (dont output)
│ ├── footer.html ································· partial file
│ └── header.html ································· partial file
├── config.js ······································· config file
├── favicon.ico ····································· site favicon
└── index.html ······································ page file (use layout & partials)
module.exports = {
// assets dir name
assets: 'assets',
// layouts dir name
layouts: 'layouts',
// partials dir name
partials: 'partials',
// output dir name
output: 'dist',
// http server port
port: 2080,
// debug mode
debug: process.env.NODE_ENV !== 'production',
// ignore list
exclude: []
}And all of the properties in the config.js or config.json can be used as template variables in the template. e.g. {{@site.title}} => config.title.
In other words, you can add any template variables you need into the configuration file.
- exclude
- Fork it on GitHub!
- Clone the fork to your own machine.
- Checkout your feature branch:
git checkout -b my-awesome-feature - Commit your changes to your own branch:
git commit -am 'Add some feature' - Push your work back up to your fork:
git push -u origin my-awesome-feature - Submit a Pull Request so that we can review your changes.
NOTE: Be sure to merge the latest from "upstream" before making a pull request!