How To Create A Personal Website In WordPress From Scratch In 2020: The Easiest Way Using 1-Click Import Astra Starter Websites

Home » WordPress Design » How To Create A Personal Website In WordPress From Scratch In 2020: The Easiest Way Using 1-Click Import Astra Starter Websites

Want to create a stunning personal website in WordPress?

I’ll show you how to build a personal website using Astra’s Ready Websites. These are pre-built websites you can import in 1-click using the Astra Starter Sites plugin. This has become the newest, easiest, and most efficient way to create websites. All you have to do is choose a host, setup WordPress, import a theme, and customize! Building a personal website is so easy.

We’ll be using SiteGround’s hosting since they were rated #1 in most Facebook polls and are worlds better than Bluehost in terms of speed, support, and reliability (unfortunately, most people will refer you to Bluehost because of their affiliate commissions). Don’t set yourself up for failure with bad hosting because the affiliates just want commissions. Do your research!

Here’s how to create an awesome personal website in WordPress:

Personal-Website-Main

 

1. Get Domain & Hosting

You can get both of these through SiteGround’s WordPress hosting.

They were rated the #1 host in multiple Facebook polls because their speed, support, and reliability one of the best for it’s price. They make it easy to setup WordPress with free SSL. The only reason bloggers promote Bluehost is for commissions; just look at the evidence.

2019 Hosting Poll

2017-WordPress-Hosting-FB-Poll

Elementor Hosting Recommendations

July 2019 Hosting Recommendation

WordPress-Host-Poll-Aug-2018

Shared-Hosting-Poll-2017

2016-WordPress-Hosting-FB-Poll

Favorite Hosting For Elementor

2018 Hosting Recommendations

WordPress Hosting Poll Sept 2018.png

Managed-WordPress-Hosting-Poll-2017

Step 1: Choose A WordPress Hosting Plan
I recommend their StartUp plan for $6.99/month if you only need to host your 1 personal website, otherwise you need their GrowBig plan if you plan on hosting multiple websites. Be sure to sign up through the WordPress hosting page which makes it easier to setup WordPress.

SiteGround-Plans

Step 2: Choose A Domain Name And Sign Up With Your Details
During the sign up process, you will be asked if you already have an existing domain name or if you want to register a new one. Otherwise, enter your details to sign up for domain + hosting.

Personal-Account-Setup

 

2. Install WordPress

Once signed up, you will be taken to a launch wizard where you can setup WordPress:

SiteGround Confirmation

Select start a new websiteWordPress as your software, and create your WordPress login details. Most people don’t need domain privacy or SG Site Scanner which costs an annual fee.

SiteGround Setup

When you’re done, you’ll come to a confirmation page.

SiteGround Hosting Ready To Use

 

3. Login To Your WordPress Admin

SiteGround will send you an email with the URL and login details to your admin area.

Personal-Website-Account-Setup

Go ahead and login!

WordPress Login

Yay, you’re here!

Personal-Website-WordPress-Dashboard

 

4. Add SSL To Make Your Site Secure

Before working on your personal website, you should always add SSL (https). To do this, go to your SiteGround dashboard and head to My Accounts → Go To cPanel. Under the Security tab, go to Let’s Encrypt SSL, then activate free Let’s Encrypt SSL on the domain name you chose.

Personal-Website-SSL

Next, go to your WordPress dashboard and on the left side, go to SG Optimizer → Environment Optimization → Enable HTTPS. SiteGround will walk you through a set of steps (shown below.)

Enable-HTTPS-SG-Optimizer

SG Optimizer Force HTTPS

SSL Confirmation

Refresh your site and you should now see it’s has https in the URL.

Personal-Website-SSL

 

5. Download A Personal WordPress Theme

It’s time to choose a theme for your personal website!

The Astra Starter Sites plugin lets you import any of their pre-built websites in 1-click. These are all very nicely designed, mobile responsive, and fast loading WordPress themes. Astra Theme were also rated #1 in numerous Facebook polls because of how user-friendly they are.

Astra Themes Facebook Poll

Step 1: In your WordPress dashboard, go to Plugins → Add New → search for “Astra Starter Sites.” Install and activate the plugin, then you will be prompted to activate the Astra theme.

Astra Starter Sites Search

Astra Theme Activation

Step 2: Go to Appearance → Astra Starter Sites and select Elementor as your page builder. Elementor is the fastest, most user-friendly page builder for WordPress and makes designing pages easy. They have a few additional themes under Gutenberg, Beaver Builder, and Brizy (see below). But those page builders aren’t as popular as Elementor – the one recommend.

Elementor Page Builder

Step 3: Find a theme you like. Themes labeled “Free” are free while themes labeled “Agency” require a premium Astra account. There are plenty of themes to create a personal website.

I will be using the Coach Theme in this example, but nearly all steps in this tutorial will be identical no matter which theme you choose. Just choose the theme you like best!

