Quick Reference & Helpful Resources
This reference guide contains all the essential information you need in one place: definitions, keyboard shortcuts, common code examples, and frequently asked questions.
A folder/storage space on GitHub that contains all the files for your project. Your website files live in your repository.
Saving changes to your files in GitHub. Each commit creates a snapshot that you can return to later. Think of it like clicking "Save Version" in a document.
GitHub's free web hosting service that turns your repository files into a live website accessible on the internet.
The code language that defines the structure and content of web pages. HTML tells the browser what to display (headings, paragraphs, images, links, etc.).
The code language that controls the visual design and appearance of web pages. CSS defines colors, fonts, spacing, layouts, and all styling.
A programming language that adds interactivity and dynamic features to websites (animations, form validation, interactive elements).
A version of your repository. "Main" (or "master") is the primary branch that contains your published website code.
The part of a website that users see and interact with (the visual interface, buttons, text, images). Made with HTML, CSS, and JavaScript.
The behind-the-scenes server logic that powers a website (databases, user authentication, etc.). Not needed for basic GitHub Pages sites.
The web address of your website or page. Example: https://username.github.io/repository-name/
Temporary storage where browsers save copies of websites to load them faster. Sometimes you need to clear cache to see the latest changes.
The process of making your code changes live on the internet. GitHub Pages automatically deploys your site when you commit changes.
Techniques to help search engines (like Google) find and rank your website. Good descriptions, titles, and content help with SEO.
A simple text formatting language used for documentation. README.md files use Markdown to display formatted text on GitHub.
Downloading a complete copy of a repository to your local computer. Not required for basic GitHub Pages editing (you can edit directly on GitHub).
| Action | Windows/Linux | Mac |
|---|---|---|
| Hard Refresh (clear cache) | Ctrl + Shift + R |
Cmd + Shift + R |
| Regular Refresh | F5 or Ctrl + R |
Cmd + R |
| Open Incognito/Private Window | Ctrl + Shift + N |
Cmd + Shift + N |
| New Tab | Ctrl + T |
Cmd + T |
| Close Tab | Ctrl + W |
Cmd + W |
| Find on Page | Ctrl + F |
Cmd + F |
| Action | Windows/Linux | Mac |
|---|---|---|
| Select All | Ctrl + A |
Cmd + A |
| Copy | Ctrl + C |
Cmd + C |
| Paste | Ctrl + V |
Cmd + V |
| Cut | Ctrl + X |
Cmd + X |
| Undo | Ctrl + Z |
Cmd + Z |
| Redo | Ctrl + Y |
Cmd + Shift + Z |
| Save | Ctrl + S |
Cmd + S |
<!-- Internal page link -->
<a href="#about">About Me</a>
<!-- Link to another page -->
<a href="projects.html">My Projects</a>
<!-- External link (opens in new tab) -->
<a href="https://linkedin.com/in/yourname" target="_blank">LinkedIn</a><img src="images/photo.jpg" alt="Description of image">
<!-- Image with link -->
<a href="project-details.html">
<img src="images/project1.png" alt="Project screenshot">
</a><h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<p>This is a paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<br> <!-- Line break --><!-- Unordered list (bullets) -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered list (numbers) -->
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol><!-- Button-styled link -->
<a href="#contact" class="btn">Contact Me</a>
<!-- Download button -->
<a href="files/resume.pdf" download class="btn">Download Resume</a>/* Background colors */
body {
background-color: #ffffff;
}
h1, h2, h3 {
font-family: Georgia, "Le Monde Livre", serif;
}
.header {
background-color: #3498db;
}
/* Text colors */
h1 {
color: #2c3e50;
}
p {
color: #34495e;
}
/* Link colors */
a {
color: #3498db;
}
a:hover {
color: #2980b9; /* Color when hovering over link */
}/* Font family */
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
font-family: Georgia, "Le Monde Livre", serif;
}
/* Font size */
h1 {
font-size: 2.5em;
}
p {
font-size: 16px;
}
/* Font weight */
strong {
font-weight: 600; /* or 700 for bolder */
}/* Margin (space outside element) */
p {
margin-bottom: 20px;
}
/* Padding (space inside element) */
.box {
padding: 20px;
}
/* Specific sides */
div {
margin-top: 10px;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}Before sharing your website, check these items:
A: Typically 1-3 minutes, sometimes up to 5-10 minutes during high traffic times. Always wait at least 2-3 minutes before worrying that something is broken.
A: Yes! GitHub Pages supports custom domains. You'll need to purchase a domain from a registrar (like Namecheap, Google Domains) and configure it in your repository Settings → Pages. There are many tutorials available for this.
A: Yes, it's completely free! GitHub Pages is a free service. The only cost would be if you choose to buy a custom domain name (optional).
A: Not with basic GitHub Pages. GitHub Pages sites are always public. If you need password protection, you'd need to use a different hosting service or add authentication through external services.
A: Sign up for Google Analytics, get your tracking code, and paste it in the <head> section of your HTML files. Many tutorials are available online for detailed steps.
A: GitHub Pages doesn't support backend processing, so simple HTML forms won't work. You can use third-party services like Formspree, Google Forms (embedded), or Netlify Forms.
A: You can delete your repository and create a new one. Go to Settings → General → Danger Zone → Delete this repository. But remember, you'll lose all your work!
A: Yes! You can have one site per repository. Create different repositories for different websites. Each will have its own URL: username.github.io/repo-name/
A: Basic editing doesn't require deep coding knowledge—just follow the patterns you see in your template. For more advanced customization, learning HTML/CSS basics (free courses available online) is helpful.
A: Write good descriptions and titles, use relevant keywords, add a meta description tag, create quality content, and be patient—it takes time for Google to index new sites. You can also submit your site to Google Search Console.
index.html and other HTML files?A: index.html is special—it's the default homepage that loads when someone visits your root URL. Other HTML files need to be accessed directly (like yoursite.com/about.html).
A: Yes! You can edit files directly on GitHub.com from a mobile browser. It's not the most comfortable experience, but it works for quick edits.
You've completed the entire GitHub Pages tutorial and have all the knowledge you need to build, maintain, and grow your website.
Now go create something amazing!
← Back to Tutorial HomeTutorial created with ❤️ for aspiring web developers
Last updated: November 2025
This tutorial was created for students in the Master of Arts in Educational Innovation, Technology, and Entrepreneurship (MEITE) program at UNC Chapel Hill School of Education.