A fairly simple starting point for static websites. It uses EJS templating to separate parts of pages into components and easily access information. It's encouraged to make all content in JSON format and then load dynamically. This allows quick edits and easy migration to a CMS.
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.
It is assumed you already have nodeJS and NPM installed on your machine, if not follow THIS guide
First, you need to clone the repository into the directory you are working in.
git clone https://github.com/eggorybarnes/Gulp-boilerplate.git
Next you need to remove the remotes
git remote rm origin
Now create your own repository on GitHub or your git service and add that repository as your origin.
git remote add origin <url>
Where <url> is the URL of your git repository. And finaly push your new project.
git push -u origin master
Install all the code dependencies by running
npm install
Start the server using the command and watch as it magically opens the site in your browser.
gulp
And you're ready to go! Feel free to look through all the code yourself or keep reading for some explanations and pointers.
This boilerplate uses SCSS as a pre-processor for CSS, this provides a ton of addtional functionality to make your life easier. Visit the official site HERE. For a great video tutorial series check out THIS.
To get you started this boilerplate uses Sierra, 'The smallest and lightest SCSS library' to learn more read through their docs and poke around at their samples HERE
To template your pages use EJS which you can find resources for HERE. This allows you to seperate your files into multiple parts and reuse them across your site.
And finally to compile everything down into a friendly package that you can deploy we use Gulp. HERE is their official website and HERE is a video tutorial to get you started.
.
|── app
| |── fonts # upload fonts here, fontawesome already included
| |── js # root folder for all your JS, the page already grabs main.js
| └── pages # all your pages in EJS format, we recommend seperating your pages and including them through the templating engine
| └── scss # your styling goes here, check out the Sierra docs for the structure in this folder
|── dist # all your work will be compiled into this folder
|── gulpfile.js # default gulp file
└── package.json # all the boilerplates dependancies, this is used by npm