Using Github as a Repository for your CSS Code and Statblocks

I am not a GitHub expert, but I'm quickly becoming an avid fan of using it for my CSS code for my worlds. Being able to access older versions has saved my bacon more times than I can count! No more having to rewrite code bits if I accidently over write a code section.   This is part two of my Creating WA CSS themes. Versioning and backups are essential when you create a theme!  
What you'll need:
A GitHub account (we'll have directions to help you set one up)
The GitHub desktop client (Not required - but makes things easier. This tutorial will use the desktop client)
Code, statblock, sheet, or text to store on GitHub

How to Set Up Your GitHub Repository

  1. Sign up for a free GitHub account
  2. Create a repository. (Basically a folder for your stuff.)   Here's how to create a repository  Use all lowercase letters and don't use spaces in your repository name.   For my CSS for my worlds, I usually make the repository private--unless I wish to share the code. For my hosted fonts, the repository needs to be public for the fonts to load.   Ensure you check the 'Initialize this repository with a Readme’, so you can set up the desktop version of your files easily.
  4. Download and install the GitHub desktop client (Windows and Mac). Then login to GitHub on the desktop client. And setup/link a folder for your GitHub archive on your computer.
  6. Clone the repository to your desktop by clicking clone and opening it in the desktop version of GitHub. Follow the prompts. 
    This syncs all the items you have in your repository and folder on your computer.    (For full details see the GitHub help page 'Cloning a repository from GitHub to GitHub Desktop'.)

Adding Files to Your Repository

  1. Copy the CSS code, statblock, or whatever else you want to make a versioned copy of into a text editor and save it in your GitHub desktop folder. Give the file a logical name.
  2. In the desktop client, navigate to your repository. The desktop client will show you what has changed or what new files are there. You can give a description of the changes. Click commit to master.
  3.  Then the screen will change. Click Push Origin. 
Now your file/info is backed up to Github. Easy, isn't it?   For more details see 'Contributing to projects with GitHub Desktop'.    

Updating Your Files

You can add new files or write over the one in your GitHub folder on the desktop.    Because I want to compare versions easily for my CSS, I usually save my new file over my old one. GitHub tracks the changes line by line.   Just save the changes on your computer, and your desktop client will prompt you to save the changes and push them to GitHub in the cloud.       

Accessing an Old Version

Both your online and desktop repositories have the version differences stored. See Viewing the Branch History for more details.
This little tutorial only touches a few of the basics on how to use GitHub, but should help you get started. And it's really all I've used so far for my CSS and statblocks.   There's a link on the side of this article for how to setup GitHub for hosting fonts.   Happy GitHubbing!

Cover image: Hacks and Help Cover by krzysztof-m


Please Login in order to comment!
Powered by World Anvil