There’s a lot of ways to cook steak, some like a firm well-done piece of meat, others prefer rare red. Personally, I’m a medium man, a perfect blend in my opinion.
Now, what does cooking steak have to do with your website? Your website is a lot like steak in the sense it comes down to your taste. Some will tell you the best possible way to cook it but that might not work for you, and that’s okay.
Setting Expectations
I’ll be showing you my prefered way to cook the steak, you’ll see why as we go along. But the main reasons are it’s cost-effective while also being a system you can scale as your business grows.
Your domain costs $10-$12/year, hosting will cost you less than $20/m and everything else is free. So money is not a barrier.
We’ll be using WordPress, the world’s most popular website platform supporting 35% of the entire worldwide web.
This process only takes about 30 minutes, maybe 45 minutes for the first time. Not including editing your website, creating your website to fit your brand is an entirely different article all together, this is the bare-bones setup.
The goal of this article is to help you understand what’s involved with setting up a website and doing it yourself. This is intended for first timers.
Also, the last disclaimer, there are some affiliate links throughout this article, if that’s not your thing, just search up each area instead of clicking on links.
If you’re okay with all that, let’s go!
1. Buy a Domain
Go to NameCheap, type your business name in, and get your available .com or .com.au (if you’re not in Australia, grab your countries domain extension).
Now if your exact business name isn’t available, make sure you pick a domain name that is logical, simple to say and read.
You’ll see a lot of options, but like I said, .com or .com.au.
At $10-$12/year, it’s a pretty easy investment.
What is a Domain?
A domain is your websites address name, just like your house has an address, so does your website.
Does it matter where I purchase my domain?
No, there are hundreds of domain hosts aka Registrars, they all do the same thing. It comes down to the extra features they offer and how low the price is.
Can I have more than one domain?
Yes, you can have as many as you like. Remember, domains are not websites, they are just names that point to your website, like your address is not your house.
2. Purchase Hosting
Go to Cloudways and create an account.
Now we’ll set up your very own server. Sound complex? It’s actually quite easy.
- Choose WordPress
- Select Vultr (This allows for Australian Servers)
- Scale back to 1Gb
- Select Asa Pacific – Sydney
You’ll see down the bottom, it’s just $11/m USD which is roughly $16-$17/m AUD, also a pretty worthwhile investment.
What is Web Hosting?
Hiring space on someones computer system (server) which is easily accessible via the internet. They get your monthly money, you get a live website.
Does it matter whom I host with?
Yes, a lot! There are hundreds of web hosting companies out there, some are great, some are scams and a lot are security problems waiting to happen.
Why host with CloudWays?
I’ve hosted countless websites on CloudWays, both internal projects, both business and client sites. Never had a single issue but if you’re unsure, read this review or begin researching web hosting.
3. Connect Your Domain
In order to have your domain pointing to your website, we’re going to use a service called CloudFlare, it’s free, easy to set up and it adds a lot of speed/security benefits when your website goes live!
This is probably the most complex of all the steps, so please use the screenshots or reach out if you need a hand.
Go to CloudFlare, create an account and then add your domain.
Select the free plan, it will show you the DNS Records, don’t worry about that now, just hit continue. Then you just want to copy the two nameservers.
Now, go back to NameCheap and click manage next to your domain.
Then change the Nameservers to Custom DNS.
And paste in those two nameservers from CloudFlare and replace the current ones if there are any. That’s it!
Now go back to Cloudways and grab the Server Address. It looks like this 123.456.789.123
Copy and paste the Server Address into CloudFlare’s DNS Manager next to your domain name.
Lastly, update your CloudWays app by going to the application, domain management and then enter your domain.
What is CloudFlare?
A Content Delivery Network (CDN), a number of connected servers designed to send content i.e. websites like yours.
Why use CloudFlare?
The server you’re hosting on CloudWays is in one location, but CloudFlare is worldwide and really fast! It also has got added security benefits to stop people from attacking your website.
4. Setup WordPress
Great work to make it this far, now that’s all done, it’s time to set up WordPress and start making your website!
Login to your WordPress dashboard via CloudWays
Copy the username and password and don’t forget to bookmark yourdomain.com/wp-admin/ that’s the easiest way to quickly login to your WordPress site.
Once you’red logged in, you’ll be greeted with your dashboard.
On the left, you’ll find the main toolbar. Let’s start by going to Settings > General.
Name your site your business name and put in the catchy slogan. Don’t forget to change your timezone and set your preferred date setting.
Now go to Settings > Reading and we’re going to update your home page display. Change it to say ‘Sample Page’, we’ll turn this into your home page soon. Don’t forget to hit save changes.
Now go to Settings > Permalinks and make sure it’s set to Post. This will help out with showing your website on Google later on.
Here’s a quick video to assist you with setting up your settings setup… word play.
4.1 Install Theme
Then we need to to install a theme, so go to Appearance > Theme > Add New and we’ll search the WordPress Repository.
There are three themes I would recommend for your first time:
They’re all great options with plenty of features and provided a clean, fast-loading website. Once you’ve installed WordPress a few times, I recommend using Hello Theme by Elementor.
Moving forward with this tutorial, I’ll pick Astra because their Starter Sites are awesome and will save us some time. So in the Search Box, just search up Astra, select it and install.
Once you install, make sure to activate it too.
Now go back to Themes and select each Theme we’re not using and remove them by hitting delete.
What is a Theme?
If WordPress is the foundation for your website, your theme is the structure and material for the house you’re building. Theme’s come with all different features, but at the core, they’re a framework or box within WordPress.
Can I use any Theme?
Absolutely, the WordPress Repository is a big library full of Themes made by all different people. Make sure to look at reviews, do research and find other’s experiences before committing to other themes.
Can I change Themes?
Yes, the way WordPress is built, themes act like blocks. You can pull out a theme and replace it with another one. Just make sure you’ve got a backup of your site before changing themes.
Why Astra Theme?
As I mentioned, Astra, OceanWP and GeneratePress are the three themes that are most popular and have the best features. Astra introduced the Starter Template plugin earlier in 2020, and it is a fantastic way to get set up while having a quality website.
4.2 Install Plugins
Now let’s go back to the Toolbar and select Plugins > Add New. This is how WordPress becomes powerful, plugins work like apps. Apps that can give us booking forms, google maps and all sorts of fun things.
Now here are a list of the following Plugins I recommend and install on almost any client website.
- Elementor – Creating beautiful pages, easily
- ShortPixel – Optimising images for web
- Site Kit by Google – Connecting website to Google Services
- Autoptimize – Speeding up website
- MalCare Security – Adding more protection
- All In One SEO – Optimising website for Google Search
There’s an extra one we’ll install as we’re using Astra, and that’s ‘Starter Templates’ which is also from the same team behind Astra.
Quick note, when you’re installing other plugins make sure to do some quick research on what others experiences are. A lot of people have website issues due to poorly made plugins.
Just search each plugin one by one and install them, then go back to your plugin screen to activate Elementor and Starter Templates. We’ll be activating the rest in a bit.
4.3 Add ‘Coming Soon’ Page
Just in case people come to your website, you don’t want them to see half edited pages or missing elements, it gives for a very poor experience.
Elementor has got an easy to setup Coming Soon feature so let’s quickly set that up.
Toolbar on the right, go to Elementor > Tools > Maintenance Mode
Select ‘Coming Soon’ and hit the ‘create one’ button.
Name your template ‘Coming Soon’ > Publish and edit it using Elementor.
Here’s a quick video tutorial to help you out if you need.
4.4 Setup Starter Template
In your Plugins area, under the Starter Templates select ‘See Library’ > Elementor. Now scroll and pick whatever template suits you, just look out for the ‘agency’ ones, they will cost money. For the purposes of this article, I’ll select the first option.
Once you’ve found the perfect Starter Template for your website, click ‘Import Complete Site’ and leave all default checkboxes as is and hit import.
Easy as that! The plugin Starter Template’s actually created pages, adjusted settings and even installed another plugin for us in order for forms to work. How cool is that?
5. Editing With Elementor
Let’s go to our Pages on the right Toolbar and start editing our website! Just remove the Sample Page as we don’t need it anymore! Then hover over your Home Page and hit edit with Elementor.
You’ve now entered the amazing editor known as Elementor! On the right you’ll see all of the widgets or elements you can drag over where ever you want. There’s about 50 free elements you can use, everything from Headings to Google Maps, cool!
Let’s get used to Elementor by adding a new section to our page. Hover your cursor over the Upcoming Events section and hit the blue plus button to add a new section, then the next plus button and select the three-column option.
You should now have a blank three column section ready to go!
Drag and drop an icon box from the left panel into the first column on the left. Give the section a bit of top and bottom margin so the area can breathe a bit and we’ll style the icon box.
Right Click Section > Edit > Advanced > Margin > 5% Top & Bottom
Now click back on your icon box and we’ll apply styling.
Click icon box element > Change Title to ‘Quality Services’. Then change icon by clicking icon and searching for ‘check’
Now go over to the style tab and change the icon colour.
The red colour used in this template is #FB2056, you can copy that code and put it directly into Elementor or just pick any colour you’d like!
Now just duplicate the column twice, remove the blank columns, edit the content and we’re done!
I also dragged the section above the testimonial section, so feel free to do the same!
What is Elementor?
Think about it like Photoshop for your website. The textbook definition is as follows, a WordPress page building plugin designed to make creating, designing and editing pages easy with a clean drag and drop environment.
Can I use other page builders?
Absolutely, there are a number of different page building options out there. Some are harder to get used to, some don’t have as many features. I’d suggest doing some further research using search terms like ‘Best WordPress Page Builders’.
6. Complete Setup & Going LIVE!
Now there’s a little bit of work ahead of you, updating each page with images and text that suit you, but once you’ve done that you’re off to the races and ready to go LIVE!
In Plugins, select the top checkbox to highlight all plugins, and use the ‘bulk actions’ drop-down to activate them.
6.1 Autoptimize
In Plugins, click settings under Autoptimize and check the following three checkboxes and hit save.
- Optimize JavaScript Code
- Optimize CSS Code
- Optimize HTML Code
Read more about Autoptimize here.
6.2 ShortPixel Image Optimizer
Create an account with ShortPixel and copy + paste the API Key to begin a bulk edit of all the images on your website.
6.3 Site Kit by Google
Toolbar > Site Kit > Dashboard
Select the ‘Start Setup’ button and follow the process.
All you need is a free Gmail account, you can get ‘yourbusiness’@gmail.com. However, I recommend getting a proper G Suite account which lets you use Google Services like Gmail, Google Docs but with your own domain e.g. [email protected]. Much more professional and you can create unlimited alias email addresses like [email protected] and [email protected].
Take a look at G Suite options here.
6.4 Elementor
I recommend setting up your own Elementor Account, it’s free and you get access to a lot of features including their blocks and templates.
If you want full access to their massive library of elements and other goodies. Consider purchasing the Pro version for your website.
Don’t forget to take your website off ‘Coming Soon’ and you’re all done!
7. Tips & Tricks
Just a few notes of other things to be aware of.
Elementor uses sections, columns and elements. Understanding these three elements and how they interact will go along way in master Elementor. Lean on the Documentation provided by Elementor to get more assistance.
If you ever have changes not showing on your website, clear the cache via Autoptimize by hovering over Autoptimize in the top toolbar and selecting ‘Clear Cache’. If you want to go deeper into that topic, search terms like ‘What is website cache’ are good and will result in articles like this.
If you’d like resources for adding beautiful content to your website like photos, videos or illustrations. I’ve got a space I’m regularly updating over on a Notion Page here.
8. Rounding Up
At the beginning of this article, I spoke about your prefered method of cooking a steak, you now know my prefered way, inside and out!
If you have any questions or need help, please reach out, I’d be happy to point you in the right direction.
Happy website building!
