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.
