--
You can use GitHub pages to create and host a personal website, which can be accessible to the public. GitHub pages is a free resource that you can use to showcase your talents and feature your work.
“GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.”
~Github Hello World
Follow the steps below to create your project. Don’t worry if you don’t know some of the terms. Keep reading for terms definitions below.
- Go to https://github.com and click the ‘Sign up’ button. Follow the prompts and enter in your information.
2. Create your project’s repository. Login to your GitHub account and go to https://github.com/new or click the green ‘New’ button next to Repositories.
3. Enter your username in the Repository field. You will see a green message saying you found a secret.
Leave the default setting to public and check the ‘Add a README file’ box.
4. Create a new file by clicking the ‘creating a new file’ link under the Set up in Desktop button.
5. Enter index.html in the field next to your username.
6. Enter the following into the ‘Edit new file’ window, updating the text in capital letters with YOUR NAME and YOUREMAIL:
<!DOCTYPE html>
<html>
<head>
<title>YOUR NAME Portfolio</title>
</head>
<body>
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/about”>About</a></li>
<li><a href=”/resume”>Resume</a></li>
<li><a href=”/blog”>Blog</a></li>
</ul>
</nav>
<div class=”container”>
<div class=”blurb”>
<h1>Hi, I am YOUR NAME!</h1>
<p>This is my first page for my personal website!</a></p>
</div>
</div>
<footer>
<ul>
<li><a href=”mailto:YOUREMAIL”>YOUREMAIL</a></li>
</ul>
</footer>
</body>
</html>
7. Scroll to the bottom of the window and add a message to field under ‘Commit new file’. Then click the green ‘Commit new file’ button.
You will then be redirected to your project repository, where you will see the README.md file and the index.html file.
Congratulations! You have created your personal webpage. Once you are redirected page to the repository, select the ‘Settings’ link.
8. Then select ‘Pages’ on the left sidebar menu.
9. Under Source, select the dropdown and select the main branch and leave the default as root and click the ‘Save’ button. You will then see a confirmation message with the link to your new website. For ex: https://jbaum02s.github.io/jbaum02s/. Visit the link to see your new page.
You will see the content from the code, without any styles applied.
10. To style the content click the ‘Add file’ > ‘Create a new file’ button. Create a new file named css/styles.css. The css/ before the filename will automatically create a subdirectory called css as you type.
11. Paste the following into the ‘Edit new file’ window:
body {
margin: 60px auto;
width: 70%;
}
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;
}
You will then be redirected to the css directory with your new file. You can click on your username to get back to the main folder.
Now we need to link your new css file in the index.html file in order for your styles to display. Link to your CSS file inside your HTML document’s <head>.
12. Click on your index.html and select the “Edit” button which is a pencil in the right side on the file window.
13. Enter the following in between your<head> and </head> tags, after the title, in your index.html file
<link rel="stylesheet" href="css/styles.css">Add a message and commit your changes.
Go back to your webpage and refresh your browser. You should now see your page with the menu displayed horizontally, the fonts different sizes, etc.
Additional files can be added directly through the browser, like in the previous steps, or they can be uploaded to the repository. Select ‘Add file’ > ‘Upload files’ to do so.
Repository — contains all of your project’s files and each file’s revision history.
Commit — creating a commit is like taking a snapshot of your repository. These commits are snapshots of your entire repository at specific times.
Branch — When you create a repository with content on GitHub.com, GitHub creates the repository with a single branch. This first branch in the repository is the default branch. The default branch is the branch that GitHub displays when anyone visits your repository. The default branch is also the initial branch that Git checks out locally when someone clones the repository. Unless you specify a different branch, the default branch in a repository is the base branch for new pull requests and code commits.
GitHub Page — is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. By default, GitHub names the default branch main in any new repository.