Step 4: Import your theme by clicking “Import Site.” When you do this, Astra will import the pre-built website including all the required plugins, customizer settings, widgets, and content.

Import-Personal-Theme

Importing-Personal-Website

Now you have a beautiful, pre-built WordPress site installed which you can start customizing!

Personal-Website-Homepage

WordPress and ThemeForest also have a selection of personal WordPress themes.

 

6. Customize Your Website’s Design

You can customize your website’s design under Appearance → Astra Options.

This lets you do everything from uploading your logo, changing fonts, colors, and customizing the header and footer can be done here. The WordPress Customizer has many other settings that make it easy to design your personal website. LogoMakr makes it simple to create a logo.

Astra Options

  • Upload logo + favicon
  • Change footer layout/copyright area
  • Change font family, size, weight, line height
  • Change navigation menu layout
  • Change layout of pages/posts (fullwidth, sidebar)
  • Change color of text, theme, link, link hover, header, background
  • Customize info shown on blog (author, publish dates, category, etc)
  • Customize the sidebar on your blog (if you have one) and it’s width

Personal-Site-Identity-Settings

Customize-Personal-Fonts

Customize-Personal-Colors

Personal-Footer

 

7. Create Your Pages

In WordPress, go to Pages. Here you can add, delete, and edit pages on your website.

Personal-Website-Pages

You will want to edit your pages in Elementor to change their design. I’m not going to explain how to do everything in Elementor, but for the most part, it’s as easy as point, click, and edit.

Edit With Elementor

Edit-Personal-Homepage

Here’s a video tutorial on using Elementor to customize pages:

Need A Different Design Than The Ones In Your Theme? Use Elementor Templates!
If you want a different design than the pre-built ones in your theme, Elementor has a ton of templates. When editing with Elementor, click the folder button and you will see blocks, pages, and my templates. Blocks are individual block templates, pages are full page templates, and my templates lets you save your own unique templates so you can use them throughout your site.

Elementor has tons of templates for all different types of layouts:

Add Elementor Templates

Elementor Templates

Here’s the about page:

Personal-About-Me-Page

Here’s the portfolio page:

Personal-Portfolio

Here’s the contact page:

Hire-Me-Page

 

You can change your navigation menu under Appearance → Menus.

Keep in mind that pages will need to be published in order for them to show up here. To add pages to your menu, drag them from the left to the right. To create a dropdown menu, drag a page under another page while creating an indent. You can also add blog posts or custom links.

Personal-Website-Menu

The design of your navigation menu can be changed in Astra Options → Header.

Personal-Website-Header

 

9. Name Your Personal Website

Name your personal website in WordPress under Settings → General (usually your name).

Personal-WordPress-Title

 

10. Control How Your Website Appears In Google

You will need to install and activate the Yoast SEO plugin under Plugins → Add New.

Once activated, edit your homepage and scroll down to the Yoast section. You can control how your SEO title + meta description appears in Google’s desktop and mobile results. For personal websites, your SEO title should usually be your name followed by a few words about yourself (around 55 characters). The meta description is longer (around 155 characters). Make sure the Yoast Bar is green which means you’re following Google’s character limits. If it’s too long, your snippet may get cut off. You can customize the SEO title + meta description for each page/post.

It will take Google several days to crawl your website and show the new SEO title + meta description, but give it time and it will eventually update. To speed up this process, you can Google’s URL Inspection Tool in Search Console (instructions on how to set this up in step 16).

Personal-Website-Yoast-Snippet

 

11. Make Your Website Format Nicely On Facebook

If you share your website on Facebook, it won’t format nicely.

To customize how your personal website’s image and text appears when shared on Facebook, edit a page and scroll down to the Yoast section. Click the Social tab and you will see an option to upload a custom image to Facebook (1200 x 630 pixels) and Twitter (1024 x 512 pixels).

Yoast OG Image

Yes, this means you need to create a custom graphic for each.

But when you do, it makes your website look a whole lot nicer. Ideally, you would upload custom graphics for each page so your entire WordPress site formats nicely on social media.

Personal-OG-Image

 

12. Customize Your Personal Mobile Site

Elementor lets you view and customize how your personal website looks on mobile.

All Astra Themes are mobile responsive, so your website should format nicely by itself. But if you want to change certain elements on your mobile site, you can do this when editing a page with Elementor. Look for the responsive mode at the bottom of Elementor’s editing screen. Just like you would edit any page with Elementor, you can do the same for your mobile site.

Customize-Personal-Mobile-Site

 

13. Setup Your Blog

This of course, is if you want a blog.

Step 1: Go to your Pages and add a page called “Blog.”

Step 2: Go to Appearance → Customize → Homepage Settings → Posts Page, and select “Blog.”

Add-Personal-Blog

