How to Practice and Free Put JS Files, CSS, HTML on the Internet

Web designer or web programmer, will surely know the name of JS and CSS, in 2 languages of this program there is a method called external script / external css. Using an external file method has its own advantages, one of which allows the programmer to read easily the program code he created. Here is an example of external css and js already in hosting online so that can be read browser as part of website.

There may be many articles out there that discuss "How to put JS and CSS Files on the internet", but in this article we do not use google drive service which I think is quite complicated, and I've tried many tutorials on the internet. which ultimately makes the headache and useless.

What should be prepared to follow this tutorial is the GitHub account, which I'm sure all programmers have heard of it, visit the following link to register GitHub, and I'm sure registering github is something that is easy for the programmer level (if hard, try searching on google). The following are the steps of hosting JS and CSS files for free.

Creating Repository

The image below is the start page at login, and in the red box there is a link that aims to create a new repository, can also pass this stage "Create Repository" if you want to put the file in an existing repository.

Fill in the name and description (optional). red-box explanation in the picture above, we can only choose public if the account is free, and for under it again I do not understand (related to license). When finished click Create repository.

If after creating the repository find the page as the picture above, just click README (red box), it aims to create a README file. Probably because we previously did not mark "initialize this repository with a README" when creating the repository (for that try yourself).

After that we fill the README that can be filled or not, and can simply click "Commit new file" (red box), until here we have created a new repository ready in the contents of JS and CSS files.

Uploading JS and CSS Files to GitHub

After all the steps make repository and README finished, then we will be directed to the repository page, now it's time to upload the JS and CSS file we have prepared, just look at the picture below to facilitate the next step.

There is a file upload button, click that button and after switching page click "choose your file" to select the file you want to upload. To select multiple files, block the desired file using CTRL + Click / SHIFT + Click. Once everything has finished uploading, click "Commit Change".

Using RawGit

Although this tutorial has not been uploaded, we still have not get the JS and CSS files that can be read by the browser as part of our website and can be used, this is RawGit function to get URLs JS and CSS that can be read browser.

First visit rawgit.com

Next copy the url file to GitHub by right clicking on the file, as shown below.

Production Link

https://cdn.rawgit.com/yogojaya/hostfile/fc8f4cf3/jquery.min.js
https://cdn.rawgit.com/yogojaya/hostfile/fc8f4cf3/style.css
Developer Link
https://rawgit.com/yogojaya/hostfile/master/jquery.min.js
https://rawgit.com/yogojaya/hostfile/master/style.css

Note : URL differences on the left and right can be seen from the title and description.

The advantage of using GitHub and RawGit is that it allows us to directly edit JS and CSS files in GitHub without uploading the file again, if you want to get the production URL just copy and paste the GitHub URL into Rawgit, while for the development of the URL will not change as it will be updated automatically.

Although I always use the production URL and not the development URL because it can not wait for RawGit to update the data, so we recommend using the production URL if you can not wait.

Well if you already get the URL JS and CSS, then now you can enter the URL obtained in the head tag like the example HTML script below.
Conclusion

By using GitHub and RawGit we do not have to hire hosting to only upload JS and CSS files owned, in addition to free access is also fast because RawGit uses CDNS server to speed up access of files accessed from various parts of the world.

If anyone ask me ?? Where is html hosting tutorial, sorry I did not show it, you can try it in the same way as hosting JS and CSS. If successful in the host when visited then the browser will display the page according to html format created, not html script.

As stated on rawgit.com that RawGit is a free service then there is no guarantee the server will live on and on or off anytime, so I do not think it's advisable to use RawGit for professional, business, and high-traffic websites.

With the conclusion of this conclusion, the article will surely end. Do not forget to share this article if it is useful and needed by others.

Thank You

How to Practice and Free Put JS Files, CSS, HTML on the Internet

No comments:

Post a Comment