Wednesday, 9 June 2021

How to Save CSS and JavaScript Files on GitHub

How to Save CSS and JavaScript Files on GitHub
June 09, 2021

 MIUSM-TECH.COM - GitHub is a website that provides free cloud-based hosting services. It allows you to upload and share code such as CSS, Javascript and similar files.


So the core of GitHub is Git, an open source project created by Linus Torvalds, which allows you to save CSS and javascript code or files to display on your blog or website.

 
  1. Register GitHub Account
  2. Creating a GitHub Repository
  3. Upload Javascript File to GitHub Repository
  4. Converting GitHub RAW To CDN
  5. Installing JavaScript to Blog
In this post, I'll show you how to create an account and use GitHub to store css, javascripts, or other files to code your blog or website.

The steps to use GitHub are very easy, as usual you have to register an account, create a repository, upload files and then we can install it on the blog.

Okay, let's look at the detailed steps below:

Register GitHub Account

The first step you have to register or create a GitHub account first. Please go to the GitHub.com site to register.

Register your self



Enter your new GitHub account details just like when you created your Facebook account. Next, verify the account via your email.

Creating a GitHub Repository

After completing registration and email verification, you will be directed to a page to create a new repository on GitHub.




Please fill in the Repository name with the repository name, select Public to save the file as well as your hosting. and to Initialize this Repository select it with add a README option Then click the Create Repository button .
Repository here is a folder as well as a folder on your computer.
Now you have registered an account and created a new repository. Next, let's upload the javascript file into the repository that was created earlier.

Upload Javascript File to GitHub Repository

Next let's upload the file to GitHub. For example, here I create a repository named miusm-tech.com and the file we will upload is named miusmtechsafelink.js .




On the repository page (in this example it is named miusm-tech.com) please click Add file > Upload file .



click choose your file then look for the file you want to upload on GitHub (in this example I uploaded a javascript file called miusmtechsafelink.js) . Once selected then click the Commit change button .




If the file you uploaded was successful, you will see a new file in the repository.

Converting GitHub RAW To CDN

To install javascript from GitHub to our blog, we must first know the link or URL of the Raw file that was uploaded earlier, then we will change it to CDN.

To get the raw file link on GitHub, please click on the file that we uploaded earlier, the miusmtechsafelink.js file then the page will look like below:




Then we click the RAW button , it will be directed to our raw file link. Please copy the link in the browser address bar, something like this:
https://raw.githubusercontent.com/MIANIRFANULLAHSHAHMARWAT/miusm-tech.com/main/miusmtechsafelink.js
Well, then we first change the raw link into a CDN. So that we can put it on the blog. The way we use the service from raw.githack.com




Please visit raw.githack.com , then paste the raw link that was copied earlier on the top form, then two GitHub cdn links will appear below it.




We copy the cdn link on the left, namely Use this URL in production . An example of a link like this:
https://rawcdn.githack.com/ongkie21/terkuakcom/117bc9c0ab836769cb6311960015b0343cf26d83/terkuaksafelink.js

Installing JavaScript to Blog

After converting raw to cdn, then we can install it on the blog. Examples like this:
<script src="https://rawcdn.githack.com/MIANIRFANULLAHSHAHMARWAT/miusm-tech.com/d30dbe404bca2d5e935af5d06c2f9755614fa19c/miusmtechsafelink.js" type="text/javascript"></script>
The part I marked is a link from our cdn file on GitHub, Please change it to match your link.

Well, that's how to Save CSS and JavaScript Files on GitHub . please understand the steps little by little, if there is something you don't understand, don't hesitate to ask in the comments below.

I end this post.
See you...
Share This :
SUBSCRIBE TO OUR NEWSLETTER

No comments: