Easy and Affordable Website from A to Z. Step by Step Tutorial
This tutorial will guide you through the creation and the management of your own web site. The project will be based on a shared hosting and the WordPress CMS, because it’s a good combination that will fit most of the common use cases.
The first topic of any Web project is the Domain Name. Each and every one has a name, and your site will be no exception. Indeed, an Internet site name is called the Domain Name (mysite.com). It contains the name (mysite) and the domain (.com).
Most common domains are .com or .net .org, but nowadays there are a hundred of them for affordable prices.
Once you have found your domain name, and check its availability, we can focus on the hosting.(It is not mandatory to buy the domain name at this step, because it is most of the time included in the hosting pack.
It consists of renting a server (a machine somewhere in this planet, in a data center), or a bit of it, to install our website on. Then make our domain name point to this server. By doing this, every person typing our domain name in the address bar will access this website in this distant server (we don’t really care where).
The hosting company is your choice, and the offer is quite large, so you will have no difficulties findang capable ones.
In order to stick to our “Easy and Affordable” mojo, i’ll only advise to go for a shared (or Web) hosting, instead of dedicated or cloud servers. The middle-tier is a good choice to start quickly for $5 to $10/month.
Most of the hosting solutions are complete, and they offer you to easily create email addresses, in a sufficient quantity. You just have to choose the username and password.
There a guides to configure your email inbox with every OS and software.
As a free email client, I would recommend Thunderbird for PCs, or BlueMail for smartphones. But there are many others to connect to your new email boxes.
To start with, it may be sufficient to create one for you, and one for contact and external communication. (email@example.com, and firstname.lastname@example.org)
The CMS (Content Management System) is the piece of software we will install on the server, whiwh will allow us to create and manage our website. Adding or Editing pages, compose the UI…
Choosing one can be fastidious if you dive in the main features, but to make it easier, just go with WordPress. It is the most used and documented, with a rich set of extensions.
The CMS is most of the times installable with 1-click solutions, so there is non need to go deeper in the installation and configuration of filesystem or database, like a few years before.
Only the admin username and password are to be set.
One of the CMS advantages is the consistent look&feel it offers throughout the whole site, with common styles, that can be customized outside the content pages. We call it the theme, and this theme can be choosen and changed (or even further customized if you have web design skills).
Base themes can do the job, and there are hundreds of other free themes to go with. Just take your time to browse through the themes, and select one to install. Remember that the theme can still be changed later with minimum impact on the content.
There are also paid themes library like ThemeForest.
This is the most overlooked part, but which needs a lot of investment. Whatever the solution you choose (CMS, Site Builder…), writing and editing your content will still need an investment from the business. And the business…it’s you. Nobody can know better than the photograph which photos to show, nobody will know better than the startup creator which wording to put upfront, etc…
Writing good content stays an effort, and the CMS is the tool that helps you writing them without caring about the final display and the UI at the time of editing.
A rich text editor is provided, with the possibility to preview drafs pages or posts.
Do not hesitate to browse the CMS extensions to add features (contact forms, social actions, sliders…)
At this step, we achieved our goal : Providing quickly an affordable and modular Website.
However, it is sometimes not enough. It is good practice to provide a little bit of security, or to be kwown from the search engines.
HTTPS is the protocol used to secure exchanges on the Internet. It is responsible for the green padlock you can see sometimes on the address bar. It encrypts data on the Internet, thus increasing the security.
It becomes a de-facto standard if your website handles user data and personal information. Even search engines gives better scores to website using HTTPS, because browsing becomes safer for everybody.
Again, it is provided in the hosting (in the pack or an extra), and the installation is easy. The certificate installs itself on the domain, and once over, your site will be accessible via http://mysite.com and https://mysite.com
(Bonus) Force access through HTTPS
This step is not mandatory, and not easy either. It consists of forcing the users to access the site in secured mode. It is done via a redirect from http to https.
You will have to add a rule in the .htaccess file of the folder where the CMS is installed. You need to access the server via an FTP client, to put the file.
If you had the good idea to include a contact form in your website, you will soon see that most of the contacts are spams. They are automated scripts searching the Internet to promote nasty content. Even if the CMS confiiguration can help to manually catch these spams, it is still a good choice to add a captcha, or to use spam detectors.
Being online is a good thing, but sometimes you need your site to be visible for internet users to find it. For this, there a some different tips and methods to help :
Webmaster Tools and Search Consoles
The first step is to declare your site to the different search engines. Doing it for Google Search Console and Bing Webmaster Tools could be enough most of the time but there are many others if you need to.
After the subscription, there will be an extra step to asses that your are the Website owner. Some SEO plugins help in this step (ex: YOAST for Word press).
Then you tell the Search Engine where your sitemep is. Sitemap is a file (or many) that indexes all the pages of your site with their addresses. The CMS does it automatically. (ex : For WordPress, mysite.com/sitemap)
Directories and Referencing
Depending of your activity, there may be directory websites for your specific activity or location. The idea is to approach them and tell about your site. They will link to it and bring some traffic.
They are a growing source of traffic for your Website. Networks are multiples and their uses are almost limitless. However, it is equally important to be on the social networks than to create content and to administer the accounts. And this is a burden not to underestimate.
Starting with Facebook or Twitter is fast and the integration is quite easy for like buttons or sharing features.
SEO (Search Engine Optimization)
It represents all the methods used to optimize the pages content, to enhance their positionning on the search engines result pages.
There are extensions for the CMS that helps monitoring your pages scores. Check whether your contents are relevant, the text is clear, images provides description…all the things that will make your pages clear and easily readable. So useful for the reader. So well referenced (higher in the results).
SEA (Search Engine Advertising)
Now, instead of working on the content optimization, we focus on the acquisition via paid links, doing advertising. The leader in this is Adwords, but paid traffic is also available on most of the social networks.
Here ends this tutorial. I hope you enjoyed the read.
Visit our site for more stuff or support.
Xavier is a Freelance Innovation Solutions Architect and Technical Advisor. He has been working for 10 years in software development (Java, JEE, Angular, Node JS, React), and has solid experience as a Tech Lead and Technical Architect in different company sizes (Startup, SME, Large Enterprise), and in different sectors (Insurance, Risk Insurance, Transportation, Energy Management, Mobile Operator)