We’re going to need a bunch of different tools to create a website but two important
tools are a website domain name and a place to host our website online.
We will use the GitHub Student Developer Pack to get a free domain name and GitHub Pages
to host our static website for free.
First, open up a browser.
Type GitHub in the address bar or type in Github.com.You need to create a username.
This can be anything you want but will be displayed publicly so I recommend your first
and last name or another deliberate choice.
Then type in your student email, and create a strong password.
Remember password length is important and don’t reuse passwords.
Then click signup.
Verify your account if an image game appears.
Decide if you want to have email sent to you and then click join a free plan.
Then click that you are a student.
Click what kind of programming experience that you have and we will complete our setup.
Go to your email to click on the verification email link.
Click on verify email address.
Click on skip this for now.
Close the guide, since you can come back to it later.
Now we want to get the Student Developer Pack.
This will give us access to tools to learn web development so click “Get the Pack.”
With the pack you will be able to get a .me custom domain from Namecheap as well as numerous
beneficial services and tools.
This is a great resource.
I recommend that you get the Namecheap domain first thing.
Click “Get the Pack” Then click “Get Student Benefits”.
Verify your academic status.
Click the radio button by your email.
The name of your school should be filled in if you are using your school issued .edu address.
If it is not filled in, type in your school name.
Type in how you plan to use Github, well, learning to code of course.
Then click on submit your information.
It will send you an email confirmation and the process can take up to 22 days if it cannot
automatically verify your student email address.
You may need to upload a picture of your student ID or other proof of enrollment.
Go to your email to see if the welcome email arrived.
Inside the “welcome to the student developer pack” email click on Explore Offers.
You can request an offer code for use of an SSL certificate.
This is used for third party SSL certificates at Namecheap.
SSL allows for the https in your web browser.
We will be using GitHub Pages and it will take care of the https so we do not need this
SSL certificate for our project.
But this offer is good for 1 year if you purchase another domain and use other hosting.
Click on the top link, that says get access by connecting your GitHub account on Namecheap.
GitHub will ask you to authorize Namecheap to access your GitHub account.
Click on Authorize Namecheap.
In the find your free domain box, type in your desired .me domain.
This can be anything that is still available.
You can use your Firstname Lastname or you can use some other representation of yourself.
Remember that you will be using this domain for an online portfolio so choose wisely.
If your domain is available, click add.
Click on the add to Github Pages and type in your student email.
Click Finish Up.
If you have a Namecheap account, login, if not then you will need to create an account.
So create an account and remember to save your password in the password management system
of your choice.
On the next page, uncheck the box since you are not registering for a company.
Then you have to type in a mailing address for yourself.
This will be hidden behind Whois Guard at Namecheap.
All domains have to have a mailing address.
But because of Whois Guard, if someone looks out the WHOIS information about your domain
it will just list NameCheap’s address but NameCheap needs your address and phone number
to register your domain.
Click Continue.
After logging in, confirm your order.
Then click on “Setup your GitHub account” There may be some delay before everything
is functional but now you have a free domain connected to your GitHub account for use with
GitHub Pages.
Once you have your domain registered, login to the Dashboard of your name cheap account.
You will see your domain listed.
If not you can click on the Domain List.
Then click on the Manage button.
Here you can see that the “WhoIsGuard” that I mentioned earlier is activated.
This will keep your address private.
Go back to GitHub and click on your account, then click on your profile.
You will see that your have created two commits to one repository.
Don’t worry about what a commit is or what a repository is right now.
Just know that this is a place that we can host files for our projects, collaborate and
keep track of the changes.
Because I used the GitHub Education Pack to register a free domain name, we already have
this repository setup with our username and domain.
Namecheap already put in the required CNAME file and hooked up this page to our domain.
If we type our domain in to the browser it will show the contents of the Readme.md file
already in our repository.
That is because it is the only file in the repository.
If we create a new file called index.html and add the text, “Hello World”
Before we save and commit this file we want to type in a description of what changes we
made.
In this case it is the first time we did anything so I will type, First Git commit.
Then you will see the file listed in your repository.
If you go back to the domain tab in the browser and refresh the page, you will likely still
see the contents of the readme.md file.
It takes a bit of time to update to the new index.html page.
You can check when this process is complete by going to the settings of your repository.
It will either say that your GitHub pages site is being built, as it does here, or it
will have a green box and say that it is complete.
Refresh the page a few times until you see the contents of the index.html page.
The browser will now show the contents of the index.html file and not the readme.md
file.
That is because all web browsers default to the index.html file in a folder unless they
are told not to.
Note that this file show the text in the browser even though we have not typed any HTML code
yet.
The browser will always do its best to show the content even if there is a mistake in
the HTML code or no code at all.
To prove to yourself that this is really on the internet, type your domain name into a
different device such as your cell phone and you will see the Hello World message there
too.
Congratulations, you have now setup a GitHub account, registered a domain name, made a
GitHub repository, made a code commit and published a website.
Now that you have a working Hello World page at your registered domain we have a few more
steps to make sure that our website is secure.
We need to make sure that it uses the https rather than the current http protocol when
people visit your site.
We will cover how to setup HTTPS with your GitHub Pages account and Namecheap domain
in the next video.