DEV Community

Cover image for Where to upload your files ๐Ÿ—„ to use them via the link ๐Ÿ”— (JS, CSS, Fonts, Images)
Roden
Roden

Posted on • Edited on

Where to upload your files ๐Ÿ—„ to use them via the link ๐Ÿ”— (JS, CSS, Fonts, Images)

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

Top comments (13)

Collapse
 
mrrcollins profile image
Ryan Collins

Check put Backblaze's B2 cloud storage. 10GB for free, and you can link directly to the file. Once you hit 10GB, storage is 1/2 cent a gig.

Collapse
 
kerthin profile image
Roden

Thank you for advice. I'll definitely try it. Moreover, 10 gigabytes is a lot.

Collapse
 
mrrcollins profile image
Ryan Collins

There are some traffic costs, but it's so low that they haven't charged me yet.

Collapse
 
ibnsamy96 profile image
Mahmoud Ibn Samy • Edited

This line on raw.githack.com made me laugh ๐Ÿ˜‚

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

I believe these alternatives work in some what the same manner

Dropbox
Google Drive

Collapse
 
kerthin profile image
Roden

I don't know about Dropbox, but I can't do this with Google Drive (I've already tried to do this)

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Not that I'm a big fan of google but what I do is:

Sign into google-drive

Navigate to the image you would like to share

Right click on the image

Select "Get link"

Change permissions from "Restricted" to "Anyone"

Copy link and use it :)

As an example here is a link to a pic from my drive account
drive.google.com/file/d/1Ff4FQ5C-J...

I'm not sure if google puts any time limits on link lifetime

Hope this helps

Thread Thread
 
kerthin profile image
Roden

Thank you for showing me another opportunity to get links to images. I just meant that I couldn't get links to js and css files that could be used in the code.

Thread Thread
 
cjsmocjsmo profile image
Charlie J Smotherman

Yep, google-drive will work for images but not css and js files. The system is looking for properly named links with extensions of ".css" and ".js" , google-drive links do not provide that. Good read, sorry for the noise.

Collapse
 
devinwo81267665 profile image
Devin Wood

Ozpaperhelp.com is one of the top most assignment help organizations which is spread out across the geographical boundaries. And we would be glad to inform you that we have extraordinary specialists who are always available to guide you for making specific assignment reports in every situation and every season at an affordable price. We provide the project reports on various topics like Tableau Assignment help. The students who are pursuing the engineering course and want to score the highest grade in their academics, should visit our webpage. Tableau Assignment help from our professional experts who have large-scale knowledge and experience in working on various Tableau projects. Our squad will finalize the assignment within the given timeline and precisely as per the guidelines provided. We confirm that we deliver quality and correct solutions for all Tableau coursework projects. Academic help service providers like Ozpaperhelp.com are the one-stop program to maintain Tableau assignments, across kinds and subjects. If you are not sure how to choose an online educational help agency, examine the client ratings. The one who has the highest customer satisfaction and has accepted babble evaluations from clients is the one to go for. Also, check the limitations and dedications of the team of writing professionals associated with the writing agency. So, when you have to purchase a Tableau assignment from a trusted website, you receive the following benefits-

Assignments curated by concerned experts
Papers filled with correct data and visual solutions
Completed assignments delivered within the time range provided
100% plagiarism-free solutions

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

jsdeliver works with plain Github.

Collapse
 
akshatsinghania profile image
Akshat Singhania

yoo russian dev boii

Collapse
 
klesinie profile image
klesinie • Edited