Initial commit

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    "extends": "airbnb-base"
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,49 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "10:00"
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: "@babel/core"
+    versions:
+    - 7.12.10
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.1
+    - 7.13.10
+    - 7.13.13
+    - 7.13.14
+    - 7.13.15
+    - 7.13.8
+  - dependency-name: "@babel/cli"
+    versions:
+    - 7.12.10
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.0
+    - 7.13.10
+    - 7.13.14
+  - dependency-name: "@babel/preset-env"
+    versions:
+    - 7.12.11
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.0
+    - 7.13.10
+    - 7.13.12
+    - 7.13.5
+    - 7.13.8
+    - 7.13.9
+  - dependency-name: webpack-cli
+    versions:
+    - 4.4.0
+    - 4.5.0
+  - dependency-name: pa11y-ci
+    versions:
+    - 2.4.0

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# gitignore dist folder
+dist

.pa11yci

@@ -0,0 +1,7 @@
+{
+    "defaults": {
+        "chromeLaunchConfig": {
+            "args": ["--no-sandbox"]
+        }
+    }
+}

.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  "extends": "stylelint-config-standard",
+}

.travis.yml

@@ -0,0 +1,22 @@
+language: node_js
+node_js:
+  - node
+  - lts/*
+install:
+  - npm install
+before_script: 
+  - npm rebuild node-sass
+script:
+  - npm run lint:styles
+  - npm run lint:js
+  - npm run lint:html
+  - npm run build
+deploy:
+  provider: pages
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
+  keep-history: true
+  local-dir: dist
+  on:
+    branch: master
+    node: 'lts/*'

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2018-09-08
+### Added
+- Linting for scripts, styling, and a11y
+- Travis CI build and deployment to GitHub Pages
+### Changed
+- Upgraded Webpack version to Webpack 4
+- Cleaned up Webpack config code
+
+## [1.0.0] - 2018-01-18
+### Added
+- Working webpack setup
+- Supports multiple HTML pages
+- JS transpiled down from ES6+ to ES5 and minified
+- SCSS transpiled down to CSS, prefixed, and minified
+- Static assets copied over

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Erick Zhao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# 🚀 Static HTML Webpack Boilerplate
+[![GitHub version](https://badge.fury.io/gh/erickzhao%2Fstatic-html-webpack-boilerplate.svg)](https://badge.fury.io/gh/erickzhao%2Fstatic-html-webpack-boilerplate)
+[![Build Status](https://api.travis-ci.org/erickzhao/static-html-webpack-boilerplate.svg?branch=master)](https://travis-ci.org/erickzhao/static-html-webpack-boilerplate)
+[![Dev Dependencies](https://david-dm.org/erickzhao/static-html-webpack-boilerplate/dev-status.svg)](https://david-dm.org/erickzhao/static-html-webpack-boilerplate?type=dev)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a81c78b2255343a2a1c86abb564431a9)](https://app.codacy.com/app/erickzhao/static-html-webpack-boilerplate?utm_source=github.com&utm_medium=referral&utm_content=erickzhao/static-html-webpack-boilerplate&utm_campaign=Badge_Grade_Dashboard)
+
+<p align="center">
+  <img width="200" height="200" src="https://i.imgur.com/y8m5pkQ.png">
+</p>
+
+Enjoy hand-writing your HTML? Keep it old-school with modern build tools. This boilerplate setup makes it easier to write your own styling, scripts, and mark-up.
+
+## ✨ Features
+
+- Write SCSS and modern JavaScript code in `src` and build minified, transpiled code for production in `dist`
+- Continuous integration with linting tests and deploying to `gh-pages`
+- Live reloading with webpack-dev-server
+- ES6+ to ES5 transpilation, bundling, and minification
+- SCSS to CSS transpilation, bundling, autoprefixing, and minification
+- Automatic copying of HTML and static assets from `src` to `dist` folders
+- Linting for styles and scripts
+
+## 🛠 Usage
+
+- Use this template on GitHub or download the latest release from the [Releases page](https://github.com/erickzhao/static-html-webpack-boilerplate/releases).
+- Write all your ES2015+ Javascript code in `src/js` and SCSS styling in `src/style`. Store static assets in `src/static`. Organize HTML files the way you like.
+- Available commands:
+  - `npm run build`: Build files to the `dist` folder. Transpiles down to ES5 and bundles all JS into `app.bundle.js`. Transpiles SCSS to CSS and adds prefixing into `style.bundle.css`. Copies static assets and HTML over, and bundled CSS and JS gets added to HTML file.
+  - `npm run start:dev`: Run `webpack-dev-server` at `localhost:9000`. Includes live reloading on any Javascript/SCSS/HTML changes.
+  - `npm run start`: Builds files and runs a local production server on `localhost:8080` with `http-server`.
+  - `npm run run lint:js`: Lints JS with ESLint.
+  - `npm run lint:styles`: Lints SCSS stylesheets with stylelint.
+  - `npm run lint:html`: Lints HTML for a11y issues using pa11y.
+  
+## 🔄 Continuous Integration
+
+This boilerplate contains integration with [Travis CI](https://travis-ci.org/). The build system runs all linting scripts and deploys to GitHub pages upon push to the `master` branch. However, note that this deployment flow only works for Project Pages, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).
+
+For more information on how to set up alternative deployment processes, check out the [Travis CI documentation on deployment](https://docs.travis-ci.com/user/deployment). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "static-html-webpack-boilerplate",
+  "version": "1.1.1",
+  "description": "Modern tooling for old-school static webpage development",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.prod.js",
+    "lint:js": "./node_modules/.bin/eslint src/js/*.js",
+    "lint:styles": "stylelint \"src/**/*.scss\"",
+    "lint:html": "pa11y-ci ./src/**/*.html",
+    "start:dev": "webpack-dev-server --config webpack.config.dev.js",
+    "start": "webpack --config webpack.config.prod.js && http-server ./dist -o"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erickzhao/static-html-webpack-boilerplate.git"
+  },
+  "author": "erick zhao",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.8.6",
+    "@babel/preset-env": "^7.7.4",
+    "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "cssnano": "^4.1.0",
+    "eslint": "^5.5.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "file-loader": "^5.0.2",
+    "glob": "^7.1.6",
+    "html-webpack-plugin": "^3.0.0",
+    "http-server": "^0.12.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "pa11y-ci": "^2.1.1",
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^4.0.1",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.0.1",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^19.0.0",
+    "webpack": "^4.44.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

