Without further ado, lets start our engine and move on with the topic – How to create a professional website without any coding knowledge. I’ve split the topic into 4 major parts as listed below.
Before I start telling you about the easiest way of setting up a website, I would like to share a quote I came across today.
“Design is Thinking Made Visual” – Saul Bass
Before I start my monologue on how to start a website in 4 simple steps, I would like to tell you something about CMS, which is also known as Content Management System.
Does it sound new to you? No worries, I will explain it in the simplest possible way. This article is aimed at making the process of setting up a website or a blog simpler.
What is a Content Management System [CMS]
Content Management Systems make the process of creating content very simple. With CMS you can also design your website, change its structure and much more. Let me explain how it works with a simple example – Let us consider Facebook, I am sure you have an updated status or posted pictures on Facebook. You have a nice easy interface and you do not need to know a single line of code to do it. Right?
Similarly, CMS provides you with a simple interface where you can put the content that you have generated reflect on your website without much hassle. In the case of websites, it is a tad bit different than Facebook, but the idea is similar.
I want to make that process easier for you so that after reading this article you can create a website of your own by following just 4 simple steps.
Step 1 – Selection of Right Platform for Your Website
Now that you know what CMS is, let me help you in choosing the best platform for your website. If you are a beginner to website creation, I strongly recommend you go for ‘WordPress’ for it is very user-friendly and happens to be one of the most widely used CMS platforms.
Recent statistics put out by W3Tech, shows WordPress to be a clear winner with 60.2% of the all the CMS based websites are made using WordPress.
Why WordPress Platform?
Here are a few reasons why choosing WordPress is the right thing to do. Let me start by comparing WordPress with other available options.
- WordPress Vs HTML/ CSS – The main difference is that WordPress sounds better than the rest, doesn’t it? On a serious note, All you need to know is that WordPress allows you to build your website without you having to code a single line. Whereas with HTML/ CSS, for every aspect on your website, there must be a code written. You may ask me how WordPress allows us to have such a user-friendly interface? Simple, all necessary codes have already been written and the templates are pre-created. Your job is to choose, drag and drop the necessary entities for your website and just publish it. Also, updating the website on WordPress is much easier because there are thousands of plugins, FREE and PAID, that make your website’s look and feel better. However, this flexibility is not available with HTML/ CSS websites.
- WordPress costs you much lesser than other platforms [CMSs] – WordPress, Joomla and Drupal are the three widely used content management systems in the current market. When I ran a simple price comparison between these platforms, WordPress came out has the winner hands down. Let me tell you what factors determine the cost of a CMS platform.
- Hosting: This is the space where your website resides. Just like you need land to build something, you need hosting to place your website from where internet users can access it. WordPress provides an easier implementation on hosting, hence costs are much lesser when compared to Joomla and Drupal CMS platforms.
- Theme: Themes are templates based on which you can build your sites. Your site design and features will depend on the theme you have chosen. The number of theme providers for Joomla and Drupal is less in number which again drives the overall cost.
- Maintenance: This is by far the most important aspect. WordPress can be maintained by anyone, including beginners because of its user-friendly nature. Joomla and Drupal need people with some technical knowledge in order to update or maintain the site effectively. This is another contributor to the increased cost of other content management systems.
After comparing all these aspects, I assure you that WordPress is the cheapest platform which allows you to have a robust website under $100.
WordPress Vs Joomla Vs Drupal Comparison – I will now compare the top three CMS in the current market in this section. This will allow you to get an idea of which CMS will be a good match for your requirements.
More on the differences between these CMS’s here.
Considering all these aspects I highly suggest you start your first website with WordPress. Do not be overwhelmed with the process of setting up the website because I will explain it in just 4 simple steps in the remainder of this article.
Step 2 – As it is -Domain Registration & Hosting
Now that you know the benefits of having WordPress as your CMS, Let me guide you through the next set of things. This is going to be a step by step guide so that all information is covered within this article. So, grab a cup of coffee while I I get started with my rant.
In Step 2, I will talk about two very important things,
- Domain (Name of your website)
- Web Hosting (A place where your website and all the data associated with it resides)
How Do I Register A Domain?
A domain is nothing but the unique name that you choose to call your website. It can be the name of your business or your own name. Once you have decided the name, you have to check for its availability and register them with any of the domain name providers.
I have put together a set of guidelines while selecting a domain name. There are plenty of vendors who can help you with domain registration. I prefer to register my domain names from Namecheap.com as they are quite cheap and reliable. Ideally, the procedure to register a domain would be same across vendors.
So, are you ready to register your first domain with NameCheap?
Do not worry, it is not rocket science. I will guide you through it.
- Go To Namecheap.com
- In the search bar – Type the domain name and the TLD you are looking for. E.g. companyname.com
- Enter your information & Billing details, ensure you uncheck all the add-ons which aren’t required.
- Go Ahead and buy the domain (Make sure you have given the correct email & phone number)
- Hurray! You now own the domain
How Do I Buy Hosting for My Website?
Before moving on with the steps to do that, let me address the fundamental question in your mind.
What is Hosting?
In simple words, all your files related to the website i.e pages, posts, media files reside in your hosting space. Your website can be hosted on a server or a cloud. You can choose any hosting provider among the plethora of options available. I’ve used these hosting space providers for my projects, by far Siteground tops my list of vendors. I’ve reviewed Siteground in a separate article here. Here is how you can buy hosting for your website.
- Visit Siteground.com
- The above link will take you the WordPress hosting. Depending on your requirement choose a relevant plan and click on “Get Started”
- Here, As we have already purchased the domain choose the option ‘I already have the domain’ and enter the domain in the box provided and hit ‘proceed’ button. Now enter all the relevant details and make the purchase.
- Under the hosting services section – select the location that is close to your location or the target audience’s location.
- Now you are all set, go ahead and complete the purchase. Congratulations! Now that you have a domain and hosting, let us make your first website live.
How Do I connect my Domain to Hosting?
Now you have the two most important ingredients to bring your website to life with you i.e. domain name and hosting service. Before you have a live website, you have to connect the domain with the hosting service you have purchased.
Follow these easy steps to link your domain with the hosting.
- Login to your Siteground account – It will open the user dashboard as seen in the image below. Click on the “My Accounts” tab.
- Click on “Go To Cpanel”
- Make a note of the Name Server details as mentioned on the image below. Please note – Your account might have a different address.
The image shown below is only for your reference.
Once you have noted down the Name Server details, Login to Namecheap.
You will see the domain that was recently purchased on Namecheap dashboard. Click on ‘Manage’ that can be found under ‘Verify contacts’.
Under Nameservers, select Custom DNS. Add the 2 Name Servers that we noted down in our earlier step. Please see the images we have attached for a better understanding of the process.
Note – Once this step is successfully done, you need to wait for 4 to 48 hours to point to the new server.
As linking may take a while to connect with the Server, let us go ahead install the CMS and start building your website. As I suggested earlier that WordPress is the best option, Here is how you can install WordPress into the hosting.
How to Install WordPress?
Login to your hosting account (siteground.com), navigate to the ‘Cpanel’ by clicking on ‘Accounts’
Now you are in the hosting Cpanel section. Under AutoInstallers Section, click on WordPress & you will be taken to a page which looks like the image below.
You are almost there, just a few more clicks away from having your own website.
Follow these final installation steps as described in the images below
Once you are done with all the above steps click on ‘Install’.
Before you celebrate, let us ensure that your website is secure.
To ensure a high level of security, install an SSL certificate to your website. i.e to enable ‘https’ security to your domain. Siteground provides free certificates for one year. To install the certificate follow these simple steps provided by Siteground.
Yay! You are done with WordPress installation. Give yourself a pat on the back.
How do we test if everything has gone our way?
I am absolutely sure that you have followed the instructions and have configured everything the right way. However, it is always a good idea to test if the set up has been done correctly. Minor errors can sometimes come to haunt you back when your website is getting good traffic. So, follow these tests and ensure that everything is up and running.
- Go to dnswatch.info
- Add your domain name on the search bar and click “Resolve“
- The website will search the database and show the DNS pointing to your domain. If it points to your DNS server then it is a success [Image attached for reference]
Finally, type your domain name into the browser’s URL bar. If your website loads you are set to make it big with this website. If it doesn’t, go back to the previous steps and check if you have missed anything.
If everything has gone your way then your website should look something like this.
Step 3 – As it is – Website Designing & Optimization
If you have reached the step 3 of this guide, then you have laid the foundation to your website. The next part is giving a shape to your website (website designing) and optimizing it to make it Google/SEO friendly. Here are few topics that I will be covering under website designing and Optimization.
- What are WordPress Themes?
- How to Add WordPress Pages?
- How to Add WordPress Posts?
- Adding Menu to your WP Website
- How to install Plugins?
- Setting Titles & Taglines
- Changing Permalinks
- Setting the Homepage & Blog Page
- Website Speed & SEO On-page Optimization
You now have everything you need to design the website. Let’s start by visiting your WordPress Dashboard where the magic happens, visit www.yourwebsitename.com/wp-admin to log in to your dashboard.
While installing WordPress, I had asked you to make a note of the admin username & its password. Use them here to gain access to your WordPress dashboard. You should see something like this when you gain access.
Now we have to take a step back and understand some basics of designing a website in WordPress. This is going to be fun and challenging as there is a lot you can learn from designing your site.
First of all, I would like to tell you about WordPress themes.
What are WordPress Themes or Templates?
WordPress themes provide you with an interface using which you can modify the design of your website. You do not need to know to code as it is already done in the back-end. You will be provided with drag and drop options using which you can perform the below-listed functions (You can do a lot more, these are some, to begin with)
- The overall styling of the website, layout designs etc.
- Font Styling
- Colors, Page Layout and many more.
There are both FREE and PAID WordPress themes available, but with FREE themes you will mostly have minimal styling options. You can buy a custom theme if you want to design a customized website and it really doesn’t cost much for what you actually get. If you need any help with designing your website, with WordPress Themes, you can contact us here.
Now that you know about themes, you need to also understand the role of ‘WordPress Plugins’, Plugins are like add-ons which sit over the themes. They allow you to add more features to your website, For e.g. Contact Forms, SEO Optimization, Lead Generation, Photo Gallery, Social Media Integration etc. As in the case of WordPress themes, you get here are both FREE and PAID plugins. Paid plugins are only required if you want to add advanced features to your website or if you are looking for very specific functionality, otherwise, FREE plugins can offer almost all the necessary features for your website.
So, the theory class on the basics is done. Let us done some fun stuff now. I will now walk you through the steps for adding themes, plugins, menus etc. The instructions as kept short because I have included images for each step.
Adding WordPress Theme
On your WordPress Dashboard
Click on Appearance -> Themes
Click “Add New”
You can choose from the existing themes. They are completely FREE options. If you have purchased a theme of your choice already then you can upload the zip file. I will continue with the free theme in this section.
Hover on the Theme and Click “Install”
Once it is installed, you will get an option to ‘Activate’ the theme. Activate the theme and you are good to go.
Pages are one of the content types offered by WordPress. It is mainly used for content which is static and is not updated frequently. Pages can be used about us, contact us etc. It is rare that you update content for these topics.
Click on Pages -> Add New
Add a relevant title for the page and add content & Click “Publish”.
These are also a content type and mainly used for blog posts, articles etc. They are used for content which is regularly updated.
Click on Posts -> Add New
Add a relevant title to the Post and add content & Click “Publish”.
Menus help users to navigate on your website. They are mainly divided into a primary and secondary menu.
Now let’s add a menu bar to your website.
Go to Appearance -> Menus
To add your plugins, first, we need to decide on what features you need on your website. As defined in my earlier step, plugins perform a particular task on your website. We strongly recommend you to have the following plugins on your website – All these are available for FREE. These are very important for the initial set up of your website.
- Contact Form 7– Contact Form 7 provides a basic form which you can add to your website. This will help in getting leads as users may contact you by giving away the email details.
- Yoast SEO – Yoast SEO plugin helps you add Title, description & keywords to your page/posts. It also lets you create a sitemap for your website, which is very important for your website to be recognized by the search engines. You can enable can also enable Google search console through Yoast.
- WP Super Cache – WP Super Cache is a static caching plugin for WordPress. This helps to store cached version of the pages for faster loading.
- Google Analytics – Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic. This offers advanced functionalities which we will explore later on.
Here are the steps to Install a New Plugin
Click on Plugins -> “Add New”
Right on top of this page, you will see an “Add New” Button.
WordPress has a collection of more than 27,000 plugins
Input the keyword into the search bar and you will have hundreds of options to choose from. If you are looking for a contact form plugin then input ‘Contact form’ Into the search bar and then choose the best among the available options.
Go to the plugin and click “Install”.
After installation Click -> “Activate”.
Changing Site Title & Taglines
Titles tell your user & the search engines about the content of your website. This helps search engines to put your website into a relevant niche (topic) bucket. Make sure you add the keywords that best describe your site. E.g. Dog Trainers around Manhattan or Best Hotel Deals in Bali.
You can set the Titles here,
Go to Settings -> Click “General”.
You will be taken to the following page. Refer the image and add the title and tagline.
How to Change Permalinks
First lets us understand what Permalinks are?
codex.wordpress.org defines permalinks as the permanent URLs to your individual pages and blog posts, as well as your category and tag archives. A permalink is the web address used to link to your content. The URL to each post should be permanent and never change — hence the name permalink.
This is important because many site owners initially keep random permalink structure and then realize that the structure is not suitable to the content they are developing. Changing the permalinks later will require you to set up re-directions, plan and visualize the structure before choosing it. Follow the steps below to change/set the permalink structure.
Under Settings -> Permalinks
For example, If you have set your permalink structure as
Then if you create a post by the title – “I Love watching Cat Videos”
And the post is under the category ‘Cats’ then your final URL will look like something like this,
Similarly, there are other structures, depending on your website structure and content plan go with the best one.
Setting your Home & Blog page
Once you are done designing your home page, we need to set this as our front page i.e. When someone enters your root domain name, for example, https://yourwebsite.com/ then they will be directed to that particular page.
Here are the Steps to Set a Page as your Homepage
Visit Settings -> Reading
Select “Your latest Posts”
Click on “A Static Page” and you will see a list of pages. Choose the appropriate page and that will be set as your homepage.
Website Speed & On-page SEO optimization
Website speed is considered to be a ranking factor. This means that slower websites are pushed lower by Google algorithms. This is why I want you to focus on your website speed from the day. Here are some things you can do.
You can check your website speed here at gtmetrix.com
Gtmetrix gives its recommendations based on the test result
I would recommend the following to increase your website speed.
- Create multiple images of your website files in multiple geographic locations. This drastically reduces the page load time. This can be achieved using CDN’s (Content Delivery Network) like Cloudflare & MaxCDN which are the most popular options.
- Optimize all the images you use in your content. You use some image optimization plugins which compress the images without reducing the quality. Do not forget to use Lazyload the images if you have heavy images on your website. There are plenty of plugins available to achieve lazy loading of images.
- Use fonts that have less load time. You can visit Google Fonts to find fonts which load quickly.
- HTTP Caching – Use a caching plugin to cache your pages. WordPress has many free caching plugins. WP Super Cache & WP Rocket are the most used cache plugins for WordPress.
OnPage SEO Optimization
As a blogger or a website owner, adding content should be your main focus. However, you have to also ensure that your website and content on it is SEO optimized. In simple terms, On-page SEO is the process of making your website more Google-friendly by following basic practices. The easier you make it for Google to crawl and read your website the better it is for you. Here some basic things you must set up, to begin with.
- Have a Sitemap – This helps Google to crawl through your website and understand the structure of your website. Yoast SEO plugin can help you achieve this. To do this, Go to SEO -> XML Sitemaps -> Enable your Site Map Functionality
- Add Google Schema to your website. Schema literally means protocol. This protocol enables your content on the website to be understood by the search engine. Eg: If you are reviewing content on your website, you can add a review schema to it, which makes Google understand that the content is reviewing a certain product. The WordPress Plugin – All In One Schema Rich Snippets will help you achieve this.
- Add titles, meta description & keywords to pages/posts: This helps Google in understanding your content better. You can easily add all these using the Yoast plugin. You can even create templates to make it easier.
- Add Breadcrumbs to every page or posts. This helps easier user navigation.
- Do not stuff your keyword everywhere– Search engines are smart now and there are high chances of your content getting de-indexed for over-optimization.
There you go, by now you must have a good looking website in place. Well, you may have to work a bit more to make it ‘good looking’ but I am sure you have set up all the above things which will help you push your first article to your website. One last thing I want to touch upon is having your own custom email. This will add a level of professionalism when you use the email for future communication.
Step 4 – Email Configuration
Having your custom email id always adds a level of professionalism and is also a feel-good thing. Sharing your custom email id is always better than a Gmail id for your business. Consider, [email protected] vs [email protected], I’d say the later one looks more professional.
Now that you know the importance of having a custom domain. Let me help you in setting one up for you or your business. For this, I am using Siteground to create the email and I am sure you too have opted for the same hosting, anyways the concept is the same for most of the hosting companies who give you a cPanel to work with so that this guide can be followed for most of the companies.
Here the steps to follow to have that cool looking email
Login to your Siteground account
Click on Accounts Tab -> “Go To Cpanel”. You will be taken to your account’s Cpanel
Under Mail section, Click -> “Email Accounts”
Fill up the boxes as shown in the images below
email account creation
Congratulations! You have successfully created a custom email id if you have followed the steps above. Follow the same procedure to create more email ids.
You can directly access these emails by clicking on the “Webmail” option right next to “Email Accounts”.
You can also configure your emails on your phones as well. To configure it on your phone all you need to do is create a mail account with the configuration details provided at Siteground.
I’ve created an email id for testing – [email protected]
Click -> Configure Email Client
You will find the Manual Configuration setting as shown in the image below.
All you have to do is get into your Gmail or any other app and then configure your mailbox on your phone using the above settings.
Congratulations! You have reached the Summit. You have successfully built your own website and also optimized it. This is just the beginning of the journey, keep following proquotient as I will keep sharing some bits every week on website building and similar topics.
If you need any help with websites using WordPress, contact us at [email protected]