Hey guys, welcome to this bonus lesson on hosting your website.
I'm going to be teaching you a little bit about Web Hosting, how it works,
and by the end of the lesson, I'm going to show you how to make the website that you built in the
last project actually go live on the Internet so you can share it with all of your friends and family
and impress them all.
All right.
So let's get started,
what exactly is Web Hosting?
It's basically the process of making your websites available anywhere on the Internet.
So then somebody from Cuba, or somebody from America, they can all access it no matter where they are.
How do we do that?
Well, in order for it to be available to everyone, first we have to put our website and all of the
files and data that it consists of,
so our index.html, our images, et cetera, all onto what's called a web server.
Now what's different about a web server is that it's actually connected to the Internet.
So what that means is that the stuff that you put on there will be available 24/7 and ready
for anyone from anywhere in the world to access all of these files.
And that's what's required to be able to view your website.
Now at the moment you're able to view your website locally because all of the files are on your computer.
Right?
And this is what we call local development.
It means that all of the files and folders are locally available on your computer.
So any images and any HTML files,
they're all on this computer.
Now, what happens when somebody else say your neighbor wants to access that website?
Well, you would need to copy over those files to them,
or as we've been doing, downloading the zipped versions of those files and opening-up locally.
But this is not how we want to host our website,
instead, we want to take our website onto a web server.
And it's this process of taking all of the files and folders that make up your website and putting that
onto a web server that's hooked up to the Internet,
this process is what we call web hosting.
So now let's go ahead and take our HTML Portfolio Project, which we created in the last lesson and
go ahead and host it on the Internet.
In order to do this, the first thing I want you to do is to head over to github.com.
And once you're there, I want you to go ahead and sign up to a new GitHub account if you don't already
have one,
otherwise just sign in to your GitHub account.
Now, once you've signed up or signed in, you should see the homepage that looks something like this,
and I want you to go to this plus arrow on the top right and create a new repository.
And once you've done that, you can go ahead and name your repository html-portfolio.
You can go ahead and add a description for what this website is all about, but that's completely optional.
Now I want you to make sure that you have this as public.
Now you'll only see the private option if you actually pay for a GitHub account, but we want to be
able to host our website for everyone to see,
so we want to make sure that public is the one we select.
Then go ahead and tick this box and add a README file.
This is very important,
otherwise, it might be quite difficult for us to upload our files, and then finally go ahead and click
"Create Repository".
Now we should see a page that looks like this.
This is going to be the place where we're going to upload all of our websites, files and folders,
and we're going to do that by clicking the dropdown, Add file, and then we're going to select, Upload
files because we've already got them on our computer.
So now go ahead and navigate to the folder where you created your HTML Portfolio Project and you'll
see all of the associated files and you should have an index.html with all of the code that you've written.
So when you open it, make sure that it actually does work and it does actually contain your active
website.
Because remember when you downloaded this portfolio, the index.html was blank and only after you completed
the exercise does it contain all of the code.
And it's really important that your home page code is inside index.html because this is what GitHub
is going to look to in order to render your home page.
It's a good idea to also just check the spelling and make sure it's a lowercase "i" and its index.html
and you haven't renamed it something like home,
or me, or anything else, that is not going to work.
This is very, very important for this step to work.
Once you've verified all of that and made sure that you've got all the things that you need, for example,
the images folder contains all the previews, and your public folder contains all of your other HTML pages
then you can go ahead and take all of these files and drag it into here.
Now, again of note, it's important that you don't drag this entire folder in,
that's not going to work,
you want to drag in the contents of that folder.
Now, once that's done, you can see it has uploaded all of those files and now you can click on commit
changes to add those files to GitHub.
Once your files have processed, which can take several minutes and you might need to refresh the page
a few times in order to get this page up and running,
then I want you to first make sure that all of your folders and files are definitely listed here.
If they're not, then you might have to go ahead and upload them again.
And once you've verified that, then I want you to go into settings, and inside settings
I want you to navigate to Pages and then inside Pages we're going to change this part under Branch.
So we're going to change from none, over to the main branch, which contains our root folder and all
of the files that we just uploaded.
So go ahead and hit Save for that to go through.
Once that's done, you should be able to refresh the page a couple of times and you should see this
little pop up which says that your site is live at this location.
Now, just another heads up,
this process can take anywhere between 1 to 10 minutes.
Sometimes I just sit here refreshing this page until I see this pop up.
But depending on how busy GitHub is, how many people are using it, this process can take a while,
so you can just have a cup of tea and come back.
Now this is an important point,
sometimes you might get this error message that says, "No server is currently available," or some other
sort of error message,
don't worry about this,
simply just go back and try again.
Once you've refreshed this particular page and you see this little box here, then that means we're
ready to go ahead and visit our website.
So let's click on Visit site, and you can check to see all the pages work and make sure that's exactly
how you had it locally.
And once you're done, then you can actually take this URL and share it with anybody across the world
and they will be able to see your portfolio and of course, be sure to share it in the Q&A so that the
rest of us can also admire your portfolio and see the great work that you've done.
I hope you've had fun in this section creating your portfolio, learning about multi-page websites,
and finally understanding web hosting and seeing how we can host our website online using GitHub, hosting
it on the live World Wide Web.
In the next section, we're going to be learning about CSS and how to style our website so that we lift
our website from this '90s style simple website to something that looks incredibly beautiful.
For all of that and more,
I'll see you on the next section.