{"id":299,"date":"2025-06-02T22:33:45","date_gmt":"2025-06-03T05:33:45","guid":{"rendered":"https:\/\/www.choosewebsitebuilder.com\/guides\/?p=299"},"modified":"2025-06-02T22:50:05","modified_gmt":"2025-06-03T05:50:05","slug":"how-to-host-your-html-css-js-website-on-github-pages-for-free","status":"publish","type":"post","link":"https:\/\/www.choosewebsitebuilder.com\/guides\/299\/how-to-host-your-html-css-js-website-on-github-pages-for-free\/","title":{"rendered":"How to Host Your HTML, CSS &amp; JS Website on GitHub Pages for Free \u2014 Step-by-Step Guide with Themes &amp; Custom Domains"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github-1024x441.jpg\" alt=\"GitHub website\" class=\"wp-image-308\" srcset=\"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github-1024x441.jpg 1024w, https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github-300x129.jpg 300w, https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github-768x331.jpg 768w, https:\/\/www.choosewebsitebuilder.com\/guides\/wp-content\/uploads\/github.jpg 1353w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">GitHub website<\/figcaption><\/figure>\n\n\n\n<p>Dreaming of getting your personal portfolio, small business landing page, or side project online without spending a dime on hosting? Or maybe you want to publish a coded website for your school project or homework assignment. If your website is built with HTML, CSS, and JavaScript \u2014 a \u201cstatic\u201d website \u2014 then GitHub Pages is your golden ticket!<\/p>\n\n\n\n<p>GitHub, known for collaborative coding and version control, offers a fantastic free hosting service for static sites. You can even use themes to style your site easily, and set up your own custom domain for a professional touch. While it involves a few extra steps compared to uploading files to a traditional web host, the benefits \u2014 like built-in version control, free HTTPS, and reliable performance \u2014 can make it worth the effort.<\/p>\n\n\n\n<p>Let\u2019s walk through exactly how to host your static website on GitHub Pages \u2014 including using themes and custom domains \u2014 step by step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is GitHub Pages?<\/strong><\/h2>\n\n\n\n<p>GitHub Pages is a free static site hosting service offered by GitHub. It allows you to host your website directly from a GitHub repository. When you push changes to a designated branch (usually <code>main<\/code> or <code>gh-pages<\/code>), GitHub automatically builds and deploys your site, making your updates live within minutes.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Note:<\/strong> A static website means it\u2019s built with HTML, CSS, and JavaScript only \u2014 no server-side code like PHP or databases.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Types of GitHub Pages Sites: User\/Organization vs Project<\/strong><\/h3>\n\n\n\n<p>GitHub Pages supports two types of sites:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User or Organization Site<\/strong>:<br>You get <strong>one<\/strong> user or organization site per GitHub account or organization. This site must be hosted in a repository named exactly <code>yourusername.github.io<\/code>. Your entire site will live at<br><code>https:\/\/yourusername.github.io\/<\/code>.<\/li>\n\n\n\n<li><strong>Project Site<\/strong>:<br>You can create <strong>unlimited<\/strong> project sites under your account or organization. These are repositories with any name you choose. Project sites are hosted at<br><code>https:\/\/yourusername.github.io\/project-repo-name\/<\/code>.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prerequisites: What You\u2019ll Need<\/strong><\/h2>\n\n\n\n<p>Before you start, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 A GitHub account \u2014 sign up at <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">github.com<\/a>.<\/li>\n\n\n\n<li>\u2705 Git installed on your computer \u2014 download it from <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">git-scm.com<\/a>.<\/li>\n\n\n\n<li>\u2705 Your website files \u2014 HTML, CSS, JS, images, and other assets organized in one folder. Make sure your main page is named <code>index.html<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step-by-Step Guide to Hosting on GitHub Pages<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create a New GitHub Repository<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in to GitHub.<\/li>\n\n\n\n<li>Click the <strong>New<\/strong> button (on the left sidebar or the \u201c+\u201d in the top right) and select <strong>New repository<\/strong>.<\/li>\n\n\n\n<li>Set a name for your repository:\n<ul class=\"wp-block-list\">\n<li>For a <strong>User\/Organization Site<\/strong>: Name the repo exactly <code>yourusername.github.io<\/code> (replace with your GitHub username).<\/li>\n\n\n\n<li>For a <strong>Project Site<\/strong>: Use any name you like, e.g., <code>my-project<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Optionally, add a description.<\/li>\n\n\n\n<li>Choose <strong>Public<\/strong> (GitHub Pages is free only for public repos).<\/li>\n\n\n\n<li>Do <strong>not<\/strong> initialize with a README (we\u2019ll push files manually).<\/li>\n\n\n\n<li>Click <strong>Create repository<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Initialize Git and Add Your Website Files Locally<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Terminal (Mac\/Linux) or Command Prompt (Windows).<\/li>\n\n\n\n<li>Navigate to your website folder: <code>cd \/path\/to\/your\/website\/folder<\/code><\/li>\n\n\n\n<li>Initialize a Git repository: <code>git init<\/code><\/li>\n\n\n\n<li>Add your website files: <code>git add .<\/code><\/li>\n\n\n\n<li>Commit the files: <code>git commit -m \"Initial commit: Add website files\"<\/code><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Connect to GitHub and Push Your Files<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your new GitHub repository page.<\/li>\n\n\n\n<li>Copy the HTTPS URL, which looks like:<br><code>https:\/\/github.com\/yourusername\/your-repo-name.git<\/code><\/li>\n\n\n\n<li>Add the remote origin: bashCopyEdit<code>git remote add origin https:\/\/github.com\/yourusername\/your-repo-name.git<\/code><\/li>\n\n\n\n<li>Rename the branch to <code>main<\/code> (if not already): <code>git branch -M main<\/code><\/li>\n\n\n\n<li>Push your files: <code>git push -u origin main<\/code><\/li>\n<\/ol>\n\n\n\n<p>Your files will now be on GitHub!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Enable GitHub Pages<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your repository on GitHub.<\/li>\n\n\n\n<li>Click <strong>Settings<\/strong> (top nav).<\/li>\n\n\n\n<li>In the left sidebar, click <strong>Pages<\/strong>.<\/li>\n\n\n\n<li>Under <strong>Source<\/strong>, choose the branch (<code>main<\/code>) and folder (<code>\/root<\/code> or <code>\/docs<\/code> if your site files are in a subfolder).<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>.<br>GitHub will build and publish your site, usually within 5 minutes.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Choose and Apply a Theme (Optional)<\/strong><\/h3>\n\n\n\n<p>GitHub Pages supports built-in themes to style your site without much setup.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In your repository, create a file called <code>_config.yml<\/code>.<\/li>\n\n\n\n<li>Add a theme line, for example: yamlCopyEdit<code>theme: jekyll-theme-cayman<\/code><\/li>\n\n\n\n<li>Commit and push this file to your repository.<\/li>\n\n\n\n<li>Your site will refresh with the new theme applied.<\/li>\n<\/ol>\n\n\n\n<p>You can explore more <a href=\"https:\/\/pages.github.com\/themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">supported themes here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: Access Your Live Website<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User\/Organization Site:<\/strong><br>Your site will be live at:<br><code>https:\/\/yourusername.github.io\/<\/code><\/li>\n\n\n\n<li><strong>Project Site:<\/strong><br>Your site will be live at:<br><code>https:\/\/yourusername.github.io\/your-repo-name\/<\/code><\/li>\n<\/ul>\n\n\n\n<p>You can also find the live URL in the GitHub Pages settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optional: Set Up a Custom Domain<\/strong><\/h2>\n\n\n\n<p>Want a custom domain like <code>www.yoursite.com<\/code>?<\/p>\n\n\n\n<p>Both User\/Organization sites and Project sites fully support custom domains, so you can personalize your website address regardless of the site type.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In GitHub Pages settings, under <strong>Custom domain<\/strong>, enter your domain name.<\/li>\n\n\n\n<li>In your repository, create a <code>CNAME<\/code> file (uppercase, no file extension) with your domain name inside.<\/li>\n\n\n\n<li>Update your domain registrar\u2019s DNS records:\n<ul class=\"wp-block-list\">\n<li>For <code>www.yoursite.com<\/code>, add a <strong>CNAME<\/strong> record pointing <code>www<\/code> \u2192 <code>yourusername.github.io<\/code>.<\/li>\n\n\n\n<li>For root domains (e.g., <code>yoursite.com<\/code>), add <strong>A<\/strong> records pointing to these GitHub IPs: <code>185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udd52 DNS propagation can take up to 48 hours.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Benefits of Using GitHub Pages<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udcb8 100% Free static site hosting<\/li>\n\n\n\n<li>\ud83d\ude80 Fast &amp; reliable, backed by GitHub\u2019s global CDN<\/li>\n\n\n\n<li>\ud83d\udd04 Version control with Git for easy updates and collaboration<\/li>\n\n\n\n<li>\ud83d\udd27 Simple deployment \u2014 just push your changes<\/li>\n\n\n\n<li>\ud83c\udf10 Support for custom domains<\/li>\n\n\n\n<li>\ud83d\udd12 HTTPS enabled by default via Let\u2019s Encrypt<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Limitations to Know<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u274c Static only \u2014 no server-side code like PHP, Python, or Node.js<\/li>\n\n\n\n<li>\ud83d\udccf Repository and build limits (usually 1 GB repo size, soft build time limits)<\/li>\n\n\n\n<li>\ud83d\udd12 Private sites require a paid GitHub plan<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Let\u2019s Recap<\/strong><\/h2>\n\n\n\n<p>GitHub Pages is an amazing, cost-effective solution for developers, designers, and hobbyists who want to get a static website online fast. With built-in version control, instant deployments, free HTTPS, and support for themes and custom domains, it&#8217;s a free solution for portfolios, documentation, blogs, and simple web apps.<\/p>\n\n\n\n<p>Give it a try \u2014 you might be surprised how quickly your site goes live!<\/p>\n\n\n\n<p>If you want a traditional web hosting solution\u2014with easy file uploads and full support for both static and dynamic sites\u2014you can get started for under $5\/month, with SSL included, through <a href=\"https:\/\/www.ultimatewb.com\/domain-names-web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\">UltimateWB web hosting plans<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dreaming of getting your personal portfolio, small business landing page, or side project online without spending a dime on hosting? Or maybe you want to publish a coded website for your school project or homework assignment. If your website is &hellip; <a href=\"https:\/\/www.choosewebsitebuilder.com\/guides\/299\/how-to-host-your-html-css-js-website-on-github-pages-for-free\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2233],"tags":[1748,2248,2238,2246,2243,2235,2240,2239,2236,2237,2247,1747,2244,1749,2249,2250,2251,2234,2241,2242,2245,1744,2252,2038],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-github","tag-css","tag-custom-domain","tag-deploy-website","tag-free-https","tag-free-web-hosting","tag-free-website-hosting","tag-github","tag-github-hosting-guide","tag-github-pages","tag-github-tutorial","tag-how-to-host-website","tag-html","tag-html-css-js","tag-javascript","tag-personal-portfolio-hosting","tag-side-project-hosting","tag-small-business-website","tag-static-website","tag-static-website-hosting","tag-step-by-step-guide","tag-version-control","tag-web-development","tag-website-deployment","tag-website-themes"],"_links":{"self":[{"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":8,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":309,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/posts\/299\/revisions\/309"}],"wp:attachment":[{"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.choosewebsitebuilder.com\/guides\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}