Web hosting is simply the next step to be able to go live to the world with your website. The steps are not complicated but there is certainly a process to assure that all goes well. It is an exciting time knowing that soon, your incredible work, and time you spent coding your HTML page will now pay off. It is a way for you to finally show your art to the world.
For this tutorial, you will learn the strategy for taking your website files and getting them up safely onto a web hosting server. You have already done the homework of creating your website so this tutorial will not involve any coding, but does involve strategic planning and attention to detail to assure success.
Getting Your Website onto the Server
There are many web hosting companies that provide web hosting.
What is web hosting? In order for your audience to see your website, you need to get the website files up onto a server. The web hosting company stores your files safely and allows you to publish your web site live to the world.
Choosing a Web Hosting Service
What to Look For in a Web hosting service
There are numerous web hosting sites to choose from.
When choosing one, look for the following important items:
- Price: Monthly/annual price.
- Storage: Storage capacity/bandwidth – most web sites do not take up a lot of space especially now that you know how to optimize your image files. Text files are always in kilobytes.
- Security: You want your website to be secure from hackers.
- UI: A user-friendly user-interface(UI) so that you can upload your files easily when you need. No doubt you will be uploading new versions as you continue to modify your web site over time. As you know, a website is fluid and will need your attention. Having a friendly user interface makes all the difference in the world when uploading/deleting/editing web files.
- Support: A responsive help desk in case you run into a problem is vital.
Recommended Web Hosting Services
Although it is totally up to you to choose your own service, there are a couple of recommended services to review:
What You Don’t Need
Now that you are proficient in web design, you don’t need any special tools that are provided for the novice to set up a website. There are web hosting services that are specifically designed with widgets that allow a non-coder to assemble a web site, but these web pages end up with a ton of unnecessary extraneous code.
You have already built your site and have all of your files organized. You have also coded your HTML page with just the necessary code that you need and it is easy for you to go back in and update it when you want. Now you just need a place to put the files so that you can showcase your work to the world.
Your Domain Name
Don’t forget that without a Domain Name, you will not be able to go live with your web site.
Going live with your website dictates that you:
- Have purchased and registered your new Domain Name: yourwebsitename.com (example). If you have a domain name already purchased, you can transfer it over to the new web hosting company to keep your site files and your domain name all under one roof.
- Have paid the fee to the web hosting company to host your web site (allowing you access to upload your files).
- Set up the plan you want for bandwidth and total storage on their server for your files.
Building Your File Structure on the Server
Hosting Manager > File Manager
There will be a hosting manager tab somewhere in the user interface that will allow you to go in and upload your files. Usually the Hosting Manager will have other options, one will be to manage your files.
As you have done your proper organization of your files and file folders from the lessons with Udacity, you will emulate the file folder system and duplicate this on the web hosting server site.
Important: Make sure that your home page file is “index.html” because the web server will recognize this as the home page when you click the URL to get to your website. The “index.html” page will be the first one to load.
Make sure you have the recommended file folder system:
Note: It is recommended that folders use lower case names to avoid confusion when accessing these folders from the HTML file. See below for the recommended layout.
- images: This folder is for all of your website images. Your images in your HTML file will reference this folder and the images within it.
- css: This folder stores your cascading style sheets (CSS) that control all of the layout and design of your website.
- js: If there is any JavaScript in your web page, you will want to store it here in this folder.
In the File Manager section of your web hosting user interface, you should be creating something that looks as follows:
As you add more web pages, you will add them with your index.html page.
Now You Are Live to the World
Now you can enter your URL yourwebsitename.com into your browser of choice and see the beautiful work you have created and have the ability to share it with the world.
Where to Next?
After all of the hard work learning to use HTML and CSS, being able to get your files up onto a server successfully is the final pay off for the artist. Congratulations! Continue updating your web pages and continue coding and designing. Exploration into the world of HTML and CSS continues to expand. Take your web pages to the next level. Enroll in our Intro to Programming Nanodegree program today!
