A static site development workflow (Convention over Configuration)
$ yarn add x-pages --dev
# or npm
$ npm install x-pages --save-devin your package.json scripts:
{
"scripts": {
"clean": "x-pages clean",
"lint": "x-pages lint",
"serve": "x-pages serve",
"build": "x-pages build",
"start": "x-pages start",
"deploy": "x-pages deploy --production"
}
}You can also use the x-pages template provided by the CAZ scaffold tool to quickly generate a project that uses x-pages.
$ npx caz x-pages my-project$ x-pages <task> [options]# Runs the app in development mode
$ x-pages serve --port 5210 --open
# Builds the app for production to the `dist` folder
$ x-pages build --productionLint the styles & scripts files.
Compile the styles & scripts & pages file.
Runs the app in development mode with a automated server.
open: Open browser on start, Default:falseport: Specify server port, Default:2080
Builds the app for production to the dist folder. It minify source in production mode for the best performance.
production: Production mode flag, Default:falseprod: Alias toproduction
Running projects in production mode.
open: Open browser on start, Default:falseport: Specify server port, Default:2080
Deploy the dist folder to GitHub Pages.
branch: The name of the branch you'll be pushing to, Default:'gh-pages'
Clean the dist & temp files.
- zce/pages-boilerplate#x-pages - x-pages examples
└── my-awesome-pages ································· project root
├─ public ········································· static folder
│ └─ favicon.ico ································· static file (unprocessed)
├─ src ············································ source folder
│ ├─ assets ······································ assets folder
│ │ ├─ fonts ···································· fonts folder
│ │ │ └─ pages.ttf ····························· font file (imagemin)
│ │ ├─ images ··································· images folder
│ │ │ └─ logo.png ······························ image file (imagemin)
│ │ ├─ scripts ·································· scripts folder
│ │ │ └─ main.js ······························· script file (babel / uglify)
│ │ └─ styles ··································· styles folder
│ │ ├─ _variables.scss ······················· partial sass file (dont output)
│ │ └─ main.scss ····························· entry scss file (scss / postcss)
│ ├─ layouts ····································· layouts folder
│ │ └─ basic.html ······························· layout file (dont output)
│ ├─ partials ···································· partials folder
│ │ └─ header.html ······························ partial file (dont output)
│ ├─ about.html ·································· page file (use layout & partials)
│ └─ index.html ·································· page file (use layout & partials)
├─ .csscomb.json ·································· csscomb config file
├─ .editorconfig ·································· editor config file
├─ .gitignore ····································· git ignore file
├─ .travis.yml ···································· travis ci config file
├─ CHANGELOG.md ··································· repo changelog
├─ LICENSE ········································ repo license
├─ README.md ······································ repo readme
├─ gulpfile.js ···································· gulp tasks file
├─ package.json ··································· package file
└─ yarn.lock ······································ yarn lock file
- zce/pages-boilerplate - Always a pleasure scaffolding your awesome static sites.
- 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!