Step 3: Write your first blog post under Posts → Add New. Make sure you use a nice image!

Step 4: Design your blog sidebar under Appearance → Widgets. You can create different widgets to use on specific pages/posts to show different sidebar content throughout your site. You will need to make your blog a “right sidebar” layout in the Astra Options if you want one.

Add-Sidebar-To-Personal-Blog

Step 5: Create blog categories to organize your posts into broader topics.

Personal-Blog-Categories

Here’s an example of how it looks:

Personal-Blog-Page

 

14. Install Essential WordPress Plugins

Plugins add functionality to your site, but too many (or the wrong ones) can cause a slow WordPress site or even compatibility issues if the plugin isn’t maintained well. Bottom line: you have to be careful on which plugins you install, and how many you use. Make sure to only use fast, lightweight, and well-maintained plugins that have good reviews on the plugin page.

  • Anti-Spam – prevents spam comments on your blog (if you have one).
  • Duplicate Page – duplicate any page if you want to use it as a template.
  • Elementor Pro – more pre-built templates and widgets for better design.
  • iTheme Security – 1-click security plugin to prevent your site from attacks.
  • Redirection – if you change URLs, redirect the old URL to the new URL.
  • ShortPixel – losslessly compress images to load faster in tools like GTmetrix.
  • SG Optimizer – SiteGround’s plugin which is pre-installed when setting up WordPress through their Launch Wizard. Used to enforce HTTPS (SSL) and make your site load faster by configuring multiple options in the settings.
  • Slow Plugins To Avoid – full listed of slow plugins curated by myself.
  • Updraft Plus – free, lightweight plugin to take backups of your website.
  • WordPress SEO Plugins – full list of SEO plugins curated by myself.
  • WordPress Speed Plugins – full list of speed plugins curated by myself.
  • Yoast SEO – robust SEO plugin which I have a tutorial for. You can break Yoast down into 3 steps: settings configuration, keyword research, and on-page SEO.

 

15. Speed Optimize Your Personal Website

Congratulations!

Just by using SiteGround, SG Optimizer, Astra, and Elementor, you should already have a very fast personal WordPress website considering you’re using one of the fastest shared hosts and a lightweight theme and page builder. But there’s more to do if you want even faster load times.

Configure SG Optimizer – Go into the SG Optimizer settings and enable everything in the Frontend and Media Optimization tabs. In the Environment Optimization tab, switch your PHP version to managed PHP which means SiteGround will automatically update your PHP version.

SG-Optimizer-Frontend-Optimization

Activate CloudflareCloudflare is a free CDN (content delivery network) which hosts your website on over 200+ data centers across the world. This reduces the geographic distance between your visitors and origin server, making your site faster. To activate Cloudflare, go into your SiteGround account then My Accounts → Go To cPanel → Cloudflare → Activate Free.

Personal-Website-Cloudflare-Activation

Avoid Third Party Requests – anything that generates requests from outside websites will slow down your personal website (eg. Google AdSense, embedded Google Maps, Google Fonts, embedded YouTube videos, embedded Facebook posts and widgets, or even social media like counts on your blog. While you can optimize some third party requests, avoid them if you can.

Other WordPress Speed Optimizations – see my tutorial on WordPress speed optimization.

Test Your Website In GTmetrix – the tool I recommend which can be used to find slow plugins, unoptimized images, and other speed items that need to be fixed. Mainly focus on load times!

Personal-Website-GTmetrix-Report

 

16. Setup Google Analytics + Search Console

Google Analytics and Google Search Console are powerful tools that not only tell you about your website visitors, but Search Console actually helps you improve SEO by checking for mobile, security, and sitemap errors, as well as tell you about rankings and click-through rates.

Setup Google Analytics – sign up for Google Analytics (free), add your website and fill out your info. You’ll then find your tracking ID in the Admin section of your Google Analytics dashboard.

Google Analytics UA Code

Install a plugin like GA Google Analytics and paste the code into the settings. Alternatively (if you’re comfortable) you can copy/paste your JavaScript tracking code directly in your header.

Add Google Analytics to WordPress

Setup Google Search Console – sign up for a free Google Search Console account, add your website, and you will be instructed to verify domain ownership. Copy the TXT record from Search Console and paste it into your DNS configuration. If you’re using SiteGround for hosting, this will be found under My Accounts → Go To cPanel → Advanced DNS Zone Editor.

Google-Search-Console-Performance-Dashboard

 

17. Get A Custom Personal Website Design

Need something more custom than Astra Starter Sites?

Our team creates beautiful, themeless WordPress sites that are completely custom to each project. To inquire about a design and get a quote, please reach out to us on our contact page.

Otherwise, I hope this tutorial was super helpful in building your personal site!

If you have any questions, leave me a comment and I’ll get back to you as soon as I can.

See Also: How To Make Money With Affiliate Marketing

Cheers,
Tom

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments