Creating a website can be just as exciting as getting your own storefront. Like opening a physical business, there are a series of steps to follow to successfully publish a website.
Many people have launched their own websites, and one reason is because it is easier to do now than ever before. While it may seem complicated initially, it is our goal to break down this process so that you can have your very own grand opening. You can use the links below to jump to that specific step.
- Step 1: Plan and Outline
- Step 2: Pick a Web Hosting Plan
- Step 3: Select a Domain Name
- Step 4: Content Management System (CMS)
- Step 5: Design Your Website
- Step 6: Push Your Website Live
Step 1: Plan and Outline
Planning and outlining your website can even be done without a computer. Mapping out exactly what you will need on your website will help in your decision making as will utilizing helpful online resources with step-by-step tutorials. Answering the following questions can help you with this step:
- What is my goal? Is your goal to sell a product directly through the website, advertise a service you personally offer, or to convey specific information? While this may seem like an obvious question, it is important to organize your goals into long term and short term.
- How do I plan to achieve those goals? If you would like for people to contact you to book a service, then maybe you could have an easy to find contact form page on your website. Having the contact form, and perhaps a gallery of your previous work, is a means to achieve the goal of getting more customers.
- What do I want my visitors to see first on my website? Do you initially want customers to see some of your best-selling products, or have your visitors dive right into your blog? Get an idea of how many and what kind of pages you think you will need. This will help you prioritize the order in which this information appears, making the design step later on a bit easier.
- What kind of content will I have on my website? Will you have mostly pictures, or do you plan on uploading videos as well? Will you need a secure checkout for customers to purchase your products or pay for services? Answering these questions should help you get an idea for how much bandwidth and disc space you will need, which will affect your decisions when you reach step two.
- Who is my target audience? It may seem a bit early, but this is exactly the time that you want to begin thinking about marketing. This way everything you do from here on out will appeal to your intended audience. Conduct research to see what is and is not working for your competitors.
Step 2: Pick a Web Hosting Plan
A web host is a company that allows you to store your website, and provides the connection needed for others to visit and interact with your website. You can create a website on your own computer, but you need a web host so that it can be accessible to others.
These are the types of web hosting plans that are commonly offered:
- Shared Hosting
- Dedicated Hosting
- VPS Hosting
- Cloud Hosting
- Co-location Hosting
You can decide which web hosting plan suits your website’s needs and meets your budget based on how much site traffic you plan on receiving (bandwidth needed), the media on your site and how users will interact with that (data storage/disc space required), and your technical skill set. Our web host provider guide provides in-depth explanations of web hosts , and the different types of web hosting plans.
What Web Hosts Do We Suggest?
The following providers are well-known companies in the hosting industry and offer great service at a great price. On a personal note, here’s where you can help us out – we work with these hosts and collect a small marketing fee when they get new sign ups from us. You get cheap hosting, and we get to keep things running here, providing free content and information to visitors like you.
Step 3: Select a Domain Name
Now that you have a clear plan of action, it is time to pick a domain name. A domain is the name/space of where your website lives, like amazon.com or wikipedia.org. A good domain name should:
- Represent your website, company, or branding
- Be as short as possible
- Easy to remember
Since there are a plethora of pre-existing websites, finding an available domain name can be tricky. Most web hosts have a free domain name search tool. If the name you want is taken, often times these sites will suggest similar domains that are available. Domain names with a “.com” extension (what the domain name ends in) rather than a “.us,” “.org,” “.net,” or any other extension, are often more trusted by users and could lead to more traffic to your site.
Once you have found an available domain name, you must register it so that no one else can take that name, and so that it can be linked to your actual website. You can either register your domain name through your web hosting company or through a third party domain name registrar.
There is an annual registration fee that must be covered whether you choose to register through your web host or a third party registrar. Some web host plans include the annual registration fee as part of your overall package, while others list it separately.
If you choose to change your hosting plan or web hosting company in the future, your domain name stays with you regardless of where it was registered. This way a visitor to your site will not be affected by you switching plans or providers.
Step 4: Content Management System (CMS)
A Content Management System (CMS) is optional, but it makes managing, organizing, and adding all of your content (hence “content management system”) for your site much easier.
A CMS is like an art studio that houses paintings. The paintings in the art studio are the content that you created. An art studio comes with special places and storage for paintings as well as tools that make maintaining and organizing them a breeze. Similarly, a CMS offers a variety of tools and resources that make adding, editing, and even removing content an easy task. Without a CMS, you would need to manage each page individually.
With a CMS application, you are able to do the following tasks:
- Saves drafts of your content in specific folders.
- Publish content directly to your site when it is ready.
- Edit and update already published content
- Delete any content that you no longer want stored or published on your website.
- Organize all of the media used on your site separately from the text, and it generates the correct HTML codes (discussed in step 5) when you choose to add media to a page(s).
- Choose from a wide variety of design templates to use on your website.
- Allows you to edit the CSS (discussed in step 5) if you want to further customize a theme.
Popular CMS applications include WordPress, Joomla, and Drupal. These applications are supported by most web host providers, and can be easily installed through your web host account’s control panel. Many CMS programs are free, but you can also choose to pay for one that may offer extra services.
Step 5: Design Your Website
At this step, you can either choose to hire a designer, or design your website yourself. Designing your website can be a lot of fun, but it can also be tricky if you are unfamiliar with HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) codes. While it is possible to design a website without knowing HTML or CSS, getting basic understanding will help you create more useful content and even make edits to your site’s design.
- HTML is the basic framework for any site; it is what adds structure to your site and defines the content to be included. You can also use these tags to insert and customize links, pictures, video, and any other media that will be on your page.
- CSS is used to customize your HTML tags, and create the design and layout of your website. With CSS, you can modify the color of your text, make a text box “float” on the page, add borders to your page, add drop-down boxes, and any other design element that you can think of.
Learning how to correctly use HTML and CSS does take a bit of time, but it is generally not as complicated as it may seem. The proceeding resources allow you to design your website and can be combined or used individually to assist you with HTML and CSS.
As previously discussed, a CMS is not directly part of design, but it does contain your design (remember the art studio analogy). A CMS will have a variety of free (and “premium”) designs/themes and templates to choose from, as well as an external CSS file.
That one file allows you to personalize the design for the entire website, rather than having to code each page individually. Therefore, an external CSS file is generally considered to be a more efficient way to design your website. This method is useful for expanding or larger websites, since it will not slow down your site over time as you add more content to your website.
A WYSIWYG (What You See Is What You Get) editor is software that allows you to design your website similar to that of a graphic designer, by inserting the text, images, and other media onto the page exactly as a visitor of your website would see it.
The WYSIWYG editor automatically translates the content on your website into HTML and CSS codes. This is referred to as visual editing. This method can give you less control over your design, and require more steps to achieve your desired look rather than directly using HTML.
Visually editing your website can be helpful, but has the potential to slow down your website as you add more content because of a lack of organization when the editor generates the HTML and CSS codes. There are free WYSIWYG editors available, but the ones you pay for come with more customization features that will help you prevent your website from slowing down.
An integrated development environment (IDE) will assist you with your coding by making suggestions and giving you more control over how the code is organized, which can prevent your website from slowing down. This tool allows you to design your site more quickly than coding each individual page in order to create a design from scratch (also known as hard coding). An IDE is not used with a CMS, but can be used either on its own or with a WYSIWYG editor.
IDEs will not typically be listed in the description of a WYSIWYG editor because it is generally assumed that you will have some way to edit the HTML/CSS code. Basic IDEs are provided with paid-for WYSIWYG editors, but advanced IDEs are separate programs (like Chrome, Word, Photoshop, etc.) that you can use to help you with HTML and CSS coding.
The planning you did in step one should assist you in your design process. As long as you feel comfortable and are happy with the end result, it does not matter which method you use to create your website.
Step 6: Push Your Website Live
By this point, you have a fully functioning website that you are ready for the world to see. For this step, you will need to use either Command Prompt, a file manager, or a FTP (File Transfer Protocol) client. Each of these methods allows you to push your site live by transferring your web page files from your computer to your web host’s server. With the connection provided by your web host, your website is now live.
Command Prompt is not widely used, and therefore we will not explain it in detail. To use Command Prompt to transfer your files, you would need to know and input each specific transfer command for every page you have, making it a very slow process.
File Managers are provided by most web host companies, and how they operate varies depending on the web host provider. Using a file manager is faster than using Command Prompt, since the commands are automatically generated. However, transferring files through a web hosting service rather than a third party, is typically slower and slightly more complicated.
FTP clients are a third party company software that will transfer your files for free. Most FTP Clients are typically faster and easier to use because you can connect each of your websites to your server the same way. With a File Manager, the process may vary, making transferring your files not as quick or user-friendly.
Before you download a FTP Client, make sure that your operating system (OS) can run that specific software. Below is a list of the top free FTP Clients and which OSs can run them. In the following list, “all” includes OSs by Windows, Mac, and Linux.
- Filezilla – All
- CrossFTP – All
- Cyberduck – Mac and Windows
- WinSCP – Windows Only
- MacFusion – Mac Only
Congratulations on your new website! Explore the rest of WHdb to learn more about what goes into running a website.