Junior High‎ > ‎Computer Science‎ > ‎

Creating a Website with GitHub

The following instructions are adapted from Jonathan McGlone's guide to work with GitHub's current configuration and the particular needs of ASCS Computer Science students. 

 

1. Go to github.com and create an account.

2. Click Start a Project and create a new repository. Name it what you want your site to be called. Make sure it is public and check the box that says “Initialize this repository with a README”

3. Create a new file in your repository. Name it index.html


4. Add the following text to your file:

<!DOCTYPE html>

<html>

<head>

<title>Test Website</title>

</head>

<body>

<nav>

    <ul>

        <li><a href="/">Home</a></li>

        <li><a href="/about">About</a></li>

        <li><a href="/cv">Favorites</a></li>

    </ul>

</nav>

<div class="container">

    <div class="blurb">

        <h1>Hello World!</h1>

<p>Welcome to my website! <a href="/about">Read more about me...</a></p>

    </div><!-- /.blurb -->

</div><!-- /.container -->

<footer>

    <ul>

        <li>Site created by me!</li>

        <li>Go Eagles!</li>

</ul>

</footer>

</body>

</html>

5. Commit the changes to index.html by clicking the button at the bottom of the page. You can add a brief comment describing what you changed about the file.



6. Go to the Settings tab of your repository.




 

7. Scroll down to the section called “GitHub Pages.”  Change the source to master branch and click Save.


 

8. After you click save, a message will show at the top of the Pages section that says “Your site is ready to be published at…” You can click this link to see your website!


 

9. Go back to the Code tab and create a new file in your repository. Name this file css/main.css


When you name the file css/main.css, GitHub automatically creates a subdirectory called css.

 

10. Add the following code to your file. Be sure to commit the changes when you are done.

body {

    margin: 50px auto;

    width: 75%;

}

nav ul, footer ul {

    font-family:'Helvetica', 'Arial', 'Sans-Serif';

    padding: 0px;

    list-style: none;

    font-weight: bold;

}

nav ul li, footer ul li {

    display: inline;

    margin-right: 20px;

}

a {

    text-decoration: none;

    color: #999;

}

a:hover {

    text-decoration: underline;

}

h1 {

    font-size: 3em;

    font-family:'Helvetica', 'Arial', 'Sans-Serif';

}

p {

    font-size: 1.5em;

    line-height: 1.4em;

    color: #333;

}

footer {

    border-top: 1px solid #d5d5d5;

    font-size: .8em;

}


ul.posts { 

    margin: 20px auto 40px; 

    font-size: 1.5em;

}


ul.posts li {

    list-style: none;

}


11. Go back to index.html and click the pencil icon to edit it.



12. Paste the following text within the <head> of index.html to link your CSS document.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/USERNAME/REPOSITORY/master/css/main.css">

NOTE: change USERNAME to your username (no caps) and REPOSITORY to your repository name (no caps)





13.  The basics of your site are now in place! You can edit the HTML and CSS files you have or add more pages to your site by adding more files. 

Comments