Where to upload your files 🗄 to use them via the link 🔗 (JS, CSS, Fonts, Images)
Tags: webdev, beginners, tutorial, javascript
Published: 2021-06-08 17:15:55

<h1>Introduction</h1>

>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] (https://cdnjs.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg4vi74ewip876mb1h9c.gif)

Here, 2 Internet services come to the rescue: <strong>GitHub</strong> and <strong>Pinterest</strong>.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8zhahfh0ykuctapgtae.gif)

And so let's get started.

<h1>Images</h1>
<strong>1.</strong> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmqoa9cc707d9fwojffc.png)

<strong>2.</strong> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cbfs90fsx69ldzch1fi.png)

<strong>3.</strong> Once you have selected an image, you need to `create a board` (folder) to which you will `upload your image`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owfcdmzxkslyd9mq6g5d.png)

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

<strong>4.</strong> Then, on your account page, open the file you downloaded and click on your image.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tumxtdal7qzyurzl1vnt.png)

<strong>5.</strong> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zikqad0futx5edcdjy0d.png)

>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.

<h1>Fonts</h1>
In order to use our fonts via the link, we will need to use GitHub and [GitHack] (https://raw.githack.com/).
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](https://raw.githack.com/) is more convenient.

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

<strong>1.</strong> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kgcin3y3ignw1atve1x.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hz1aa1in1d09ob3rw2x.png)

<strong>2.</strong> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfrgp96b4hytwsue3dfj.png)

<strong>3.</strong> We `insert the link` to the site [GitHack] (https://raw.githack.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opm49bt111jt609fi7ru.png)

<strong>4.</strong> And you just need to paste it into your css file via `@import`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp65zgwqmklj6bqemapb.png)

That's all
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh8acgrlxenwnme5raq4.png)

<h1>Javascript</h1>
>Here we have exactly the same approach as with `fonts`.

<strong>1.</strong> We just upload the files we need to a folder and upload it to GitHub.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b4htrfxbw7mg1d8aevi.png)

<strong>2.</strong> 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](https://raw.githack.com/).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0v6teghh87iaxdbyvi30.png)

That's all
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk50c6ziz8kt2v8qyjzv.png)

<h1>The End</h1>
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb17cjjvc41t3mlyvadc.gif)