Building Static Websites and Host Using Github

Written by Raviteja Lingineni

Websites are used for everything. We're going to explore building one of the fundamental types of websites - static websites.

In this workshop, our goal is to get you up and running with a website of your own. A personal website that let's us know about you.

Here are a couple reasons for having your own website

  • It's a great side-project! Your building something that everyone can see, from recruiters to friends and family. No installation needed. I assure you it's going to look a lot better than that soda machine project from from CS1336 on your resume.

  • Your personal brand. Who are you? What do you do? Facebook and Twitter are social networks, but this is your network. One that you built for yourself. Use it as a starting point for a blog, a freelancing company, it becomes what you make of it.

  • One stop shop for all your documents. Put your resume, links to your works and linkedin. Stop e-mailing your homework to yourself and just upload to your personal website.

Let's Build A Website!

  1. Install the Github Client

    You can get started by installing and starting up the Github Desktop Client

    If you don't have a github account, make one and set-up the client

    If this is your first time with git, follow our previous workshop tutorial on Git and Github.

  2. Let's create a repository for our website and files for it. The repo will contain the files containing things related to our website. In our case. Let's make this in Github and call it <yourgithubUserName>.github.io

  3. Clone the Repo in Desktop. Now you should have an empty folder that is the name of the file.

  4. Within the folder that you just got, let's create a new file called index.html. This file will hold contents that pertain to the landing page of the website.

  5. Within your index.html file, add the following content:

    <html>
    <header><title>This is title</title></header>
    <body>
        Hello world
    </body>
    </html>
    
  6. Go back to Git Client. It should show your changes. Now write a commit message and then commit to master. This saves your local changes. Now you will want to push that up to Github, so hit the sync button

  7. Head to Github, and make sure your changes show up. Go to Settings on the top and scroll down to Github Pages section. Set the source to the master branch and save

  8. Congratulations, you've just exposed your personal website! Head to <GithubUserName>.github.io in your browser, and you should see the Hello World Code.

  9. Adding new code is easy, just commit and push new changes. All you have to do is commit and sync

How does this work?

Here's how all of this is working? On the grand scheme of things, here's what Github did for you. It took your files, and exposed your html files.

The browser, by default, renders html files. In this case, the website that your visiting pops up that HTML page that webpage renders

Making Better Websites

There a couple of basic html tags you might want to know.

    <a href="google.com"> Use the 'a' tag for links </a> 
    <p> The 'p' tag can be used for paragraphs </p> 
    <h1> The 'h1' or header tags can be used all the way till h5 </h1> 

CSS or a Cascading Style Sheet is used to add colors and set elements with different colors. It can be used across multiple html files.

For example, you can change the color for all the paragraphs using this CSS

p {
color: green;
}

You can link your CSS file to your HTML like this:

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Since these websites require us to display information, they only update when new information is manually changed by the user. Therefore these are static websites!

It uses a special framework called Bootstrap. Bootstrap is set of specialized CSS files, and having those let's you format your HTML to work more responsively and cleanly.

For example, use this theme to make your personal website. It uses bootstrap.

Adding a Custom Domain

Ok, so now we have a website that is up and running. However, we want to use it with our website name.

You can read more on setting up a custom domain here

How it works is that the domain is parked to a website. It then points to a particular domain. We use the A record to point to a set of IP addresses that your website lives on.

Within your website Repo, you will need to add a CNAME record. That will allow your website to be found to Github. This will have to match with the CNAME record configured for your Domain provider.

Think of it is as the IP Addresses, or A records refer to all of the Github records, and the CNAME is used to pair with your files perfectly.


Don't forget to leave your feedback after the workshop.