How to build a website for free without WordPress
Do you have to use Wordpress to create your own blog? No! In this post I show you how to create a completely free blog without wordpress…
For a long, long time, in fact almost as long as internet blogging has been a real thing, the easiest and best way for anyone to get a custom blog up and running was to use WordPress. Wordpress is so popular it powers something like 32% of all the internet. That is an insane amount of content created, produced and shown who’s the underlying infrastructure is this one platform. Obviously, not all those sites are blogs, and that is a testament to the flexibility of the platform in many ways allowing you to produce almost any website you want. Combine that with an incredibly active and broad plugin and theme market place, you had an excellent system for getting simple custom services up and running without too much expertise.
The internet, as a whole, has benefitted from the invention of WordPress.
Bold, I know.
Why WordPress Costs Money
While WordPress itself is free and the code is open-source, allowing anyone to download and run it. In reality, it costs money to host on servers, and you end up paying companies every month to host your blog.
If you’re just starting out this might be quite off-putting. You’re going to be committing to an expense for as long as you have a blog. Depending on your situation somewhere in-between £50 — £120 per year. Which might not seem like an extravagant amount of money but does start to add up, especially if your blog isn’t making any money.
I will say now and draw attention to that fact that that fee doesn’t include the domain name fee. The yearly expense that you pay to have yourname.com or some other similar domain to host your blog.
It becomes expensive in the long run to have your own little corner of the internet.
A Free Alternative to WordPress
WordPress is valuable because it is relatively easy to use. Once it is set up, you can make changes to your website, and you can change content quickly. You are paying for the convenience, which as we all know is a good business model. But in recent years, the rise of headless CMS’s, static sites, and CDN hosting has led to an emerging series of technologies that allow for free alternatives. The once thought unassailable crown of WordPress is this time under attack from the fast, simple, and compelling newcomer.
There is a recipe for creating and managing a free website that leaves you without any costs whatsoever* and we’re going to outline it here.
*Small caveat, if you want a custom domain then you will need to pay domain registration fees.
Step 1: Create a Github Account
If you already have one, brush off that login information and get ready to connect it to Netlify. If you don’t know what Github is, then it is basically a place to store your code and files for a website. They store them in something called a ‘repo’ (short for repository, nothing to do with the repo men as one might first think). This account is where you will store your code for your new website. Keep the login information safe!
Step 2: Use your Github account to create a Netlify account
This nicely lets you keep one set of login details for your website rather than having to manage multiple different email and password combinations. But what is Netlify I hear you ask?
Netlify is a fantastic service. Without a doubt, one of my favourite companies, which in large part is down to their incredible generosity. (They will let you host 500 static sites for free. More than any single person could surely use.)
Not only that, but they have a bunch of easy to add features (also with gracious free tiers) that make your website more useful. For example, you can add in forms that people can submit (think contact me, demo request, feedback, media enquiries etc) and you can easily collect the data. They have automatic https, which is a blessing, making your site more secure and getting the thumbs up from search giants like Google and Bing. Plus, a whole bunch more that isn’t worth talking about here, right at this moment.
Step 3: Finding a site
So you’ve made yourself a Github and Netlify account. Now you can go… shopping? For a site. Well, you could do, there are plenty of paid sites that you pay once for (buy the template), and then that is it. Better than ongoing fees. But not what this blog is about. So what are you looking for to get your website up and running?
You are looking for this button. 👇
Or this…
These magic little buttons will do a lot of the heavy lifting for you. Allowing you to get a site up and running very quickly.
What your site needs
In order for your website to be useful, you need a full template. Different sites will have different names, but you are looking for things called starters, themes, or templates. The state of these projects and websites will vary, so they will need to have all the necessary components wired up. What are the essential elements I hear, you ask? Great question, anonymous reader…
Content Management System (CMS)
You need some kind of CMS attached to the site. Wordpress is a form of these, but you have to pay for that, so you don’t really want to use that. The template you choose must have a CMS wired up to it so that it makes it easy for you to add content and make changes rather than have to do it in the files.
If you see template-based sites with these CMS’s attached then they are likely good to go:
- Netlify CMS
- Contentful CMS
- Prismic CMS
- Sanity CMS
- Forestry CMS
Static Site Generator (SSG)
This is the underlying technology that builds your website and is what makes it super fast, easy to deploy and free, if using Netlify, to host. There are quite a few different kinds, choosing which one shouldn’t be too stressful as the site you are looking for needs to be ready to go out of the box and Netlify will handle nearly all the setup work.
Typically I have found sites made with Gatsby to be the easiest and least amount of fuss to get up and running. (Especially if the template or theme has very little documentation to help if you get stuck or something doesn’t work).
Netlify’s own source —
https://templates.netlify.com/
This is an excellent source of guaranteed to work starters and templates because they are all curated by Netlify. And as you can see, they all have the big, beautiful Deploy to Netlify button. Again it would be advisable to make sure they have CMS attached already. Unless you are technically enabled you don’t want to go through the process of setting one up yourself.
If you’re feeling like wrestling with some different technologies and trying to get one up and running without the guarantee of the easy to use Deploy to Netlify button. Then feel free to check out this source of themes as well.
https://jamstackthemes.dev
Narrow down your choices with the filters on the side (make sure to pick a CMS [Netlify CMS is a great choice with less setup])
Step 4: Click the deploy button!
In this example, we are going to be deploying this site: https://templates.netlify.com/template/delog-gatsby-netlifycms/ as it has a couple of the requirements we mentioned earlier. (Both the big Deploy button and it uses Netlify CMS).
So go ahead and click it. I should result in something like this:
Click connect to GitHub, and then you’ll be prompted to name your repository. You don’t need to change what it has already filled out if you don’t want to.
Then click Save & Deploy.
You should then be greeted by a screen that looks similar to this…
A couple of minutes later and the yellow text that says “Site deploy in progress” will change to green and give you a URL. Click on it…
And boom! There we go, we’ve got the site deployed. Congratulations. (Not too hard, eh?)
Technically that is your site and deployed for free. But we cannot stop there because realistically, the website isn’t particularly usable in its current state is it? So we’re going to fix that by changing the name to something a little more friendly than optimistic-visvesvaraya-7d6ac6 or whatever your sites name came out to, and we’re going to set up the CMS so that you can edit content and remove all the filler content that is currently there.
So time to head to the Settings part of your dashboard.
This presents something like this.
Click the Change site name button and add the name you would like. A lot of them might be taken so try to make it unique and don’t forget to add “-” rather than spaces. I changed mine to “free-blog-example”.
When it comes to setting up a completely separate domain, we will save that for another post as technically that requires spending money, and this post/guide is all about not doing that.
Changing the Content
Now we have a new site name and a more friendly URL, but what we really want is to be able to edit the content. Now, this might vary from situation to situation, but most templates should let you know how to do it. This template has the steps in the ReadMe (where most information on how to do this will be found). We’ll go through this one together anyway. There are 3 steps.
Hot tip: if the CMS is the Netlify CMS, the steps will be pretty much the same as I’m going to describe below.
1. First, we need to go to Github and navigate to the repository that you created for this project. That would be something like https://github.com/YOUR-USER-NAME/free-website-blog-example. If you can’t find it, no worries, click the top-right user icon with the little downward-facing icon. A menu will pop out, click Your repositories if you haven’t used Github before it will be the first item if you have then it will be one of the repositories there. Click on it, and the page should now look like this.
You need to navigate to this file path by clicking on the little files in the central part of the window — static / admin / config.yml and click edit. The URL is below, but you will need to add your details into it.
https://github.com/YOUR-USERNAME/YOUR-REPO-NAME/edit/master/static/admin/config.yml
You need to change line 4 to that route to your repo. So you need to change it from:
W3Layouts/gatsby-starter-delogto
YOUR-USERNAME/YOUR-REPO-NAMEIf that is hard to understand, you need to make it say what it says at the top of the browser window. I’ve circled it in red to make it easier to see.
👈
Then you need to scroll all the way to the bottom and click the big green button Commit Changes. Without you doing a thing, Netlify will know changes have been made to the code and will update the site. While it is doing this, we need to move to the next step.
2. Staying on GitHub, we need to create an OAuth key. This can be done here . Click on the OAuth apps on the left-hand side, then the large button that says Register a new application. You should see something like this, obviously without the content being added.
- Application Name = Something you would recognise
- Homepage URL = The new URL that you changed your website to
- Application description = you can leave blank or add whatever you wish
- Authorisation callback URL = https://api.netlify.com/auth/done 👈 it has to be this
You should be taken to a page that tells you you have 0 users and just below that a client ID and client secret. (Yes I’ve deleted the OAuth app by the time I post this).
3. With the Client ID & Client Secret, you now need to go back to Netlify and in your settings, click all the way down at the bottom of the side menu — Access control. And scroll to you can see the OAuth section. Clicking on the Install Provider, you should get a pop up like this where you need to add your details.
Once that is added you’re pretty much there. Simply go to your-site-name.netlify.app/admin/ once you click Login with GitHub, you should get this pop-up. Naturally, fill it in with your details rather than mine.
And boom you’re in!
You can go into Blog and delete all the placeholder content and your own, and edit the name of the website and its descriptions. Plus you can update the Home Page content.
To publish the changes, just click publish at the top right.
And we’re done! A completely free website published and with the ability to add and change content as we see fit. Congratulations.
You can see my version here: https://free-blog-example.netlify.app/
This might be a little bit more complicated than getting everything handled for you when setting up a WordPress website. But it is free! There is more and more support for static sites (the kind we just put up on the internet) coming every day. During writing this article, I came across some more interesting technology that might even make this process even more accessible.
Expect a follow up soon… well relatively soon…
