You can build and publish a simple website entirely in your browser using GitHub. Create a new repository, add an index.html file with the web editor, add a style.css file for styling, enable GitHub Pages in Settings, and your site is live within minutes at yourusername.github.io/repo-name. No downloads or installations required.
Build Your First Website Without Leaving the Browser
You do not need to install any software to build a website with GitHub. The GitHub web editor lets you create and edit files directly in your browser, and GitHub Pages turns those files into a live website for free.
Here is what you need to know before starting:
- **HTML** (HyperText Markup Language) is the language that defines the content and structure of a web page. Every website starts with an HTML file. - **CSS** (Cascading Style Sheets) controls how your HTML looks — colors, fonts, spacing, and layout. - **index.html** is the default filename web servers look for. When someone visits your site, the server serves index.html automatically. - **GitHub Pages** reads files from your repository and hosts them as a website. Once enabled, any changes you commit are automatically published.
This guide walks you through creating a complete, styled website from scratch using only the GitHub web interface. If you want a more complex app, AI builders like Lovable or V0 can generate full React projects that you can then host on GitHub — but for a simple site, the web editor is all you need.
Prerequisites
- A GitHub account (free tier works)
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- No prior coding experience required — we provide all the code
Step-by-step guide
Create a new repository for your website
Create a new repository for your website
Go to **github.com** and sign in. Click the **+** icon in the top-right navigation bar and select **New repository**. Fill in the form: - **Repository name**: Choose a short, descriptive name like `my-website` or `portfolio`. This becomes part of your URL. - **Description** (optional): Something like 'My personal website.' - **Visibility**: Select **Public** (required for free GitHub Pages). - **Initialize this repository with**: Check the box next to **Add a README file**. Click the green **Create repository** button.
Expected result: You land on the repository page with a README.md file listed.
Create the index.html file
Create the index.html file
On the repository page, click the **Add file** dropdown and select **Create new file**. In the filename box at the top, type `index.html`. In the large text editor below, paste the HTML starter template provided in this step. This template includes a proper HTML structure with a header, navigation, main content area, and footer. You can customize the text to match your own project or business. Scroll down to the **Commit changes** section. Type 'Add index.html with starter template' as the commit message. Click the green **Commit changes** button.
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>My Website</title>7 <link rel="stylesheet" href="style.css">8</head>9<body>10 <header>11 <nav>12 <h1>My Website</h1>13 <ul>14 <li><a href="#about">About</a></li>15 <li><a href="#projects">Projects</a></li>16 <li><a href="#contact">Contact</a></li>17 </ul>18 </nav>19 </header>2021 <main>22 <section id="hero">23 <h2>Welcome to My Website</h2>24 <p>This site was built and published entirely on GitHub — no downloads needed.</p>25 </section>2627 <section id="about">28 <h2>About Me</h2>29 <p>I am building projects and learning as I go. This website is my first step into web development.</p>30 </section>3132 <section id="projects">33 <h2>My Projects</h2>34 <div class="card">35 <h3>Project One</h3>36 <p>A brief description of your first project.</p>37 </div>38 <div class="card">39 <h3>Project Two</h3>40 <p>A brief description of your second project.</p>41 </div>42 </section>4344 <section id="contact">45 <h2>Contact</h2>46 <p>Reach me at: <a href="mailto:you@example.com">you@example.com</a></p>47 </section>48 </main>4950 <footer>51 <p>© 2026 My Website. Built with GitHub.</p>52 </footer>53</body>54</html>Expected result: index.html appears in the repository file list.
Create the style.css file
Create the style.css file
Back on the repository page, click **Add file → Create new file** again. Type `style.css` as the filename. Paste the CSS code provided in this step. This stylesheet adds a clean, modern look with a color scheme, proper spacing, responsive layout, and styled cards for your projects section. Commit the file with the message 'Add style.css for website styling' and click **Commit changes**.
1* {2 margin: 0;3 padding: 0;4 box-sizing: border-box;5}67body {8 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;9 line-height: 1.6;10 color: #333;11 background-color: #f8f9fa;12}1314header {15 background-color: #0d1117;16 color: white;17 padding: 1rem 2rem;18}1920nav {21 display: flex;22 justify-content: space-between;23 align-items: center;24 max-width: 900px;25 margin: 0 auto;26}2728nav ul {29 display: flex;30 list-style: none;31 gap: 1.5rem;32}3334nav a {35 color: #58a6ff;36 text-decoration: none;37}3839nav a:hover {40 text-decoration: underline;41}4243main {44 max-width: 900px;45 margin: 0 auto;46 padding: 2rem;47}4849section {50 margin-bottom: 3rem;51}5253#hero {54 text-align: center;55 padding: 3rem 1rem;56 background: white;57 border-radius: 8px;58 margin-bottom: 2rem;59}6061#hero h2 {62 font-size: 2rem;63 margin-bottom: 0.5rem;64}6566h2 {67 margin-bottom: 1rem;68 color: #0d1117;69}7071.card {72 background: white;73 padding: 1.5rem;74 border-radius: 8px;75 border: 1px solid #e1e4e8;76 margin-bottom: 1rem;77}7879.card h3 {80 margin-bottom: 0.5rem;81 color: #0d1117;82}8384footer {85 text-align: center;86 padding: 2rem;87 color: #666;88 border-top: 1px solid #e1e4e8;89}Expected result: style.css appears in the repository file list alongside index.html.
Enable GitHub Pages to publish your site
Enable GitHub Pages to publish your site
Click the **Settings** tab at the top of your repository page. In the left sidebar, scroll to **Code and automation** and click **Pages**. Under **Build and deployment**: - **Source**: Deploy from a branch - **Branch**: Select **main** - **Folder**: / (root) Click **Save**. GitHub starts building your site. Wait 1-3 minutes, then refresh this page. A green banner will appear at the top with your live URL: **yourusername.github.io/repository-name**.
Expected result: A green banner shows your site is live with a clickable URL.
Visit and customize your live website
Visit and customize your live website
Click the URL in the green banner to open your website in a new tab. You should see your styled page with the header, sections, and footer. To make changes, go back to your repository, click on a file (like index.html), and click the **pencil icon** to edit. Change text, add new sections, or modify content. Click **Commit changes** when done, and within 1-3 minutes your live site updates automatically. You can add more pages by creating new HTML files (like `about.html`) and linking to them from your index.html.
Expected result: Your website is live, styled, and you can edit it directly through the GitHub web interface.
Complete working example
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>My Website</title>7 <link rel="stylesheet" href="style.css">8</head>9<body>10 <header>11 <nav>12 <h1>My Website</h1>13 <ul>14 <li><a href="#about">About</a></li>15 <li><a href="#projects">Projects</a></li>16 <li><a href="#contact">Contact</a></li>17 </ul>18 </nav>19 </header>20 <main>21 <section id="hero">22 <h2>Welcome to My Website</h2>23 <p>Built and published entirely on GitHub.</p>24 </section>25 <section id="about">26 <h2>About Me</h2>27 <p>I am building projects and learning as I go.</p>28 </section>29 <section id="projects">30 <h2>My Projects</h2>31 <div class="card">32 <h3>Project One</h3>33 <p>A brief description of your first project.</p>34 </div>35 </section>36 <section id="contact">37 <h2>Contact</h2>38 <p>Reach me at: <a href="mailto:you@example.com">you@example.com</a></p>39 </section>40 </main>41 <footer>42 <p>© 2026 My Website. Built with GitHub.</p>43 </footer>44</body>45</html>Common mistakes when building a Simple Website With GitHub
Why it's a problem: Naming the file Index.html or HOME.html instead of index.html
How to avoid: The filename must be exactly index.html (lowercase). GitHub Pages and web servers look for this specific name as the default page.
Why it's a problem: Forgetting to link the CSS file in the HTML head
How to avoid: Make sure your HTML includes <link rel="stylesheet" href="style.css"> in the <head> section. Without this line, your CSS will not be applied.
Why it's a problem: Creating the CSS file in a subfolder while HTML references it at the root
How to avoid: Keep both index.html and style.css at the same level (root of the repository) unless you adjust the href path accordingly.
Why it's a problem: Not making the repository public before enabling Pages
How to avoid: On free GitHub accounts, Pages only works with public repositories. Go to Settings → Danger Zone → Change visibility → Public.
Best practices
- Start with a simple, clean template and customize from there — do not try to build a complex site on your first attempt.
- Keep your files organized: HTML at the root, images in an /images folder, additional CSS in the root alongside your HTML.
- Use semantic HTML tags (header, main, section, footer) for better accessibility and SEO.
- Test your site on both desktop and mobile by resizing your browser window after deployment.
- Commit often with descriptive messages so you can track your changes over time.
- If you outgrow a static site and need interactivity, consider AI tools like Lovable or V0 to generate a full React app.
- Add a favicon and meta description to your HTML head for a more professional appearance in browser tabs and search results.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
Generate a simple, modern HTML and CSS website template for a personal portfolio. Include sections for About, Projects, and Contact. Make it responsive and use a clean color scheme. The code should be copy-paste ready for GitHub Pages.
Frequently asked questions
Do I need to know how to code to build a website with GitHub?
Not really. This guide provides copy-paste ready code. You only need to customize the text content like headings, descriptions, and links. For more complex sites, AI tools like Lovable can generate the code for you.
Can I add images to my website?
Yes. Upload images to your repository (Add file → Upload files), then reference them in your HTML with an img tag: <img src="my-photo.jpg" alt="Description">. Keep images under 1MB for fast loading.
How do I add more pages to my website?
Create additional HTML files like about.html or projects.html in your repository. Link to them from your index.html using anchor tags: <a href="about.html">About</a>.
Can I use JavaScript on my GitHub Pages site?
Yes. Create a script.js file in your repository and link it in your HTML with <script src="script.js"></script> before the closing </body> tag. JavaScript runs in the browser, so it works on GitHub Pages.
Is there a file size or storage limit for GitHub Pages?
GitHub Pages repositories have a soft limit of 1GB. Individual files should be under 100MB. Monthly bandwidth is limited to 100GB. For most personal sites, these limits are generous.
What if I want a more complex app with a database and user login?
GitHub Pages only hosts static files. For apps needing a backend, use an AI builder like Lovable (which includes Supabase integration) or deploy to Vercel/Railway. RapidDev can help you choose and set up the right architecture for your project.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation