A quick hack to using local images on Codepen
Tags: github, html, css, codepen
Published: 2020-06-27 10:55:11


Handling files is a pro feature in **Codepen**. Free users can't add local files like images to use them in the editor.

In this quick **3 steps tutorial**, we'll learn to host an image on **Github Pages** and use it in Codepen.

## Step 1: Upload an image to a new repository.


![creating a github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2i46pp6ddz0fbqzlzps.jpg)

 - Click on the \+ button (top right) then *New repository*

![choosing a github repository name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy3pr92gspyibu19vtup.jpg)

- Add a repository name (I've called it *hosted-assets*). Then leave the other options to default and click on *Create repository.*

![ click on upload an image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywqbpgq2t3ae30k9po5k.jpg)

* Click on *uploading an existing file.*

![ upload an image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzswh3sbikg93ebxnjln.jpg)

* Either drag files from your PC or click on *choose your files* to upload. Then click on *Commit changes*.

## Step 2: Host your repository with Github Pages.

![ go to settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx1szrg1i31sh090ge56.jpg)

As you can see, *pink-kitty.jpg* has been added to the github repository.

* Click on Settings.

![update github pages source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk27zi5neabreacr44la.jpg)

* Scroll to Github Pages and change the source from none to main branch then click on the *Save* button.

![get the link to github pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0mifp5unbwxld06nhsa.jpg)

The page will reload, and on scrolling back to the Github Pages section, you'll find the newly created link.

* Click on the link to go to your Github Pages.

![404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v70g7exinjcm0h3n3bm7.jpg)

The page returns 404 not found because we haven't set a home page.

![add filename to path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg23rrwdmysooe5e4j8q.jpg)

* Add your file name at the end of that url. In this case *pink-kitty.jpg*

And your image should pop up.

## Step 3: Use the uploaded image in codepen.

* Copy the previous link and replace the local image src in your codepen. For example replace:

`<img src="./pink-kitty.jpg" alt="pink kitty">`

with:

`<img src="https://ljc-dev.github.io/hosted-assets/pink-kitty.jpg" alt="pink kitty">`

### And tada 🎉!!! 

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4xcyssb4tc4x15i9101.jpg)

## Tips:

* Be careful to use the Github Pages link and not the Github repository link.

* The next time you upload an image, you can click on *Add files* in the home of your repository and *Upload files.*

* There should now be an *Environment* section in the home of the repository with *github pages*. Click on it to view deployments and your live site.

* To add a folder, either drag the folder into the upload window if you are on a PC or follow [this stackoverflow solution to adding folders.](https://stackoverflow.com/questions/12258399/how-do-i-create-a-folder-in-a-github-repository)

### Update:

**@Pav1an** on Twitter has suggested a quick hack to make github host images 🔥 (doesn't work for other file types).

![Github issue hack ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fc0u8ezxobcxxh1cplq.jpg)

* Go to the homepage of one of your repositories or create one. 

* Click on the *Issues* tab and *Create an issue*.

* Instead of writing an issue report, drag an image to the issue box. Github will save the image as a png file and show a link in markdown format like this:

`![pink-kitty](https://user-images.githubusercontent.com/62596124/104592898-39710980-566f-11eb-8613-44762bcc233f.jpg)`

* Copy the image link and use it as the src for your image in Codepen. 

### Thanks for reading 😀🙏 !!!