1. Creating an account and repository

If you're new: you want to go to https://github.com/ and sign up, seen in the top right corner. They’ll have a “payment plan” screen at one point, but you don’t need to pay. Just use the free version.

Once you’re signed in, you should be brought to the home page.

The first box in the center should have the title “Start a new repository.” Give your repository a name, and then select Public before creating the repository.

While you shouldn’t need to create new repos (short for repository) for LD after this, creating a new repo will then be in the left sidebar if you are on the main page.

If you’re not new: you can easily make a new repo by clicking on the “New” button in the left sidebar. There, it’ll have the default repo creation screen. Make sure that the repo is public and feel free to add a README.

2. Adding your CSS files to the repository

After clicking “Create repository,” if it’s your first time, it’ll bring you to a new page. Otherwise, if you’re not new to Github, it’ll take you to the main repo page. Just make sure that all your CSS files end in .css; otherwise it won’t work.

If you're new: look at the “Quick setup” section, and then click “uploading an existing file.” It’ll direct you to another page. Upload whatever CSS you want.

At the bottom, it’ll have you give a name to the changes you’re making, and a lengthier description of what exactly is being changed. It’s good practice to do this; it’s just for keeping a changelog.

After committing, this should bring you to the main repository page. There’ll be a suggestion to create a README there; it’s to put an introduction page on the front of the repository. Since your repository must be public, it’s also a good idea to make at least a small blurb about your repo.

After initial setup: you can upload files from the main repository page by clicking “Add file” and selecting the upload option.

3. Getting your files to work on Lioden

There are two ways to do this. The first way I will be covering is easier.

Using a CDN

CDN is short for “Content Distribution Network.” It allows users to download files faster via having multiple data centers across the globe. This just requires changing a link, much like how we would with Dropbox.

There’s multiple CDNs that you can use, but the only one that I have tested so far is JSdelivr. If you’re interested in more about them, they have information readily available on their site.

The link above will take you directly to their Github conversion page. In your repo, click the CSS file you want to use. Take the link from that page, and use the converter. Paste the new link into the link rel, and it should work. Voila!

However, do note that not all CDNs are safe. Be careful online!

Using Github Pages

If you’d rather avoid using a CDN, no problem: you can use Github itself!

Github has a feature called Github pages that will let you host a website itself in Github, so it’s perfect for getting the raw CSS files we need.

Go into your repo and click on Settings. There should be an item in the sidebar labeled “Pages”. Click that.

Under the Branch section, where it has a dropdown menu that says “None,” select “main” from there (or whatever the main branch of your repo is called! “main” is the default name for it). Then save.

Reload the page, and there should be a banner at the top of the Pages settings saying “Your site is live at {LINK}.”

To access the raw file, take the link from above, and add on the filename of the CSS you want to get the link for at the end.

For example, here is my link: https://pluto-ld.github.io/lioden-css/
To get the CSS link: https://pluto-ld.github.io/lioden-css/ultionew.css

The bit at the end is the filename for a file in the repo. Paste the new link into the link rel, and it should work.