DIY Affordable Website in under an hour starts…. now!
What you will learn today is how you can quickly build an affordable website that looks professional and costs less than $300. How is this different from WiX or other similar website builders? Build and customize your website and leave room for scaling! It’s a small investment to get your website online and this tutorial is so easy that the most technically challenged individuals have been able to get their website up and running referring to these steps.
So let’s get started!
Here are the main components of a website:
- Domain Name (example: www.yourCompany.com)
- Website Hosting (where your website is stored)
- Platform (the skeleton of the website. eg. WordPress, HTML, WiX)
- Theme & Content (the stuff everyone will read and see)
- Call To Action (what action do you want people to take on your website? eg. contact you, book an appointment, buy something, etc.)
So let’s get started! For domain registration I will assume our company or organization is called: Katie’s Pies
When it comes to choosing a domain name, you want something that your target audience will have an easy time remembering and typing into their computer or mobile phone. So for our example business, we will try to search for katiespies.com
Looks like katiespies.com is taken! Now what? Well we could try katiespies.ca if our company is in Canada. Other options include adding a verb related to online business, or perhaps the location of the business to the domain name. Here are some other examples of available domains for Katies Pies in Vancouver, Canada:
When it really comes down to it, if you’re in a rush to get your website up, the domain name isn’t super important because you can always change to a new one later for a small investment.
If you want a GREAT DEAL on your domain name, visit Namecheap.com and go with one of the less popular extensions like katiespies.online or katiespies.website. You’ll be able to steal ones of those for under $2/year, um yeah!
Need help? Check out my tutorial on How To Register A Domain Name in 10 Minutes or Less.
When it comes to website hosting most people have no idea what it is or even that it is required in order to have a functioning website. So what is website hosting? All of the files, images, videos, emails and code for a website must be hosted or ‘stored’ somewhere on the internet so that everyone can see it. Hosting computers are only different from your computer in that they are always on and always online, so anyone around the world can view the website 24-7-365. Hosting is the largest cost to your affordable website, but it’s the most important aspect so invest in a good one!
Simple & Quick Hosting
For the quick website setup we are doing today, I recommend HostGator’s WordPress hosting package. They will set up the “Platform” we will use and discuss in the section below, they promise your website will work 99.9% of the time, and from my experience their 24/7 technical support is bang on!
If you plan to take online payments through your website, I highly recommend the HostGator Baby Plan with //https: add-on. Https (also called SSL) is a security certificate required by most payment programs like Stripe that allows you to securely collect MONEY online! (that’s why you’re making a website, right?) 🙂
For those of you purchasing the HostGator Baby Plan, you’ll probably want to follow my tutorial on Setting Up WordPress before you continue with the rest of this…. I’ll wait….
Cool you’ve made it more than half-way! So now that you’ve got your WordPress platform set up, login bro!
usually the URL is www.yourdomain.com/wp-admin/ and the page looks like this:
If you don’t see this, go back to your platform setup and see if you’ve missed any steps. Still can’t figure it out? Leave a comment or Tweet me @SillyTechie
You’re a star for getting this far! Before we jump ahead, you need your:
Step 1 Purchase & Download
My absolute favorite WordPress theme of all-time is the X-Theme!! Here’s why;
- Life-time license & updates
- Pre-loaded templates & content
- All add-ons are included and are all you need to succeed
- Best Customer Support around!
- Super affordable
- 100% Customizable
So now that you have X-Theme purchased, you will need to download the installation file. Simply click on your profile name in the top-right corner of theme forest and click Downloads:
Then we just need the installation files and don’t forget your license key. The license key is important because it allows you access automatic updates, all add-on features and even some cool template files & content. You will find this under your downloads page. Check out my screenshot below if you’re not sure what the hell you’re doing. Or tweet me 🙂
Installation & Setup
Nice job. So hopefully you know where you downloaded your Installable file because I can’t magically know where your computer stores them but if you can’t figure it out try this:
- Chrome users click “Window” menu >> “downloads”
- FireFox users click “Tools” menu >> “downloads”
- Safari users click the “Downloads” button (down arrow) in the top-right corner (only visible if you’ve recently downloaded something)
- Internet Explorer and all other browsers…. dude, web designers & developers don’t use that junk. 😛
Next up, you must Upload your theme to WordPress. You should already be logged in as we’ve covered that in a previous step. So in your dashboard (admin area), click on “Appearance” >> “Themes”
Then you’re going to see all of the pre-installed WordPress themes. These themes are often referred to as the ‘default’ themes. They are the themes that come with the WordPress installation and they are totally lame! (but good for testing errors)
Click on the blue “ADD NEW” button at the top of the page:
In the same upper area, you will see the blue “Upload Theme” button. Click the button to reveal an upload file field directly below! Here’s where you will need to know where you downloaded your x-theme installation file.
Click “Choose file” browse your computer for the file you downloaded from Theme Forest …. OR, what I like to do is drag and drop the file into the “choose file” field. No searching required since I usually have the file window open on the side. Then click INSTALL NOW!
You’ll have to be patient here while it loads…. and you’ll know when it’s done because you will see the progress screen and then you’ll see it say Theme installed successfully! What are you waiting for? Click “activate”!
If you are looking to do some major customizations, you will want to set up a child theme. What is a child theme? It’s a theme that piggy-backs off the mother theme. Why do we use child themes? Because the child will take all of the style, functions of the mother but will allow custom modifications that the mother will not overwrite when an automatic update is done. Read more about that HERE: How to Setup a Child Theme. If $500 is still in your ‘affordable website’ range, then hire a developer on Fiverr to help you with some of your modifications. Most of them charge low rates and will do the work in 24 hours or less.
Setup & Content
Enter the license key that you downloaded when you downloaded the theme. My suggestion is Copy/Paste. Then press “ENTER” on your KEYBOARD! Boom! You’re now activated.
You should now be able to see below, that you can start building your website right away! So if you’re not hugely concerned about the design at this moment and you just want to get your name, company or organization out here, choose one of the pre-loaded templates. They look great, they’re awesome for mobile devices and all you need to do is fill in the blanks with your information.
Filling in the information is easy. Use the Cornerstone drag and drop editor. How is this different from WiX or those other DIY editors? Cornerstone editor specifically offers additional functionality for developers or those individuals wishing to fully customize their webpages. You don’t HAVE to use it, but it’s there for you to use and even better, this editor writes your website in VALIDATED code! Now you will have an affordable website AND you will know how to change, update and manipulate it.
How to Edit Pages
Click on Pages >> All Pages >> Edit with Cornerstone (under the page you want to edit)
DON’T FORGET TO PRESS SAVE!!! — no matter what you’re doing, always remember to press save. It’s SO important because your time is money and lost time makes for a less affordable website.
Before you close up shop, please check out these other useful tutorials and resources:
- Securing your WordPress website (let me show you a simple, free way to make your website more secure) – Available November 29 –
- X-Theme Support Community (sign up using your x-theme license key to get outstanding support)
- Customize your website using HTML & CSS (great website for quick how-to’s – and keeping your project an affordable website)
- Get some design ideas (you can re-create just about any of these professional designs on your own)
If you found this article helpful, let your friends know how to make an affordable website… or if it was terrible, let me know how I might improve it! Find me on Twitter for tips tricks or advice @SillyTechie
Sharing is caring: