There are tons of options available when it comes to hosting static files like css and js, most of the services that allow us to host these files are good, but they are very limited when it comes to things like storage or bandwidth. Another thing is that some of those services are not so beginner friendly, thus making it harder to new users to manage them.
Why use GitHub to Host CSS & JS ?
The reason why you should use GitHub pages hosting to host your css and js files is because its free, it has a bandwidth limit of 100GB per month and its very easy to use, so a new beginner can easily learn it without having to go through hours long yt videos.
Its also very easy to manage and can help you a lot if you are trying to host hundreds or thousands of files. Compare that to other static file hosting providers and you will be surprised how much better GitHub pages is compared to its alternatives.
One more thing that I like about GitHub is that you can clone your GitHub repository ( where you store all the files ) to your local computer. Which means that you can edit your css and js files locally then you can publish it online when you are done.
Host CSS & Js on GitHub – Step By Step
STEP 1 – Create a New GitHub Account
The first step will be to create a new GitHub account. So first you will need to go to https://github.com/, once you’re in the GitHub website click on the Signup button at the top right corner.
Now you’ll need to enter your email address, enter it then click on continue, after that you will need to create a secure password for logging in to your GitHub account, make sure the password fulfills the password requirement shown there once done click on the continue button.
Now after that you will need to create a username, make sure to create a easy to remember username. You can log in to GitHub using either your username or using your email address. Click on continue once done, in email subscription enter ‘y’ to receive emails from GitHub or enter ‘n’ to not receive any emails form GitHub.
After submitting the info you will need to solve a puzzle to verify whether you are a human or not, click on start puzzle to do that. Solve the puzzle after which you will get the ‘Create Account’ option, click on it to create your GitHub account. To finish the account creation process enter the verification code that GitHub sent you at your email address.
In the ‘Welcome to GitHub’ page scroll down to bottom and click on the ‘Skip Personalization’ option to skip the personalization steps.
STEP 2 – Create a GitHub Repository
To create a new GitHub repository go to https://github.com/new, if you’re not logged in to your GitHub account then log in using your username or email.
First you’ll need to enter a repository name, it can be anything you want, for example ‘myrepo’, after that check the ‘Add a README file’ option. Keep everything else as it is and click on ‘Create Repository’.
This will create a new GitHub repository.
STEP 3 – Enable GitHub Pages
After creating a new GitHub repository you will need to enable GitHub pages in it. GitHub pages will let us add custom domains and also give us a github.io subdomain for free. So instead of entering the whole URL of the uploaded assets, you can just shorten it using custom domain or subdomain.
1. To enable GitHub pages you will need to first go to the repository that you created. Open your repository by going to https://github.com/ ( You need to be logged in ) then on the left side you will see all your repositories. Click on the one you created.
2. Now once you are inside the repository, click on the ‘MAIN’ button and after that in ‘Find or create a branch’ input field enter ‘gh-pages’ and click on Create Branch.
3. After creating the new branch you will have to delete the main branch and make the ‘gh-pages’ branch default. So go to ‘Settings > Branches’. Here click on the arrow button then the ‘Main’ button, this will open a dropdown from where select ‘gh-pages’. Once done click on the ‘Update’ button and click ‘I understand, update the default branch’.
4. After updating the default branch you should delete the ‘main’ branch, to do that go back to your repository and click on the branches button and click the delete icon. Go back to any other tab like the settings to complete the delete process.
Your GitHub repository should be now accessible through ‘your-github-username.github.io/repository-name’.
To make the URL smaller and easier to remember you should add a custom domain or custom subdomain to your GitHub repository. The steps to do that are HERE.
STEP 4 – Install GitHub Desktop
Download GitHub Desktop from – https://desktop.github.com/
Go to the above link and click on the ‘Download for Windows’ button to download the GitHub Desktop EXE File. Once the GitHub exe file is downloaded run it and install the GitHub Desktop App.
STEP 5 – Setup GitHub Desktop
Once GitHub Desktop is installed, open it and then click on the ‘Sign In to GitHub.com’ option, after that signing using your name and email. In name enter your username and in email enter your email.
After that in ‘Lets get Started’ click on the ‘Clone a Repository from Internet’.
Enter the URL of your repository and note down the local path for the cloning. To get the repository URL go to your repository and copy the browser URL that is there. The URL should be in the format of https://github.com/username/repository-name/. Enter the repository URL and note down the local path, after that click on ‘Clone’.
Your GitHub repository will be now cloned to your computer Hard drive. Now make sure that everything is ok in GitHub desktop, like check whether you are in the right repository or not from the top left corner. If everything is ok then the setup of GitHub desktop is now complete, you can now proceed to upload and host your css and js files on GitHub.
To upload your files to your GitHub repository you will need to go to the Local Path of the repository in your local computer Hard drive, where the repository was cloned.
Once you are inside the repository folder create two new folder there named ‘css’ and ‘js’. Add two demo files in both of them, like new.css and new.js, one in each folder. After adding those open your GitHub desktop app, you will see the new files show up in the GitHub desktop app.
Now click on the ‘Summary’ input field and name the change you made, you can name it anything like ‘update’ or something. Enter a summary and click on the ‘Commit to gh-pages’ button.
Once it says ‘Committed just now’ or ‘Committed 1m ago’ etc. You can then click on the ‘Push Origin’ option at the top to upload your files to your GitHub repository. Wait for the ‘Push to Origin’ complete, once it does you will need to wait a few minutes for the changes to appear.
STEP 7 – Get Uploaded Files Link
Now once you have uploaded the css and js files to your GitHub repository, you can now access them by going to the URL that was given in the ‘Pages’ settings in your repository settings.
The URL will start with the format – https://your-username.github.io/repository-name/.
So if you made a ‘assets’ folder inside the local repository and uploaded it to GitHub, then you can access the files stored inside the assets folder by going to – https://your-username.github.io/repository-name/assets/your-files.
To make the URL easier to read or to remember you can connect a custom domain to your GitHub repository. Which will make the URL look shorter and easier to remember, for example – https://xcattx.com/assets/new.css compared to https://your-username.github.io/repository-name/assets/new.css.
Setup a Custom Domain for GitHub CSS & Js Hosting
Adding a custom to the GitHub files hosting will make the URL of the assets look less uglier and make the URLs easier to remember. Because by default the URL that GitHub gives is very long and it is not very easy to remember.
Now to add a custom domain name, you will need to first purchase a domain of your choice, you can also use subdomains if you want. After you have purchased a domain go to your domain settings ( It is different for different companies ). What you need to look for in the domain settings is ‘Manage DNS’ or ‘Manage DNS Record’.
Once you have found the DNS settings you will need to add five DNS Records there, these DNS records will point your domain name to GitHub so that you can connect that domain name with your GitHub repository.
You will need to add four ‘A’ Records and one CNAME if you want your domain to redirect from www to non-www domain.
First click on ‘Add Record’ and add a ‘A’ record, the type will be ‘A’ record, name would be your domain name or @, and the value will be theses IP Addresses. Use One IP Address per ‘A’ record, four A records in total. IP Addresses – 18.104.22.168 – 22.214.171.124 – 126.96.36.199 – 188.8.131.52
Add all four IP Address to four different A records, after that click add record again and add a ‘CNAME’ record, the name will be www and the value would be your domain name without www.
Once you have added the DNS records you will need to wait a few minutes to few hours for the DNS propagation to finish, so after a few hours go back to GitHub and open your repository, once you’re inside the repository go to its settings, then go to Pages. Now in Pages settings scroll down to the bottom and there you will get the option to add your custom domain name.
Enter you domain name without www and click on save, wait for GitHub to verify whether you have successfully added the DNS records or not, if you don’t get any error and the see a green check mark then it means that your domain name is now connected to your GitHub repository, you can test it by typing your domain name in a incognito tab, if you see a 404 GitHub page then it means that the custom domain has been successfully connected.
This means that you can now access your css and js files that you hosted on GitHub by typing your own domain name instead of the default URL that GitHub gives. In our case it will be – https://mydomain.com/css/new.css or wherever you have your files uploaded to.