Webpack backed project to create a simple HTML-CSS-JS based static websites with the help of Typescript, PostCSS, ESLint.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
NodeJS
Install the dependencies with simple install command.
$ yarn
or
$ npm install
While the webpack setup is opioninated about how the compilation will work and how the main structure has to be, it's also possible to customize to your suitable needs without even opening the webpack config directly.
For accomplishing this, you should look at the website.config.js file. Here you should fill the title, description, appName, developer, developerURL and favicon sections with your websites' information.
paths, regex, compilation and optimization sections can be configured to suit your needs better. (Currently some directories may not be changed like src).
Project consists of two main directories; the root directory and src sub-directory under root, which consists of main source files for the compilation of websites, such as HTML (.html), CSS or PostCSS (.css), Javascript (.js), Typescript (.ts), Fonts (.woff2|.woff|.ttf|.eot), Images (.jpg|.svg|.png|.gif) etc.
|-- /
|---- src/
|------ assets/
|-------- fonts/
|-------- images/
|-------- scripts/
|-------- styles/
|------ pages/
|------ ...
|------ website.config.js
(The root direcotry also has other config files such .babelrc, .eslintrc.js, postcss.config.js, webpack.config.js etc.)
Boilerplate consists of three sample pages when you first initiated it.
|-- pages/
|---- home.html
|---- about-us.html
|---- contact.html
While the HTML pages are being compiled for distribution, the file name will be used to fill <title> section of the page, and also it will create the url slug for the page by creating a directory with the same name, and copying the page as the index.html of the directory.
For example, a file named products-and-services.html would result in the creation of the route www.projectdomain.com/products-and-services/, which would be served by index.html inside that directory. The page title would be Product And Services.
(In the future more customization options should be added to alter default behaviour.)
Webpack (html-webpack-plugin) by default supports a light variant of EJS (Underscore/Lodash Templates) to inject bundles to the page. This mostly results in style bundles added to the end of <head> section, script bundles added to the end of <bod> section, also favicon and manifest data added to <head> section just before styles.
- Webpack - App bundler
- PostCSS - CSS Post-Processor
- PostCSS-preset-env - PostCSS plugin for nextgen CSS features
- Typescript - Typescript
- Babel - Javascript Transpiler
- ESLint - Javascript/Typescript Linter
- CSSNano - CSS minifier
- Prettier - Code Formatter
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Ömer Balyali - Development - Github Profile
This project is licensed under the MIT License - see the LICENSE.md file for details