├── .gitignore
├── gen
    ├── assets
    │   └── __includes.html
    ├── webpack.config.js
    └── gulpfile.js
├── LICENSE
├── package.json
├── bin
    └── index.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/gen/assets/__includes.html:
--------------------------------------------------------------------------------
1 | <link href="/index.css" rel="stylesheet" />
2 | <script src="/index.js"></script>
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Meteor Development Group, Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "maw",
 3 |   "version": "0.6.0",
 4 |   "description": "Make a website with Handlebars, LESS, and JS modules",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/stubailo/make-a-website.git"
12 |   },
13 |   "author": "",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/stubailo/make-a-website/issues"
17 |   },
18 |   "homepage": "https://github.com/stubailo/make-a-website#readme",
19 |   "dependencies": {
20 |     "babel-core": "^6.24.0",
21 |     "babel-loader": "^6.4.1",
22 |     "babel-preset-env": "^1.2.2",
23 |     "babel-preset-react": "^6.23.0",
24 |     "command-line-args": "^4.0.2",
25 |     "concurrently": "^3.4.0",
26 |     "css-loader": "^0.28.7",
27 |     "gulp": "^3.9.1",
28 |     "gulp-clean-css": "^3.0.4",
29 |     "gulp-cli": "^1.2.2",
30 |     "gulp-compile-handlebars": "^0.6.1",
31 |     "gulp-data": "^1.2.1",
32 |     "gulp-filter": "^5.0.0",
33 |     "gulp-less": "^3.3.0",
34 |     "less": "^2.7.3",
35 |     "less-loader": "^4.0.5",
36 |     "live-server": "^1.2.0",
37 |     "nodemon": "^1.11.0",
38 |     "raw-loader": "^0.5.1",
39 |     "shelljs": "^0.7.7",
40 |     "style-loader": "^0.19.0",
41 |     "webpack": "^2.3.1"
42 |   },
43 |   "bin": {
44 |     "maw": "bin/index.js"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/gen/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | 
 4 | let nm;
 5 | // Are we running from an install?
 6 | nm = path.join(process.cwd(), 'node_modules');
 7 | console.log('first nm', nm);
 8 | 
 9 | if (! fs.existsSync(path.join(nm, 'babel-loader'))) {
10 |   // We are running from npm link
11 |   nm = path.join(__dirname, '..', 'node_modules');
12 |   console.log('second nm', nm);
13 | }
14 | 
15 | console.log('babel-preset-env path:', require.resolve('babel-preset-env'));
16 | 
17 | module.exports = {
18 |   entry: './src/index.js',
19 |   output: {
20 |     filename: 'index.js',
21 |     path: `${process.cwd()}/build`
22 |   },
23 |   resolveLoader: { modules: [nm] },
24 |   module: {
25 |     rules: [
26 |       {
27 |         test: /\.js$/,
28 |         exclude: /(node_modules|bower_components)/,
29 |         use: {
30 |           loader: 'babel-loader',
31 |           options: {
32 |             presets: [
33 |               require.resolve('babel-preset-env'),
34 |               require.resolve('babel-preset-react')
35 |             ]
36 |           }
37 |         }
38 |       },
39 |       {
40 |         test: /\.less$/,
41 |         use: [{
42 |             loader: "style-loader" // creates style nodes from JS strings
43 |         }, {
44 |             loader: "css-loader" // translates CSS into CommonJS
45 |         }, {
46 |             loader: "less-loader" // compiles Less to CSS
47 |         }]
48 |     }
49 |     ]
50 |   }
51 | };
52 | 


--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
 1 | #! /usr/bin/env node
 2 | 
 3 | const commandLineArgs = require('command-line-args')
 4 | const shell = require('shelljs');
 5 | const path = require('path');
 6 | const fs = require('fs');
 7 | 
 8 | if (! fs.existsSync('src')) {
 9 |   throw new Error('Run from root from project, must have /src directory.');
10 | }
11 | 
12 | const optionDefinitions = [
13 |   { name: 'command', type: String, defaultOption: true },
14 | ]
15 | 
16 | const { command } = commandLineArgs(optionDefinitions);
17 | 
18 | // shell.pushd(__dirname);
19 | const binPath = shell.exec('npm bin', { silent: true }).stdout.trim();
20 | // shell.popd();
21 | 
22 | if (command === 'dev') {
23 |   shell.exec(`${bin('concurrently')} "${__filename} display" "${__filename} watch" "${__filename} webpack"`);
24 | } else if (command === 'watch') {
25 |   shell.exec(`${bin('gulp')} --gulpfile ${pkg('gen/gulpfile.js')} --cwd src watch`);
26 | } else if (command === 'build') {
27 |   shell.exec(`${bin('gulp')} --gulpfile ${pkg('gen/gulpfile.js')} --cwd src prod`);
28 |   shell.exec(`${bin('webpack')} --config ${pkg('gen/webpack.config.js')}`);
29 | } else if (command === 'webpack') {
30 |   shell.exec(`${bin('webpack')} --config ${pkg('gen/webpack.config.js')} --watch`);
31 | } else if (command === 'display') {
32 |   shell.exec(`sleep 1 && ${bin('live-server')} ./build`);
33 | } else if (command === 'version') {
34 |   console.log(require('../package.json').version);
35 | }
36 | 
37 | function bin(command) {
38 |   return path.join(binPath, command);
39 | }
40 | 
41 | function cwd(p) {
42 |   return path.join(process.cwd(), p);
43 | }
44 | 
45 | function pkg(p) {
46 |   return path.join(__dirname, '..', p);
47 | }
48 | 
49 | // "scripts": {
50 | //     "build": "gulp --gulpfile generator/gulpfile.js --cwd .",
51 | //     "watch": "nodemon --ignore build -e \"\" --exec \"gulp --gulpfile generator/gulpfile.js --cwd .\"",
52 | //     "live": "live-server build",
53 | //     "dev": "concurrently \"npm run watch\" \"npm run live\" -n \"gulp,live-server\" "
54 | //   },
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Make a Website (maw)
 2 | 
 3 | ```
 4 | npm install maw
 5 | ```
 6 | 
 7 | [![npm version](https://badge.fury.io/js/maw.svg)](https://badge.fury.io/js/maw)
 8 | 
 9 | Make a static HTML page with some CSS, JS, and assets. Contains just the tools you need to write modern code and avoid repeating yourself. A gulpfile and webpack config in a box. It's written for internal needs, but I'd be happy to accept improvements if you find it useful too.
10 | 
11 | > If you want to make a serious website with lots of pages, or you need a lot of customization or features, this is probably not going to work for you. You'll be much better served by something like [Gatsby](https://github.com/gatsbyjs/gatsby) or [Hexo](https://github.com/hexojs/hexo).
12 | 
13 | This tool is 100% convention over configuration. [Check out a site built with it here.](https://github.com/apollographql/dev.apollodata.com)
14 | 
15 | ## Using the tool
16 | 
17 | `maw dev` in the root of the project watches the `/src` directory, and puts the output in `/build` whenever files change.
18 | 
19 | `maw build` builds the site and puts the output in `/build`.
20 | 
21 | You probably want to `npm install --save-dev maw` and then add the above commands to a `package.json`, like [in this site](https://github.com/apollographql/dev.apollodata.com/blob/master/package.json).
22 | 
23 | ## Directories
24 | 
25 | All of these are nested inside `/src` in the root of your project.
26 | 
27 | ### /public
28 | 
29 | This is for static files, which are copied directly into the output. That includes images, fonts, and pre-bundled libraries you want to use.
30 | 
31 | ### /index.less and /less
32 | 
33 | `index.less` is compiled into `index.css`. The `/less` directory is watched for LESS imports, so basically put everything except `index.less` in there.
34 | 
35 | ### /index.html and /templates
36 | 
37 | `index.html` is compiled into `index.html` and any handlebars code is evaluated against the files in `/templates`. The name of the template is the filename without the extension, for example `nav.html` can be included with `{{> nav}}`.
38 | 
39 | ### Multiple `index.html` files
40 | 
41 | You can nest multiple `index.html` files, for example `/about/index.html`, to give your website multiple pages.
42 | 
43 | ### /data.js
44 | 
45 | `data.js` should export any data you want to use in your handlebars templates, like so:
46 | 
47 | ```js
48 | module.exports = {
49 |   hello: 'world',
50 | };
51 | ```
52 | 
53 | And then you can use it with:
54 | 
55 | ```html
56 | <div>
57 |   Hello, {{hello}}!
58 | </div>
59 | ```
60 | 
61 | ### /index.js
62 | 
63 | `index.js` is a JavaScript entry point module that will be compiled with Webpack. Currently, no loaders are enabled.
64 | 
65 | ## TODO
66 | 
67 | - [ ] Minification
68 | - [ ] Make it possible to set root directory to either the root of the repo or something other than `/src`
69 | 


--------------------------------------------------------------------------------
/gen/gulpfile.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var less = require('gulp-less');
  3 | var path = require('path');
  4 | var handlebars = require('gulp-compile-handlebars');
  5 | var data = require('gulp-data');
  6 | var fs = require('fs');
  7 | var cleanCSS = require('gulp-clean-css');
  8 | const filter = require('gulp-filter');
  9 | 
 10 | // Directory with project files provided by consumer
 11 | const projDir = process.cwd();
 12 | 
 13 | // Directory with assets for generator
 14 | const genDir = __dirname;
 15 | 
 16 | gulp.task('default', ['less', 'html', 'public']);
 17 | 
 18 | const LESS_INDEX = 'index.less';
 19 | const LESS_IMPORTS = 'less/**/*';
 20 | gulp.task('less', () => {
 21 |   return gulp.src(LESS_INDEX)
 22 |     .pipe(less({
 23 |       paths: [ path.join(projDir, 'less') ]
 24 |     }))
 25 |     .on('error', handleError)
 26 |     .pipe(gulp.dest('../build/'));
 27 | });
 28 | 
 29 | const PUBLIC_DIR = 'public/**/*';
 30 | gulp.task('public', () => {
 31 |   gulp.src(PUBLIC_DIR).pipe(gulp.dest('../build/'));
 32 | });
 33 | 
 34 | const DATA_PATH = path.join(projDir, 'data.js');
 35 | console.log('DATA', DATA_PATH);
 36 | const TEMPLATES_PATH = path.join(projDir, 'templates');
 37 | const TEMPLATES_WATCH_PATH = path.join(TEMPLATES_PATH, "**", "*.html");
 38 | const HTML_PAGES = path.join(projDir, '**', '*.html');
 39 | gulp.task('html', () => {
 40 |   let data = {};
 41 | 
 42 |   try {
 43 |     // We need to clear the cache
 44 |     delete require.cache[require.resolve(DATA_PATH)];
 45 |     data = require(DATA_PATH);
 46 |     console.log('THE DATA', data);
 47 |   } catch (e) {
 48 |     console.info('data.js not found, skipping.');
 49 |   }
 50 | 
 51 |   // Set up node env
 52 |   data.NODE_ENV = process.NODE_ENV || 'development';
 53 | 
 54 |   // Directories for partials
 55 |   const batch = [];
 56 | 
 57 |   // Partials used by the site builder, like __includes
 58 |   console.log('GEN DIR', genDir);
 59 |   batch.push(path.join(genDir, 'assets'));
 60 | 
 61 |   // Partials in the site source
 62 |   if (fs.existsSync(TEMPLATES_PATH)) {
 63 |     batch.push(TEMPLATES_PATH);
 64 |   }
 65 | 
 66 |   const options = {
 67 |     batch,
 68 |     helpers: {
 69 |       env: (desiredEnv) => {
 70 |         return data.NODE_ENV === desiredEnv;
 71 |       }
 72 |     }
 73 |   };
 74 | 
 75 |   const skipTemplates = filter(file => !/templates/.test(file.path));
 76 | 
 77 |   return gulp.src(HTML_PAGES)
 78 |     .pipe(skipTemplates)
 79 |     .pipe(handlebars(data, options))
 80 |     .pipe(gulp.dest('../build'));
 81 | })
 82 | 
 83 | gulp.task('watch', ['less', 'public', 'html'], () => {
 84 |   console.log('RUNNING GULP')
 85 |   gulp.watch([
 86 |     LESS_INDEX,
 87 |     LESS_IMPORTS
 88 |   ], ['less']);
 89 | 
 90 |   gulp.watch(PUBLIC_DIR, ['public']);
 91 | 
 92 |   gulp.watch([
 93 |     DATA_PATH,
 94 |     TEMPLATES_WATCH_PATH,
 95 |     HTML_PAGES,
 96 |   ], ['html']);
 97 | });
 98 | 
 99 | gulp.task('prod', ['less', 'public', 'html'], () => {
100 |   gulp.src('../build/index.css')
101 |     .pipe(cleanCSS())
102 |     .pipe(gulp.dest('../build'));
103 | });
104 | 
105 | function handleError(err) {
106 |   console.log(err.toString());
107 |   this.emit('end');
108 | }
109 | 


--------------------------------------------------------------------------------