How to create a website using free tools

This website was build using using only free tools. The only thing I paid for so far is the domain name. The website is also hosted for free on Google AppEngine (I will have to start paying only when the number of daily visitors reaches a certain threshold). Below is the list of free tools used with brief descriptions.

Editor

I started with Notepad++ but once I had several files I switched to Komodo Edit which is more like a proper IDE than just a very good text editor. Another handy tool tor editing is Kdiff3 that allows you compare files and whole folders.

Source control

Git is very popular this days and if you use only one branch it's easy to learn as well. You can have a local repository and back it up on external drive or you can use a free private remote repository provided by Google Cloud Source Repositories.

Framework

If you don't mind Python (it's easy to learn and highly readable so give it a go) I would recommend using Flask as a framework. It's perfect for template rendering and some redirects for a small website and easy to start with.

JavaScript

Most people are probably aware of it already but I want to mention that writing JavaScript is much more fun with jQuery. It has lots of helper functions and caters for differences between browsers. If you only need to support modern browsers go for version 2.x, if you need to support old browsers as well go for 1.x.

If you attempt to write anything complex with JavaScript (like a game for example) unit testing will help you a lot and qUnit does it's job very well.

To reduce JavaScript file size and also check for common errors you can use JavaScript “compiler”.

CSS

To get a website looking presentable quickly Bootstrap from Twitter is a good option. It has a bunch of styles that will make your website look consistent and display properly on various devices.

favicon.ico

To make website look more professional you can use an icon that will appear on the browser tab and when your website is bookmarked. If you like me can't draw at all you can find a free image online (search for “public domain vector graphic”) and customise it using Gipm (a free analogue to Photoshop). There are lots of different formats of icons for different devices so the easiest way to create the is to use http://realfavicongenerator.net.

Hosting

This website is hosted on Google AppEngine which gives quite generous free quotas (28 hours of compute time which means one machine all day plus 4 hours of second machine and a gigabyte of bandwidth). Heroku used to have free hosting as well but since 15th of August 2015 it's limited to 18 hours a day which makes it unsuitable for a website that is used not only by its owner.

AppEngine has also limits on bandwidth so consider heavy client-side caching. Another thing that could help is a free CDN (I use CloudFlare) which take some of the traffic of your server.

Checks

There are lots of websites where you can check your website for markup errors, speed, mobile-friendliness etc.

Google has a handy tool called PageInsights that highlights speed and usability problems both on desktop and mobile.

Nibbler apart from a nice name (Futurama fans will understand) has nice interface and lots of suggestions how to improve your website with links to external websites that specialise on different aspects (e.g. Ahref for backlinks, Alexa for popularity).

www.webpagetest.org allows you to check your website speed and various server behaviours from different word locations.

Social Networks

The easiest way to add social network buttons is by using AddThis script (see analytics section about cookies).

To make your website look its best when shared use Open Graph markup. Here is an example for the homepage of this website:

<meta property="og:title" content="Battleship game - play online for free" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Play nicely drawn and mobile-friendly ..." />
<meta property="og:image" content="http://www.battleship-game.com/img/battleship-game.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />