Table of contents
- Anyway, stop talking, let's get started!
- 1) A simple index.html file
- 2) Create a hosting account for shared hosting
- 3) A short back story on cPanel and shared hosting
- 4) Buying a domain name and getting your shared hosting account set up
- 5) Get an FTP account set up
- 6) Finalize the FTP setup and upload our files!
- 7) Get familiar with the file browser of your website hosting
- 8) Upload your website!
- 9) An alternative to manual FTP uploads with FileZilla using the GUI
- Summary
I still remember my first time trying to figure out how to deploy a website. I was in the student center at my college at the time, downstairs on a shared computer. In college, I would stay late on campus spending countless hours on CodeCademy.com learning how to program in PHP. Although I was learning PHP all I knew how to create and publish was a simple website. I had a file with HTML and some JavaScript, for functionality.
Disclosure: This post may contain affiliate links, meaning I get a commission if you decide to purchase through my links, at no cost to you. Please read my disclaimer for more information.
The night I first tried learning how to deploy a website to a shared hosting company has permanently burned itself into my memories. It was late, I'd been finishing up some sort of simple landing page site with no more than a few images and maybe a button that triggered a popup that said hello. But, to me, that was like figuring out how to cast an Alohomora spell as a first-year Hogwarts student. I felt like a computer genius (ha, how far from the truth that was).
I ended up on a phone call with customer service with my hosting company. The representative was very nice, but over time I could tell he was dying a little inside. I just wasn't comprehending where to put my site files. As a self-taught developer many of the fundamental concepts I probably should have learned I quickly glanced over. I would just blow by all the important things wanting to create something fun. All I knew was that I had a website that "worked on my machine" and I wanted to get it out on the world wide web for all to see.
After about 20 minutes of some back and forth, I was finally able to see where I needed to put my files. Looking back on this moment has humbled me in many ways. This story always makes me laugh because I accept how clueless and naïve I was all those years ago (I don't know how much has changed, there). I hope that these instructions help you get your website deployed more easily so you can get back to learning.
Anyway, stop talking, let's get started!
Let's dig right in and learn how to deploy your very first website to a shared hosting environment. I've used many different shared hosting companies in the past, from inmotionhosting, to GoDaddy to Namecheap. I've also used HostGator.com off and on over the last few years. Why? Because it's inexpensive, easy to use and has pretty much everything you need to get started with a simple website.
I'll stop blabbing about my nostalgia and let's dig right in. We're going to start by just making a very simple web page with next to nothing in it. We'll be using a couple of different tools to do this.
1) A simple index.html file
All I'm going to be using for my website is the tiny little snippet below in a simple file named index.html. Keep in mind I won't be going over how to make a website much in this blog. What I'm trying to convey is how to go from a finished local site to being up and running on the public internet, quickly. A very big step in the progress of learning how to create websites.
<!DOCTYPE html>
<html>
<head>
<title>My First Deployed Website!</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#main {
background: blue;
color: white;
}
</style>
</head>
<body>
<div>
<h1 id="main">Hello world!</h1>
<p>This is my very first website I deployed to the internet. Ya'll ain't ready for this.</p>
</div>
</body>
</html>
2) Create a hosting account for shared hosting
Feel free to use whichever hosting company you'd like to. You can use my HostGator.com affiliate link if you so choose. In doing so you allow me to keep writing articles and tutorials on how I learned and grew over the years in programming. As always, I may receive a commission on the link if you choose to use it. Any support is greatly appreciated and I hope you come away learning something new and that it's worth your while.
Shared hosting has a relatively unique way of helping you get your site up and running. Not just in that it's a "shared" environment (more on that later) but also in the tooling made available to you. It's a fantastic way to start learning programming and hosting websites and apps. I still enjoy hosting things on shared hosting, especially if it's something simple and I don't want to go through the effort of setting up and maintaining a full-fledged server (or more often a virtual machine).
3) A short back story on cPanel and shared hosting
I will be using HostGator.com in all of my examples. A lot of companies use a piece of software called cPanel. You can read more about what cPanel is here. To drastically oversimplify what cPanel is, for our purposes, is that it's a tool that allows you to control and manage a server using a GUI (Graphical User Interface) instead of having to manually do everything.
In a Linux environment (most common for shared hosting) if you don't have a cPanel installation you're writing and maintaining all of your server configurations using the command line. This may seem fun to some people (myself, a glutton for punishment, included) but for others, they just want to set stuff up and move on with their lives. CPanel is an amazing piece of technology and on its own could be hours worth of learning. But, I'll just keep things simple and only call out the important things here.
4) Buying a domain name and getting your shared hosting account set up
Next on the list is to buy a domain name and set it up. The easiest thing you can do (and what I'll be doing in this example) is to just buy a domain name right when you sign up for hosting. This makes it much easier to integrate the rest of your site later on. You don't have to worry about DNS entries or anything like that. Simply pick your domain name, pay for hosting and voila, you're ready to get deploying!
When you get to the HostGator website, hover over "Hosting" at the top of the page and select "Shared Hosting." HostGator often runs super low price discounts when you first start. Many sites will give even steeper discounts when you pay for a full year or more upfront. I'm just going to select the lowest plan, the "Hatchling" plan and pay month-to-month.
Select a custom plan (I'm choosing the Hatchling plan)
Go through all the steps after you click the plan you want. Pick a domain name. Make sure you select "Register a New Domain" (see image below) in the checkout tab. I am going to buy "howtodeployawebsite.com" because I feel like it, and it's available. A note on privacy protection. I'm honestly not sure what the real laws are on this at this point. I would say if you're a solo developer and are entering in your information I would highly recommend getting privacy protection. If you're a business then you may not need to get it as your business information is likely OK to be in the public domain. Please google the topic and decide for yourself.
5) Get an FTP account set up
If you're still with me at this point I applaud you. Honestly, this may seem like a lot to take in, but I can tell you it beats an embarrassing phone call with a hosting rep quietly judging you for not knowing how to do these things. That is not an insult, I was once there. Once you're completely into the HostGator dashboard, it may look somewhat different than mine, but essentially we just need to find the option that says "Upload your own code via FTP." (Please feel free to explore the dashboard a bit on your own, I want to keep this light so I will not be covering it in detail.)
Being able to upload FTP (File Transfer Protocol) is, in my opinion, a pretty big deal. Having full control over the upload and management process at a file level is important. Having a GUI and simple controls for doing stuff is fine, but you won't truly appreciate knowing how to make and deploy your website without the granularity of using FTP.
Look for a section that should look similar to the image below:
Click on "Use FTP" to get to the next section. It takes you to a page that looks like this:
This page may be a little overwhelming at first glance, but I assure you it's quite simple. What you want to do next is decide on a login username, in my case it will be "deploy@howtodeployawebsite.com, then enter a password. Be sure to write all of this down because you'll need it to connect using FileZilla.
Once you enter a username it's going to autofill the Directory name for you. Be sure to change this directory from whatever it defaults to instead be public_html. Delete everything in the textbox and start typing public, it should autosuggest the public_html directory and the public_ftp directory. It should look something like this once you have everything entered:
The public_html folder naming convention is very common in shared hosting. If you configure your server from scratch you can set this to be any root folder name you'd like. Another common one in the Linux world is simply public. A common occurrence when it comes to Windows hosting is a wwwroot folder. No need to worry about that right now, though. Once you're finished, go ahead and hit the "Create FTP Account" button.
6) Finalize the FTP setup and upload our files!
Click on "Configure FTP Client" on the far right. This will open a drop-down with more information about your new FTP user. We are going to connect to our server using our new FTP account using a program called FileZilla. I don't want to provide a link to the download because it can change in the future, but here is a link to the FileZilla website. You can Google how to install that if you need help, but it's fairly straightforward. Look for all of your new FTP account information by clicking on the "Configure FTP Client" button on the far right of your newly created account:
Once you have FileZilla downloaded and installed open it up and at the very top it should look like the image below:
We're going to fill in the "Quickconnect" details using the information you just created and can see in your HostGator dashboard. Enter your information and hit "Quickconnect" to connect to your website's hosting directory. Your "Host" will be the "FTP server:..." section in your Manual Settings. Be sure to set the port to "21" and then hit Quickconnect.
When you get a successful connection to your server in FileZilla you'll be presented with an "Unknown certificate" error. That's fine and is quite common. Go ahead and check the "Always trust this certificate in future sessions" option like the image below:
7) Get familiar with the file browser of your website hosting
When you successfully connect to your new FTP account you'll see some default files inside of your website directory. It should look similar to the image below (bottom right pane in FileZilla):
Let's leave all of the default files alone and just go check out our website. Visit your newly created website and take a second to look at what shows up. You should see something like a default HostGator landing page. The default.html file inside of your public_html folder is what contains the page you're viewing. Next, we'll upload your simple index.html file and delete that default file from the site folder.
8) Upload your website!
Next, let's finally upload your site and make it live! In FileZilla copy the file location of your index.html file and paste it into the left top-most window then hit Enter.
In the bottom left window, you should then see the contents of that directory location. Click, hold and drag the index.html file over to the right side, the "remote window" to upload your new index file. It may take a moment, but you should see your file show up in the files list on the right. Go ahead and open your web page again by visiting your new domain name at take a second to see what happens. You may have to hit refresh but you should see your new web page show up instead of the default page. Why does that happen when they both still exist? Without getting too in-depth it's because, in a server configuration, you can set the priority order in which you want files to show up. A common priority "pattern", if you will, is shown in the code below:
index.html index.htm index.php
What this is saying is that when a site's directory is browsed it should try to "serve up" the index.html first, if found. If it doesn't find one then it will look for an index.htm file and then finally an index.php file. There are many others you can set this to but that's not a big deal for our purposes.
So, if your new site file is showing you can go ahead and delete the default.html file if you want, or you can leave it there. It doesn't matter. More importantly, give yourself a huge pat on the back because you just deployed your first website to the World Wide Web! 🥳
This is all there is to uploading your site. If you have other assets, like images or JavaScript, that accompany your site all you need to do is copy straight over from your local folder into that public_html location. So long as the site works locally and everything is in the same expected location when you upload everything should work. The main catch here is that if you have anything that needs to be compiled be sure to do that first and to make sure that your shared host supports those file types (some Googling should answer that).
9) An alternative to manual FTP uploads with FileZilla using the GUI
There is another way to upload files. My only issue with it is that it can become restrictive quite quickly and I prefer using FileZilla to do uploads. But, if you open up the dashboard (probably cPanel) inside of your shared hosting environment I will show you the alternative.
Go to the root page of your hosting account and look for the tab on the left that says "Hosting" like below:
Once you're inside of the Hosting dashboard look for another link that says "cPanel" or maybe "Manage" to get to your control panel for your website. If it's the first time you've opened this page it can also be a little overwhelming (Remember when I said cPanel could be an hours-long course?). Look on that page for a link that says "File Manager" which should be under the Files section of the page.
Okay, so when I opened this page for the first time it freaked me out a little. It is true that if you mess something up in here you can mess up your site almost and probably to the point of permanently wrecking it. The only way to recover from that is to hope that you have a backup. This is the reason why DevOps folks are so insistent on a set process that involves notifying users of downtime, creating deployment logs and records and most importantly making backups or taking snapshots before committing to the full deployment.
Don't be too freaked out, it's fine to click around and explore a bit here if you want. There's a lot to be learned just by seeing the directory structure of a fully set-up website/server. What we care about here, just like you'll notice from the manual FTP process, is the directories on the left-hand side. Look for (you guessed it) the public_html directory and click on it. You should see exactly what you saw in your FileZilla directory window on the bottom right. This is where your public files for your website exist.
You should be looking at something similar to what I have below:
From this page, you can delete and upload new files directly using the cPanel GUI. It's a slick feature and if you're just learning and want to mess with files and make quick changes by all means deploy your site this way. The toolbar at the top is pretty self-explanatory; click on a file hit delete, move things, etc. But, what we're looking for here is the upload button. That should be located near the top. Click inside of the public_html folder to put it into focus, then hit the "Upload" button.
This will either open another page for uploading or pop up a new file explorer window. Either way, simply click on "Select File" or select the file inside of File Explorer you want to upload. Once you're done click the link at the bottom to go back to your site directory. You should see your new file inside of the public_html folder just like with the FileZilla upload.
Congrats, again! 🥳 Now you know two ways to deploy your site.
Summary
There's an entire world of information, and an entire profession called DevOps, surrounding exactly what we did today. Deployments are crucial for the development process. It's fairly obvious that if you don't deploy your sites and apps nobody will ever get to use them. When I was learning this I would have loved to have had this type of tutorial guiding me along. I'm sure there were plenty of articles out there (had I done some more Googling), but it's in the past so who cares?
I envy the start of your developer journey. I have very fond memories of the early days of learning to write code and get sites out on the web. If you get frustrated it's important to realize that even professionals have to Google and relearn topics and processes daily. It's normal and the important thing is to not give up. This is a big step in the right direction for becoming a full-fledged developer someday. Keep it up!
If you enjoyed the article please be sure to leave a like and to comment and subscribe to my newsletter. I like hearing from people about software development. If you have questions or if you want me to clarify something feel free to reach out.
Thanks for reading!
Photo by Jan Antonin Kolar on Unsplash