One of the hurdles for many new bloggers is setting up their websites, and understandably so. Not everyone is well-versed in the website lingo, and that alone can be pretty confusing to start with.

But then you add things like hosting, self-hosted, WordPress, themes, page-builders, plugins, and a bazillion other things that come with just setting up a blog… oof! They sorta take over everything else, and plenty of newbies start to feel like giving up on blogging even before they start!

You know, I get it. And as much as I try to make this process look simple, to the novice, none of this ever is.

But the good news is that once you’ve done it, not only are you ready to finally start blogging, but you also have a brand new skill under your belt. And that’s, my friends, is the silver lining to all this.

Anyhow, in my never-ending attempt to make the newbie’s life a bit easier, I’ve crafted today’s blog post focused on the brand new blogger who’s just starting to figure out the process of setting up their very first WordPress blog.

[Please note that the plugin “Ultimate Addons for Gutenberg” mentioned in this blog (and videos) has been renamed to “Spectra — WordPress Gutenberg Blocks.” The functionalities are the same, only the name of the plugin is different.]

A Quick Look at What You’ll Need to Set Up a Blog

First, you’ll need a domain. A domain is basically your blog’s web address. For example, mine is thesideblogger.com.

Get your domain from NameCheap. They have free domain privacy, and I like their interface; it’s very beginner-friendly.

Then, you have to decide on a platform. If blogging is going to be your business (something you make money from, and not just as a hobby) then look no farther: Go with WordPress. There are two versions of WordPress: A hosted version you get from WordPress.com, and the other is the one you need to host (self-hosted) also known as WordPress.org.

You need the latter (self-hosted WordPress.org).

Which means you’ll need to find a hosting. Don’t worry, a good hosting company comes with a quick WordPress installation needing only a few clicks from you. I recommend SiteGround. It is by far one of the best hosting companies for your money! Also, as a brand new customer, you’ll almost always save big on your first purchase. (Also, I recommend you sign up for the GrowBig plan or higher, you’ll bet more bang for your bucks that way.)

Now that you have domain and hosting, connect the two, and install WordPress. Here’s a guide showing exactly how to do that.

After you’ve installed your WordPress blog, here’s a list of things you’ll need to do:

• Choose a theme for your blog, install, and activate (that’s what this blog post is about and we’ll go over the details shortly.)
• Add the WordFence plugin (free to start) to safeguard your site from the most common type of attacks from hackers.
• Install and activate a caching and performance-enhancing plugin to speed up your blog. I recommend WP Rocket (paid). If you need a free caching plugin, then SiteGround’s native SiteGround Optimizer plugin is also pretty good (and free!)
• Install and activate the Yoast SEO plugin. This plugin can help you add meta titles and descriptions, and incorporate other SEO efforts.

There are other plugins that will come in handy depending on what task you’re trying to accomplish, but these three will set you up on the right track as a beginner.

If you need help setting up a plugin, this guide should help.

Choose a WordPress Theme for Your Blog

A WordPress theme dictates what your blog will look like. Many new bloggers stumble at this stage because there are simply too many to choose from.

Let me make this as simple as possible.

Do what I did: Choose the Astra theme.

Why the Astra WordPress theme?

Aside from the fact that my blog (yes, this very blog) uses the Astra theme, here are some more reasons why you should choose Astra too!

Astra is fast, clean, and powerful

One of the factors that often make websites slow to load (essentially affecting their user experience, SEO, and ranking) is a bloated theme. Basically, themes with bad codes.

Not Astra!

Here’s a website speed test I just did on my blog — The Side Blogger — on GTmetrix; have a look.

Astra will grow with you

The thing about Astra is that it can grow with you as your blog and business grow, without having to change your blog’s theme.

For example, my blog is using Astra and the Elementor page builder plugin to design all the pages and posts. Not all themes are compatible with the Elementor page builder, but Astra is. Not just Elementor, but Astra seamlessly integrates with Beaver Builder, DIVI builder, and WordPress’s native page builder: Gutenberg.

Let’s say that you’re a brand new blogger with little budget. You can start with the free Astra theme, which in and of itself is quite powerful. And then, when you’re ready, you can choose a page-builder such as Elementor.

Or, if you’re too busy to work with Elementor (because let’s face it, Elementor does come with a bit of a learning curve) then upgrading to Astra Pro with Gutenberg can still give you plenty of options to design a website you’ll love!

What is Gutenberg

Gutenberg is WordPress’ native page-builder. While Elementor is a plugin that allows you to design sections or even full pages, Gutenberg does it without any plugins.

As I’ve mentioned, Elementor is what I use on this blog. But, it’s a complex plugin and takes some effort to master. Gutenberg, on the other hand, is built into WordPress, so the learning curve is nowhere near as steep. That’s why many entre level bloggers find Gutenberg easy to learn and use.

Gutenberg uses blocks to build up the various sections of a page or post. When you use Gutenberg blocks to design a section or a page that can be used over and over, they’re called Gutenberg block patterns (a fancy term for a template.)

OK then, ready to get to the next phase? In the next few sections, I’ll show you some simple ways to use the Astra (pro) theme and Gutenberg block patterns to design your very first blog.

Set Up Astra (Pro) on Your New WordPress Website

In this section, I’ll go over getting Astra on your website.

Install the free Astra theme

Getting the free Astra theme is easy: Simply search for it in your WordPress theme foundry.

To do so, go to your WordPress dashboard (typically: example.com/wp-admin) and then click “Appearance > Themes” from the left sidebar menu. Then, click “Add New” and enter “Astra” in the search menu, then hit “Enter.” You should see the Astra theme now. Hover over it, and then click “Install.” When it is installed, click “Activate.”

Alternatively, you can download the Astra theme from Astra’s main website, and then instead of searching for the Astra theme, simply upload the Zip folder instead. Activate when it is uploaded.

Set up Astra child theme

A child theme simply “attaches” itself to the master theme, and any changes you make to the child theme, be that a custom code or custom CSS or a custom function, they’re automatically applied to the website, without having to make changes to the master theme. This is great because when the master theme has a new version, updating it doesn’t get rid of any customizations you might have made to your site (because the child theme remains intact.)

I always like to have a child theme on my website. This way, if I ever need to add a custom function or any other custom code, I don’t have to worry about losing them with every new update to the master theme.

Getting a child theme for your Astra theme is easy peasy! Back in the days, when I was a freelancer, I’d have to write these child themes myself! But now, with Astra, you can do it with a click!

Just go to Astra Child Theme Generator, give it a name (any name that you recognize as your child theme; something like “Astra Child” is good), and then click “Generate.” This will save a zip folder on your computer.

Next, go back to the WordPress dashboard, and just as before, go to “Appearance > Themes > Add New,” and then click “Upload Theme.” This will prompt you to upload a zip folder. Choose the child theme zip folder you had just downloaded, install, and then activate.

Note that to be able to activate the child theme, you must have the master theme activated first. If not, you will get an error or a warning. So, make sure to install and activate the free Astra theme first.

Optional: Set up Astra Pro

Astra Pro adds a lot of amazing features to your website and it is totally worth having. But do note that even the free Astra theme is great! So, if you’re a beginner on a small budget, feel free to start with the free theme. And then, when you have the budget, upgrade to Astra Pro to unlock more features.

Astra Pro is a plugin. When you purchase Astra Pro, you’ll be prompted to download the free Astra theme, a child theme, and the Astra Pro plugin. However, recall we have already installed and activated the Astra theme and a child theme, so you don’t need those. Just download the “Astra Pro Addon Plugin.”

Also note that during the purchase process, you’ll be creating an account on Brainstorm (Astra’s parent company.) here’s you’ll have access to all your available downloads and license keys.

Then, go back to your WordPress Dashboard, then click “Plugins > Add New > Upload Plugin.” Now upload the zip folder you have just downloaded, install, and then activate.

Now, the plugin is activated, however, to unlock the pro features, you need to add the license key.

To do that, follow these steps:

• On your Brainstorm account page, click “Account > Licenses.”
• On this page, you should see the Astra Pro license key; copy the key.
• Now go back to “WordPress dashboard > Appearance > Astra Options.”
• On this page, you should see a place to activate the Astra Pro plugin. Paste the license key you just copied in this location, and click “Activate.”

Recommended: Install and Activate Spectra — WordPress Gutenberg Blocks

This plugin, made by Brainstorm Force is a great one to have if you’re using Astra with Gutenberg. Remember Gutenberg block patterns? Well, this plugin (free) allows you to use a lot of pre-made block patterns that you can use to design your website. It even adds more stand-alone blocks that you can use in your designs.

To add this new plugin, search for Spectra – WordPress Gutenberg Blocks by going to Dashboard > Plugins and make sure to add the one created by Brainstorm Force.

Once you do that, you should see the “UAG Templates” button whenever you’re trying to design a page.

When you click this button, you should see a TON of pre-made block patterns and templates. This is going to be super useful for you when you start designing individual pages for your blog.

(Please note that in the video, I mention the plugin “Ultimate Addons for Gutenberg,” which has since then been renamed to “Spectra – WordPress Gutenberg Blocks”. Aside from the name, nothing else has had any significant changes.)

Prepare Your WordPress Site’s Primary Functionalities

Before we start to actually design the website, I want you to do a few things. These will help you design your content better.

Add a few pages

All blogs need some basic pages such as:

• the home page: Home
• the main blog page: Blog
• an about page: About
• a contact page: Contact

