Skip to content

Instantly share code, notes, and snippets.

@bkrabach

bkrabach/index.html

Last active May 9, 2025 16:31
Show Gist options
  • Save bkrabach/a905a4faedcb1f5100cbe8850702921b to your computer and use it in GitHub Desktop.
Save bkrabach/a905a4faedcb1f5100cbe8850702921b to your computer and use it in GitHub Desktop.
Download ZIP
Simple Static Site Hosting Guide
Raw
index.html
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Static Site Hosting Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="logo">
<span class="icon"><i class="fas fa-code"></i></span>
<h1>Static Site Hosting</h1>
</div>
<nav>
<ul>
<li><a href="#introduction" class="active">Introduction</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#choosing">Choose</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<main>
<section id="introduction">
<h2>Introduction</h2>
<div class="content-block">
<p>Maybe you've been <strong>vibe coding</strong>—rapidly iterating a static HTML/CSS/JS prototype with your AI assistant—and now you need a <strong>no-friction</strong>, <strong>novice-friendly</strong> way to share it. Building a mini-site should be as fun as coding it. If you've got a handful of HTML, CSS, and JavaScript files, but no server or build pipeline, these methods let you go from zero to live in minutes—no DevOps background required.</p>
</div>
</section>
<section id="options">
<h2>Options Overview</h2>
<div class="content-block">
<div class="comparison-table">
<table>
<thead>
<tr>
<th>Feature</th>
<th>GitHub Gist + raw.githack.com</th>
<th>Netlify Free Tier</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Setup Complexity</strong></td>
<td>Minimal—just create a Gist</td>
<td>Ultra-simple with drag-and-drop, or moderate with GitHub</td>
</tr>
<tr>
<td><strong>Automatic Updates</strong></td>
<td>Instant—edit the Gist and refresh</td>
<td>Instant—push to GitHub triggers rebuild</td>
</tr>
<tr>
<td><strong>Custom Domain</strong></td>
<td>Not supported natively, can use url shorteners</td>
<td>Supported on free tier</td>
</tr>
<tr>
<td><strong>Serverless Functions</strong></td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td><strong>Analytics & Rollbacks</strong></td>
<td>No</td>
<td>Basic analytics, instant rollback</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="choosing">
<h2>Choosing Your Path</h2>
<div class="content-block">
<div class="path-selector">
<div class="path" id="path-simple">
<h3><i class="fab fa-github"></i> GitHub Gist + raw.githack.com</h3>
<div class="path-content">
<p>Go with <strong>GitHub Gist + raw.githack.com</strong>—it's literally "create a gist, paste URL, done."</p>
</div>
<div class="walkthrough">
<ol class="steps">
<li>
<h4>Sign in to GitHub</h4>
<p>Navigate to <a href="https://gist.github.com" target="_blank">gist.github.com</a>.</p>
</li>
<li>
<h4>Create a New Gist</h4>
<p>Click <strong>"+" → New gist</strong>, give it a <strong>description</strong>, and name your files (e.g., <code>index.html</code>, <code>styles.css</code>, <code>script.js</code>). Paste in your code or drag-and-drop files.</p>
</li>
<li>
<h4>Set Visibility & Create</h4>
<p>Choose <strong>Public</strong> (or Secret) and click <strong>Create gist</strong>.</p>
</li>
<li>
<h4>Get the Raw URL</h4>
<p>Find your <code>index.html</code> file in the Gist and click the <strong>"Raw"</strong> button. This opens the raw file in your browser.</p>
</li>
<li>
<h4>Use with Githack</h4>
<p>In the address bar of your browser, replace "github" with "githack" in the URL and hit enter:</p>
<div class="code-block">
<pre><code>https://gist.githubusercontent.com/... → https://gist.githack.com/...</code></pre>
</div>
</li>
<li>
<h4>Bonus: Shorten URL</h4>
<p>Paste that long URL into <a href="https://bitly.com" target="_blank">Bitly</a> or <a href="https://tinyurl.com" target="_blank">TinyURL</a> for a snappy share link.</p>
</li>
<li>
<h4>Update Your Site Later</h4>
<p>To update your site, simply edit your Gist files directly in the GitHub interface. Your changes will be immediately reflected when visitors refresh their browser.</p>
</li>
<li>
<h4>Example</h4>
<p><a href="https://tinyurl.com/simple-site-hosting">https://tinyurl.com/simple-site-hosting</a></p>
</li>
</ol>
</div>
</div>
<div class="path" id="path-netlify">
<h3><i class="fas fa-cloud-upload-alt"></i> Netlify Free Tier</h3>
<div class="path-content">
<p>Netlify offers two super simple ways to deploy your static site:</p>
<div class="tab-container">
<div class="tab-header">
<button class="tab-btn active" data-tab="netlify-drop">Netlify Drop (Simplest)</button>
<button class="tab-btn" data-tab="netlify-github">Via GitHub</button>
</div>
<div class="tab-content active" id="netlify-drop">
<ol class="steps">
<li>
<h4>Go to Netlify Drop</h4>
<p>Visit <a href="https://app.netlify.com/drop" target="_blank">app.netlify.com/drop</a> in your browser.</p>
</li>
<li>
<h4>Drag and Drop Your Files</h4>
<p>Simply drag your entire site folder (containing HTML, CSS, and JS files) onto the Netlify Drop zone.</p>
</li>
<li>
<h4>Create an Account</h4>
<p>Once your site is deployed, create a free Netlify account to claim your site.</p>
</li>
<li>
<h4>Access Your Site</h4>
<p>Your site is now live at a randomly generated <code>*.netlify.app</code> URL. You can rename it in the site settings.</p>
</li>
<li>
<h4>Update Your Site Later</h4>
<p>To update your site in the future, go to your site dashboard, click <strong>Deploys</strong>, and simply drag and drop your updated files.</p>
</li>
<li>
<h4>Example</h4>
<p><a href="https://simple-site-hosting.netlify.app/">https://simple-site-hosting.netlify.app/</a></p>
</li>
</ol>
</div>
<div class="tab-content" id="netlify-github">
<ol class="steps">
<li>
<h4>Create a GitHub Repository</h4>
<p>Go to <a href="https://github.com/new" target="_blank">github.com/new</a>, enter a repository name, and click <strong>Create repository</strong>.</p>
</li>
<li>
<h4>Upload Your Files</h4>
<p>In your new repository, click <strong>Add file</strong> → <strong>Upload files</strong> or <strong>Create new file</strong> to add your HTML, CSS, and JavaScript files from your vibe coding session.</p>
</li>
<li>
<h4>Commit Your Files</h4>
<p>Add a commit message (e.g., "Initial vibe code upload") and click <strong>Commit changes</strong>.</p>
</li>
<li>
<h4>Create a Netlify Account</h4>
<p>Go to <a href="https://app.netlify.com/signup" target="_blank">app.netlify.com/signup</a> and sign up for a free account.</p>
</li>
<li>
<h4>Create a New Site</h4>
<p>Click <strong>Add new site</strong> → <strong>Import an existing project</strong> → <strong>GitHub</strong>, and authorize Netlify to access your repositories.</p>
</li>
<li>
<h4>Configure Deploy</h4>
<p><strong>Select your repository</strong>, leave <strong>Build command</strong> empty (for pure static) and <strong>Publish directory</strong> as <code>/</code>, then click <strong>Deploy site</strong>.</p>
</li>
<li>
<h4>Update Your Site Later</h4>
<p>To update your site, edit files in your GitHub repository either through the GitHub web interface or by pushing new changes. Netlify will automatically redeploy your site with the updates.</p>
</li>
<li>
<h4>Example</h4>
<p><a href="https://simple-site-hosting.netlify.app/">https://simple-site-hosting.netlify.app/</a></p>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Created with <i class="fas fa-heart"></i> via Vibe Coding</p>
<p class="small">© 2025 - A simple demo of static site hosting options</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener('DOMContentLoaded', function() {
// Navigation handling
const navLinks = document.querySelectorAll('nav a');
// Navigation click handler - only handles active state now
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
// Normal scrolling behavior (using HTML anchor) is preserved
// Update active nav link
navLinks.forEach(navLink => navLink.classList.remove('active'));
this.classList.add('active');
});
});
// Copy button functionality
const copyButtons = document.querySelectorAll('.copy-btn');
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const codeText = this.getAttribute('data-code');
navigator.clipboard.writeText(codeText).then(() => {
// Visual feedback
const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-check"></i>';
this.classList.add('copied');
// Reset after 2 seconds
setTimeout(() => {
this.innerHTML = originalText;
this.classList.remove('copied');
}, 2000);
});
});
});
// Tab switching functionality for Netlify options
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.getAttribute('data-tab');
// Update active tab button
tabButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
// Show target tab content
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === targetTab) {
content.classList.add('active');
}
});
});
});
// Update active nav link based on scroll position
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY + 100; // Offset for header
// Find the current section
const sections = document.querySelectorAll('section');
let currentSection = sections[0];
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionBottom = sectionTop + section.offsetHeight;
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
currentSection = section;
}
});
// Update active nav link
navLinks.forEach(navLink => {
navLink.classList.remove('active');
if (navLink.getAttribute('href') === `#${currentSection.id}`) {
navLink.classList.add('active');
}
});
});
// Simple hover effects for paths
const paths = document.querySelectorAll('.path');
paths.forEach(path => {
path.addEventListener('mouseenter', function() {
this.style.borderColor = '#0071e3'; // Primary color
});
path.addEventListener('mouseleave', function() {
this.style.borderColor = '#333333'; // Border color
});
});
});
Raw
styles.css
.tab-container {
margin-top: 1.5rem;
}
.tab-header {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-bottom: 1.5rem;
}
.tab-btn {
background: none;
color: var(--text-light);
border: none;
padding: 0.8rem 1.2rem;
font-size: 0.9rem;
cursor: pointer;
transition: color var(--transition-speed);
border-bottom: 2px solid transparent;
border-radius: 0;
font-weight: bolder;
}
.tab-btn:hover, .tab-btn.active {
color: var(--primary-color);
}
.tab-btn.active {
border-bottom: 2px solid var(--primary-color);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.4s ease;
}:root {
--primary-color: #0071e3;
--primary-dark: #0055a7;
--background-color: #121212;
--card-background: #1e1e1e;
--text-color: #e0e0e0;
--text-light: #a0a0a0;
--border-color: #333333;
--success-color: #34c759;
--section-padding: 2rem;
--transition-speed: 0.3s;
--border-radius: 8px;
--shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Accounts for fixed header */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Header and Navigation */
.site-header {
background-color: rgba(18, 18, 18, 0.8);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 100;
padding: 1rem 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo {
display: flex;
align-items: center;
gap: 0.8rem;
}
.icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
background-color: var(--primary-color);
border-radius: 50%;
color: white;
font-size: 1rem;
}
h1 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-color);
}
nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
flex-wrap: wrap;
}
nav a {
text-decoration: none;
color: var(--text-light);
font-weight: 500;
transition: color var(--transition-speed);
padding: 0.5rem 0;
position: relative;
}
nav a:hover, nav a.active {
color: var(--primary-color);
}
nav a.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--primary-color);
border-radius: 2px;
}
/* Main Content */
main {
margin: 2rem 0 3rem;
}
section {
padding: var(--section-padding);
margin-bottom: 2rem;
background-color: var(--card-background);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
scroll-margin-top: 80px; /* For smooth scrolling with fixed header */
}
section:target {
animation: highlight 1s ease;
}
@keyframes highlight {
0% { background-color: rgba(0, 113, 227, 0.15); }
100% { background-color: var(--card-background); }
}
h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
font-weight: 600;
color: var(--text-color);
}
.content-block {
max-width: 100%;
}
p {
margin-bottom: 1.2rem;
color: var(--text-color);
font-size: 1rem;
}
strong {
font-weight: 600;
color: #ffffff;
}
/* Table */
.comparison-table {
overflow-x: auto;
margin: 2rem 0;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
thead {
background-color: #252525;
}
th, td {
padding: 0.8rem;
border-bottom: 1px solid var(--border-color);
}
th {
font-weight: 600;
color: var(--text-color);
}
tr:last-child td {
border-bottom: none;
}
/* Path Selector */
.path-selector {
display: flex;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.path {
flex: 1;
min-width: 300px;
padding: 1.5rem;
background-color: #252525;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
margin-bottom: 1rem;
}
.path h3 {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-color);
}
.path-content {
margin-top: 1.2rem;
}
.walkthrough {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Steps */
.steps {
list-style-type: none;
counter-reset: step-counter;
}
.steps li {
position: relative;
margin-bottom: 1.5rem;
padding-left: 3rem;
}
.steps li::before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
background-color: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 0.9rem;
}
.steps h4 {
font-size: 1.1rem;
margin-bottom: 0.6rem;
font-weight: 600;
color: var(--text-color);
}
/* Code Blocks */
.code-block {
background-color: #252525;
border-radius: 6px;
padding: 0.8rem;
margin: 1rem 0;
position: relative;
overflow-x: auto;
}
code {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.85rem;
color: #e0e0e0;
word-break: break-word;
white-space: pre-wrap;
}
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background-color: #333333;
color: var(--text-light);
padding: 0.3rem;
border-radius: 4px;
font-size: 0.8rem;
opacity: 0.7;
transition: opacity var(--transition-speed);
}
.copy-btn:hover {
opacity: 1;
background-color: #444444;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
border-radius: 20px;
cursor: pointer;
font-weight: 500;
transition: background-color var(--transition-speed);
}
button:hover {
background-color: var(--primary-dark);
}
a {
color: var(--primary-color);
font-weight: bolder;
text-decoration: none;
transition: color var(--transition-speed);
}
a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Footer */
footer {
text-align: center;
padding: 1.5rem 0;
color: var(--text-light);
border-top: 1px solid var(--border-color);
margin-top: 2rem;
}
footer p {
margin-bottom: 0.5rem;
color: var(--text-light);
}
footer .fa-heart {
color: #ff3b30;
}
footer .small {
font-size: 0.8rem;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.site-header .container {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
nav ul {
margin-top: 0.5rem;
gap: 1rem;
}
.path-selector {
flex-direction: column;
}
.steps li {
padding-left: 2.5rem;
}
.steps li::before {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
}
/* Utility Classes */
.copied {
background-color: var(--success-color) !important;
color: white !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment