Building a blog may seem like a daunting task but in this article, you will learn how to do it in under 2 hours.
All without coding.
We will take you through the step to step process on how to make a blog.
The good thing is – you don’t have to spend a dime on freelancers, designers or coders.
What do you need for a blog?
You need 3 things for your blog:
- Domain Name (e.g. www.mysite.com)
- Web Hosting (server where your website lives)
- Content Management System (e.g. WordPress – commonly used website platform)
A domain name is what other users type on their browser when they want to see your website. Examples – facebook.com or google.com.
But you might ask where does that information actually live?
On a web server – it’s like your personal computer but it’s always on so you can access your website anytime.
The final piece is the content.
Very few people actually “code” content into their website.
Instead, they use a Content Management System (CMS) such as WordPress.
In this tutorial, we will be using WordPress.
Why?
37% of all sites on the internet are built with WordPress. It is also easy to set up.
We will be using the web hosting service Siteground .
With Siteground, we can install WordPress with the click of a button and also buy our domain.
We will also be using Elementor as a drag and drop website builder that makes it so easy to customise your design.
We recommend going for the Elementor Pro version as it has a bunch of very nice pre-made templates and blocks.
But you can also use the Free version if you want – we made sure our tutorial works even with the free version!
What are the costs?
One question we get asked is how much does a website cost. It depends on what kind of hosting you get as well as any paid plugins or themes for WordPress.
But here is a breakdown of what you expect to pay.
Total: $51 – $184 / year
- Hosting: $36 – $120 / year (we talk about both the cheaper and more expensive option)
- Domain: $15 / year
- WordPress: Free
- Elementor: Free – $49/year (we recommend going for the paid Pro version)
Even on the high end $184/year is about $15/month about as much as a meal out.
After this tutorial, you will have your own fully functional website on your own domain. This can be accessed by anyone anywhere. Are you ready?
Let’s get started…
Disclosure: We don’t want to serve you ads. So we monetize through affiliate offers. So when you click on a link to sign up for a service or software, we get a commission. You don’t have to pay anything. Sometimes our affiliate offers even give you discounts.
1. Choosing A Domain Name
The very first thing you need to do is pick a domain name.
This is what users will type in their search address bar on their web browser when they want to find you.
This website’s domain name is www.passiveincometree.com.
You can pick whatever domain name that you want so long as it is available.
Cost
Domains cost around $15 a year depending on where you buy them.
But some great domains can cost thousands.
For example, the domain name BestBuySell.com is being listed at $29,888!
Don’t worry we will be able to find domain names for much cheaper than that!
Tips
- Make sure that your domain name is relevant to what you are doing.
- If you are building a personal website then you can choose something like YourName.com.
- If you have a company then the domain should match your company name – e.g. YourCompanyName.com.
- Keep it short, sweet, and memorable. If you want to rank in google or create a lasting brand short, snappy names are in general much better.
- YES – CampingPro.co
- NO – CampingTentAndHammockReviews.com
Think about all the big brands you know – Apple, Best Buy, Nike – very memorable.
Your domain name has a large influence on how you/your company are perceived.
So it’s important to choose wisely.
Brainstorming Domain Ideas
It might seem overwhelming at first trying to think of your domain. But don’t worry – we have a few free tools here which we can recommend that can help the process.
Name Mesh – A great tool that shows you a list of available domains based on keywords that you type into the search bar.
Expired Domains – I like this one! Google has a preference for older domains. So if you are looking to rank your website organically, this is a great place to buy older domains.
Once you have decided on the domain name it’s time to host it.
2. Hosting Your Website
Web hosts are where the files, documents and content in your website live.
They not only store but also serve your website across the globe.
If your site is down – typically it’s the issue of the web host so choosing the right one is important.
Cost
You would look to spend between $36 – $120 annually on hosting.
You get what you pay for and higher priced packages have more reliable support and stability.
With thousands of web host providers out there, it’s difficult to choose.
Here are the things that a host you choose must have.
Web Host Essential Features
- Customer Support & 24/7 live chat – when your website goes down, its important that you can access your web hosts support at any time to fix this.
- Free WordPress One Click Install – will save you so much time when your web host has this feature.
- 30 Day Money Back Guarantee – so that you can get your hard earned money back. In case you aren’t satisfied for any reason with the service.
- SSL Security – this makes your site more trustworthy to search engines and users.
- Fast website speed on hosting – 53% of visits are abandoned if a site takes longer than 3 seconds to load. So let’s make sure our web host is fast.
- High NPS Score – anything above 50 is fantastic. This means that a lot of customers are very with the brand. They see real value and are likely to recommend it to their friends.
Our Recommendation
We recommend using SiteGround as a web host.
Although, more pricey than the popular Bluehost.
They have fantastic support.
I remember accidentally registering my website on their UK servers instead of US servers. I had to pay a transfer cost of $20 to bring it to the US servers. I spoke with one of their customer service agents Konstantin and he waived the fee for me. How kind!
SiteGround plans start from around $11/month ($6.99/month with this affiliate link). You can register your domain as well.
If you want a cheaper alternative Bluehost plans start from $5/month ($3.50/month with this affiliate link).
We will be going with SiteGround for this tutorial. The process of setting up and configuring WordPress on Bluehost should be similar.
Siteground Installation
Select “Web Hosting” on the SiteGround main website.
Select the Startup Up Plan for $6.99.
Domain Purchasing
Once you have selected the plan you should see this page where you can register the domain that you wanted for $15.95/year.
Bear in mind, SiteGround does not have some country specific extensions (.ru .fr .de) so you may want to buy the domain from Domain.com or Godaddy.com then link it.
You will then be prompted to add your payment details.
Account Configuration
Make sure that you choose a data center in the USA – this is because most of your web traffic will be based here.
No need to enhance your account so leave these unchecked.
Now that we are done with this we can install WordPress.
3. Installing WordPress
Now that we have web hosting and domain name – it’s time to install our content management system (CMS) WordPress.
Why WordPress? Some of the biggest names on the internet are using it – TechCrunch, The New Yorker and The Walt Disney Company.
For a full list please see this article.
They must be doing something right!
Back to installing WordPress.
Siteground WordPress Installation
Login to your SiteGround website.
You can then setup the new hosting account and then link the domain that you bought with WordPress.
It should prompt you to set up the account.
You should receive a message saying that your website is live.
You can check it and should see something like this when you type your website on a browser.
It should look something like this.
SSL Configuration
Verify the SSL settings by checking tools.siteground.com and install the SSL by going to Security -> SSL Manager.
You should see something like this after.
Now that we have the domain, WordPress and SSL, it’s time to spice up how it looks by selecting a theme and installing Elementor.
Choosing A Theme
You can login to your WordPress website by logging in to yourwebsite.com/wp-admin. It should look like this:
Click Appearance -> Themes -> Add New
You can pick any free theme you like – we chose the Astra theme since it’s lightweight and very fast.
(Note – don’t worry about using any premium themes as we can use the Elementor plugin to customise and style or theme in any way that we want).
Make sure the theme is activated and published.
4. Branding Your Theme
Now that the theme is installed and activated it’s time to do some basic design work.
I can’t outline every possible thing you can do in this tutorial but I’ll give you enough to get started.
Logo
Let’s first add our logo onto the theme. If you are tight on cash then you can design your own logo using Canva.
Otherwise you can hire someone on Fiverr to make a custom design. Type “logo design” on the search bar.
Another good option are logo generators such as Brandcrowd and Looka.
For the Astra theme, we click on:
Click Appearance -> Astra Options then click on the Upload Logo button as shown below:
We should see a screen like this where we can upload our logo on the left hand side.
After uploading you should see it appear on the top left corner. There are many different settings you can play with such as logo width to make it look perfect.
Make sure you click the “Publish” button so that the changes are pushed to your website.
Colors
Did you know that large brands spend millions of dollars selecting the right colors for their brand?
Luckily, this website BrandColors has a huge compilation of all the colors from your favourite brands. Remember good artists copy great artists steal!
If you want to use this as a starting point of inspiration then you can use this website – Coolors.
It can auto-generate combinations of colors that work well together from scratch.
Once you have selected the colors that you want to use you can change them by going to:
Click Appearance -> Astra Options -> Set Colors as shown below and then pressing the set colors icon
You should be able to set your colors in this menu here.
Fonts
Finding the perfect font combinations, like colors, is difficult.
I use Fontjoy which can auto-generate a set of three font ideas to use for your website.
You can fix your favorite ones and even toggle how similar or different you want them to look.
After deciding on the fonts you want to use, you can upload them by:
Click Appearance -> Customise Fonts as shown below and then pressing the set colors icon
You can change the typography here:
Elementor
I recommend that you download Elementor – the top rated WordPress page builder.
With Elementor, you can customize everything on your website without coding.
It uses a beginner friendly, intuitive drag and drop interface.
We can install this by going to Plugins -> Add New and searching for Elementor
It should look like this:
Be sure to activate it once it’s installed.
We will be using Elementor to make the header and footer as well as the main pages.
5. Setting up Your Site
Now that we have all the tools on hand, we can begin creating web pages.
Web pages are documents on the web that store information text, picture, and video information. It’s similar to a Google or Word Doc.
Web pages are actually very easy to create with WordPress. So you don’t get overwhelmed, this is a list of all essential pages for a typical website:
- Home – The first page that everyone on your website usually sees
- About – A page with info about who or your business are
- Contact – Allows your visitor to reach out to you
- Blog – Page which contains all your posts
- Privacy Policy – These are now a legal requirement – don’t worry we will provide you a template
Adding Pages
We first want to add pages on WordPress. We do this by clicking Pages -> Add New
Then we should see an editor like this – type the name of the pages in (1) and then click publish.
Once we have done this for the Home, About, Contact, Blog, and Privacy Policy pages we should be good to go.
After adding all the pages it should look something like this.
Home
One thing we first have to do is set our homepage to be the page that we just made – we can do this by going to Appearance -> Customise
Then pressing Homepage Settings
And clicking the static page option and setting the homepage that you have just created.
Once this is done we can edit our homepage to our liking with Elementor by clicking this:
Elementor is a visual page builder. This means that you can add a row, select a layout and then edit it directly.
You have a huge list of content blocks which can be put into these rows to make your websites look beautiful.
We can add a row by pressing the “+” button here:
And then selecting from a configuration of columns (let’s go for two rows for now)
We should see something like this:
Let’s drag and drop some text into the left column and put an image into the right column
We can even edit the text color if we want to.
We’ve just scratched the surface here of what Elementor can do but hopefully it provides a taste of what you can do.
I recommend playing around with the editor for awhile just to get a feel for it.
You can pretty much build anything you want with it.
Check out this amazing video to see how far it can really go!
About
Instead of building the page from scratch, let’s instead use some pre-made pages to speed up our work.
When we edit the about page, instead of pressing the + button lets press the folder icon.
We can then select from a variety of options for “About Us” pages:
Note that some of these pages are only accessible to Elementor Pro users.
If you want to get the slickest pages and fancy widgets such as these – you can get it here – though by no means is it mandatory:
After selecting the premade page you want, it should look something like this:
You can tweak the colors, fonts and designs to your liking but this should be faster than developing pages yourselves. Pick your poison!
Contact
We will build the contact page in a similar way as we did for the about page.
The fonts and colors should be adjusted based on your theme.
Privacy Policy
If you capture email address, names, credit card info – you need to have a privacy policy.
If you want to learn more, Termsfeed has a great article here that explains in depth what and why it is important.
They also have a template generator here which we will use for our website.
Once this is done we can copy and paste this onto our editor in a single text block – it should look something like this now.
Blog
A blog page is where your posts live.
We can create one via Elementor.
If you have the Elementor Pro account you can display posts with the following posts widget.
If you are using the basic account then we won’t be able to display it with pictures but a list of recent posts
We can also change how many posts we want to show here.
Navigation
Now that we have a set of good looking pages – let’s build the navigation menus for our site.
The first thing we want to do is set everything up on the backend.
This picture shows you everything you need.
- We first click on “Appearance”
- Then on “Menus”
- We can then select which pages we want to add to our menu
- We then type in the name of the menu
- Now we order the pages depending on their priority – these can be dragged and dropped
- Finally, we can select where the menu should appear this differs from theme to theme
- Be sure to save the menu so that we can access it on Elementor
Header and Footer
Header and footers appear in every page of the website.
So we will be using the Templates feature of Elementor – we only need to build it once. Instead of doing it again and again – that’s the power of templates!
Select Templates -> Add New and then click Header and “Create Template”
If you are using the Pro version, you can select from a wide variety of templates.
I prefer doing this and then tweaking the template to my liking as it’s faster.
If you are using the basic version you will need to build it from scratch – though it’s not too difficult.
Similar to what we did with the Home, About and Contact Pages we can play around with the header to our liking and then once we are happy we should publish it.
You should see a screen like this where we can push the changes across the whole site.
- A – We first add condition
- B – Then include it across the entire site
- C – Finally we save and close
We can follow a similar process but applied to the footer.
With Elementor, you can change any aspect whatsoever without restrictions!
Most website builders I’ve tried will have some restrictions on header and footer design.
So the flexibility that Elementor provides is just fantastic.
Congratulations
You made it to the end.
With the combination of Siteground, WordPress and Elementor – you can practically build anything you want.
I’ve just scratched the surface of what can be done with these tools but hopefully, this has given you some food for thought and ideas on how to make a blog.
