Setting Up GitHub and Atom
- I'm using Firefox
- You can use Chrome if you don't care about privacy.
- Please don't use Safari / Edge / Internet Explorer for class work.
What is GitHub? It's predominantly a development platform for managing complex code bases but you can also host web pages on it for FREEEEEEE!
Sign up for GitHub
If you have already set up a GitHub account for a previous class (such as ATK201, ATK301 or ATK302), skip to Create GitHub Repository
- Go to https://github.com/
- Create an account. The username you put in will be the beginning of your URL, so you can choose a short name - or your full name. It’s up to you.
- Choose FREE subscription.
- Click submit (you don’t have to fill the extra personal stuff out).
- Verify your email address by checking your email.
Create GitHub Repository
A repository is like a folder with a record of its history. This is where you will be storing and sharing your class work.
- Go to the main GitHub page: https://github.com/ and make sure you are logged in.
- Click on the green "New" button
- Type "ATK303" (without the quote marks) under "Repository Name*"
- Make sure the "Public" button is selected (your pages won't be visible if you keep them private).
- Click the green "Create Repository" button.
Create a test file
- In your new repository, click the link "creating a new file" under "Quick setup"
- In the "Name your file..." field, type HelloWorld.html
- In the "Edit new file" area, type "Hello World!"
- Scroll to the bottom and click the green Commit New File button
You only need to do this once when you first create a new repository!
- Click on the Settings tab (with gear) at the top of your repository page.
- Scroll down to the GitHub Pages section
- Select master branch in the drop down menu
- Click on the <>Code tab to get back to the main page of your repository
Check your test file online
- Open a new window in your web browser and type in the link of your new page.
- The format is: YourGitHubUsername.github.io/ATK303/HelloWorld.html
- If it doesn't work, check your spelling. Upper and lower case letters are different.
For example, if your file is called "HelloWorld.html", typing it in all caps (HELLOWORLD.HTML) will not work!
- Make sure you use your actual GitHub username at the beginning of the link, not "YourGitHubUsername"
Install GitHub Desktop
- Go to https://desktop.github.com/
- Download and Install GitHub Desktop
Download Your Repository
For this class you will be working on a local copy of your repository on your personal computer, so you need to download it
- Go to the main page of your ATK303 repository if you don't still have it open (go to https://github.com/, click on the ATK303 link in the Repository column on the left.
- Click the green Clone or Download button
- Choose the "Open in Desktop" link
- Allow GitHub Desktop to open the download
- In the Clone the Repository popup, click the Choose... button to pick where the repository will go on your computer.
- Then click the blue Clone button
We will now set up Atom to open and work on the local repository on your machine.
- What is Atom? It's a versatile open source text editor that can be used for software and web development!
- Download and Install Atom: https://atom.io/
- Open it up!
- Packages extend the functionality of Atom. For example, if you want to use Atom as a web development tool, you can install packages that are specific to web development.
- Directory of Atom Packages: https://atom.io/packages
- Installing Packages
- Go to Atom -> Preferences... (this opens the Settings window)
- Click on Install in the left column
- Type the name of the Package you want to install in the Search box
- Click on the blue Install button to install the package
- This adds a menu item so you can right click on a web page you're working on locally and check it in a web browser.
- Install it!
Create Atom Project
- Projects are a folder (or folders) of documents that are grouped in a window in Atom
- Create a new Project in Atom: File -> New Window
- Select the ATK303 folder you downloaded from GitHub as your project folder: File -> Add Project Folder...
- A tab called "Project" should open up on the side of the screen.
If it doesn't appear, go to Packages -> Treeview -> Toggle
- You should be able to see your local ATK303 folder with the HelloWorld.html file inside
- Right click on the ATK303 folder in the Tree View and select New File
- Enter index.html in the popup
- The blank file index.html should now be open in your Atom window
- Write a sentence or two about something you're interested inside index.html
- Save index.html
Commit and Upload Your New File
- Click the Git tab in the side bar of Atom
- Your new index.html should be listed under Unstaged Changes
- Click the Stage All button next to "Unstaged Changes"
- Write "New index file" in the Commit Message box.
- Click the Commit to Master button
- At the bottom of the Atom window, there should be a button labeled ↑ Push 1, click it.
- Your file should now be up online!
- Check it in a new browser window at: YourGitHubUsername.github.io/ATK303/index.html