postcss.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoprefixer],
+};

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Static HTML Site Boilerplate</title>
+</head>
+
+<body>
+    <h1>Hello Static HTML!</h1>
+    <a href="/page.html">Link to my other page</a>
+    <img src="/static/tail.png" alt="code"/>
+</body>

src/js/app.js

@@ -0,0 +1,3 @@
+if (module.hot) {
+  module.hot.accept();
+}

src/page.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Static HTML Site Boilerplate</title>
+</head>
+
+<body>
+    <h1>My other page</h1>
+    <a href="/index.html">Back to home</a>
+</body>

src/style/main.scss

@@ -0,0 +1,9 @@
+body {
+  font-family: 'Helvetica Neue', sans-serif;
+  text-align: center;
+}
+
+img {
+  display: block;
+  margin: 50px auto;
+}

webpack.config.common.js

@@ -0,0 +1,69 @@
+const glob = require('glob');
+const path = require('path');
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+
+const generateHTMLPlugins = () => glob.sync('./src/**/*.html').map(
+  dir => new HTMLWebpackPlugin({
+    filename: path.basename(dir), // Output
+    template: dir, // Input
+  }),
+);
+
+module.exports = {
+  node: {
+    fs: 'empty',
+  },
+  entry: ['./src/js/app.js', './src/style/main.scss'],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'app.bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.html$/,
+        loader: 'raw-loader',
+      },
+      {
+        test: /\.(pdf|gif|png|jpe?g|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'static/',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/',
+          },
+        }],
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      {
+        from: './src/static/',
+        to: './static/',
+      },
+    ]),
+    ...generateHTMLPlugins(),
+  ],
+  stats: {
+    colors: true,
+  },
+  devtool: 'source-map',
+};

webpack.config.dev.js

@@ -0,0 +1,24 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.config.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devServer: {
+    contentBase: 'src',
+    watchContentBase: true,
+    hot: true,
+    open: true,
+    port: process.env.PORT || 9000,
+    host: process.env.HOST || 'localhost',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sass|scss)$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+});

webpack.config.prod.js

@@ -0,0 +1,43 @@
+const cssnano = require('cssnano');
+const merge = require('webpack-merge');
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const common = require('./webpack.config.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  optimization: {
+    minimize: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sass|scss)$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessor: cssnano,
+      cssProcessorOptions: { discardComments: { removeAll: true } },
+      canPrint: true,
+    }),
+  ],
+});