Version control was invented for programmers working on complex coding projects. But it is good practice for any project \u2014 even if all you are managing are versions of a simple website, or a series of spreadsheets.<\/p>\n
This tutorial borrows from the Workflow and GitHub<\/a> lession in Jeremy Rue\u2019s Advanced Coding Interactives<\/a> class \u2014 see the further reading links below.<\/p>\n The version control software we will use is called Git<\/a><\/strong>. It is installed automatically when you install and configure GitHub Desktop<\/a><\/strong>. GitHub Desktop is a point-and-click GUI that allows you to manage version control for local versions of projects on your own computer, and sync them remotely with GitHub<\/a><\/strong>. GitHub is a social network, based on Git, that allows developers to view and share one another\u2019s code, and collaborate on projects.<\/p>\n Even if you are working on a project alone, it is worth regularly synching to GitHub. Not only does this provides a backup copy of the entire project history in the event of a problem with your local version, but GitHub also allows you to host websites. This means you can go straight from a project you are developing to a published website. If you don\u2019t already have a personal portfolio website, you can host one for free on GitHub.<\/p>\n Download the files for this session from here<\/a>, unzip the folder and place it on your desktop. It contains the following folders and files:<\/p>\n Here<\/a> is a more extended GitHub glossary.<\/p>\n Navigate to GitHub<\/a> and sign up:<\/p>\n Choose your plan. If you want to be able to create private repositories, which cannot be viewed by others on the web, you will need to upgrade to a paid account. But for now select a free account and click At the next screen, click the Now view your profile by clicking on the icon at top right and selecting Here you can add your personal details, and a profile picture. For now just add the name you want to display on GitHub. Fill in the rest in your own time after class.<\/p>\n You should have been sent a confirmation email to the address you used to sign up. Click on the verification link to verify this address on GitHub.<\/p>\n Back on the GitHub website, click on the Now click on the At the next screen, click At the next screen click Open the GitHub Desktop app. At the opening screen, click Then add your GitHub login details:<\/p>\n You will then be sent a new two-factor authentication code which you will need to enter:<\/p>\n At the next screen, enter your name and email address if they do not automatically appear, click Then click The following screen should now open:<\/p>\n Your workspace contains one repo, which is an automated GitHub tutorial. Complete this in your own time if you wish. It will repeat many of the steps we will explore today.<\/p>\n Back on the GitHub website, go to your profile page, click on the Fill in the next screen as follows, giving the repository a name and initializing it with a You should now see the page for this repo:<\/p>\n Notice that there is an Click on You should now be sent to the GitHub Desktop app, where you will be asked where on your computer you wish to clone the repo folder. Choose a location and click Now you should be able to see the repo in the GitHub Desktop app:<\/p>\n You should also be able to find the folder you just cloned in the location you specified:<\/p>\n It contains a single file called Add the file Click on that tab, and you should see the following screen:<\/p>\n GitHub Desktop highlights additions from your last commit in green, and deletions in red.<\/p>\n Write a summary and description for your commit, then click Back in the So far you have committed the change on your local computer, but you haven\u2019t pushed it to GitHub, To do that, click the Go to the project page on the GitHub website, refresh your browser if necessary, and see that there are now two commits, and the Back in GitHub Desktop, click on the new branch button at top left, and create a new branch called You can now switch between your two branches using the button to the immediate right of the new branch, which will display either Here I am working in the test branch, having made the edit below:<\/p>\n While in the Save the file, then return to GitHub Desktop to view the changes in the Now switch to the Switch back to Click the You should now be able to see the pull request on GitHub:<\/p>\n Click If another collaborator had made this pull request, you might merge this into However, you made this pull request, so Make sure you are in the In your In this branch, click the Now go to the GitHib repo page, refresh your browser if necessary, and notice that this branch now exists there:<\/p>\n Now go the the url Markdown<\/strong><\/a> provides a simple way to write text documents that can easily be converted to HTML, without having to worry about writing all of the tags to produce a properly formatted web page.<\/p>\n Haroopad<\/strong><\/a> is a Markdown editor that we will use to edit the Bootstrap<\/strong><\/a> is a web framework that allows you to create responsively designed websites that work well on all devices, from phones to desktop computers. It was originally developed by Twitter.<\/p>\n (I used Bootstrap to make this class website, writing the class notes in Markdown using Haroopad.)<\/p>\n Open Now edit to the following:<\/p>\n This should display in Haroopad like this:<\/p>\n See here<\/a> for a more comprehensive guide to using Markdown.<\/p>\n Save With Github Desktop in the You now have a template Bootstrap page with a navigation bar at the top. Open in a browser, and it should look like this:<\/p>\n The links in the dropdown menu are currently to pages that don\u2019t exist, and the email link will send a message to me. Open in a text editor to view the code for the page:<\/p>\n Open a new file in Haroopad, edit to add the following and save into your repo as From the top menu in Haroopad, select We just want to take the text from the web page and copy it into our Save In GitHub Desktop, view the uncommited changes, Now switch to the Both the Follow the link we included in the W3Schools has a tutorial here<\/a>, and Jeremy Rue has a tutorial here<\/a>. The key to responsive design with Bootstrap is its grid system, which allows up to 12 columns across a page. This section<\/a> of the W3schools tutorial explains how to use the grid system to customize layouts for different devices.<\/p>\n This site<\/a> helps you customize a Bootstrap navigation bar.<\/p>\n There are various sites on the web that provide customized Bootstrap themes \u2014 some free, some not. Search \u201cBootstrap themes\u201d to find them. A theme is a customized version of Bootstrap that can be used as a starting point for your own website. Jeremy Rue has also created a suggested portfolio theme<\/a>.<\/p>\n Workflow and Github<\/a> Getting Started with GitHub Desktop<\/a><\/p>\n Getting Started with GitHub Pages<\/a> Git Reference Manual<\/a><\/p>\n Getting started with Bootstrap<\/a><\/p>\n W3Schools Bootstrap tutorial<\/a><\/p>\n Using Bootstrap Framework For Building Websites<\/a> In this week\u2019s class we will learn the basics of version control, so that you can work on your final projects in a clean folder with a single set of files, but can save snapshots of versions of your work at each point and return to them if necessary. This avoids the hell of having […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-255","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":2,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/posts\/255\/revisions\/297"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/intd319\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Introducing Git, GitHub and GitHub Desktop<\/h3>\n
The files we will use today<\/h3>\n
index.html<\/code> index2.html<\/code> Two simple webpages, which we will edit and publish on GitHub.
\ncss<\/code> fonts<\/code> js<\/code> Folders with files to run the Bootstrap web framework.<\/p>\n<\/a>Some terminology<\/h3>\n
\n
repository<\/code> or repo<\/code> Think of this as a folder for a project. A repository contains all of the project files, and stores each file\u2019s revision history. Repositories on GitHub can have multiple collaborators and can be either public or private.<\/li>\nclone<\/code> Copy a repository from GitHub to your local computer.<\/li>\nmaster<\/code> This is the main version of your repository, created automatically when you make a new repository.<\/li>\nbranch<\/code> A version of your repository separate from the master branch. As you switch back and forth between branches, the files on your computer are automatically modified to reflect those changes. Branches are used commonly when multiple collaborators are working on different aspects of a project.<\/li>\npull request<\/code> Proposed changes to a repository submitted by a collaborator who has been working on a branch.<\/li>\nmerge<\/code> Taking the changes from on branch and applying them to another. This is often done after a pull request.<\/li>\npush<\/code> or sync<\/code> Submitting your latest commits to the remote responsitory, on GitHub and syncing any changes from there back to your computer.<\/li>\ngh-pages<\/code> A special branch that is published on the web. This is how you host websites on GitHub. Even if a repository is private, its published version will be visible to anyone who has the url.<\/li>\nfork<\/code> Split off a separate version of a repository. You can fork anyone\u2019s code on GitHub to make your own version of their repo.<\/li>\n<\/ul>\nCreate and secure your GitHub account<\/h3>\n
![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_1.jpg\")
<\/p>\nContinue<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_2.jpg\")
<\/p>\nskip this step<\/code> link:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_3.jpg\")
<\/p>\nYour profile<\/code>. This is your page on GitHub. Click Edit profile<\/code> to see the following:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_5.jpg\")
<\/p>\nEmails<\/code> link in the panel at left. If you wish, you can add another email to use on GitHub, which will need to be verified as well. If you don\u2019t wish to display your email on GitHub check the Keep my email address private<\/code> box.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_6.jpg\")
<\/p>\nSecurity<\/code> link. I strongly recommend that you click on Set up two-factor authentication<\/code> to set up this important security feature for your account. It will require you to enter a six-digit code sent to your phone each time you sign on from an unfamiliar device or location.<\/p>\nSet up using SMS<\/code>. Then enter your phone number, send a code to your phone and enter it where shown:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_7.jpg\")
<\/p>\nDownload and print recovery codes<\/code>. These will allow you to get back into your account if you lose your phone. Do print them out, keep them somewhere safe, and delete the file.<\/p>\nOpen and authenticate GitHub desktop<\/h3>\n
Continue<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_8.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_9.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_10.jpg\")
<\/p>\nInstall Command Line Tools<\/code>, and then Continue<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_11.jpg\")
<\/p>\nDone<\/code> at the Find local repositories<\/code> screen, as you don\u2019t have local repositories to add.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_12.jpg\")
<\/p>\nYour first repository<\/h3>\n
Create a new repository on GitHub<\/h4>\n
Repositories<\/code> tab and click New<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_13.jpg\")
<\/p>\nREADME<\/code> file. Then click Create repository<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_14.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_15.jpg\")
<\/p>\nInitial commit<\/code> with a code consisting of a series of letters and numbers. There will be a code for each commit you make from now on.<\/p>\nClone to GitHub desktop<\/h4>\n
Clone or download<\/code> and select Open in Desktop<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_16.jpg\")
<\/p>\nClone<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_17.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_18.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_19.jpg\")
<\/p>\nREADME.md<\/code>. This is a simple text file written in a language called Markdown, which we will explore shortly. You use this file to
\nwrite an extended description for your project, which will be displayed on the repo\u2019s page on GitHub.<\/p>\nMake a simple change to the project<\/h4>\n
index.html<\/code> to the project folder on your computer. Notice that you now have 1 Uncommitted Change<\/code> in GitHub Desktop.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_20.jpg\")
<\/p>\nCommit that change, sync with GitHub<\/h4>\n
Commit to master<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_21.jpg\")
<\/p>\nHistory<\/code> tab, you should now see two commits:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_22.jpg\")
<\/p>\nSync<\/code> button at top right.<\/p>\nindex.html<\/code> file is in the remote repo:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_23.jpg\")
<\/p>\nMake a new branch, make a pull request, and merge with master<\/h4>\n
test-branch<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_24.jpg\")
<\/p>\nmaster<\/code> or test-branch<\/code>. Do pay close attention to which branch you are working in!<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_25.jpg\")
<\/p>\ntest-branch<\/code> on Github Desktop, open index.html<\/code> in a text editor. Delete <p>I'm a paragraph<\/p><\/code> and replace it with the following:<\/p>\n<h2>Hello again!<\/h2>\r\n<p>I'm a new paragraph<\/p>\r\n<\/code><\/pre>\ntest-branch<\/code>.<\/p>\nmaster<\/code> branch and look at the file index.html<\/code> in your text editor. It should have reverted to the earlier version, because you haven\u2019t merged the change in test-branch<\/code> with master<\/code>.<\/p>\ntest-branch<\/code> in Github Desktop, and commit the change as before with an appropriate summary and description:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_26.jpg\")
<\/p>\nPull request<\/code> at top right and then Send Pull Request<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_27.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_28.jpg\")
<\/p>\nCompare & pull request<\/code> to see the following screen:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_29.jpg\")
<\/p>\nmaster<\/code> online and then sync your local version of the repo with the remote to incorporate it.<\/p>\nClose pull request<\/code> and return to GitHub desktop. In the master<\/code>branch, click Compare<\/code> at top left. Select test-branch<\/code> and then click Update from test-branch<\/code>. This should merge the changes from test-branch<\/code> into master<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_30.jpg\")
<\/p>\nmaster<\/code> branch on GitHub Desktop, then view the file in your text editor to confirm that it is now the version you edited in test-branch<\/code>.<\/p>\nMake a gh-pages branch, and publish to the web<\/h4>\n
master<\/code> branch on Github Desktop, make a branch called gh-pages<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_31.jpg\")
<\/p>\nPublish<\/code> button at top right.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_32.jpg\")
<\/p>\nhttps:\/\/[username].github.io\/my-first-repo\/<\/code>, whhere [username]<\/code> is your GitHub user name, and the webpage index.html<\/code> should be online:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_33.jpg\")
<\/p>\nIntroducing Markdown, Haroopad, and Bootstrap<\/h3>\n
README.md<\/code> for our repos, and also author some text to add to a simple webpage.<\/p>\nEdit your README, make some more changes to your repo, commit and sync with GitHub<\/h4>\n
README.md<\/code> in Haroopad. The Markdown code is shown on the left, and how it renders as HTML on the right:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_34.jpg\")
<\/p>\n# My first repository\r\n\r\n### This is the repo we have been using to learn GitHub.\r\n\r\nHere is some text. Notice that it doesn't have the # used to denote various weights of HTML headings (You can use up to six #).\r\n\r\nAnd here is a [link](http:\/\/severnc6.github.io\/my-first-repo) to the `gh-pages` website for this repo.\r\n\r\n*Here* is some italic text.\r\n\r\n**Here** is some bold text.\r\n\r\nAnd here is a list:\r\n- first item\r\n- second item\r\n - sub-item\r\n- third item\r\n<\/code><\/pre>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_35.jpg\")
<\/p>\nREADME.md<\/code> in Haroopad and close it.<\/p>\nmaster<\/code> branch, delete index.html<\/code> from your repo, and copy into the repo the file index2.html<\/code> and the folders js<\/code>, css<\/code>, and fonts<\/code>. Rename index2.html<\/code> to index.html<\/code>.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_36.jpg\")
<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_37.jpg\")
<\/p>\nindex-text.md<\/code>:<\/p>\n# A<\/span> Bootstrap<\/span> webpage<\/span>\r\n\r\n### It<\/span> has<\/span> a<\/span> subheading<\/span>\r\n\r\nAnd<\/span> also<\/span> some<\/span> text<\/span>.\r\n<\/code><\/pre>\nFile>Export...>HTML<\/code> and notice that it has saved as a webpage in your repo your computer.<\/p>\nindex.html<\/code> page. To do this, select File>Export...>Plain HTML<\/code> from the top menu in Haroopad, open index.html<\/code> in your text editor, position your cursor between immediately below the <div class=\"container\"><\/code> tag, and \u2318-V<\/code> to paste in the HTML for the text we wrote in Haroopad.<\/p>\nindex.html<\/code> and view in your browser.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_38.jpg\")
<\/p>\nCommit to master<\/code> and Sync<\/code> to GitHub.<\/p>\ngh-pages<\/code> branch, Update from master<\/code> and Sync<\/code>:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_39.jpg\")
<\/p>\nmaster<\/code> and gh-pages<\/code> branches should now be updated on GitHub:<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_40.jpg\")
<\/p>\nREADME<\/code>, and you\u2019ll be sent to the hosted webpage, at https:\/\/[username].github.io\/my-first-repo\/<\/code>, where [username<\/code>] is your GitHub user name.<\/p>\n![\"\"](\"http:\/\/courses.haigarmen.com\/intd319\/files\/2017\/02\/class4_41.jpg\")
<\/p>\nNext steps with Bootstrap<\/h4>\n
Assignment<\/h3>\n
\n
project-pitch.md<\/code>. Your final project accounts for 45% of your grade for this class, so it\u2019s important that you get off to a good start with a substantial and thoughtful pitch. You will also be graded separately on this pitch assignment.\n\n
gh-pages<\/code> branch for your repository and publish it on GitHub. View the webpage at created at http:\/\/[username].github.io\/[project]\/project-pitch.html<\/code> where [username]<\/code> is your GitHub user name and [project]<\/code> is the name of your project repository.<\/li>\nFurther reading<\/h3>\n
\nLesson from Jeremy Rue\u2019s Advanced Coding Interactives<\/a> class.<\/p>\n
\nThis explains how you can creates web pages automatically from GitHub. However, I recommend authoring them locally, as we covered in class.<\/p>\n
\nLesson from Jeremy Rue\u2019s Intro to Multimedia Web Skills<\/a> class.<\/p>\n","protected":false},"excerpt":{"rendered":"