Student Site Boilerplate aims to introduce new web development students to modern build tools in a simplified manner. The goal of this project is to be able to build and deploy a simple static site right to Github and allow students to explore Sass and ES6 without worrying about setting up Babel, Webpack, or other build tools.
Static Site Boilerplate is used as a starting point for its utility and relative simplicity. All commands are run through npm scripts so additional technologies like Grunt, Gulp, Yarn, etc. don't have to be taught. Github Pages is used to reduce the overhead of trying to find hosting for student projects, and keep progress in one place.
Other modifications include simplifying the output from Webpack to errors only so students aren't wading through a pile of success messages to find out if their build has successfully deployed to Github Pages and adding HTML5 linting.
Static Site Boilerplate Documentation: https://docs.staticsiteboilerplate.com/
The Student Site Boilerplate is part of a lesson in my web design and development class, and I teach Github, Tower, and VSCode alongside this boilerplate. If you are interested in the documentation for this process and setting up your development environment in the same way, you can follow along with this Google Doc.
- Node.js and npm (Node Package Manager) - this repository has been tested through 16.17.0 LTS. Windows users, be sure to check the "Install additional tools" checkbox during your installation process, like so:
- A code editor of your choice, such as VSCode or Sublime Text
- A way to connect to and work with Git and Github. If you like having a user interface to do this, I recommend (and personally use) Tower. (A Windows version is also available!)
- Your computer may use different linebreaks than ESLint expects. You can add a comment to fix this.
- If you see errors with Sass on your first build, try running
npm rebuild node-sass.
Clone or download this repository using your favorite method (Command Line, GUI such as Tower, etc)
Change directory to this repository on your computer (path may be different depending on where the repository is located):
cd student-site-boilerplateRun npm install to install development dependencies, then see Usage below.
Make sure you've set up your development environment. Then, use the following commands to get up and running!
| Command | Description |
|---|---|
npm install |
Installs dependencies |
npm run start |
Start development. Edit your code in the src folder. |
npm run lint |
Checks all code for formatting and validation errors. |
npm run fix |
Checks all code for formatting and validation errors and attempts to automatically fix them. |
npm run test |
Runs all tests to make sure your code meets assignment requirements. |
npm run build |
Create a production-ready build of your code to the dist folder. |
npm run deploy |
Builds and deploys your code to Github Pages. |
- Modern Technologies: Full support for HTML5, JavaScript (Vanilla and ES6) and CSS (Sass and PostCSS)
- Built-in Server: Local development server with hot reloading
- Performance Tuning: CSS and JavaScript transpilation, bundling, autoprefixing, and minification
- Image Optimization: Optimizes images for loading speed
- Favicon Generation: Automatically generates all favicons for Web, Apple and Android devices from one image file
- Code Linting: Full support for JavaScript (ESLint) and CSS (StyleLint) linting
- Cutting Edge: Uses Webpack for processing and bundling your code
- Deployment: Built-in support for deploying
distto thegh-pagesbranch. Serve your site right on Github Pages!
The code is available under the MIT license.