Creating your personal website at GitHub Pages

In this video, I show you how I went out and found a theme to use for my static website at GitHub.

Keep in mind that you can find your theme anywhere, and that you could also just create your theme from scratch (or not use a theme at all).

In the end, the one thing you want to be careful about is that putting code on GitHub could be considered distribution since others can fork your public repositories, so you may want to check with your legal team before using a purchased theme in this manner.

In the end, you should find a theme that suits your needs and adapt it to your site.  A simple Google search for "Free Bootstrap Themes" will lead you to a number of sites that could potentially hold a theme you would like to use.

In this video, I show how I created a repository at GitHub and then added the starter files to the repository at GitHub.  The repository is the place where all of your files will be stored.  The repository at GitHub is called the "Remote" repository, while you will also have a copy of the repository locally called the "Local" repository.

All of your changes will happen in the local repository on your machine, and then you will push the changes to the remote repository at GitHub, where the website will be built and hosted.

The video concludes with me getting the repository pulled down to my local machine so that I can work with it to build my site locally and then push to GitHub.

In this video, I walk through pushing the site to GitHub.  This is done by moving the site files into the root folder for the local repository, then running a couple of quick git commands to add and commit the files.

git add

then

git commit -m "your message goes here"

After committing locally, I do a simple push to put the site out to the remote repository. 

git push

This is the flow you will do over and over again to ensure that you are making the changes locally and then getting the changes into the remote repository.

In this video, you get to see me go into the repository and find the settings tab.  Once on the settings tab, I'm able to scroll down about half-way in the settings to locate the GitHub pages section.

I then set the site to be a github pages site.

You will also need to set your repository to be a GitHub pages site in order to see the site hosted via the internet.

In this video, I find the settings and put in the name of the domain I purchased.  Once I have that done, I go to my DNS provider (in this case, GoDaddy) and then find the DNS settings for my new domain.  On the new domain, I create a C record to point to my github pages site (the name of my account followed by github.io. <your-github-username>.github.io.

After setting up the custom domain, I can eventually see the changes applied by browsing to the url of my new custom domain. 

In this video, I validate that the changes to the DNS have taken place and the site is now visible by browsing to the URL that contains my new custom domain name.   

In this video, I am able to check the box to set the site to be secure using HTTPs.  The great thing here is that I didn't have to purchase an extra SSL in order to make this site secure, and I will not have to renew and rotate certificates each year to keep the SSL valid.

In today's world, you don't really want to have a site without HTTPs, even if you aren't taking payments.  If you were doing this on your own, you might have to pay an extra $100 to get the SSL Certificate, and then you would have to manage all of that yourself, renewing every year and then also dealing with the manual update to the certificate on your hosting provider or server.

With GitHub pages, you can simply push a button and all of this is taken care of for you.  Even better: it's completely free!

If you are building a personal website, you may also be producing content at YouTube or Vimeo (or another solution). In this video, I'll cover how to use the share button at YouTube to get the embedded HTML you need to add to your page to share your YouTube Videos.  You should be able to find similar code at Vimeo or other providers if YouTube is not where you are hosting videos.

In this example, I decided to just do another simple customization to allow users to schedule an appointment with me via my Calendly link.  Of course this is a fake link so don't try to make an appointment with me as you won't get any response, but if you are setting up some sort of brand page or marketing page, you may wish to add something similar to a link for Calendly.  If you don't have this service, and/or you don't need this video, feel free to mark it complete.

One last thing I wanted to show is an ability to start leveraging other data.  For example, with this static site you have no ability to use a database directly.  Perhaps, however, you would need some sort of extra data.  For an advanced developer, you might consider making calls to an API or something like an Azure Function to get more dynamic data.

An additional consideration is that all of the javascript frameworks, Angular, Vue, and React end up with a static app page and then all of the javascript does the work.  You could leverage this approach in your solution.  Do keep in mind, however, if you do this, you will have to solve the issue with publicly exposing your links to the API and any token that you appended via the javascript, since you wouldn't have an easy way to obscure it.  Therefore, you will likely want something like an IP restriction on where the request source can come from to ensure that others aren't taking your links and/or misusing the exposed data.

In this final official video for the course, I tell a quick story about what made me decide to put this course together and share this knowledge, and then I show quite a few sites that are currently hosted at GitHub pages.  Some of the sites that are out there might even surprise you!

Thank you for trusting me as part of your journey.  I hope you've found this content useful.  Let me know if there is more I can do to help you out and please make sure to connect with me at twitter and linked in.  I would love to see the final sites you end up putting out there!