How to create a personal website from scratch step-by-step (NO CODING)

how to create a website from scratch

Written by Charaf Mrah

Salut! I'm a college student majoring in Software Engineering. I created this website to share whatever I'm learning with you.

August 1, 2020

Creating a website is increasingly getting easier over time. Thanks to tools like WordPress, you can now create an amazing looking website without knowing a single thing about programming.

In today’s post, I would like to give you a full guide on how to create a website from scratch without any coding skills required.

I built my personal website charafmrah.com while writing this blog post and got screenshots from the process so that it’s easier for you to follow along.

Without further ado, let’s get started:

h

Table of Contents

$

GET A HOSTING PLAN AND A DOMAIN NAME

$

INSTALL WORDPRESS

$

IMPORTANT SETTINGS

$

DOWNLOAD IMPORTANT PLUGINS

$

PICK A THEME

$

PICK A PAGE BUILDER

$

ADD CATEGORIES

$

ADD PAGES & POSTS

$

OPTIMIZE THE WEBSITE

$

GET FEEDBACK

$

CONCLUSION

1 – GET A HOSTING PLAN AND A DOMAIN NAME:

This is the only part where you are required to pay throughout the entire website development process.

The prices vary but it can cost you as little as 50$

! I recommend that you get your hosting plan AND domain name from the same provider because hosting providers often have deals where you get a free domain name for the first year!

How to get a hosting server:

Hosting your website is much easier than it was 20 years ago, you don’t need to run nor optimize any servers yourself.

The magic happens somewhere else when you purchase a hosting plan from any of the different web hosting providers.

There are many different web-hosting providers, honestly, at this time there isn’t a big difference between them in terms of quality.

Anywho, these are the hosting providers that WordPress recommends using:

I think that WordPress’s suggestions are great but I may add the following as well:

  • Hostgator (I’ve used it since 2015, it’s not the most beginner-friendly but it works pretty well for me)
  • GoDaddy

Further Reading: best wordpress hosting performance

Hosting Plans Differences Explained:

There are different hosting plans that you can choose from that the web hosting providers provide. The 2 most common are:

Dedicated Hosting:

        Simply, you’re paying for a server dedicated to just one website. The advantage is that your website will benefit from all the resources available on the server as well as other security benefits. The drawback is the higher cost if you’re planning on adding more websites later.

Shared Hosting:

        As the name indicates, you can use the server to add as many domain names as you want (different websites) using the same server. The pro is that it’s relatively cheap and easier to manage different websites. The drawback is that your websites will have to share the server’s resources.

MY RECOMMENDATION: If you’re planning on just creating one website, then a dedicated hosting plan will be better for you. However, if you’re interested in creating several websites without having enough money to cover the cost of paying dedicated hosting for each one then a shared hosting plane might be a better choice for you.

What is a domain name?

A domain name is a name that you see on a website’s URL. For example the college route’s websites domain name is: thecollegeroute.com

How to buy a domain name:

As I said before, I would recommend that you get your domain name from the web hosting provider as many of them provide a free domain name for the first year. 

The process is fairly easy when you get a hosting plan as most providers will ask you to either link a domain name that you own or to buy one using their service.

In case you would like to buy a domain name separately you can simply google: “domain names”. That’s it.

Some famous domain name providers:

It honestly doesn’t matter which provider you choose for your domain name, just pick the cheapest one (but make sure it’s a well-known provider though).

MY RECOMMENDATION: When getting a domain name ignore all the different extra options the domain provider will ask you to add such as protection and backup. This is because you can add all of these later on using FREE plugins, as I’m going to show you later on.

How to link your domain name to your hosting server:

If you purchased your domain name from a different provider than your hosting provider then you will now have to link your domain name to your server. 

This is fairly easy, all you have to do is:

  1. Head over to your domain name’s provider settings
  2. Go to the DNS settings
  3. You’ll find an option to change the name server (this is the address of your server)
  4. You need to add the server’s address provided by your hosting provider, you can easily find it in the dashboard usually. Or just google it to get the specific steps required by your provider.

2 – INSTALL WORDPRESS FROM WORDPRESS.ORG:

First of all, let’s get this out of the way: WordPress.org and WordPress.com are two different entities. I’m not gonna get into the specifics but wordpress.org is an open-source software completely free. Use wordpress.org.

What is WordPress and why use it?

“WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes” – Wikipedia

To simplify it, it’s like photoshop for editing photos. WordPress lets you customize your website as well as many other functionalities that we’ll discover later.

How to install WordPress on your website?

Installing WordPress became very easy nowadays as most hosting providers provide you with an easy WordPress installation option.

As for the provider I use (Hostgator) they have a “one-click installation” page where you can choose to download WordPress from.

If your hosting provider doesn’t have a way for you to install WordPress (which is rare) you check the following documentation: 

Further Reading: how to install wordpress

3 – IMPORTANT SETTINGS CONFIGURATIONS:

General Settings:

Make sure to visit your General settings in order to change the Site title and Tagline (it shows after the site title in some themes).

Writing Settings:

In the writing settings, choose your default post category.

Reading Settings:

Make sure to select the page that you want as your homepage from the reading settings.

Next, choose your Posts page (your blog page). The rest of the settings are not very important for now.

Permalink Settings:

THIS IS THE MOST IMPORTANT SETTING: Change your Permalink Settings to “Post name” or your own custom structure. Make sure to do that now as it you can easily break your website if you do it later.

4 – DOWNLOAD IMPORTANT PLUGINS:

What are plugins?

I’m not gonna go into the technical aspects of WordPress plugins, but you can just think of them as apps for your website.

As you will see, plugins are VERY IMPORTANT and they’re one of the main reasons why WordPress is dominating.

How to Install Plugins?

  1. Click on “Add new” from the menu “plugins” available on WordPress’s dashboard
  2. Search for the plugin you’re looking for
  3. Click on “Install”
  4. Click “Activate”

The most important plugins:

I personally always start by adding plugins even before adding any content on my website.

The most important reason is security

Many websites get hacked in their early days because most people don’t care about the security of their websites before there’s any content on them.

I advise you to start adding and optimizing your plugins even before creating any piece of content.

Now let’s talk about the most crucial plugins that you need to install (I tried and used them all):

Security Plugins:

Security Plugins protect your website from brute force attacks, malicious malware..etc. They’re very important to use.

!ONLY PICK ONE OF THE FOLLOWING PLUGINS!

No matter which one you choose, it’s always better than not having any security plugins in place. I also don’t think that there is a huge difference between them.

Wordfence 

I personally used Wordfence and it’s easy to use and has many great functionalities available in the free version.

Further Reading: wordfence security how to secure your wordpress site from hackers

Sucuri 

I used Sucuri for some time as well and for its free price, I would recommend using it as well.

Further Reading: sucuri setup guide wordpress

iThemes security 

iThemes security plugin is very easy to use and I would recommend it also.

Further Reading: the ultimate guide for protecting wordpress (ithemes)

Backup:

A backup plugin will save your website’s files so that you can retrieve them in case you got hacked or something bad happened to your website. 

They’re VERY important in case you don’t want to lose all of the content that you’ve created (I’m assuming that this is the case).

UpdraftPlus 

I can’t stress this enough: UpdraftPlus is a life savior. UpdraftPlus is free and reliable. 

You can choose a file destination (your google drive for example) to save your files automatically regularly.

This will allow you to get your website back up in case you were hacked or something malfunctioned on your server..etc.

Further Reading: installing and configuring the updraftplus plugin

Analytics Plugins:

Analytics plugins help you understand your audience. 

They provide you with very valuable information about who’s your audience and how they’re interacting with your website.

Jetpack 

Jetpack is more than just an analytics plugin. Jetpack has many different features such as page speed optimization. 

I would recommend that you get Jetpack even if you choose to use another plugin for your analytics.

Jetpack’s analytics are pretty good for beginners. 

They’re not as detailed as Site Kit or MonsterInsights but they’re much easier to understand for beginners.

