Now that we've completed the HTML section and we have our completed website, but we can only access
it locally because when we open up our index.html, you can see that we're just opening a local file,
right?
In this case, this file is inside my users folder, inside my username, inside my desktop.
But that means nobody else can actually access this website, which makes it a bit pointless, right?
The whole point of a website is so that we can put it onto the internet, and everybody will be able
to see our personal site or our CV.
So how can we do this?
Well, in order to do that, we need to host our website somewhere.
Now, there's a whole bunch of hosting sites such as GoDaddy or Bluehost, but because we're learning
at the moment, we don't want to have to pay for this.
So there's also a free solution that
I'm going to show you. By the end of this lesson, you're going to have your personal CV up on the internet
proudly displayed somewhere and you'll be able to share a URL or a link to it so that anybody across the
web can be able to access it.
But first thing's first, we'll need to do a little bit of set-up. The service that we're going to use
is GitHub, and we're going to talk about GitHub in a lot of detail a little bit later on.
It's a really, really useful tool that is pretty much essential to a developer's workflow.
But for now, we're only going to use one of its features, which is hosting our website.
So first and foremost, if you don't have a GitHub account, then you'll need to set up a new one.
So I'm just going to set one up while we're at it.
And now it'll ask you to choose a plan.
Now we're going to choose the free plan and then we then click Continue.
Now I'm going to skip this questionnaire and just click on Skip the Step.
Now, once you have signed up to GitHub, it's really important that you go ahead and verify your email
address. So check your emails and see if you have something from GitHub and then click on that verify
link.
And once you've done that, you'll be able to add new repositories to GitHub. If you head over to the
upper right corner and just click on the Plus button,
and then we're going to create a new repository. This repository
I'm just going to call it CV
and this is going to be the name of my project and all that a repository
is is simply just a folder out there on the cloud that's going to store all of your project related
files.
And you'll be able to make changes to the files and update the files, and you'll be able to track all
of those changes that you've made in the past.
Now that we've given our repository a name,
then we're going to leave the description as empty and then we're going to keep public selected and
then down here
make sure that you check this box where we initialize this repository with a README.
And it's really, really important that you do this for the next few steps to work.
So now that we've done all of that, we're going to go ahead and click on Create Repository.
And this will take just a moment, and now you should see a page that looks like this, which means
that your repository has been created and the only file that's in your repository is just a README
file.
What we're going to do is we're going to go ahead and upload our files for our CV website.
So now if you bring up the folder which contains your CV website, so the place where you see your
index.html, your images folder and any other pages you have, you're going to select
all of these and you're going to drag it into this box here and that will upload and add all of them
to our online repository.
Once that's done, we're going to give this particular version a name.
So we'll say that in this version, we added our initial CV website files and then go ahead and click
to commit these changes. And that will upload all of those files that we dragged on, and we are now
ready to set up our GitHub page.
If you head over to the Settings tab here, you'll see that there is a section called Pages.
GitHub Pages is designed to host your personal organization or project pages from a GitHub repository.
So we already have the repository,
we now have to activate pages.
So it's currently disabled.
All we have to do to enable it
we just have to select a source where our files reside.
So if you click on this part where it says none, then select main as your branch.
And go ahead and click Save.
So now GitHub is going to do some behind the scenes stuff, and it's going to be publishing towards
a place which is going to be your username.github.io/your project name
so that will be your CV. And you can see this is a HTTPS website, so you'll be able to access the
site from anywhere across the world as long as you're connected to the internet.
Now, this publishing process takes a little while.
You'll see that it says your site is published at this address, and if you click on that address,
you should be able to see your website show up.
Now, if at this point what you see instead is a 404 then that just means that you have to be
a little bit more patient.
The GitHub servers are probably working overtime and come back in maybe half an hour and check that
link again.
But once you are done though, then your website should work exactly as it did locally,
but now you can go ahead and share this link with anybody you like across the world, and they can access
it because it's now hosted on the internet. So you can go ahead and go over to angelabauer.github
.io/cv and you too will be able to see this website that I just uploaded and I'm looking
at right now.
Now, if after half an hour and you click on this link and it still doesn't show your website or there
are some inconsistencies on it, then you might have to troubleshoot your setup because you might have
made a mistake somewhere.
Now, the first thing I want you to check is to go to the Code tab here and make sure that your file,
which is your home page, says,
is actually called index.html, and it should have a lowercase i
and it should be spelled exactly like this.
This is very important because GitHub is going to look for a file with this name in order to serve as
your home page.
So if you don't have that, then go into that file and click on this button and you can edit the name.
Now, make sure at the very end you create a message for this change and then click on commit changes.
Now, while we're here if you see this DOCTYPE html showing up at the top of your website, you
can also edit it here and simply delete that.
This is something that is useful for our editor, but not necessarily important if we want to publish
the website.
Now, another issue that people have is their images don't show up.
Now this could be because when you created the home page,
so if we look in index.html, the reference for your image, the source, you set it to something
local on your computer like C:drive/images, etc. But in this case, we actually have to make
this relative to the position of this file.
So you can see I'm referring to a folder called images that's on the same hierarchical level as this
current file.
And then inside that folder, I'm looking for an image
called angela.png. Make sure that there are no typos and make sure that you've got all your capitalizations,
,lowercase, uppercase?
exactly the same.
It matters a huge deal to the computer, even though, as humans, we might ignore that.
Now, the next thing I've seen students have an issue with is their links don't work.
So when they click on my hobbies or when they click on Contact Me, it doesn't link to the correct page.
Now again, this would be an issue with our hyperlinks. So you can see this
My hobbies links to a href that says hobbies.html, and this is the file that I want it to pull
up.
Now, if we go back to our file structure, you can see at the same level as index.html inside the same
directory,
there is a page called hobbies.html,
there is a page called contact-me.html, and these are spelled exactly the same as what we've
got here.
Now I'm stressing this because I've seen so many students fall down here just because maybe they capitalize
an h, or maybe they spell this file incorrectly
or maybe they spelled this file incorrectly, or maybe they created another folder in here and stored
these two files inside. The code has to be able to find out where these files are in order for it to
work.
Now, the best way to assure that your code actually works is to make sure that you've got the same
code as me
and you can check this if you go to this link.
And if you have the same code in your index.html and you have the same structure here with all the
same names, then it should definitely work.
Now, if you have any of these problems troubleshooting again, take a look in the Q&A section for this
current lesson
and in there you should see a featured question where I have added some of my troubleshooting tips for
uploading your website to GitHub.
So now it's time for you to go through this process and upload your CV and your website onto the World
Wide Web and be sure to share a link to your project in the Q&A of this lesson so that we can all admire
your hard work and what you have created.
So that's all for me for this lesson.
I'll see you on the next.