There are a host of reasons why you may want to have your own personal website. Perhaps you wish to display your CV for potential clients or employers, share photos, write about a hobby, or blog during an exciting time of your life?
Of course, you can do some (or even all) of these things using a variety of social networking sites, but none compares to having a site of your own; a site that you are in complete control of.
In this tutorial, we’re going to guide you, step-by-step, through the process of creating a website all of your own. We will start right at the very beginning, so you needn’t worry if you don’t even have your own domain name yet.
Before we get started, let’s think about some basic objectives for your site:
1. We will aim for something easy to use, and easy to change as you go along.
2. We will take you through all the basics so you gain the confidence to continue to maintain your site on an ongoing basis.
3. We will strive to create a site that’s attractive and well designed – a site you’ll be proud to lead people to.
With all of the above in mind, we’ve decided to use WordPress as our platform for building the site, and a nice and simple free theme, called “Frantic.” It’s a colourful and simple theme that’s ideal for a personal website.
We suggest the use of WordPress for many different types of website. Here are some of the reasons why we think it’s a great choice for your personal site.
HTML Knowledge is unnecessary: WordPress is a Content Management System (CMS). Essentially, it provides you with an admin interface that protects you from the nuts and bolts of the code. The core design is handled by the theme, and the content is organised via an interface that’s only a little more complicated than a word processor.
It’s simple to change the appearance of your site: If you decide you want to revamp your site in the future, all you need to do is find a new theme you like and install it. All of your uploaded posts and pages remain untouched.
It’s easy to change things as you go along: Adding new images and text to a WordPress site is really easy – so you needn’t worry about a Web designer’s invoice every time you wish to add to your site.
The support community is huge: With over six million WordPress sites out there, it’s extremely unlikely that you’ll find a problem that someone else hasn’t faced before. You will find endless WordPress support forums to help you, and thousands of developers and experts if you ever need any specialist help or customisation.
How we will help you
Here at Make A Website, our team have built hundreds of websites, so we know exactly how to make something that works.
Personal websites are surprisingly straightforward to build. Once you’re experienced in using WordPress, we are talking about hours rather than days, provided you’ve got some content ready to upload. In this tutorial, we aim to teach you enough to get your basic site up and running, and provide you with sufficient knowledge to keep building up the site day by day.
What You’ll Need
You will need a small mixture of skills and items to successfully build your site – a list is below. Don’t be intimidated by the list, we’re going to take you through everything in easy stages.
- A credit card or PayPal account to pay for domain registration and hosting.
- A Web hosting account with your own domain
- A Web browser of your choice (we prefer Google Chrome or Firefox)
- The “Frantic” theme – this is free of charge.
- Some basic content with which to start up your site – text and images.
Getting a domain and hosting
Before you can do anything, you need an address for your website (a domain), and a place to host your website (Web hosting service). We recommend HostGator as your Web host.
We have produced a very detailed step by step guide to registering your domain and setting up your hosting. You should visit the page now via this link. (The links will open in a new window or tab, so you can easily return to this guide at any time – see you shortly!)
The next thing you need to do is install WordPress on your new domain. Luckily, we have another step by step guide telling you exactly how to do that.
Once again, click the link to move forward to the guide. The guide will open in a new window, so you can return to here when you are done.
Getting the basics done
Now that WordPress has been installed onto your Web space, we can get down to business. Before proceeding to the next steps you should be sure of the following:
1. That you can get to your WordPress dashboard (www.yourdomainname.xx/wp-admin) and log on using your username and password.
2. That you can see your site when you type the domain name into your Web browser.
If your basic site isn’t yet live, you may need to wait a little longer for your domain information to propagate. Refer back to Step 7 in the step by step WordPress Guide for more info.
The WordPress dashboard is where you control all the content and functionality within your website. First of all, we are going to change the fundamental appearance of your site by installing the Frantic theme – but before that, you will need to download it – so that’s what we’ll do next.
Downloading the theme
The Frantic theme can be found via this link. It will open in a new tab so you can keep these instructions open.
Click the big red “download” button. This will download the theme file to your computer. Exactly what happens will depend on your operating system – just make sure you make note of where on your computer it is – you will need the downloaded file shortly. The download will take the form of an archived ZIP file.
Installing the theme
1. Log on to the dashboard for your WordPress site.
2. On the left of the dashboard, hover over “appearance” and click the “Themes” option:
3. You will now see a screen showing all the themes available to you, complete with previews:
4. As we’re using a theme of our own, we want to use the “Add New Theme” option. Click the big plus button shown in the screenshot above.
5. Next, click the “upload” link, shown in the screenshot below.
6. Click the “Choose file” button, and browse to where you stored the Frantic ZIP file on your computer. Then, click “Install now.” You will have to wait a few moments while the file uploads to your Web hosting space.
7. All being well, you should receive a message saying that the theme installed successfully. Now, click “activate” to make the theme live.
8. Click on the “visit site” link that appears if you hover your cursor over your site name in the top-left of the WordPress dashboard (as shown in the screenshot below).
You should now see a sneak preview of your site with the new “Frantic” theme active.
It’s now time to start to personalise the blog for your needs, and add some content.
Obviously what you add to your site is down to you, but for the purposes of this demo, we’re going to add the following:
– An “About Me” page.
– A demo blog post.
– A “Contact Me” page.
Once you’ve added this content, you should feel confident enough to go forward and add as much additional content as you want or need.
Before you start to add content, there are a couple of WordPress concepts you will need to learn:
Pages are individual areas of your site, usually accessed through the top or side menu bars.
Posts are individual blog posts, that usually appear in reverse date order as visitors scroll down the page.
In the screen shot below, the green arrow shows a link to a page, and the red arrow shows a post.
Go back to the Dashboard. You will notice that both “Posts” and “Pages” have an “Add New” option when you hover over them. Try adding one page and one post. For now it doesn’t matter if they contain nonsense. The purpose of this is just to get used to adding WordPress content.
When you create content, you use an interface that looks much like a word processor. You can add bold type and italics, format your text, and even add images. via the “Add Media” button. If you’ve used a word processor, you’ll have no trouble using WordPress. The screenshot below shows the basic editor for both posts and pages:
We’ll start with the first page, which (for the purposes of the demo) we will call the “About Me Page.” You will see in the screenshot below that we’ve added some dummy content, and uploaded a photo of one of the Make A Website team!
Simply click the blue “Publish” button when you’re done.
In the screenshot below, we have added our new “About Me” page and one new post too. We’ve included another image in the post. We have then used the “visit site” option to demonstrate how our site has changed. We have highlighted the new content with arrows.
In this next screenshot, we’ve clicked into the “About Me” page we created above.
After creating a couple of pieces of content, it should become very clear how to start to build up your site. The best thing to do now is to spend some time playing with the features and adding some real content of your own.
Adding your contact page
Somewhat bizarrely, WordPress really doesn’t come with contact form functionality. Instead people use plugins to add this functionality.
For the purposes of the demo, we’re going to use a basic free plugin called, quite simply, “Contact Form.” However, you will find numerous other alternatives on the WordPress site.
1. Download the plugin from this link (it will open in a new tab). Save it on your computer.
2. From your WordPress dashboard, hover over “plugins” and select “add new.”
3. Click the “upload” link, and then click “Choose File.” Select the file you downloaded in Step 1, and click “Install now.”
4. Once the file is installed, you should see a screen similar to the screenshot below. Click the “activate plugin” link.
5. Now you need to configure the contact form settings. From the Plugins list, click “settings” underneath the newly installed Contact Form plugin, as shown below:
6. The Contact Form settings are really straightforward, although you can unlock a LOT more functionality by paying for the commercial version of the plugin. All you need to do for now is choose which email address you would like contact messages to go to. You can either choose your WordPress account (which will be linked to the email account you used for installation) or a completely different account.
7. Before you leave the page, you should copy the “shortcode” shown at the top of the page, which you add to a WordPress page to display the contact form.
It’s best to make a note of this ([bws_contact_form]), or copy it to your computer’s clipboard. Once you’re done, click “save changes” at the bottom of the screen.
8. Now it’s time to create a new page containing the contact form. You should be quite familiar with this process by now.
From the Dashboard, go to PAGES > ADD NEW. Call your new page “Contact Me.”
9. Now add the shortcode you copied in step 7 to the content of the page. You should end up with an editing screen that looks like the one below. Click the “Publish” button when you’re done.
10. Flick back to the live view of your site (click on the “visit site” link that appears if you hover your cursor over your site name in the top-left of the WordPress dashboard). You should see a new “Contact Me” link. Click it, and you should see your new contact form, as shown below.
Preparing to Launch
You’re almost there, so congratulations! You have the basics of your personal website in place. However, there are a few things we suggest you do before you begin to publicise your new Web address:
1. Delete the “Hello World” post.
2. Delete the “Sample Page” page.
4. From the dashboard, go to Settings > Permalinks, and change the Permalink setting to “Postname.” This makes it easier for the search engines to index your new posts.
5. You may wish to change the name and strapline for your site. This is easy. From the Dashboard, go to SETTINGS > GENERAL, and change the details as shown below, remembering to click “save changes” afterwards.
6. Consider changing your theme. If you’re not keen on the theme we chose for demo purposes, you’ll find dozens of WordPress theme reviews on our sister site, WPThemes.
You have already installed a WordPress plugin as part of this tutorial, when you installed your contact form. Below, we’ve made a few suggestions of other plugins that you may wish to consider installing.
You can find plugins on the WordPress site here. Most come with full instructions, but essentially all you need to do to install each one is download it to your computer, then go to PLUGINS > ADD NEW on your WordPress dashboard, and point to the plugin’s ZIP file.
- Digg Digg. This adds floating social sharing buttons to your site, so that readers can share content they like via Facebook, Twitter or similar. Social networks can prove a huge source of traffic, so this plugin is practically essential!
- Akismet. If your site becomes popular, it will become a target for spammers, Akismet is a decent free system to stop some of the spam in its tracks.
- Google Analytics for WordPress. You can’t just put up a website and not bother to track statistics about your site! The best way to track site usage is by using Google Analytics. In order to do that, you have to put an Analytics code into your theme. This plugin makes it easy for you.
- Better WP Security. This plugin strengthens the basic security of your WordPress site. While it may not prevent a dedicated and skilled hacker, it will still stop opportunists from using your site for malicious purposes.
- WordPress Backup to Dropbox. There are numerous WordPress backup solutions on the market. Some are free, and some are commercial. This one is a free plugin that lets you regularly back up your site to Dropbox.
So What Now?
You are ready to go! You can start to tell people about your site.
It makes sense to tell a few friends first, and ask them to alert you to any problems or errors they see. If there’s anything you can’t work out, look on the WordPress.org site, and on Google. WordPress has such a large user community you’re sure to quickly find the answer.
Once you’ve fully launched the site, make sure you keep the content coming! We wish you every success with your new personal website.