At the very minimum, you need these pages. Additional pages as necessary (such as terms, privacy policy, portfolio, etc., but we won’t bother with those for this demonstration; please add all relevant pages as necessary before you launch your blog.) At this stage, I’m not worried about adding content, just add these pages (“Dashboard > Pages > Add New.”)

Create a Menu

All great websites have at least one main navigation menu, ideally towards the top of the page where everyone can see it, and navigate to the important pages. You may choose to create additional menus afterward, but for this demonstration, we want to see how things work. So, we’ll just create one menu that’ll go towards the top of the page.

To do this, go to “Appearance > Menus > Create a New Menu.”

Name it something recognizable. For this tutorial, I’ve created a menu called Primary Menu. Astra gives you an option to set Primary, secondary, footer menu, etc., so having the main menu called “Primary Menu” will just make things easy to recognize. Aside from that, it really doesn’t matter what you call it.

When creating this menu, check the pages you wish to add to this menu (if you do not see all the pages on the left panel, make sure to click the “View All” tab as shown in the image below.) After checking the pages, click “Add to menu.” You can arrange the order of the menu items by dragging and repositioning them with your mouse.

Then, choose the display location to be “Primary Menu.”

When satisfied, click “Save Menu.”

Set the “Home” page as the main page

By default, the blog page is the main page on WordPress. But it’s easy to change if you want a static page to be your main page. For example, on this blog, I have a “Home” page, and then I also have a “Blog” page. But the default when you click thesideblogger.com is the Home page. It’s a static page (with dynamic content added using Elementor.)

To set the “Home” page as your default, instead of the “Blog” page, go to “Dashboard > Settings > Reading” and then choose “Your Homepage Displays” as a static page. Then, choose which static page from the drop-down. And choose which page will be for your blog posts. For our demonstration, the static homepage should be “Home,” and the posts page should be “Blog.” Click “Save Changes.”

Set your blog’s permalink structure

IMPORTANT!

If you do not set it up now, this will be a pain later on. So, do this NOW!

Change your blog’s permalink structure without dates. To do that, go to “Settings > Permalinks,” and then choose “Post name.” This is simpler and when your blog grows and you start to update your blog posts more often, this will be a life-saver. Just trust me on this one!

Add some dummy blog posts

When testing the blog’s design, it helps to have a few blog posts. You can just add a few dummy posts at this time with Lorem Ipsum content and some stock photos. You just need some content to test things out, that’s about it. And when you do, your blog page, without any customizations, just with the basic Astra settings, should look like this:

We’re now ready to start designing our blog.

How to Design Your WordPress Blog with the Astra Pro Theme and Gutenberg Block Patterns

Alright, now we’re done setting up everything. All that remains is to actually design your blog.

Haha, yeah, we’re nowhere near done, but hey, getting the right tools is half the work! We’re at least done with that part!

Now, let’s start designing!

For the purpose of this tutorial, we’ll only be designing the Home page and the Blog archive page. My hope is that by the time we’re done with those, you’ll have gained sufficient knowledge to do the rest yourself 🙂

To give you a glimpse at what we’re aiming to achieve, here’s the website we’ll be designing with Astra Pro and Gutenberg blocks (and block patterns.)

Again, the goal is to show you how to use Astra features along with Gutenberg blocks and block patterns. This one ended up looking pretty decent, right? More than decent, if you ask me!

Well then, let’s start!

Make sure you have your branding kit ready

It is unwise to start designing a website without a branding kit. Typically, you’d want to start by selecting the colors that will go on your website (and essentially across all your business and marketing collaterals, social, etc.), the fonts across your site (header fonts, titles fonts, body fonts, etc.), and your logo. Without these, you won’t be able to design a website or your blog. Optionally, I also recommend having some stock images ready that will go well with your style and vibe. They’ll help you select colors, and use them during the design process to see how things look. So, get those ready first.

I have a free branding kit here if you need some help getting started.

Turn on Astra Pro features

Before we start doing anything, let’s turn on all the pro features. Go to “Dashboard > Appearance > Astra Options,” then, next to Available Astra Pro Modules, click “Activate All.” This will activate all available Astra Pro options, including, custom typography, colors, custom layout options, and much, much more!

Set the basic building blocks of a website

Once we’ve set up your branding kit and activated the pro features, we’ll set up the basic building blocks of a website, namely:

• the logo (if you do not have a logo, you can use a plain-text blog title for the time being)
• typography (body fonts, header fonts, font sizes, styles, etc.)
• website colors (background colors, font colors, button colors, link colors, etc.)
• website header
• website footer

Set up logo

At this time, I’m assuming you have your branding kit and logo. The logo file is ideally an SVG file or a transparent-back png file. if you need help designing a logo for your blog, please refer to this post with a step-by-step logo design tutorial.

Once you have your logo file, go to “Dashboard > Appearance > Customize > Site Title and Logo Setting.”

