Create a website that makes your friends happy without eating your time

A static website for presentation is a fair simple piece of software. Although you don’t even need to be a professional developer to create one, to achieve a good result could be a time-burning activity. Here’s my story on how I smoothed the process and went direct on results.

If you are a developer, there are good chances you’ve been asked for a website. That could be for your friend’s local business, for your children’s football team, for the charity you support.
If you are a frontend developer, it’s probably a matter of minutes, and you could even have something crafted already.
Instead, if you are a backend developer (like me), a sysadmin, an IoT dev, etc, it could be not that trivial to create something modern-looking, solid and with low effort.

If you are like me you don’t want to dig into a new framework to just create a presentation website. You wanna find a free html template, edit with your content and publish on a reliable hosting provider. That’s it. In the end, it’s just html and css, it’s not rocket science!

Monkey-patching it’s quick for starting but it slows you a lot once you iterate into coding. You’ll find yourself dealing with huge files, repeated code blocks, manual operations to get your site in the browser. I felt so annoyed I even thought to put everything on Wordpress! Still I didn’t want a framework, but I was really missing:

I guessed I had to do it by myself.

It was time to code. I committed my self not to build yet-another-monster, so I went vertical on my needs, no over-design, no edge-case development. And, most important, no implementation upfront: I include a library only when I need it.

Nodejs environment was a natural choice for me, both for my experience and the variety of packages I can find on npm. On top of that, here’s the stack:

(Installing instructions for each tool can be found on relative website, and I won’t dig into explanations. If you need any help, just comment below)

Let’s reorganise all this goodies!

At the end I’ll have:

I now have a solid base upon which craft my website. And it came with no effort! Now it’s up to me: I can refactor the whole css, I can just monkey-patching, I can do a bit of both. My effort can follow my needs, not too much work upfront.

My first move was to split the gigantic style.less into smaller, meaningful chunks — header.less, footer.less, etc — and use the @import directive to compose them. I also created global variables to centralise color palette, fonts, sizes.

For html templates I used the same approach as for css. I moved my index.html under /templates folder, and I settled.

I didn’t really feel the urgency to split this huge file into smaller pieces, so I didn’t. Instead, I spotted a lot of opportunities to reuse chunks of html: for instance, I had a F.A.Q. sections with 30+ questions and answers, everyone sharing the same markup. It was a quick-win to use Handlebars’ {{#each}} directive and move content into/data/index.json file.

Another opportunity was internationalisation. I had to ship the very same page both in english and in italian, so I just moved every text string into the data file, duplicate it and translate at pleasure. Now I have /data/it.json and /data/en.json that fill /templates/index.html to produce both /dist/it.html and /dist/en.html.

In brief: clean and ensureDirectory make a new empty /dist folder, compileCSS and compileHTML deal with generating files with Lessjs and Handlebars, compileAssets just moves its content into /dist.

I put the build and start script in pacakge.json so iI can run them easier:

I’m so used to Git that I initialise a repository for each project, even if it’s not to be shared. The key benefit is having a local history of changes, so I can rollback when I break something. Plus, I can store the code in services such as Github or Bitbucket.

Things to notice:

With this configuration, every time I push changes to my Bitbucket repository, the website is automatically built and published. Easy peasy 🤗.

Related posts:

If our paths had been different and we met in a park or cafe or an orgy or a concert… would you have married me knowing I would become broken? And if you did I’d ask one thing of you… color my skies…

DEMOCRACY is said to be the government of the people by the people and for the people. It is the most accepted people centered initiative that forestall hope, harmony, economic advancement and…

Crypto investment is exploding with popularity. Several traders trade in digital coins to have high profits. They buy, sell and hold the coins with the digital technology of crypto wallets. But to…