# How to Build a Simple Website With GitHub - Tool: GitHub - Difficulty: Beginner - Time required: 20 minutes - Compatibility: GitHub.com free and paid accounts, any modern web browser - Last updated: March 2026 ## TL;DR 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. ## Before you start - 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 ### 1. 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. ### 2. 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. ``` My Website

Welcome to My Website

This site was built and published entirely on GitHub — no downloads needed.

About Me

I am building projects and learning as I go. This website is my first step into web development.

My Projects

Project One

A brief description of your first project.

Project Two

A brief description of your second project.

Contact

Reach me at: you@example.com

``` **Expected result:** index.html appears in the repository file list. ### 3. 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**. ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } header { background-color: #0d1117; color: white; padding: 1rem 2rem; } nav { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto; } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { color: #58a6ff; text-decoration: none; } nav a:hover { text-decoration: underline; } main { max-width: 900px; margin: 0 auto; padding: 2rem; } section { margin-bottom: 3rem; } #hero { text-align: center; padding: 3rem 1rem; background: white; border-radius: 8px; margin-bottom: 2rem; } #hero h2 { font-size: 2rem; margin-bottom: 0.5rem; } h2 { margin-bottom: 1rem; color: #0d1117; } .card { background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e1e4e8; margin-bottom: 1rem; } .card h3 { margin-bottom: 0.5rem; color: #0d1117; } footer { text-align: center; padding: 2rem; color: #666; border-top: 1px solid #e1e4e8; } ``` **Expected result:** style.css appears in the repository file list alongside index.html. ### 4. 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. ### 5. 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 code example File: `index.html` ```html My Website

Welcome to My Website

Built and published entirely on GitHub.

About Me

I am building projects and learning as I go.

My Projects

Project One

A brief description of your first project.

Contact

Reach me at: you@example.com

``` ## Common mistakes - **Naming the file Index.html or HOME.html instead of index.html** — undefined Fix: The filename must be exactly index.html (lowercase). GitHub Pages and web servers look for this specific name as the default page. - **Forgetting to link the CSS file in the HTML head** — undefined Fix: Make sure your HTML includes in the section. Without this line, your CSS will not be applied. - **Creating the CSS file in a subfolder while HTML references it at the root** — undefined Fix: Keep both index.html and style.css at the same level (root of the repository) unless you adjust the href path accordingly. - **Not making the repository public before enabling Pages** — undefined Fix: 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. ## 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: 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: About. ### 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 before the closing 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. --- Source: https://www.rapidevelopers.com/github-for-non-tech/how-to-build-a-simple-website-with-github © RapidDev — https://www.rapidevelopers.com/github-for-non-tech/how-to-build-a-simple-website-with-github