An HTML CSS boilerplate with built-in sass support:
- Development server powered by parcel with sass compilation and auto-reload.
- Deployments to github pages with gh-pages
-
Clone this repository into a new project folder
-
Delete the boilerplate's git history to ensure that the project history only includes your commits
cd <project folder> rm -rf .git -
Edit
package.jsonto add you project's namepackage.json{ "name": "[project name]", ... "author": "[your name]" } -
Edit
src/index.htmlto add your projects name... <head> ... <title>[project name]</title> </head> ...
-
Start a new git repository and make an initial commit. This will make sure that you can work on your project with git.
git init git add . && git commit -m "Initial commit" -
Install the dependencies
npm install -
Happy Coding!
Run parcel-live-server and start coding!
npm start
Compile source code from src and create an optimized production bundle in dist folder ready for deployment.
npm run build
Deploy your code to Github Pages: this script creates a 'gh-pages' branch and publishes the dist folder. For this to work, make sure you already have a remote repository on github.
npm run publish
Any project created with this boilerplate will follow the structure below:
Project
│ README.md
│ package.json
| package-lock.json
└───src
│ │ index.html
| └───images
| └───styles
| | │ _base.scss
| | │ _variables.scss
│ | └───main.scss
| └───js
│ └───main.js
└───build
The README should contain a brief description of your project, feel free to delete this guide or rename it to add your own description.
These files contain various information about you, your project and the project dependencies, as well as useful scripts to help you with the development process.
The src folder contains any file you would want to add to your website. This is the main folder you will be working in.
index.html is the main page for your website which you will be working on. Feel free to add any new html pages you create directly in the src folder.
The main.scss file will contain any scss code you will be writing.
Contains all images of your project
The build folder will be automatically generated whenever your run the start or build script:
npm run buildnpm start will create a non optimized bundle and npm run build will create an optimized production bundle, ready to be deployed. It is excluded from git tracking since it is not customary to include compiled code in a development project.