MonsterInsights 

MonsterInsights is really loved by the WordPress community, and they’re not wrong to do so.

MonsterInsights uses Google Analytics and presents them in an elegant way.

The plugin is fairly easy to use and I do recommend using it.

Site kit 

Site kit is a relatively new plugin compared to MonsterInsights.

The plugin is developed by Google, the owners of Google analytics clearly.

What I like about Site kit is that it has other functionalities such as Google’s search console, Google Adsense, PageSpeed Insights, and more.

Optimization & Speed Plugins:

In an internet world, every millisecond matters.

That’s why it’s necessary to optimize your website in order to achieve faster page loading speeds and use as little resources from the user as possible.

There are many great plugins that can help you achieve just that, as well as using a CDN which we will discuss later.

WP Super Cache 

WP Super Cache is an important plugin in case you would like to make your website run faster for users.

The process is complicated, but I can explain it simply: it caches some of your page’s data on the user’s browser so that they won’t have to keep loading it again in their next visit.

Further Reading: wp super cache settings

Smush 

Smush is a plugin that optimizes the images on your website.

The plugin is extremely helpful in case you are using images on your website.

Smush optimizes each picture so that it’s easier to load for users without taking many resources (that was an oversimplification, but that’s the end result).

SEO Plugins:

This is not a crucial plugin, but if you want your website to rank better on web searches then they’re very important.

SEO stands for Search Engine Optimization.

Yoast SEO 

Yoast SEO plugin has been in the SEO business since 2010 (it’s a lot). 

This headstart gave Yoast SEO advantage and it amassed well over 5 million users right now.

The plugin is fairly simple to use, and it provides you with many tools that will help your website to appear on search engines’ (such as Google) searches more.

You can learn more about SEO if you’re a beginner with this video:

Rank Math

Rank Math is relatively new compared to Yoast SEO, but it has a good reputation and reviews from its users.

Using Rank Math is very easy and I would recommend it for beginners over Yoast SEO.

Another advantage to Rank Math is that it provides all of its options and functionalities for FREE. Yoast SEO however has many important features behind a paywall.

Further Reading: how to setup rank math

How it should look like at the end:

These are the plugins that I chose to use on my personal website charafmrah.com :

5 – PICK A THEME:

Now it’s time to start customizing the website, starting off with themes.

What is a Theme?

A theme is like a layout for your website, it’s like the border or skeleton for your website.

Not only does a theme make your website look good (or bad in some cases), but it also makes your website more responsive and easier to use on mobile devices.

Where can you find & install themes?

Choosing the right theme for your website is very important.

And your theme doesn’t have to be cost you anything, as there are many good looking themes for free available on WordPress.

How to install themes:

  • Click on “Appearance”
  • Click “Themes”
  • Click “Add New”
  • Choose the theme you like and click “Install”
  • After the installation is complete, click “Activate”

How to customize your theme?

After installing and activating your theme, it’s time to customize it. 

You can customize your theme on WordPress by clicking on Appearance > Customize and that’s it, you can now start playing around with the settings.

I would recommend that you start off by changing the title, site icon, brand colors, and typography.

6 – PICK A PAGE BUILDER:

What is a builder?

A builder is some form of a plugin that allows you to build your pages in an easy way rather than having to use coding skills.

WordPress comes with a default “block builder” from a plugin called “Gutenberg” (you don’t have to install it by yourself anymore, but if you didn’t find it you can install it from the plugins page). 

The new default builder is really good in my opinion for beginners and you don’t have to use any paid builders.

However, there are other good page builders such as Divi (I’m using it) or Elementor. But these builders aren’t completely free and you don’t need them as a beginner.

Recommended WordPress builders:

  • Divi theme builder 
  • Elementor ( I personally didn’t try it yet )
  • Gutenberg (default with WordPress now) 

7 – ADD CATEGORIES:

If you’re going to post many posts with different topics, then you really need to start organizing your categories even before writing the posts.

What are Categories in WordPress?

Categories, as the name suggests are a way to categories your blog posts. 

Categories are very helpful in many ways, for example, you might decide to create a page that contains posts from a certain category, it will be very easy for you if you’ve already organized your posts beforehand.

How to add categories:

  1. Click on Posts
  2. Click on Categories
  3. Add the category name
  4. Choose a “parent” category 
  5. Click “Add new category”

Your categories are now ready to use the next time you write a blog post, they will appear on the side menu for you to choose from.

8 – ADD PAGES & POSTS:

It’s time for the fun part, adding content. 

Now that everything is almost in place, you can start by adding pages such as:

  • Blog
  • About me 
  • Contact me
  • Projects

After adding the pages, you can now start writing or importing your posts.

How to add and build pages in WordPress:

Adding a page is very simple, here are the steps to adding a page on WordPress:

  • Click on “Pages”
  • Go to “Add New”
  • Add the Title of the page
  • Start adding content and customizing

How to add posts in WordPress:

Adding a post on WordPress is very similar to adding a page. All you have to do is:

  1. Click “Posts”
  2. Click “Add New”
  3. Add the Title
  4. Write/Paste the post
  5. Choose a category 
  6. Add a featured image
  7. Add tags
  8. Press publish when ready

9 – TIME TO OPTIMIZE THE WEBSITE: (Cloudflare & page speed)

The fun part is over, your website should be 99% done now, and it’s time for some technical/not so fun stuff.

What does optimizing a website mean?

Optimizing a website is a process that aims to improve the performance of a website. This can be done in MULTIPLE ways but we’re just going to discuss some of the ways here. 

How can you optimize your WordPress website?

First great news: we already started optimizing websites in STEP 4.

By adding the plugins: WP super cache, Smush, and Jetpack and configuring their settings your website should be already semi if not fully optimized.

But there’s always room for improvement, as every millisecond matters to users.

Use a CDN (such as Cloudflare)

A CDN (Content Delivery Network) will improve your website performance in a huge way from my experience. I won’t get into the technical details here, but you can easily do so by visiting this Wikipedia article.

Roughly 13% of the website’s on the visible web use Cloudflare’s CDN. The service is also free of charge for the basic plan (recommended).

Further Reading: how to set up cloudflare with wordpress: complete guide

Use Gmetrix & Pagespeed Insights 

You might be asking yourself: how am I supposed to know if my website is well optimized? 

The answer: 

1 – Gtmetrix:
2 – Pagespeed Insights from google:

These websites will give your website a score for its performance as well as some tips that you can apply in order to optimize your website better.

10 – GET FEEDBACK:

Now that the website is done, it’s time to get some feedback from other people. 

You can get feedback from your family members or friends.

Another way to get feedback is to join other blogging communities available online. One of them is the sub-reddit: r/Blogging.

In order to get the best feedback ask people that you trust first and give them specific questions:

  1. What do you think of the design?
  2. What do you think of the colors?
  3. What are your initial thoughts?
  4. Is the website easy to navigate?

You can get creative in this process, the more you ask the better you’ll understand your website.

CONCLUSION:

Creating a website is made easy with the help of software like WordPress. You no longer need to pay an absurd amount of money, nor learn any programming skills. 

You can build your website by the following steps:

  1. Purchase a hosting server & domain name (the only part where you’ll have to pay)
  2. Install WordPress from WordPress.org
  3. Change important settings
  4. Download important plugins
    1. Security plugins (Sucuri, Wordfence, iThemes Security…etc)
    2. Backup plugins (UpdraftPlus…etc)
    3. Analytics Plugins (MonsterInsights, Jetpack, Site Kit…etc)
    4. Optimization Plugins (Smush, WP Super Cachec…etc)
    5. SEO Plugins (Rank Math, Yoast SEO)
  5. Pick a theme
  6. Pick a page builder
  7. Add categories
  8. Add Pages & Posts
  9. Optimize your website
  10. Get feedback

I hope that this post was helpful and in case of anything is missing you can let me know 🙂

You May Also Like…

Pin It on Pinterest

Share This

Share this with your friends