This section assumes you already set up GitHub Desktop and Atom. If you haven’t, Chapter 2 can help guide you through this process.
In this section, you get your website working so that you can modify files on your local computer instead of on GitHub.com.
Modifying files on your local computer can be useful if you need to work on a project when you won’t have Internet access or if you need to browse a lot of files while editing files.
1. Cloning a repo in GitHub Desktop
1. Open GitHub Desktop and choose File ➪Clone a Repository on the menu bar.
You see a dialog box with three tabs; GitHub.com, Enterprise, and URL.
A nice alternative approach to cloning a repository when you have GitHub Desktop is to click the Clone or Download button on the home page of every repository. When you click the button, you see a flyout that includes an Open in Desktop button. Click that button to launch GitHub Desktop (if it’s not already running) and clone the repository to your local machine.
2. On the GitHub.com tab of the Clone dialog box, your repositories auto-fill for you from GitHub.com.
If your GitHub.com repositories don’t auto-fill in the Clone dialog box, it probably means you’re no longer signed in to GitHub.com in GitHub Desktop. You can log in by choosing GitHub Desktop o Preferences from the top menu bar. Click the Accounts tab and sign in. If it appears you’re logged in but your repos are still not showing up, try signing out and signing back in.
3. Choose your personal website repository and choose where you want it to be stored on your local machine.
I chose the default path as the place to store the repository on my local machine.
4. Click Clone.
GitHub Desktop refreshes with your repo information included.
2. Touring GitHub Desktop
GitHub Desktop offers a variety of features to help you with your development and interactions with GitHub.com. You can check out the GitHub Desktop User Guides at https://help.github.com/desktop if you need additional support beyond this book. Figure 4-5 highlights the top six features:
» Repository list: As you clone more repositories to your local computer, clicking the Current Repository drop-down list reveals all the repositories that you have on your local computer, enables you to quickly switch between them, and gives you a quick button to add a new one.
» Branch list: The branch list gives you a quick overview of all the branches that you have checked out on your local computer, as well as a button to quickly create a new branch.
» Pull request list: One the same drop-down list as the branch list, you see a second tab that lists all the pull requests that are open on this repo.
» Sync project button: As you start to make changes and/or changes are made on the repo outside of what you’re doing on your local machine, you will need to sync. Because Desktop hasn’t detected any changes made on GitHub.com or your local computer, the option presents itself as a fetch to start. If you start to make changes on your local machine, you can choose to push your local changes to GitHub.com. If you start to make changes on GitHub.com, you can choose to pull those changes to your local machine. If you create a repository on your local machine and it isn’t on GitHub.com yet, you can choose to publish your project to GitHub.com.
If you do not push your changes to GitHub.com, they won’t be available for other people and if your computer were to crash, you would lose all your work. We highly recommended that you push your code often.
» Changes list: As you start to make changes to your code, the files that you’ve added, deleted, or modified show up in this changes list. You can click each file to see the diff to the right. When you’re ready to commit to those changes, you can add a Summary and Description and click the Commit to master button. At that point, you can push your changes to the branch that you’re on using the Sync project button.
You should always double check which branch you’re on before you commit and push your changes. You can undo commits and pushes, but avoiding it is best because the process can get hairy really quickly.
» History list: Next to the changes you find the history of this repo. The history includes activity from your local machine that has been synced with GitHub.com and activity from GitHub.com that you may have never done on your local machine. When you click one of the events, you see a list of activity that happened.
3. Opening your repo in Atom
To edit your files on your local computer, you can use a number of applications, including Atom, Visual Studio Code, or even TextEdit. In this book, we use Atom.
To open your repo in Atom:
- Open Atom.
You see a blank window.
- Choose Fileo Add Project Folder from the top menu bar.
A file finder dialog box appears.
- From the file chooser, open the folder for your repo and click Open.
Your project is now open in Atom.
4. Touring Atom
Atom is primarily a code editor, but it also has features that make coding on GitHub repos much easier. If this section doesn’t offer enough detail for everything you can do with Atom, make sure that you check out the docs. In particular, the Atom Flight Manual is always updated to reflect the newest features (https:// atom.io/docs). Figure 4-6 shows the top six features:
» File list: On the left side of Atom is a list of all the files that you have in your repo. If you click a file, it opens in the center code editing area.
» Code editor: To the right of the file list is the code editor where you can write or modify code.
» Branch list: At the bottom right corner of Atom is a branch chooser. Right now, you are on the master branch of your repo. If you click the branch, a menu pops up, allowing you to choose between branches or create a new one.
» Sync project button: Atom supports syncing your project with what is on GitHub.com.
» GitHub panel toggle button: If you click the GitHub button, the GitHub panel appears in your Atom window. This panel specifically lists and supports pull request actions.
» Git panel toggle button: If you click the Git button, the Git panel appears in your Atom window as a second tab next to the GitHub panel. This panel specifically supports staging and committing changes, as well as viewing the history of changes on this repo.
Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.