Here you can upload your logo, specify a width, etc.

Set up typography

Go to “Dashboard > Appearance > Customize,” then choose “Global > Typography.”

Here you should be able to set up default fonts for your website’s many typographic elements, such as body font, header fonts, etc. You have a pretty large selection of fonts here, including system fonts, Google fonts, Typekit fonts, etc. If you have set up a brand kit yet, then you can easily select the font from this selection.

If, however, you’re using a font that is not available, you can upload a custom font using a free plugin “Custom Fonts.” Once you upload a font using this plugin, the font will be available inside Customer settings.

In this section, you can set up fonts, line height, font size, font variants, link styling (underline or not), etc.

In this case, I’ll be using the font “Karla” with font-size 18px for the body font, and “Merriweather” for the header font. I’ll leave all other settings at their default values. Please feel free to play around with these settings to get something you love.

Set up colors

Now, in the same “Customize > Global” section, choose “Colors.” Here you should be able to set up your brand colors. Fill up the color palette with all of your colors so that you can easily access them later on when designing individual pages and elements. You should also define global colors for background, texts, links, etc.

For this, I’m using the following colors:

The color settings look like this:

Set up website header and footer

Typically, the header and footer areas are more or less universal across a website. You may want to switch things up if you’re creating special landing pages, but that’s beyond the scope of this tutorial.

Let’s look at how to set up global headers and footers.

Go to “Customizer > Header Builder” to set up your header. You should see three rows with multiple columns for each row that can help you create a header in whatever order you choose to. To add your logo or a menu, simply click the plus-sign (+) and add those items from the blocks.

You can add the footer similarly by going to “Customizer > Footer Builder.”

Here’s a video to show you how it’s done:

Set up your mobile header (and footer)

Right now, the mobile header and footer sections need to be manually set. The footer, depending on how you have them set up, whether you have a menu there or not, will need to be adjusted accordingly.

The way to set up a mobile header (and/or footer) is better illustrated in the video below. Give it a watch!

Design Your Homepage

This too will be easy to demonstrate with a video. But as you may have guessed already, we’ll be using Astra pro features, Gutenberg blocks, and Gutenberg block patterns by the Spectra – WordPress Gutenberg Blocks plugin.

Please watch the video below to see how we accomplished the homepage (screenshot) that I’ve shared above.

Design your blog page

This is super simple. Go to “Customizer > Blog,” and then from here, you can set up how you want your blog/archive page, or a single blog page to look like. The settings here are self-explanatory, but here’s a video to walk you through the steps anyway.

Whew!!!

I know this was a lot, but I hope the newbie bloggers out there will now have a better idea of how to create their very first blog in a way that looks as though it were made by a professional!

To Recap…

This blog post is for newbies to set up their very first self-hosted WordPress blog. The essential tools and resources used in this post are:

• NameCheap for domain
• SiteGround for hosting
• Astra Pro (theme and plugin)
• Spectra – WordPress Gutenberg Blocks plugin

You’ll also find a list of useful plugins for a brand new blogger towards the beginning of this post.

In this post, I have shown you, from start to finish (almost) how to use Astra Pro and Spectra – WordPress Gutenberg Blocks to design the homepage and blog page of your very first blog. Feel free to follow along with the videos to create your own!

Frequently Asked Questions

Do I need WordPress to start my blog?

Theoretically, no. But, if you want to use your blog as a business to make money, I highly recommend using self-hosted WordPress. You'll thank yourself later because no other platform comes even close to WordPress regarding features, functionalities, and versatility.

Do I have to use Astra?

No. But I love this theme because of its features and potential to grow with you and your business, eliminating the need to ever change your theme ever again. So, while you don't need it, I do, however, highly recommend it.

Is Elementor better than Gutenberg?

Elementor is definitely powerful and feature-rich. But Gutenberg has also come a long way, and these days, chances are that whatever you can do with Elementor, you can do most of them with Gutenberg too. And the other good news is that Astra integrates seamlessly with both Elementor and Gutenberg. So, feel free to start with Gutenberg, which is totally free, and then, if you want to, you can always switch to using Elementor too.

What is the difference between Gutenberg blocks and block patterns?

Gutenberg blocks are individual blocks that satisfy a single functionality, and a block pattern is a combination of blocks that form a section or even an entire page. Gutenberg block pattern is a fancy term for a template.

---

Alright, that is all for now, and hope this would be useful to the newbie bloggers out there, trying to set up their very first blog. But hey, even if you’ve had your blog for a while and you need to freshen things up a bit, this could come in handy? Maybe?

Oh well…

If this is you, and you’re reading it, please feel free to share your thoughts and questions in the comments below.

This blog post was the runner-up for the Astra WordPress theme’s content challenge. Thank you, Astra 🙂