Starting point for static sites

Starting point for static sites
0.0 0

#1

Hello!

There’s been a few times I had to create simple static site but of course I didn’t want to start from scratch each time. Such websites aren’t overly complicated, but even with simple setup you usually want to use autoprefixer, gulp, maybe sass or postcss to be able to split your styles into smaller chunks that are readable and easy to navigate during development, also, you’d likely want to preview your site on localhost with live reload in your browser. In fact these all are very basic things.

There is a great solution created by ZURB that you can see here http://foundation.zurb.com/sites/docs/starter-projects.html . I was using it for as long as I was using Foundation. There is everything that I mentioned above build in - for example sass, live reload, autoprefixer and many more - but my favorite thing was and still is their flat file compiler called Panini http://foundation.zurb.com/sites/docs/panini.html. This is something really useful - it lets you create html partials, layouts, you can have helpers in your html templates like “if”, “unless”, “repeat” or you can store custom data in JSON or YML files (even in frontmatter in html) that can be accesed in html later - so a lot of useful things, that generally make your code more readable and reusable as there’s no need for repetitions (you don’t need to copy navigation and footer on every subpage).

Their starter project is great but I didn’t want to use Foundation each time, sometimes I wanted to use other css frameworks or no framework at all (however I wanted to use Panini of course :slight_smile: ). So I thought that I would create my own starter project with Panini included but with the option to easily switch css frameworks (for now it uses UIkit 3 https://getuikit.com/ as an example but it can be detached in a few moments).
Also there is an autoprefixer, image optimisation, webpack, live reload thanks to browsersync https://www.browsersync.io/, sass and a few other things that I’ve found useful.

So, I’m using this starter when I build static sites and I try to improve it all the time. Although it is very small and simple project, I thought that I should share it with other campers here, maybe it would be useful for someone else. If you just want to create static site quickly or test some new idea, but don’t want to setup everything from scratch then you can get this starter here: https://static-site-starter.netlify.com/ and the code is here https://github.com/paweltar/static-site-template-postcss

Let it be my first small contibution to this community :slight_smile:

Usage:

You need npm to be able to run npm install inside project folder. This will install dependencies. Then you just type npm start to create /build folder which contains all files outputted by task runner (all your css, js, html and assets that can be placed on server). The npm start command besides creating /build folder also starts to watch your files in /src folder and creates server to preview your site on localhost:3000 - so if you change css or html, the browser will be automatically reloaded.

Finally the npm run build command just creates /build folder from your files in/src folder without watching for changes and without the live preview. It’s good if you just want to build your site and copy /build folder to server.

Ah, and whatever you put inside /src/static folder will be copied untouched to /build folder.

I hope that it will be useful for someone like it is for me and that we would be able to make it better together :slight_smile: