Where to upload your files to use them via the link (JS, CSS, Fonts, Images)

Posted on

Introduction

This article is intended for beginners, I understand that for experienced developers this topic may not be interesting, but for beginners it can help.

During the development of our projects, we constantly use images, fonts, CSS and JS libraries. But as a rule, we use them locally, or connect them via a link from cdnJS or from the developer’s site.

But what if you don’t have the ability to use the files locally (let’s say you make your project in CodePen and you don’t have a PRO account) or you have your own custom CSS or JS library and you can’t link to them, because you haven’t uploaded it anywhere. And if you have a custom font, or it costs money and you downloaded it in a not quite decent way?
Alt Text

Here, 2 Internet services come to the rescue: GitHub and Pinterest.
Alt Text

And so let’s get started.

Images

1. Here everything is simple, we register in Pinterest and go to your profile page. In the lower right corner, click on the round button +, then select + Create a Pin.
Alt Text

2. After that, you will see a page where you need to upload your image and give it a name (this is not necessary).
Alt Text

3. Once you have selected an image, you need to create a board (folder) to which you will upload your image.
Alt Text

After that, you can save the image to your account.

4. Then, on your account page, open the file you downloaded and click on your image.
Alt Text

5. As a result, your image will open to the entire page and you will only need to copy the link and paste it into your project.
Alt Text

You may ask, why try so hard, why not just upload the image to your social networks and that's it. But the problem is that the link from social networks is not long-lasting, and even more so social networks crop the image quality more strongly.

Fonts

In order to use our fonts via the link, we will need to use GitHub and GitHack.
GitHuck serves raw files directly from various source code hosting services with proper Content-Type headers.

Of course, there are other similar services, but in my opinion GitHuck is more convenient.

Also, among other things, we will need to create a css file in which we will link to our fonts.

1. We need to create a folder where we will upload our fonts and a css file in which we simply specify the paths to our fonts.
Alt Text
Alt Text

2. Next, we upload all this to GitHub (better create a separate repository) and go to the page of our css file (I called it fontLinks.css) and copy the link from this page.
Alt Text

3. We insert the link to the site GitHack in the upper input. And at the bottom you are offered a processed link for production and for development (you can take any one).
Alt Text

4. And you just need to paste it into your css file via @import.
Alt Text

That’s all
Alt Text

Javascript

Here we have exactly the same approach as with fonts.

1. We just upload the files we need to a folder and upload it to GitHub.
Alt Text

2. After that, we go to the GitHub repository where we climbed our files and open the page of our js file.
Copy the link and paste it into GitHuck.
Alt Text

That’s all
Alt Text

The End

Comrades, I decided to write this article primarily for beginners who occasionally encounter similar problems when they do not know what service to use to upload their files there and use them by link.

If I had met such an article earlier, it would have helped me save time and nerves that I spent searching for a solution to this problem. For I had no acquaintances who could advise such a thing. But I hope it will help you. See you later, Friends.
Alt Text

Leave a Reply

Your email address will not be published.