🌾 Let's Build Your Website
The GitHub + Cloudflare Pages Route
Your Progress:
- ✨ No more algorithms hiding your posts
- 💸 No more paying to boost content
- 📜 No more TOS changes you didn't agree to
- 👑 Your new website = YOUR rules
We've been through Xanga, MySpace, Facebook, Instagram, TikTok... we know when it's time to jump. This time, we're jumping to something we OWN.
1 Set Up Your GitHub Account
GitHub is like Google Drive, but for code. It's where you'll store your website files safely.
- Go to github.com
- Click "Sign up" in the top right corner
- Enter your email (use a real one - you'll need to verify it)
- Create a password (make it good, you can save it in your browser)
- Choose a username - this will be in your website URL, so pick wisely:
Username Tips:
✅ Good: yourname, yourbusiness, yournicename
❌ Avoid: random numbers, inside jokes nobody gets, xXx_edgelord_xXx
- Verify your email (check your inbox and click the link)
- You're in! Welcome to GitHub 🎉
2 Create Your First Repository
A "repository" (or "repo") is just a folder for your website files. Think of it like creating a new folder on your computer, but online and backed up forever.
- Once logged in, look for the green "New" button (top left, or click the "+" icon)
- Name your repository:
Naming Rules:
✅ Good: "my-website", "business-site", "yourname-site"
✅ Use lowercase and dashes, no spaces
❌ Avoid: "My Website!", "website 2025", special characters
- Add a description (optional but nice): "My personal website" or whatever you want
- Choose "Public" ✅ (Don't worry - this means people can see the CODE, not your private info. It's like showing someone your recipe, not your diary)
- Check "Add a README file" ✅
- Click the green "Create repository" button
3 Add Your First HTML File
Time to add some actual website content. We're going to create a simple HTML file. HTML is just the language websites speak - it's easier than you think.
- In your repository, click "Add file" → "Create new file"
- Name it
index.html(this MUST be the exact name - it's what browsers look for first) - Copy this starter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Digital Home 🌾</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: #f5f5f5;
color: #333;
}
h1 {
color: #10b981;
}
.container {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Hey! Welcome to My New Digital Home 🌾</h1>
<p>I'm done with the algorithm. This is MY space now.</p>
<p>More coming soon, but I'm already here and I OWN this.</p>
<p>— [Your Name]</p>
</div>
</body>
</html>
- Paste it into the big text editor on GitHub
- Customize it:
- Change "[Your Name]" to your actual name
- Edit the message to say whatever you want
- Change colors if you want (the #10b981 is the green - try #3b82f6 for blue)
- Scroll down and click the green "Commit changes" button
- Click "Commit changes" again in the popup that appears
4 Connect Cloudflare Pages
Now we're going to connect your GitHub files to Cloudflare, which will put your website on the ACTUAL INTERNET for FREE. This is the magic moment.
- Go to dash.cloudflare.com
- Sign up (it's free - you don't even need a credit card)
- Once logged in, click "Workers & Pages" in the left sidebar
- Click "Create application"
- Click the "Pages" tab at the top
- Click "Connect to Git"
- Click "Connect GitHub" and authorize Cloudflare (it's safe, they just need to read your repos)
- Select your repository (the one you just made)
- Click "Begin setup"
- Leave everything as default and click "Save and Deploy"
Cloudflare is deploying your site to servers around the world right now! Watch the progress bar fill up.
- Once it's done, you'll see your URL: yourproject.pages.dev
- Click on it
- SEE YOUR WEBSITE LIVE ON THE INTERNET! 🎉🎉🎉
You. Did. That. Share that URL with everyone. Post it. Announce it. You OWN this space. Nobody can take it down. Nobody can charge you monthly. Nobody can change the rules on you. It's YOURS.
5 Customize Your Site
Now let's make it truly yours. Every time you edit your files on GitHub, Cloudflare automatically updates your live site in ~30 seconds. It's like magic, but it's just good engineering.
🎨 Change Colors:
In your index.html file, find the color codes (they start with #) and change them:
/* Some color options to try */ #10b981 /* Green (default) */ #3b82f6 /* Blue */ #ec4899 /* Pink */ #f59e0b /* Orange */ #8b5cf6 /* Purple */ #ef4444 /* Red */ #000000 /* Black */ #ffffff /* White */
📝 Add More Content:
Add more sections by copying this inside the <div class="container"> tags:
<h2>About Me</h2> <p>I'm a [your profession/hobby]. I love [your interests].</p> <h2>What I'm Building</h2> <p>Right now I'm working on [your project/business/idea].</p> <h2>Connect With Me</h2> <p>Email: your@email.com</p> <p>Instagram: @yourhandle</p>
🖼️ Add Images:
- Upload your image to your GitHub repository (click "Add file" → "Upload files")
- Add this code where you want the image to appear:
<img src="your-image-name.jpg" alt="Description of image" style="max-width: 100%; border-radius: 10px; margin: 20px 0;">
6 What's Next?
Your Site Is Live. Now What?
📚 Learn More HTML/CSS:
- W3Schools - Free interactive tutorials
- MDN Web Docs - Complete reference guide
- YouTube - Search "HTML CSS tutorial for beginners"
- freeCodeCamp - Full courses, completely free
🎨 Use Free Templates:
Don't want to build from scratch? Use a template!
- HTML5 UP - Beautiful, free, responsive templates
- Free CSS - Hundreds of free templates
- Start Bootstrap - Professional Bootstrap themes
How to use: Download template → Customize files → Upload to your GitHub repo → Done!
🔗 Get a Custom Domain:
Want yourname.com instead of yourname.pages.dev?
Welcome to the New Farmland
You own this land. Nobody can take it from you.
Build what you want. Say what you want. Grow what you want.
This is YOUR digital home.