First Digital Skills Workshop GitHub Workflow

GitHub Workflow

For this project, you and your partner(s) will be creating a code repository that is a copy of the main Indian Country repository. Since everyone in the group will be working on the same repository, somebody will have to create and be the owner of that repository. This person will be referred to as Partner A, and will have a few more responsibilities that Partner B(s) will be unable to perform. But don’t worry, everyone will have a chance to code! Tasks specific to Partner A will have an “(A)” in front of them while Partner B(s) will have an "(A)" in front of them (You can also run through these handouts by yourself, completing every step).

Part A - github.com

1. Go to github.com
2. In the search bar at the top-left of the page, enter the name of your repository, which will be something like "indian-country-ss22" (the last four characters are your semester (Fall(fs) or Spring(ss)), and the year).
3. You should be able to click on the repository name to get to its main page where there are 2 especially important tabs:
   • Code: The Code tab is the main page of a repo where you can see all of the files and folders that make up the digital project.
   • Wiki: The Wiki tab often provides useful information developers want you to know. The wiki tab in msu-anthropology/indian-country-xxxx links to the original Indian Country's Wiki, where there is a lot of useful information for working in this project. This is a convenient place to start looking for answers to any questions you may have.
     • [Tip: The Wiki for this project will only be available on the Main Indian Country Repository, and not your individual repository. Your repository's wiki will be empty unless you add something to it yourself.]
   • Settings: This third tab will only be visible to the owner of the repository, so will only be visible to Partner A in the repository that your group is about to fork. It is here that you can adjust many administrative tasks for your repo, such as inviting collaborators or putting your code on the web through GitHub Pages.
4. Fork your repo (must decide who is Partner A (A) and who is/are partner B (B) at this point). Partner A will be the owner of the repository, which means they’ll be responsible for a few tasks Partner B will be unable to perform such as the Settings, Pull Requests, etc.
   1. (A) In the top right hand corner of the repo, press the Fork button
   2. This should create a new forked repo named: “(A)username/indian-country-xxxx_”
      • Underneath your repo's name, it will state that it was forked from your semester's Indian Country repository. Something like: "forked from msu-anthropology/indian-country-ss22"
        • [Tip: you can click on this to to get back to your class's repo]
5. (A) The repository owner will add any collaborators (give your group members permission to work in the repo)
   1. (A) Go to Settings (remember only Partner A will have access to settings]
   2. (A) Go to the Manage access tab
   3. (A) Click the green Add people button
   4. (A) Search for your teammate’s GitHub username and add them to your repository.
   5. (B) Partner B(s) should get a notification in their email (check your junk folder) asking them to join the repo - accept the notification
   6. Now all teammates are able work with the repository (partner A will be able to tell if the link was accepted by checking the collaborator tab (refresh the page))
6. (A) The repository owner will then set up GitHub Pages.
   1. Go to Settings
   2. Go to the pages tab towards the bottom
   3. Change the source from None to main
   4. Don’t change anything else, and click the Save button. A link should automatically be created for a website showing your forked repository (takes a while to update). It is recommended to put this URL in the description of your repository for easy access.
7. (A & B) Both Partners should now clone the new repository to their local computer
   1. Go to the Code tab
   2. Click the green Code button and select Open with GitHub Desktop
   3. Follow any prompts to open GitHub Desktop

Part B - GitHub Desktop

1. Your GitHub Desktop application should automatically open after opening it with github.com
2. Familiarize yourself with the application
   • Fetch Origin - clicking makes sure that you’re working in the most current form of your forked repo – good for avoiding conflicts
   • Changes & History - lets you keep track of current differences in your local repository from the online repository, as well as the history of those changes.
   • Current Repository - shows the current repository you are working in. There should only be the repository you just cloned, unless you have worked in GitHub before.
3. Make sure that Atom is the default text editor
   • PC: File -> Options -> Advanced -> External Editor set to Atom
   • MAC: Github Desktop -> Preferences -> integrations -> External Editor set to Atom
   • Don't forget to save this setting
4. Click the Open in Atom button while in your repository

Part C - Workflow in Atom

Now that each of you have a copy of the repository on your computer, you can start making changes to the project. These initial steps could be completed by either partner, but to get used to things, only one person should be making changes at a time.

1. Familiarize yourself with Atom
   • Notice that the folders and files are the same here as on GitHub.com
   • Notice the the controls at the bottom right of the application, especially Fetch and Git.
2. Partners A & B will now take turns creating the necessary folders and files under the Project tab in the sites folder
   1. (A) Partner A will start by creating the project folder (this is all Partner A):
      1. Right click the AA-template folder – select Duplicate
         • Do not delete or rename this folder!
      2. Give the new folder the name of your project (you can make a temporary title and change it later)
         • Right click on the new folder, select rename
         • No spaces or capital letters (e.g. Tel el-Amarna = tel-el-amarna)
         • Must press enter after typing in name
      3. Click on your new “project-name” folder to open it
         • Right click on AA-template.html and rename it to project-name.html (the same as the folder name)
         • Should now have two items within project-name.html:
           • img (folder) & project-name.html
             • The img folder has a placeholder image in it.
      4. Now push these changes using the following directions:
         • open up the git tab at the bottom right of the window
         • Fetch & Pull any changes (there shouldn’t be any since this is the first change to the repo, but it is a good habit to get into. (Pull will not appear this time with no changes to pull)).
         • click Stage All at the top, next to your unstaged changes
         • Enter a commit message like “creating project folder”
         • click the blue Commit to Master button
         • click the Push button that appears at the bottom
           • [troubleshoot: Try restarting atom & GH Desktop. Put a red sticky note up if this doesn’t work.]
   2. (B) Partner B will now edit project-name.html (this is all Partner B):
      1. In order to edit the folder and files created by partner A, you will have to pull what they did onto your computer:
         • Click the Fetch button located at the bottom-right
         • If the changes from before were pushed correctly, then the Fetch button should change to Pull this time. Click Pull.
      2. Now, navigate to your newly appeared project-name folder, and click on project-name.html.
         • Notice the <body> section that begins at line 22
         • In the <body> section, you will change the text (italicized here) in between the following tags with any new information you know (at the very least you can change the authors):
         • <h1>Subject Title</h1>
         • <h3>Community Name</h3>
         • <h4>Authors</h4>
      3. Partner B will also push their changes in the Git tab:
         • SAVE! - git will not notice your changes unless you save them!
         • Fetch & Pull any changes - still a good habit. Pull should not appear since you’ve already pulled changes.
           • ( In the future, it’s a good idea to coordinate what sections you are working on and when changes are being submitted in order to avoid conflicts!
         • Click Stage All next to your unstaged changes
         • Enter a commit message with something like “editing project HTML”
         • Click the blue Commit to Master button
         • Click the Push button that appears at the bottom
   3. (A & B) You can both now check to see if your repository is updated by checking the code on github.com, checking out the GitHub Pages link you made, or by opening your HTML file on your computer.
      • Go to your GitHub Pages link, or replace the relevant information in the following link to see what your web page looks like on GitHub Pages (add your semester and year in place of "xxxx", replace “project-name” twice, and don’t forget “.html” at the end): https://username(A).github.io/indian-country-xxxx/sites/project-name/project-name.html
      • You can also open your project's html using your web browser. We recommend checking most of your work using this method.
        1. You should be able to find your project file in your documents folder: documents -> GitHub -> Indian Country -> projects folder -> “project-name” folder -> project-name.html
        2. You should be able to right click and open this file using your standard browser. This will usually allow you to see local, SAVED changes made to the file immediately.
   4. You can see the new changes from Partner B are reflected on the GitHub.com repository, but Partner A will still need to fetch and pull the changes made by partner B to see the changes in their local repository. Partner A should do that now.

Part D - Create a codecademy.com Account

Now that you have a better understanding of the GitHub workflow, we can shift gears to learning how to write in HTML

1. Create an account for codecademy.com
2. Search for the following course in codecademy.com: Introduction to HTML
   • Run through the first lesson (16 exercises) of this course
     • Feel free to continue the course if you want to learn more!