How To Build A Website (Screenshots)
When the internet first went mainstream, I guess even the biggest champions of it could not see how big an impact it would eventually have in the world. Even if a few had predicted the magnitude of global changes it was going to kickstart, I think the speed in which everything has happened must have caught them by surprise.
As small businesses, especially one-man-shows, start to realize the amount of leverage a good website can give them, more and more entrepreneurs re using their online presence as a competitive advantage over the bigger more established players.
Not only that…
What used to be only businesses that setup their own websites for commerce, has now gone right down to the individual level.
No longer are home businesses and individuals contented to setup an online presence on Web 2.0 blogs, they now want their own websites with their own domains. This provides the perfect low cost platform for anyone to make a supplementary income on the side too.
So here is a guide on how to build your own website.
The 3 elements required for you to build a website online are:
- Domain name
Choose a name for your web address. You might want to use keywords that tell visitors immediately what you do. Some people like made up words or tag lines. Don’t sit around waiting to think of a perfect name before getting started building a site. Just register one domain and get going. You can always get a better domain name later and transfer everything over.
Check for availability and purchase it from your preferred registrar. The popular ones include GoDaddy and Namecheap.
If the web address is location of your store, and the website design is the storefront, then hosting is like the warehouse where you store everything. Some people even use the metaphor that hosting is the complete backend of a retail store. I won’t argue with that.
It is absolutely necessary. You cannot do without it. You must either pay for it or beg a web-savvy friend to give it to you for free.
Don’t laugh. Because with how many people operate a website these days, your closest friends might already have a hosting account somewhere which you can hitch a ride on. Hosting accounts can usually babysit a number of domains without incurring additional costs. So the first place you might want to go to for hosting is to ask around your social circle.
If you don’t have friends who already have a web presence or you simply want to be discreet with what you are doing, then you need to get it for yourself.
Now if you had registered your domain with GoDaddy or Namecheap like I mentioned previously, take note that they also offer web hosting services.
You might want to purchase it from them out of convenience. But my personal preference is not to do that. I just don’t feel comfortable that I party has direct and indirect control over all my online assets. They are not hosting specialists anyway.
I suggest that you purchase a low cost hosting plan from popular hosting providers like Hostgator or Bluehost. Actually, they both belong to the same parent company.
Or if you have registered your domain with GoDaddy, you can then get hosting from Namecheap. I don’t suggest the other way around with domain at Namecheap and hosting from GoDaddy. Just read some of the reviews of GoDaddy hosting online and you will know why.
Let’s just say you have decided on Hostgator…
At the point of purchase, while you are registering your account, input your domain so that the account is setup with your domain as the primary domain. This is important if you are signing up for an account that can only host 1 website.
If your hosting plan is one that allows a few websites, then your primary domain doesn’t matter. But since I assume that you are a newbie, let’s not make this more confusing for you. Stick to keying in your main domain into that field above.
Take note that the server management software you will be using is cPanel. cPanel is to your hosting account like what Windows is to a computer.
There are many different software which you can use to build your website. For a beginner, I suggest that we keep things as simple as we can. So we will be using WordPress.
Don’t worry, you will not need to install any software on your computer. Everything is web-based or installed on your server (hosting account)
When you have registered for your hosting plan and made payment, you should receive an email with the access details of your hosting plan. Open that email and follow the instructions to login to your server.
To be more specific, the whole server don’t belong to you. You are basically sharing server space with many other websites. A basic server setup can host hundreds, if not thousands of websites. So don’t worry about overcrowding. The hosting provider also sets limits to each account to ensure that no one user will hog the whole server with overuse of resources.
In the same email, you should see instructions on pointing your domain to their nameservers. This is so that when someone goes to your web address, they are sent to the place where the data of your website is stored.
The nameserver information should look something like this.
Now that you have that information, login to the registrar where you have registered your domain. Go to domain management, and look for the place to manage your domain nameservers. Then input the nameserver details you found in that hosting email and key them into the space provided.
If your domain is on GoDaddy, you should see something like this.
Now we have to wait for the domain and the server to make a solid connection. The technical term for this is “propagation”. Sometimes it can take a few hours to establish a connection. Sometimes, it can be immediate. In the worst situation, is could take up to 24 hours for the domain and host to propagate.
Putting it all together to setup the website
It’s now time to login to cPanel and install WordPress. You should see this page as soon as you login to cPanel. Now look for this icon.
The above is what you will see in a Hostgator hosting cPanel account. Take note that you might see different icons when you use different host. But ultimately, they all provide the same – WordPress one-click installation.
For example, this will be what you see in a Namecheap hosting account.
These days, almost all hosting providers have integrated one-click installations for WordPress. If you have found to your horror that there is no WordPress one-click installation available. You must have signed up for some shaddy hosting company… :S
Anyway, I can tell you that Hostgator and Namecheap hosting plans do come with WordPress one-click installation capabilities.
Once you click on the WordPress icon, you will be asked to choose the domain to install it on. Select accordingly. Below is a screenshot of the basic details you will need. Enter your preferred details and click “Install WordPress”.
Note that different hosting companies will look different. But the fields will all be the same.
You are DONE!
Congratulations! You have now done something that most people have done in their life. You have created your own website on the internet!
Alright… that is a premature celebration…
Because even though you have setup your website, you have yet to design it.
In a way, you can see it as WordPress being the skeleton of your website. The next thing you need to do in order to make it beautiful is to make your 6 pack abs pop, train up your biceps, dress in designer apparel, etc. Whatever you call it. It’s time to make your site look good.
You should now be able to see your website online. Just key in your web address in the browser and you should see a website resembling Plain Jane.
In the world of WordPress, many generous programmers all over the world have created ready—made web designs that anyone can use to beautify their websites. This is another reason to have some gratitude to the existence of the WordPress community. The word “theme” is used to describe designs. So don’t be confused. “Themes” just means designs.
Choosing a design theme
There are thousands of theme designs that you can download and install to quickly create a nice looking site. And they are free!
Can you believe that inkyMoney uses one of these free themes?! Hard to imagine isn’t it?!
OK let’s get back to the serious stuff.
Login to your WordPress dashboard. The login page should be this URL:
You will of course need to replace <yoursite> with your domain name. Key in your login details and login. The WordPress dashboard will look like this. This is like the backend of a retail store. You manage everything here so that the storefront remains appealing and attractive.
To browse through the available design themes you can install for free, go to “Appearance”, then go to “Themes”, “Add New”. You should see the below screen.
Just navigate and play around with it. The thumbnails (preview picture) should give you a good idea of how the aesthetic aspects of the individual designs look like. Look for a design you like and “Install” it. Next, click “Activate”.
Choose a mobile responsive theme. Responsive means that your site will convert to a mobile layout when viewed on smart phones and tablets. The theme descriptions should mentioned whether it has this feature.
At this point, you might find that things appear too “Geeky” for you.
Don’t worry. It’s really very simple. These are really very basic stuff in the programming community. Once you get the hang of it, I’m very sure that you will find it so easy to play around with the different elements of your website.
It’s not as if you are building a competitor to Facebook or Yahoo. We are talking about a simple website here.
I learned everything myself. And one of my biggest regrets was that I did not take up the challenge head-on immediately. Now that I know these stuff, I realized that I have wasted so much time due to the mental barrier around my head. I could have easily mastered everything at least 3 years earlier if I had thrown myself into the deep end of the pool from the start.
Pages and posts – Start creating content
Now that your website is set up and the theme design chosen, it is time to add a little content like articles and About pages.
The most basic way to add content to a WordPress site is via Pages and Posts.
Pages is usually used for content that will not change with time. Some people call these static pages. The common types of content published on pages is the:
- Contact page
- About us
- Terms and conditions
You have to determine how you want to structure the flow of your site.
Posts is usually used as a blog because there is a pinging feature. I also don’t want to get too technical with database calls here. Just know that the main difference between pages and posts is that posts make an “announcement” to the internet when you publish one. Pages do not.
The best part is that WordPress uses what we call a WYSIWYG editor when you create a page or post. It is like working on a word document. You don’t need to know any coding in order to add material to your webpages.
Again. I stress that you should explore and navigate around the different functions to get used to it. Don’t be afraid of mistakes as they can be corrected easily.
Once you have created a page for your home page, it’s time to tell WordPress that you want this particular page to be the home page.
- Go to “Settings” => “Reading”
- Under “Front page displays”, choose “A static page”
- Then select the page you have created as the Front page
- Click the blue button below labelled “Save Changes”
Sidebars and widgets
Depending on the theme you choose or the type of home page you create, you may or may not have sidebars on your website.
To edit or customize what the sidebars display, go to “Appearance” => “Widgets”
Intuition should take you over on how to customize them. At this widget dashboard, you can drag and drop around the many functions that are possible. Go crazy to your heart’s content.
One of the big reasons why WordPress is such a popular content management platform for webmasters is the abilities of plugins. These are the add-ons that enhance the performance of your site to the way you want it.
It is sort of like a car racing game. You get a basic car (WordPress setup), then you go to the motor shop to upgrade your tires, engine, spoilers, sports seats, etc. Plugins are the performance upgrade enhancers for your site. And most of them are free.
You can browse through what is available and what you might need in the free WordPress plugin directory.
Or you can browse them right in your dashboard as well.
Go to “Plugins” => “Add new”
As different user have different needs and requirements for their websites, I can’t possibly tell you what plugins to install.
Just remember that the more plugins you use on your website, the heavier load it will be on your hosting.
You now have your own website…
My best advice is to let go of the fear you have about making your own website.
Just get hands-on and learn from trial and error. Even if something bad is to happen, it can usually be easily fixed.
The important thing is that you learn how to build and operate your own website. This can be a big advantage over competitors in terms of business or even with colleagues in the office.