Ok, we’ve cloned the GitHub lab-brackets-git repository to a local directory and we’re managing the repository with Brackets using the Brackets-Git extension.
The next thing we will do is modify the README.md file, add some folders (containing images), commit the changes to the master branch (the only branch we have at the moment) and then push all the changes back to the GitHub remote repository.
Make sure the lab-brackets-git project is open in Brackets; it should look like Figure 5.15.
Now right click in the left sidebar and select new folder (Figure 5.16):
Call the new folder 11-resources. Now create another folder inside this new folder called 02-images (i.e. \lab-brackets-git\11-resources\02-images). This is just my convention for naming folders on a website—if you’re interested in the thinking behind it, I explain it here.
Back in Brackets the system should have detected the change and it will be showing it in the file tree (make sure the 11-resources and within it, the 02-image folders are expanded; just click them if they’re not). It should look like this, Figure 5.17:
If Brackets hasn’t automatically refreshed (sometimes it doesn’t with networked files), right click the left sidebar and select or just hit . The Brackets-Git pane (light grey at the bottom) is now showing an untracked file. In my case:
This is good, it means that Git has detected the file but doesn’t yet know what to do with it (it’s a new file as far as the repository is concerned).
Now let’s modify the README.md file that GitHub created for us.
GitHub likes README.md files; it will automatically display the contents of it on the repository home page. The .md extension means the file is written in the markdown language.
Markdown is a simple text formatting language (markdown is actually a mark-up language—go figure), it uses standard keyboard characters to display headings, emphasis, lists &c. even basic HTML. GitHub uses a slightly enhanced version (called GitHub Flavoured Markdown) that can display code fragments and link to issues and users within GitHub. I give a summary of markdown and Git Flavoured Markdown in appendix c).
In Brackets, double click the README.md file to open it.
Replace the default text with the following:
# A PracticalSeries Publication <p align="center"> <img src="11-resources/02-images/cover.png"> </p> The **Practical Series of publications** is a website resource for web developers and engineers. It contains a number of online publications designed to help and explain how to build a website, how to use version control and how to write engineering software for control systems. ## lab-brackets-git: How to use Brackets-Git This is a demonstration (teaching) repository that explains how to manage a GitHub repository from within the Brackets text editor using the Brackets-Git extension.
|Code 5.1 README.md file contents|
Clickto save the file.
If you have the markdown preview activated (), the README.md will be displayed as it will appear on GitHub at the bottom of the screen (Figure 5.18):
In the Git pane, we now have two files listed that need attention:
The next thing to do is commit the changes (this accepts the changes and puts them in the local repository).
To do this, tick the boxes to the left of each file (or the single tick box at the top to select all) and click thebutton, it looks like this (I’ve highlighted the boxes and buttons):
The Git commit dialogue box will open showing the changes (deletions in red, additions in green). Enter the following commit message:
Cover image added and README updated from default
Clickto accept the changes. The Git pane will now show :
Nothing to commit, working directory clean
This is exactly what we want; we have successfully modified the working files and committed them to the local repository.
The next thing is to update the remote repository on GitHub to match our local repository. This in GitHub terminology is called a push.
It’s easy to do from Brackets, just press thebutton:
The number in brackets indicates the number of commits that will be pushed to GitHub (in our case, just one).
This opens the Push to remote dialogue box:
After this you should get a successful Git push response (just clickto close it).
Now go back to the GitHub website and navigate to the lab-brackets-git page (refresh it with if you already have it open).
Here we can see the changes we have made, the README file is being displayed with the changes we made in Brackets, there is a 11-resources/02-image folder and the cover.png image is being displayed on the README.md section.
If you’re seeing this, it’s worked.