Setting Up A Simple Web Template

Over the years I have found it hard to really establish a good web project template that allows me to either test a concept or create a simple website quickly. Like other old schoolers, I kept a /junk directory on my Desktop and had various HTML files in it along with the standard sub-directories of /img, /css and /js. For the new year I decided I needed a better solution. One that was more easily deployed and one that could be distributed and run on any system.

I did not do this to solve anyone’s problem but my own. This is by no means an end-all be-all solution for creating a web template. It was inspired by my search for a simple web setup. One that did not need too much to get up and running quickly. After searching GitHub, as well as various Medium articles about how others attempted to solve this problem, I found many of them a bit bloated for my taste, and more advanced than I needed for my simple projects. Some of them of them also seemed too difficult for a beginner to understand. While I am no beginner, I wanted to create my template with the beginner in mind. After all, we are talking about a simple setup here. This limitation would force me to keep it light and not use a bunch of packaging and serving that some of those I found required. It also gave me some boundaries to keep myself from over doing it.

With all of the above in mind. I created the following criteria:

  • single page index.html website with the ability to interlink pages if needed
  • no server necessary but optional if needed
  • the ability to use SASS and have it transpiled to CSS with little fuss
  • the ability to compile JS libraries into single .js file if needed but totally optional
  • easily converted to a larger project or web application if needed
  • easily distributed for collaboration or review on any system regardless of setup
  • compact, using the least amount of dependencies as possible
  • easy for a beginner to understand.

While a couple points in this criteria are a little advanced, they are not necessary for using the template and can be easily bypassed. I explain more in my process part of this piece. What I ended up with was pretty simple. Although I use node packages as dependencies, they are only present if you choose to use Gulp. The template can easily be used with any css file because one can just add it in the head of the html.

If you would like to see the final product, I placed the public repo here. What follows is a brief explanation of my process, feel free to skip this completely and take a look at the final product git repo here.

The Simple Process

A recent project I was completing would give me the perfect opportunity to put this template together. It was a single page website and I needed to do. bit of SVG overlay code for the developer before handing off all of the assets. The beginning was easy. I made a new directory called “simple-web-template” in my local dev folder. Within that directory I placed a sub-directory named “assets” and gave it three sub-directories named “/scss”, “/js”, and “/img”. Back in the root directory I added the index.html file and gave it a minimal HTML setup.

Here is the file tree:

├─assets
   ├── img
   ├── js
  └── scss
└ index.html

This being the foundation I then set to getting some automation ready for SASS conversion and getting any custom javascript into a single file. I use Gulp in my workflow regularly so to get me up and running faster I just stuck with it. This also limited the amount of dependencies I needed for development to Gulp and some of its helpers. They were a necessary bloat but I believe I kept it to a minimum. Node itself would not be required to see the final result on any system. It is only required to run Gulp when developing. If a user would rather not us SASS or Gulp in this fashion they could easily bypass it or remove it from the whole template without affecting the outcome. It would also work for viewing anywhere, on any system, just by viewing the index.html file in a browser of the user’s choosing. No need to spin up a node server or anything. I mean, one could if they wanted to but it is not necessary.

The side effect of using node modules in order to handle the SCSS and JS packaging meant that if one wanted to expand their project to something more complex like a front-end framework, they could easily use NPM or another package management system to add dependencies or anything else to their development process.

Just to be clear, I am not claiming that this is the ultimate solution. It was the one best suited for me and if I am able to solve the problem for myself, it may solve it for others as well. All I wanted was a simple way to start a minimal web project. I think I achieved my goal with this but know there is always room for improvement!