{"id":5983,"date":"2022-01-24T15:10:16","date_gmt":"2022-01-24T15:10:16","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/01\/24\/how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it\/"},"modified":"2022-01-24T15:10:16","modified_gmt":"2022-01-24T15:10:16","slug":"how-to-set-up-a-simple-free-website-with-github-pages-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/01\/24\/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":"

<\/a>\n<\/p>\n

\n

\"\"<\/p>\n

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

What Is Github Pages?<\/h2>\n

Github is a code hosting service that provides version control through 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

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

You can have pages for your username, or pages for each repository. By default, Github will assign you a subdomain url like username.github.io<\/code>\u00a0or username.github.io\/repository<\/code>. This can be changed to any custom URL.<\/p>\n

What Are Static Websites?<\/h2>\n

The important thing to note is that Github Pages is only for\u00a0static 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

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

However, if you serve client-side JavaScript 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 bundle.js<\/code>\u00a0file with all the code.<\/p>\n

Github Pages Restrictions \u2013 Noncommercial Use<\/h2>\n

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 \u201cfree 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

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<\/a> to host static websites, or using Google\u2019s Firebase static hosting<\/a>. 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

RELATED:<\/strong> How to Host a Static Website on Amazon S3<\/em><\/strong><\/a><\/p>\n

RELATED:<\/strong> How to Host a Static Website for Free on Google’s Firebase Hosting Platform<\/em><\/strong><\/a><\/p>\n

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

Setting Up a Page<\/h2>\n

Github Pages is pretty simple to set up, and if you\u2019re familiar with Github, it should be even easier.<\/p>\n

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\u00a0username.github.io<\/code>. If you use a project page, you can have many pages set up, but each will be at username.github.io\/repository.<\/code><\/p>\n

In either case, you\u2019ll have to create a new repository. If you\u2019re making a user page, set this to your username plus .github.io<\/code>. Make sure it\u2019s public as well.<\/p>\n

viceversagames.github.io<\/pre>\n
\"\"<\/p>\n
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 Github Desktop<\/a>. Use the URL given to you from the quick setup:<\/p>\n
\"\"<\/p>\n
Or, if you\u2019re using the Github Desktop app, you can simply search for it by name:<\/p>\n
\"\"<\/p>\n
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 index.html<\/code>, which is the main page of your site.<\/p>\n
Once everything works locally, you\u2019ll need to commit the changes, and publish them to Github.<\/p>\n
\"\"<\/p>\n
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 main<\/code>\u00a0branch to serve your website from, and click \u201cSave.\u201d<\/p>\n
\"\"<\/p>\n
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>\n
You\u2019ll also want to enable \u201cEnforce HTTPS\u201d in the Github pages settings.<\/p>\n
Adding a Custom Domain<\/h2>\n
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 Google Domains<\/a>, Namecheap<\/a>, or GoDaddy<\/a>.<\/p>\n
RELATED:<\/strong> How to Set Up a New Domain with Google Domains<\/em><\/strong><\/a><\/p>\n
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 username.github.io<\/code>. If you plan to use www<\/code>, set the Host value to www<\/code>. If you want to use the base domain by itself, set the Host value to @<\/code>.<\/p>\n
\"\"<\/p>\n
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.<\/p>\n<\/div>\n