├── .gitignore ├── src ├── scss │ ├── index.scss │ ├── _colors.scss │ └── _global.scss ├── js │ ├── main.js │ └── module.js ├── images │ └── logo.png └── views │ ├── components │ └── head.html │ └── index.html ├── .stylelintrc ├── posthtml.json ├── .eslintrc ├── webpack.config.js ├── README.MD └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .package-lock.json 2 | .git 3 | /dist 4 | /node_modules 5 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import 'colors.scss'; 2 | @import 'global.scss'; 3 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | import { logSomething } from './module'; 2 | 3 | logSomething('Hello World'); -------------------------------------------------------------------------------- /src/scss/_colors.scss: -------------------------------------------------------------------------------- 1 | $defaultFont: #606060; 2 | $subtleBg: #f5f5f5; 3 | $primary: #74d1f6; 4 | -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwebdev/static-website-template/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /src/js/module.js: -------------------------------------------------------------------------------- 1 | // This will get imported in main.js 2 | export const logSomething = msg => { 3 | console.log(msg); 4 | }; -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | "rules": { 2 | "block-no-empty": true, 3 | "color-hex-case": "lower", 4 | "color-hex-length": "short", 5 | "color-no-invalid-hex": true, 6 | "declaration-colon-space-after": "always", 7 | "max-empty-lines": 2 8 | } -------------------------------------------------------------------------------- /posthtml.json: -------------------------------------------------------------------------------- 1 | { 2 | "input": "src/views/*.html", 3 | "output": "dist", 4 | "plugins": { 5 | "posthtml-modules": { 6 | "root": "./src/views", 7 | "initial": true 8 | }, 9 | "htmlnano": {} 10 | } 11 | } -------------------------------------------------------------------------------- /src/views/components/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Static Website Template 5 | 6 | 7 | 8 | 9 |

10 |

Static Website Template

11 |

12 |

13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "rules": { 16 | "semi": ["error", "always"], 17 | "quotes": ["error", "single"] 18 | } 19 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const ESLintPlugin = require('eslint-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: './src/js/main.js', 6 | plugins: [new ESLintPlugin()], 7 | output: { 8 | path: __dirname + '/dist', 9 | filename: 'bundle.js' 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.m?js$/, 14 | exclude: /node_modules/, 15 | use: { 16 | loader: 'babel-loader', 17 | options: { 18 | presets: ['@babel/preset-env'] 19 | } 20 | } 21 | }] 22 | } 23 | }; -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | } 8 | 9 | html { 10 | font-family: 'Open Sans', sans-serif; 11 | font-display: swap; 12 | box-sizing: border-box; 13 | } 14 | 15 | body { 16 | font-size: 1.6rem; 17 | background-color: $subtleBg; 18 | color: $defaultFont; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | a { 24 | transition: 0.1s linear; 25 | 26 | &:hover { 27 | color: $primary; 28 | } 29 | } 30 | 31 | p { 32 | margin: 2rem 0; 33 | line-height: 1.4em; 34 | 35 | &:last-of-type { 36 | margin-bottom: 0; 37 | } 38 | } 39 | 40 | h1, 41 | h2 { 42 | margin-bottom: 4rem; 43 | max-width: 100%; 44 | line-height: 1.1em; 45 | } 46 | 47 | .center { 48 | display: flex; 49 | flex-direction: column; 50 | align-items: center; 51 | justify-content: center; 52 | 53 | h1 { 54 | text-align: center; 55 | } 56 | } 57 | 58 | .full-sized { 59 | height: 100vh; 60 | width: 100%; 61 | 62 | img { 63 | max-width: 200px; 64 | } 65 | } -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Static Website Template 2 | 3 | This is a template for creating simple static websites without JS frameworks. 4 | 5 | A blog post explaining the process can be found on [wweb.dev](https://wweb.dev/blog/how-to-create-static-website-npm-scripts) 6 | 7 | It uses: 8 | - SCSS with linting and autoprefixer 9 | - JavaScript with webpack using babel and linting 10 | - minifying images 11 | - html partials and minify with post-html 12 | - browser-sync 13 | 14 | The compiled files will go to the directory "/dist" 15 | 16 | - from `src/scss` to `dist/index.css` 17 | - from `src/js` to `dist/bundle.js` 18 | - from `src/views` to `dist/` 19 | - from `src/images` to `dist/images` 20 | 21 | ## Getting Started 22 | 23 | 1. Install dependencies 24 | ``` 25 | npm install 26 | ``` 27 | 28 | 2. Build resources 29 | ``` 30 | npm run build 31 | ``` 32 | 33 | 3. Watch for changes 34 | ``` 35 | npm run watch 36 | ``` 37 | 38 | ## Demo 39 | 40 | Integrates smoothly with netlify: 41 | 42 | [https://static-website-template.netlify.com/](https://static-website-template.netlify.com/) 43 | 44 | 45 | ## License 46 | [MIT](https://choosealicense.com/licenses/mit/) 47 | 48 | 49 | --- 50 | 51 | *created by [Vincent Will](https://wweb.dev/)* 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static-website-template", 3 | "version": "1.0.2", 4 | "description": "A template for building static website", 5 | "author": "Vincent Will ", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Vincenius/static-website-template" 10 | }, 11 | "scripts": { 12 | "clean": "rimraf dist/*", 13 | "css:autoprefixer": "postcss -u autoprefixer -r dist/*.css", 14 | "css:scss": "node-sass --output-style compressed -o dist src/scss", 15 | "css:lint": "stylelint src/scss/*.scss --custom-syntax postcss-scss", 16 | "build:css": "npm run css:lint && npm run css:scss && npm run css:autoprefixer", 17 | "build:js": "webpack --mode=production", 18 | "build:html": "posthtml -c posthtml.json", 19 | "build:images": "imagemin src/images/**/* --out-dir=dist/images", 20 | "build": "run-s build:*", 21 | "serve": "browser-sync start --server \"dist\" --files \"dist\"", 22 | "watch:css": "onchange \"src/scss\" -- npm run build:css", 23 | "watch:html": "onchange \"src/views\" -- npm run build:html", 24 | "watch:images": "onchange \"src/images\" -- npm run build:images", 25 | "watch:js": "onchange \"src/js\" -- webpack --mode=development", 26 | "watch": "run-p serve watch:*" 27 | }, 28 | "devDependencies": { 29 | "@babel/preset-env": "^7.16.11", 30 | "autoprefixer": "^10.4.4", 31 | "babel-loader": "^8.2.3", 32 | "browser-sync": "^2.27.9", 33 | "eslint": "^8.11.0", 34 | "eslint-webpack-plugin": "^3.1.1", 35 | "htmlnano": "^2.0.0", 36 | "imagemin-cli": "^7.0.0", 37 | "node-sass": "^7.0.1", 38 | "npm-run-all": "^4.1.5", 39 | "onchange": "^7.1.0", 40 | "postcss-cli": "^9.1.0", 41 | "postcss-scss": "^4.0.3", 42 | "posthtml": "^0.16.6", 43 | "posthtml-cli": "^0.10.0", 44 | "posthtml-modules": "^0.8.0", 45 | "stylelint": "^14.6.0", 46 | "webpack": "^5.70.0", 47 | "webpack-cli": "^4.9.2" 48 | } 49 | } 50 | --------------------------------------------------------------------------------