{"id":398465,"date":"2022-01-24T17:22:32","date_gmt":"2022-01-24T14:22:32","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/"},"modified":"2022-01-24T17:22:32","modified_gmt":"2022-01-24T14:22:32","slug":"how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/","title":{"rendered":"#How to Set Up a Simple Free Website With Github Pages \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a297d5a3f37c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a297d5a3f37c\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/#What_Is_Github_Pages\" >What Is Github Pages?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/#What_Are_Static_Websites\" >What Are Static Websites?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/#Github_Pages_Restrictions_%E2%80%93_Noncommercial_Use\" >Github Pages Restrictions \u2013 Noncommercial Use<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/#Setting_Up_a_Page\" >Setting Up a Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/#Adding_a_Custom_Domain\" >Adding a Custom Domain<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Set Up a Simple Free Website With Github Pages \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-7125\" data-pagespeed-lazy-srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/10\/d6528811.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/10\/d6528811.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/10\/d6528811.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"300\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Websites are getting easier to host everyday, with many services offering packages starting at less than $5 a month. But, if you just want a simple site that isn\u2019t going to see a ton of traffic, you may be able to host on Github for free, even with your own domain.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Is_Github_Pages\"><\/span>What Is Github Pages?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Github is a code hosting service that provides version control through <code>git<\/code>. While it\u2019s commonly used by programmers, a common use case for them is running simple wikis, resumes, or documentation sites that don\u2019t see tons of daily traffic, and just need a place to put up a website for free.<\/p>\n<p>For this, Github Pages was created, and it allows you to host HTML files and other assets free of charge. This isn\u2019t much different from Github\u2019s normal file hosting\u2014you can host files in your repositories entirely for free, and hosting a static site is just like hosting files.<\/p>\n<p>You can have pages for your username, or pages for each repository. By default, Github will assign you a subdomain url like <code>username.github.io<\/code>\u00a0or <code>username.github.io\/repository<\/code>. This can be changed to any custom URL.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Are_Static_Websites\"><\/span>What Are Static Websites?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The important thing to note is that Github Pages is only for\u00a0<em>static websites<\/em>. This doesn\u2019t necessarily mean your website can\u2019t be interactive, it just means that your website is hosted directly from the HTML, JS, and CSS files.<\/p>\n<p>The main restriction with static websites is that it can\u2019t rely on a server to be changing the content for each request, like with a language like PHP. For example, if you want to have users sign in and view a profile, or host WordPress (which connects to a database server), you\u2019ll have to host somewhere else.<\/p>\n<p>However, if you serve client-side Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> frameworks like React, you can actually host entire web applications from Github Pages, or any other static website hosting provider. This is because all of the content is generated on the client\u2019s device, and the only thing you\u2019re serving is a <code>bundle.js<\/code>\u00a0file with all the code.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Github_Pages_Restrictions_%E2%80%93_Noncommercial_Use\"><\/span>Github Pages Restrictions \u2013 Noncommercial Use<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Of course, this comes with a few restrictions. Essentially, you\u2019re not supposed to use Github Pages for primarily commercial use. Specifically, they say it\u2019s prohibited from being used as a \u201c<em>free web hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions<\/em>.\u201d.<\/p>\n<p>So, if you planned on operating your business off Github Pages, you\u2019ll likely want to look at other alternatives. Two very similar \u201cfree hosting\u201d methods are using AWS Simple Storage Service buckets to host static websites, or using Google\u2019s Firebase static hosting. Both work well for both amature and professional static site deployments, and have free tiers that can save you from paying the $10 a month to host your own server.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Host a Static Website on Amazon S3<\/em><\/strong><\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Host a Static Website for Free on Google&#8217;s Firebase Hosting Platform<\/em><\/strong><\/p>\n<p>Github Pages also has size limits and soft bandwidth limits, though they\u2019re fairly reasonable. Your site can\u2019t be more than 1 GB (you are likely going to have a problem serving a site this size anyway) and if you go over\u00a0100GB of bandwidth per month, Github may not serve your site. For reference, that amount of data would cost you about $10 a month on AWS.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Setting_Up_a_Page\"><\/span>Setting Up a Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Github Pages is pretty simple to set up, and if you\u2019re familiar with Github, it should be even easier.<\/p>\n<p>Basically, you have two options for repositories\u2014user pages, or project pages. If you\u2019re using a custom domain, it shouldn\u2019t matter much, but if you want a nice URL, you\u2019ll want to use a user page, which will give you a URL in the format of\u00a0<code>username.github.io<\/code>. If you use a project page, you can have many pages set up, but each will be at <code>username.github.io\/repository.<\/code><\/p>\n<p>In either case, you\u2019ll have to create a new repository. If you\u2019re making a user page, set this to your username plus <code>.github.io<\/code>. Make sure it\u2019s public as well.<\/p>\n<pre>viceversa<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/game\/\" data-internallinksmanager029f6b8e52c=\"7\" title=\"Game\" target=\"_blank\" rel=\"noopener\">game<\/a>s.github.io<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15319\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/fbc7b66b.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"957\" height=\"329\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>After this, you\u2019ll need a Git client to connect to Github and push your website. You can use a terminal, or a GUI client like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/desktop.github.com\/\">Github Desktop<\/a>. Use the URL given to you from the quick setup:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15316\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/a1baacd1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1224\" height=\"643\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Or, if you\u2019re using the Github Desktop app, you can simply search for it by name:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15315\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/5c71dfdc.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"698\" height=\"473\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Then, you\u2019ll need to add your content. If you have an existing template you\u2019d like to use, copy all the assets (HTML, CSS, JS files, images) over to this directory, which is essentially the \u201cwebroot\u201d where everything will be hosted from. The most important thing is <code>index.html<\/code>, which is the main page of your site.<\/p>\n<p>Once everything works locally, you\u2019ll need to commit the changes, and publish them to Github.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15317\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/fa81f3f4.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"686\" height=\"274\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You\u2019ll soon see the new files in your repository, but you\u2019ll have to enable Github Pages for it to fully work. From the repository page, click \u201cSettings\u201d and scroll down to \u201cPages.\u201d Select the <code>main<\/code>\u00a0branch to serve your website from, and click \u201cSave.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15318\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/fff07e3e.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"852\" height=\"547\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>It may take a few minutes for everything to update, and it will only update 10 times per hour, so don\u2019t make changes too quickly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15320\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/a1fd5e6e.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"529\" height=\"233\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You\u2019ll also want to enable \u201cEnforce HTTPS\u201d in the Github pages settings.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Adding_a_Custom_Domain\"><\/span>Adding a Custom Domain<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Adding a custom domain is really simple. You\u2019ll first need to buy one, which you can do from many different registrars. A few good examples are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.anrdoezrs.net\/links\/3607085\/type\/am\/sid\/15220\/https:\/\/domains.google\/\">Google Domains<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.anrdoezrs.net\/links\/3607085\/type\/am\/sid\/15220\/https:\/\/www.namecheap.com\/\">Namecheap<\/a>, or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/redirect.viglink.com\/?key=204a528a336ede4177fff0d84a044482&amp;u=https%3A%2F%2Fwww.godaddy.com%2F\">GoDaddy<\/a>.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Set Up a New Domain with Google Domains<\/em><\/strong><\/p>\n<p>Once registered, you\u2019ll need to point your domain to your Github page. However, you can\u2019t just paste the URL in here; you\u2019ll need to create a CNAME record that points to <code>username.github.io<\/code>. If you plan to use <code>www<\/code>, set the Host value to <code>www<\/code>. If you want to use the base domain by itself, set the Host value to <code>@<\/code>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15321\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/01\/49e74474.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1140\" height=\"290\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>After waiting a few minutes for DNS records to sync across the internet, you should be able to see your newly created Github Pages site at your custom URL, and the settings menu should show it as connected.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/15220\/how-to-set-up-a-simple-free-website-with-github-pages\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Set Up a Simple Free Website With Github Pages \u2013 CloudSavvy IT&#8221; Websites are getting easier to host everyday, with many services offering packages starting at less than $5 a month. But, if you just want a simple site that isn\u2019t going to see a ton of traffic, you may be able to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":398466,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/10\/d6528811.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-398465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/398465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=398465"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/398465\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/398466"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=398465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=398465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=398465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}