A pragmatic and scalable starter/seed project aimed mostly at simple static HTML pages and sites.
Contents:
To start a new static HTML site or page one probably shouldn't need to go further than the good old proven and amazing HTML5 Boilerplate.
But with the latter consisting mostly of ready to use static files, it lacks as a basis for a working development workflow, which, given the modern web development requirements, one might sometimes need to add CSS pre-processing, bundling, deployment, among others.
This starter/seed project draws heavily from HTML5 Boilerplate, but adds a simple folder structure and a very lightweight base development workflow (based on Grunt) that allows for expansion to include aditional features and additional steps to your build pipeline.
With this starter/seed you will get:
- A modern template based on HTML5 Boilerplate.
- A sensible folder structure with a
distfolder and a minimal build process, that clearly separates all the the config and dev workflow files,npm_modules/dependencies, etc, from the files that need to be deployed. - A deployment command/task that works through FTP/FTPS or SFTP.
- Configurable variables via dotenv/
.envfile.
.
├── .tmp/
├── app/
├── dist/
├── node_modules/
├── .editorconfig
├── .env.example
├── Gruntfile.js
└── package.json
Where all of your source files go.
The folder of all the built files that can be pushed and served by a remote/production server.
The folder of all the build files to be served by the local/dev built-in server.
EditorConfig file, to help maintain indentation consistency. (Check the site to see how to enable on your code editor.)
dotenv example file. Copy this file into a .env file and adjust the environment variables. (This is mostly an example usage of dotenv functionality to store and use environment variables on the build tasks/pipeline for you to expand, for now it only holds a Google Analytics variable.)
Grunt configuration file providing tasks for the development workflow—check the list of available tasks below.
Make sure you have Grunt/grunt-cli installed.
Clone the repository and make sure to clean/delete the .git folder.
Install the development workflow dependencies with a npm install and use the following tasks to build, develop and deploy your project/site.
grunt,grunt:build(default task) — Build all the files needed for local/dev and production.grunt build:dev— Build all the files needed for local/dev.grunt build:dist— Build all the files needed for production.
grunt dev— Development task for building files, launch a development server and watch changes. The development server injects the live reload script into the page through connect-livereload / livereload option, which is configured to work with thewatchtask.grunt watch— Task that will watch changes and trigger the build pipeline, but doesn't launch the development server (useful if you're serving the files through another server).grunt server— Run the development server but without watch nor live reload functionality (useful for a simple or quick server launch).grunt clean— Removes all built/generated files and directories (useful to use before agrunt buildto force a clean build).grunt deploy— Deploys the built code/site to a server using FTP/FTPS/SFTP. Note: FTP/FTPS and SFTP deployments are done through different Grunt tasks/dependencies (grunt-ftps-deploy and grunt-sftp-deploy). You can adjust and remove/keep just one of them according to your needs/server connection. You'll also need to add a.ftppassfile to your project, and to adjust the connection info. Check the documentation of each task/dependency to see how you can do this.
If you feel something can be improved in the spirit of this starter/seed project, feel free to open an Issue or submit a Pull Request for consideration.
@pedrosanta