Finally, a Guide to Hosting Your Website
Since I built Bento, I've heard this complaint time and time again, and it's a shortcoming for most learning resources on the web (even the ones that I admire and love). So here's a (lengthy) guide about how to write static web pages on your computer then put it on the Internet.
Let's get started.
How to build and test a simple site on your computer
- Open up a text editor. Notepad or TextEdit works just fine, but I highly recommend you download a specialized editor like Sublime Text to make your coding life infinitely easier.
- Create a new file and type in the following HTML:
- Save that file as index.html on your Desktop. It's very important that the name of the file after period is "html" - this part is known as the file extension. You might have noticed that images have different file extensions like jpg, gif, or png. This is just like that and it specifies what kind of file you are creating.
- Open up a browser like Chrome, Safari, Firefox, or Internet Exploder. Go to File > Open File and find the index.html file you just created back on your Desktop.
- You should see "Hello World!" in your web browser. Try changing the contents of your index.html file with new HTML, save the file, and hit refresh on your browser. You'll see that it starts changing!
What just happened there? Your browser is actually taking the text in that HTML file and interpreting it as HTML code, turning those tags into actual images, applying boldness to tags, and so forth. The browser is just taking text from a file and interpreting it as instructions.
- Create a new file in your text editor and type in the following CSS code:
- Save the file as index.css on your Desktop (notice the new file extension, css). It needs to be in the same directory as your index.html file (for now).
alert("This is an alert I created in index.js!");
- Save the file as index.js on your Desktop (notice the new file extension, js). This file also needs to be in the same directory as your index.html file and index.css file (in this case, the Desktop).
- Finally, change your index.html file with the following code and save it.
<link rel="stylesheet" type="text/css" href="index.css">
<p>Hello world! This text should be blue because of the CSS I wrote in index.css!</p>
Typically, what ends up happening is the following:
- Your HTML needs to be modified to include the right paths for your different files if they are in different folders. For example, if you used the same folder names I did, your HTML would look like this (note the href attribute in the tag and the src attribute in the tag):
<link rel="stylesheet" type="text/css" href="css/index.css">
<p>Hello world! This text should be blue because of the CSS I wrote in css/index.css!</p>
- If for some reason you needed to reference a file that was one level above the current folder that file is in, you would use two periods ".." to indicate the folder above:
# If index.html were in a folder and index.css were in the folder one level up:
# If it were in a folder two levels up:
# If it were in a folder named 'css' that was in a folder one level up:
Why "index" for the file name?
One last thing: you might be wondering why the HTML file is called index.html as opposed to anything else like home.html or puppysareawesome.html. This is because the default file to go to when accessing a folder in a browser - particularly when it hosted on a server - is index.html. This will be more apparent later when we actually publish your code.
How the Internet works, simplified
Now that you know how build a simple site on your computer, it's time to take that knowledge and apply it to publishing it on the web. Pay attention here, because what you're about to read is probably the most important part of this entire guide. You need to realize is that the Internet is just a bunch of interconnected computers, and when you visit a site, you are using code that is on someone else's computer instead of yours.
Let that bit of knowledge sink in a little.
This is a vast oversimplification, but you've seen how code is practically interpreted text in files with special file extensions. You could have accessed those files from someone else's computers rather than yours. You just don't know how to put your code in a place that's available to everyone yet.
When I type in "http://www.google.com/" in the address bar of a browser, a number of things are happening very, very fast. In very simple terms:
- The first thing that happens is that a request for files is sent to a particular computer. That web address you type in "http://www.google.com/" is just a nickname for something known as an IP address that looks something like 127.0.0.1 . That IP address is like a mailing address that points to a particular computer where the files are coming from.
What is effectively happening when you access a website through a browser is that you're accessing code on someone else's computer that was sent to you instead of from somewhere on your machine like your Desktop. The main difference is that these are not the ordinary kind of computer like the one you're probably using to read this guide. These computers are known as servers and are designed to do exactly what their name implies: serve web pages. What that means for you as someone who wants to build a website is that you need to put your code somewhere where other people can access it too - on a server. There is a great video to watch about how this process works that I feature in the fundamentals portion of Bento - it's the first link on the whole site because it's so crucial to understand how this process works:
What you need to learn now
At this point, there are two major parts to getting your code running in a way that you're used to with other websites. The first part is actually putting your code to a server. The second part is getting a domain name that points to the server that you're putting your code on.
Putting your site on a web server
There is an endless number of combinations of methods and services you could try to get your code hosted on a web server. However, it's simply not useful to enumerate most or even many of these combinations at the skill level you are at if you're reading this. Therefore, I will provide only three methods and strongly suggest one.
Traditional web hosting (don't do it)
There are a lot of services out there that will essentially let you rent space on their servers and provide you with some useful tools on top of them. Traditional hosting is usually provided by many popular domain name registrars like GoDaddy and simply provide you with a certain amount of space that you can serve files from. For the majority of these services, you simply upload your files and folders to the server just like you would upload an image from your computer to Facebook.
Many of these traditional hosting solutions will also let you upload files via FTP (File Transfer Protocol). This lets you upload files directly from your computer and download files from the server without having to go through the hosting service's website.
My advice about this sort of hosting is: don't do it. This method of uploading files manually is outdated by at least a decade and has a number of issues plaguing it: lack of flexibility, difficulty of use and configuration down the line, and generally very expensive. The only reason I mention it here is because you will inevitably have it shoved in your face when you buy a domain or search the Internet for hosting services. Just walk right past it.
Cloud services (overkill)
In the future, I plan on writing another post to talk about how this could be done, but it's an entire other section of its own. So assuming that you are building a static site, best to avoid these for now.
Instead, use GitHub Pages
Okay, what you should do is use GitHub Pages. Full disclaimer: I do not work for GitHub and GitHub is not paying me. I personally think it is the best way for a beginner to publish their code for a number of reasons. It was even used to host the original version of Bento before I switched over to cloud services. Here's a few reasons why I think GitHub Pages is a good idea:
- It requires that you learn Git, a popular version control system (though not the only one out there) that is an essential tool for any developer that hopes to work in teams or for a company. Git is one of the most popular technologies for version control out there.
- By learning Git, you will also have to learn how to interact with the shell. This is another basic technology that lets you interact with your computer in a very fundamental way.
- Hosting this way gets you started building a GitHub profile, which allows you to open source your code so that it can be seen by others - especially potential employers and other developers. I cannot stress enough how important this can be if you want to advance your career, especially as a beginning developer.
- It's absolutely free to host your code on GitHub and have it be published in an accessible way.
- It is shockingly easy to get your code published.
Now about that last point about it being shockingly easy: what that means is that you might have to pick up a few new (but easy) skills along the way if you're a complete beginner. This is what I recommend:
- Learn how to interact with the shell on your computer. Here's the Bento page for it. I highly recommend you start with the first link Learning the Shell.
- You need to learn Git. Here's the Bento page for that. I highly recommend you start with GitHub's own tutorial on Git, Try Git, which is the first beginner link on the page.
- Once you learn how to use the shell, install Git on your machine, and how to use Git, you need a GitHub profile. Go to http://github.com/ and create a profile.
- Publish your code by pushing your code to a branch called gh-pages in your repository. I'm also assuming here you know what git branching is - if not, click here for a tutorial used on Bento. The full instructions on how to do this from GitHub are very good, so make sure the read them.
- Once you've successfully pushed code to the gh-pages branch, you should be able to visit your site at: http://<github username>.github.io/<repository name>. For example, my GitHub username is jonhmchan and I could host my code in the gh-pages branch of a repository named bento. That means any code that commit and push to the gh-pages branch would be seen at http://jonhmchan.github.io/bento
That's really it! Assuming you know how to use the shell, Git, and GitHub, all you need to do push your code to a branch called gh-pages and GitHub takes care of the rest! At this point, there's probably one more question lingering in your mind: how do I get a fancy domain name like www.bentobox.io if I don't want to use GitHub's auto-generated web addresses? That's where buying domains come in.
Getting a domain name
The next thing you'll want to do is get a domain name. A domain name is how people will find your site: Google's domain name is google.com and Bento's domain name is bentobox.io. You'll have to register your domain name with any number of registrars like NameCheap, Gandi, or GoDaddy. Usually, these domains will be very cheap, sometimes as low as $10 a year. However, be careful with how you search or buy your domains though. Here are some things to keep in mind:
- Getting the perfect name is going to hard. A lot of the great names have already been taken, especially on very common top level domains (TLDs) like .com and .io. Chances are, you're going to have to be pretty creative with your domain name unless you have a lot of money to shell out.
- The best way to check if a domain name is taken is to simply try and visit it. Some domain name sellers will actually try and buy up domains that are typed into their sites just so they can be sold at a higher price because you've indicated demand. You can also try doing what's known as a "WHOIS lookup" to find out if the domain you want is registered (just Google it).
- When you buy a domain name, it is required that you provide information about yourself to the WHOIS database. This is a public database that is searchable. You can get around this requirement by using Domain Privacy that provides stand-in information for the WHOIS database and forwards information along to you. Some registrars like Gandi automatically do this for you (I use Gandi for pretty much all of my domain purchases), but services like GoDaddy only make it available if you pay for it on top of your domain. Be sure you know before buying your domain.
- Buying a domain that's already taken is very hard to do. Many of these domains are taken by squatters who buy up a lot of domains just in case someone wants it and will sell it at a higher price. Negotiating to buy that domain also takes up a lot of time and effort, and probably a lot of money if the domain you want is valuable. In most cases, you're better off just choosing another domain name.
Once you actually get a domain that you're happy with, you'll have to change some settings to point to the servers your files are hosted on and it's a bit different depending on which method you're using to host your files. That being said, the vast majority of cases require that you simply change a few options on what's known as DNS records - which you can get a brief overview of here. However, if you are using GitHub Pages as recommended earlier, you can read GitHub's own instructions on how to set up a custom domain for your pages here.
Also, you should know that changes you make to your domain settings may take a while to take effect. If you're running into problems, just check back in an hour or so. If it takes more than that, something might be up.
That should be it
I hope this serves as a starting point for someone just learning to code to actually publish your work. I cannot stress enough how important it is to get your code out there in the world. For so many developers I've had the pleasure of meeting, being able to create something that lots of people can use is their favorite part of learning to code. Even for me, that feeling of creation is what got me addicted to development.
Now go build stuff and share it with the world.