To make a free website, there are many options available. WordPress.org, WordPress.com, Wix, or traditional HTML and CSS, to name a few. Some are better than others but stick with us and we’ll show you around. Not to mention it won’t cost you a penny, because every single one will be without charge. Not a penny nor a dime will leave your pocket.
Free doesn’t mean rubbish either. Most definitely not. In fact, if you use your noodle, competition is so competitive these days you can shop around and cherrypick the best bits. You’ll not only save money on building your website, but you can even host it for free with Netlify or GitHub Pages.
The options are truly amazing. Partly because the technology to build websites has matured, combined with the lower cost of data storage. This enables companies to host websites for peanuts and as an incentive offer us a lot of free tiers. Of course, they’d rather we pay and offer fancy-pants packages, but the truth is for ordinary people you don’t need to pay for anything.
So think yourself lucky that trickle-down technology is benefiting us all immensely. It’s never been a better time to make a free website!
More Gossip Lollies
Which Platform Should I Choose to Make a Free Website?
Don’t jump in headfirst like a lunatic, like I usually do. Take you time to go over the options, because you’ll benefit greatly from doing more thinking now and less regretting later. The options are so vast it’s a big rabbit hole that can suck you up if you aren’t careful.
Things to consider:
- What is the website for?
- Blogging – small company – portfolio – pesonal website?
- Traditional code or content management system?
- Making a free website is a great way to learn before stepping up your game.
- The only thing you really need to buy is a domain name.
- You could stay free forever.
Traditional Web Design or Proprietary CMS?
Think about it like this – there are always pros and cons rather than there is always right and wrong. What I mean is that every method has good and bad points. You’re never going to find a perfect system.
Traditional code is super easy if you want to tweak something. You will have written the code so know exactly where to start. On a negative note, traditional HTML and CSS isn’t so good if you want other people to access your site, maybe workers or people posting blog content for you.
On the other hand, popular content management systems like WordPress have now really matured, with thousands of plugins written for them. If there’s a problem, rest assured that someone will have written a plugin for it. This will save you time and money compared to hand-coding a solution.
CMSs are great for blogging. You can give people account access with restrictions easily enough. This is less stressful than worrying about someone ruining your code base on a traditional site.
The downside of a CMS is that they can be slow at times. The pages are dynamic – which means they’re made up of templates that are pulled in from various sources – and this increases page load time. It’s proven that a slow website has higher drop off rates, because people won’t wait for a page to load. This in turn can cause a drop in revenue.
Realistically speaking, if this is your first website, don’t worry too much about the platform. Just pick the one you feel most comfortable with and go with it. Even content management systems have a learning curve. It won’t be anywhere near as hard as learning how to code, but it can be stressful at times.
Hand Coding in HTML and CSS
If you really want to get into web development as a business, then you need to learn HTML and CSS. This is the option for you to take if you’re serious about front end web design. The more familiar you are with code the easier it will become when you tinker with websites, even WordPress sites need the odd snippet of code inserting in the customiser to adjust menus and the like.
Further progression down this route will take you into JavaScript territory. This is much harder than markup languages like HTML and CSS. JavaScript is a true computing language. You can avoid JS initially, but if you go for a job interview as a coder then you’ll naturally be expected to demonstrate your skills in this area.
For building your first free website, though, you’ll be fine with the two markup languages that we keep chirping on about – trusty old HTML and CSS.
WordPress.Org and WordPress.Com
Now I wish somebody told me the difference between WordPress.org and WordPress.com when I first started. It was driving me crazy when I installed the official Jetpack plugin and it kept flicking between the two websites.
WordPress.org is where you download a copy of WordPress and host it yourself. You have much more control over this option and can basically do whatever the heck you like.
WordPress.com on the other hand, is where there is literally one copy of WP on WordPress.com and they host millions of free and paid WP accounts. You can sign up for a free account initially and upgrade your domain name to a private one if this suits your needs later on.
It goes without saying, though, that there are more restrictions on a .com WordPress site. They can be quite strict and I made some free sites once before then they banned me. Honestly at the time I was shocked, all I did was have an advert or something and that was enough to breach their guidelines. I think they said my account was fake. To be fair, I bought some expired accounts on Fiverr and didn’t realise I was doing anything wrong. Lesson learned.
Build a Free Website on WIX
WIX has a couple of different options, but their system is really easy to build a good-looking website. Honestly, the cannabis sites that I made on there were some of the nicest sites that I ever made, but unfortunately I deleted them a while ago so can’t show you my handy work.
At the time they had just launched a new AI system that was less complex than the older version of WIX. Naturally the simpler something is, the easier it is to us, but the tradeoff is less options. To be fair, they were both really well developed and I picked them up in no time.
Although I haven’t used WIX since, I would definitely recommend it for your first free website. The one big downside is it’s quite hard to move your website to another platform if you wish to change afterwards. Guess you can’t always have your cake and eat it. There was a paid-option that enabled you to move sites, but this was from a different company so it isn’t impossible, but I can’t vouch for its effectiveness.
All in all, WIX gets the thumbs up from me, especially for a beginner. It enables you to get a wicked-looking site from day one.
Netlify: What About the Jamstack?
You might not have heard about Matt Billman, but he’s the creator of the Jamstack and co-owner of Netlify. They’re a really cool tech company that gives you the option of hosting your website for free.
The Jamstack stands for JavaScript, Markdown and APIs. I’ll be honest and although Jamstack websites are wicked fast, free to host and a ton of other good stuff, they aren’t exactly beginner friendly.
I built my own personal website – David Elstob using Gridsome and Tailwind CSS. It’s a supremely fast website with all the latest trick stuff that Gatsby inspired Gridsome with. The images load blurry placeholders, plus other neat tricks like link pre-fetching. It makes clicking about a Jamstack website blazing fast.
Initially I hosted it on Netlify, then had my files on Github (not Github Pages) so whenever I updated the site on my laptop, I pushed the changes to Github and then Netlify rebuilt my site. Trust me it’s awesome once you get it running smoothly.
One quick tip that drove me round the bend was this – ensure your file names match perfectly. I didn’t know that windows isn’t case sensitive, but Linux is. Netlify use Linux to build your website so I thought my code was fine, but due to my file names not being exactly the same it was crashing my build. It drove me nuts because I couldn’t find the problem, until I came across a forum post that suggested trying to match the case sensitivity on the file names.
Hopefully now you’ve got this tip you won’t suffer the same fate as me.
It’s a bit crazy to think that on Linux old-bridge.jpg is different to Old-Bridge.jpg, but it is! Windows is less fussy thankfully.
Jamstack and static HTML web pages in general are really secure from a security standpoint, when compared to a dynamic web page such as WordPress. If you’ve had security issues before then you will be able to sleep at night if you come over to this side of the road. Static sites don’t run code, apart from the odd form here and there, which has to be run on a server, but the window for hackers is drastically reduced.
Github Pages is Another Option
Although most people use Github to host their files, which can then be syncronised with Netlify or whichever host you are using. I actually moved my personal site from Netlify and put it on Hostinger with the rest of my websites. Hostinger doesn’t sync with Github as smoothly as Netlify, but they’re an awesome value web host nonetheless.
For a firstclass European web hosting provider, Hostinger are absolutely top notch. I’ve never seen prices to match theirs anywhere else. Try them and see for yourself.
You can use Github Pages, but I’ve only used them when following a tutorial on a course that I signed up for on Udemy. We made a personal portfolio website and stuck it on Github Pages. Hoodlum-Z is one of them. About Me is another. They won’t blow you’re mind, but just an example of the simple things you start with on a Udemy course.
If you want an absolutely amazing course then this one – the Complete Web Development Bootcamp by Angela Yu – is the one that I’m doing. There’s so much valuable information in it it’s insane. I’ve only got 25% through it and it’s helped me so much already. She’s a brilliant teacher and goes over everything in an easy-to-learn, but still interesting manner.
You’ll move on from the simple starter sites to a copy of Tinder, but for dogs. 🙂 I’m currently on the JavaScript section.
Tailwind and Bootstrap CSS Libraries
One last thing I’d best mention before I forget is Bootstrap. Bootstrap 4 is an in-betweener. It’s for traditional code, but it’s a library with a vast list of pre-built items. It can save you a lot of time when developing. The only downside is that if you are only building a simple site then it might be pointless, because you end up loading far more code than you need.
You see a small web page might only have 10kb of code on it, but a minified Bootstrap file is still 150kb or so. That means your users will be wasting data downloading code they don’t need. In the big scheme of things, it’s not a major problem, but if you’re super pedantic like me and want to be totally correct then there’s a time and a place for Bootstrap.
Also if you want your site to be totally unique and you end up creating lots of new CSS classes then that is defeating the point of using Bootstrap in the first place.
Tailwind CSS is a better option for most people. It’s not as popular as Bootstrap, but it’s still used by the likes of Google and other big companies. They call it a utility CSS library. What that means is that it doesn’t dictate as many styles to you, it’s more like saying if Bootstrap is a pre-built house, Tailwind is the shell and roof. You don’t get all the fixtures and fittings.
As previously mentioned, my personal site David Elstob was built with Tailwing and Gridsome and I am really happy with it. I also used PurgeCSS that you can actually use with Bootstrap. It strips away most of the unused CSS classes so you get the best of both worlds. You get the lightweight of hand coding a project, but the features of a library.
If you need more advice on this subject, I followed a tutorial by Andre Madarang. He’s a really cool tutor and his videos are well worth watching for newbies learning their craft.
Summary and Honourable Mentions
Once you get a bit deeper into UX design and fully catch the website developing bug, there are more and more features that you will come across. Even if you wish to stick to free stuff, it comes naturally in any environment that you will end up purchasing some products. Whether that’s from pure FOMO – fear of missing out – or a genuine need to buy, it doesn’t really matter. Poing being it’s a natural progression when you come to that bridge.
Adobe Products like Photoshop and Publisher
To be truthful, when I first started out I bought Cyberlink Power Director to make YouTube videos and also got their free photo editing suite – Photo Director. While it was a good software tool, the problem wasn’t with the program itself, it was the fact I couldn’t find many tutorials on how to do things. Nearly all the image editing videos on YouTube are for Adobe products. There’s just a tidal wave of Adobe stuff, especially Photoshop.
Cyberlink is great for video editing and I’d highly recommend it. I found it really easy to use and soon picked it up plus there were more tutorials for this than for Cyberlinks image editing software. I highly recommend it.
After Cyberlink I moved onto the full Adobe suite, which is approx £40 or $40 per month. Not too bad for the power it delivers. The downside is that nowadays, Adobe programmes are almost too powerful. They have that many features it’s a nightmare learning how to use them all. Photoshop is easy enough, but for me the others are much harder. Obviously people will have differing opinions. Some will agree and others less so.
Best bet is to try them for yourself. I ended up cutting my package down so now I only pay £10 per month for Photoshop alone. Even if I don’t use it that often I still keep it because it’s so affordable.
Free Editing Software – Canva, Fotor
While I don’t have that much experience with Fotor, Canva is a great free – or paid – tool. Plus Canva is a great option to use alongside Photoshop. They make a great team. I find Canva easier to use for making banners, which I then run through photoshop to make them opaque, which you need the paid version of Canva to do.
In fact, I find mixing and matching software to be a really impactful strategy. You can get a free version of something that does A, B and C, then another editing suite will do D, E and F. Together they will cover all the bases. This technique has also served me well in the CMS world and has ensured that I’ve yet to buy any software for WordPress.
My Top WordPress Plugin Choices
There are literally thousands of plugins to choose from in WordPress, but here’s a list of my best ones. They have all served me well and I have the same setup on all my WordPress websites.
Remember that even if you are a hand-coding old-school web designer, it’s still good to have WordPress sites on offer because they are supremely popular with your clients, especially if you cater to bloggers.
- AMP – I use the official AMP WordPress plugin. It is tricky to setup fully for beginners, so AMP up with caution.
- Gutenburg – the official WP page builder plugin, I prefer this even though my sites are Themify and come with the Themify builder built in.
- Themify Themes – Themify is a great company and they’re really helpful with their customer service, I use the Themify Ultra theme most of the time, though have recently started to experiment with Generate Press.
- Schema – this is for structured data markup and helps with your SEO. I use the official schema plugin.
- Smush – is a great plugin for reducing image file size. However, I always optimise my images before uploading, which is best practice. Smush just trims off the excess fat.
- Updraft Plus Backup/Restore – a great plugin to backup your website so it’s safe even if it gets hacked. You should do so at regular intervals depending on how often you add new content. Don’t just rely on your web host for everything. Be proactive when thinking about the safety of your website and hours of hard work.
- W3 Total Cache – this is a tricky plugin to get set up correctly, but it’s awesome once you master it. My best tip for this one is to leave all the minification turned off. Only have minification turned on in one place. I do mine with Cloudflare.
- Warm Cache – a more specialist plugin that runs a cron job on your website hosting and essentially sends traffic to your site so the pages aren’t cold – they’re warmed up in the cache.
- WordFence Security – people say this can slow your website down, but I think that’s if you have the paid active option. We prefer the free version and it’s all you need really, as long as you update all your plugins and are active about the important things in your website housekeeping.
- WP Disable – this does what it says on the tin. There are some legacy links in the WordPress theme structure, I guess they don’t want to delete them and upset people that have been with WordPress from the start. For most of us they’re dead weight and WP Disable is a great tool to deactivate useless items in your theme.
- WP Optimize – this is the sister or brother product to Updraft. It’s a great product that’s properly coded. You can clean your databse frequently and remove unnecessary auto-save revisions, etc.
- Yoast SEO – how useful this now Google is so clever is debatable, but I think people are scared of not using it and missing out in Google rankings. Ironically Matt Cutts who was the big boss at Google a few years ago never seemed to speak too highly of such software. He said WordPress basically had all you needed. Even so I still use it because it has some useful features, such as XML sitemaps.
- Fast Velocity Minify – I have this on my non-AMP WordPress sites, as it’s a great plugin when you know how to tweak it. My sites running this load in under one second.
- That’s all folks for my essential plug-ins collection.
*AMP sites are lightning quick when served from the Google cache, when people search Google, but not as quick when served from your own hosting provider, although the next update to the official AMP plugin is due to bring them more inline with one another.
This doesn’t mean they are slow, but it’s just the actual AMP boilerplate itself takes time to calculate the page layout. This is what helps make AMP pages more reliable and the load times less volatile, but in doing so incurs a small speed bump. It’s only really noticable on simple sites. Bigger sites will only see the positives AMP brings, as the potential for saving time is bigger, which dwarves this small speed penalty.
CloudFlare and Stackpath CDNs
Cloudflare and Stackpath are both content delivery networks. Do you need them with a free website not really, but Cloudflare has a free tier, which is the one I use. Stackpath is only $10 per month and this is my only luxury along with the aforementioned Adobe Photoshop.
The beauty of Cloudflare is that it started out as a security tool rather than a CDN, but they then branched out into the CDN game. You run Cloudflare in front of your website and you point your domain name servers at Cloudflare. They are a highly respected company and I use Cloudflare on all my websites.
The trick of getting the best out of Cloudflare is using it with W3 Total Cache, as they have an extension built into W3. You then need to set up your 3 x free page rules, but that’s all you need. The ultimate icing on the speed cake is setting Cloudflare to cache all. I’ve had my latest time to first byte coming in at 1.8 seconds on WebPageTest.org. That’s truly amazing, when I’m on basic shared hosting and people are paying hundreds of pounds/dollars for those speeds.
Stackpath is also a content delivery network and syncs great with W3 Total Cache and Cloudflare. In truth, I could drop this from my websites and it wouldn’t make much difference, but for the price I believe it’s worth buying. It’s also a plus point when dealing with clients. The more nodes you area delivering your content from the better.
That’s All Folks…
Well I think I’ve about covered everything. You now know how and where to go to design and build your first free website. You even know how to host it all for free. Then there’s the endless free programmes to alter and edit your images, make fliers and anything else you might need for social media and graphics for advertising.
Ah, social media, I forgot about that. No don’t worry, you surely already know all about that now we live in the Facebook generation? If you get stuck there’s always Google.
If you have any specific questions that you feel I’ve missed out, please hit me up in the comments and I’ll gladly respond.