git2012

Transcript

1. Introducing Git while creating an academic homepage L Collado-Torres September 20th, 2012 1 / 48
2. 1 Overview 2 Academic web-tour 3 Choose a template 4 Git Motivation Git setup First repository Misc 5 Customize your academic homepage 2 / 48
3. Overview Intention Learn through practice Get you started! Serve as a reference 3 / 48
4. Overview Pre-requisites There is only one, Git: http://git-scm.com/downloads Optional: Email Jiong Yang to setup your account on the biostat webserver1. Bitbucket account using your academic email: https://bitbucket.org/ Mergetools: TortoiseSVN http://tortoisesvn.net/downloads.html (Windows), kdiff3 2 http://kdiff3.sourceforge.net/ (Mac) 1Ask him to create your public html directory. 2If you have macports use: sudo port install kdiff3 4 / 48
5. Academic web-tour 1 Overview 2 Academic web-tour 3 Choose a template 4 Git Motivation Git setup First repository Misc 5 Customize your academic homepage 5 / 48
6. Academic web-tour Basic student page http://www.biostat.jhsph.edu/people/student/collado%20torres.shtml Basic background information Short contact information Advisor Meh picture :P 6 / 48
7. Academic web-tour L. Collado-Torres http://www.biostat.jhsph.edu/~lcollado/ News, media, visitor map Simple research tab CV Lots of links in publications (mostly talks) and teaching Blog link :) 7 / 48
8. Academic web-tour Alyssa Frazee http://www.biostat.jhsph.edu/~afrazee/ Super concise! Clean Has all the main information in one place 8 / 48
9. Academic web-tour Zhenke Wu http://www.biostat.jhsph.edu/~zhwu/ Name pronunciation! Deep looking picture Email link Short research tab Publications with links Teaching CV Resources Contact: expands information from landing page 9 / 48
10. Academic web-tour John Muschelli http://biostat.jhsph.edu/~jmuschel/ Great picture! Links on the left Research tab: some animations Publications: word cloud CV: pdf Contact 10 / 48
11. Choose a template 1 Overview 2 Academic web-tour 3 Choose a template 4 Git Motivation Git setup First repository Misc 5 Customize your academic homepage 11 / 48
12. Choose a template Template sites Main two: Oswd: http://www.oswd.org/ Free CSS templates: http://www.freecsstemplates.org/ Look around for one you like! 12 / 48
13. Choose a template Magnetic For now, I’ll use the Magnetic template for illustrative purposes. Check it’s main layout http://www.freecsstemplates.org/preview/magnetic/ Download the zip file Extract it Check it out! 13 / 48
14. Git 1 Overview 2 Academic web-tour 3 Choose a template 4 Git Motivation Git setup First repository Misc 5 Customize your academic homepage 14 / 48
15. Git Motivation How do you version control? 3 Do nothing, hope for the best! Mark them as old, new Store them in a different directory Append a v1, v2, etc to the file name Add the date, for example: 2012 9 11 class.pdf Use Dropbox, Google Drive, Google Docs or something else to manage the files. 3Idea by John Muschelli 15 / 48
16. Git Motivation Why use a version control system? Version control works best with flat text files like code (.R) and L A TEX documents Good organization (project management) can save a lot of time! Clean directory Best for collaborating with others: specially if you are working on the same file Good project development practice (helps when reproducing something) 16 / 48
17. Git Motivation Options out there CVS: http://www.nongnu.org/cvs/ Subversion (SVN): http://subversion.apache.org/ Mercurial: http://mercurial.selenic.com/ Git: http://git-scm.com/ Git and Mercurial are the best out there. Easy to use but with loads of complicated functions for those that need them. 17 / 48
18. Git Motivation Key distributed version control idea4 4Source: http://git-scm.com/book/en/Getting-Started-About-Version-Control 18 / 48
19. Git Motivation Basic git flow5 5Source: http://git-scm.com/book/en/Getting-Started-Git-Basics 19 / 48
20. Git Motivation Basic git flow6 6Source: http://git-scm.com/book/en/Getting-Started-Git-Basics 20 / 48
21. Git Git setup Install git Download it from http://git-scm.com/downloads Key components: git itself and gitk which will be useful to visualize the development history. 21 / 48
22. Git Git setup Install git (Windows) Install bash 22 / 48
23. Git Git setup Install git (Windows) Have git auto-change the line endings to make your Linux/Mac friends happy 23 / 48
24. Git Git setup Install git (Windows) Git bash 24 / 48
25. Git Git setup Download the slides They are publicly available at https://bitbucket.org/lcolladotor/html_git_intro/overview Let’s get them with git! 25 / 48
26. Git Git setup Download the slides cd Documents/ git clone https://bitbucket.org/lcolladotor/html_git_intro.git The commands are all available in the commands.txt file!7 7Also via the web. 26 / 48
27. Git Git setup What is the status? cd html_git_intro git status 27 / 48
28. Git Git setup Configure git git config --global user.name "lcolladotor" git config --global user.email lcollado@jhsph.edu 28 / 48
29. Git Git setup Configure git Config file 29 / 48
30. Git Git setup Status alias git st git config --global alias.st status git st 30 / 48
31. Git First repository Basic git flow6 6Source: http://git-scm.com/book/en/Getting-Started-Git-Basics 31 / 48
32. Git First repository Your first repository: website Lets create your first repo! First of all, if you need help use: git help <verb> 1 Create a directory named website and get in it. For Linux/Mac: open the terminal. For Windows: use git bash. mkdir website cd website 2 Initialize your repo: git init 3 Manually copy the files from the magnetic website template. 4 Add the files to git’s tracking system 32 / 48
33. Git First repository Your first repository: website git add index.html git add style.css git add license.txt git add images/* 5 Move them from the staging area to the repository while specifying a commit message git commit -m "I added magnetic’s website template" 6 Open index.html with a text editor and modify it. For example, change the link of Home to point to index.html (line 37): <li class="current_page_item"><a href="#">Home</a></li> # old <li class="current_page_item"><a href="index.html">Home</a></li> # new 7 You can also modify the big name that shows in the center (line 31): <h1><a href="#">Magnetic</a></h1> # old <h1><a href="#">L. Collado-Torres</a></h1> # new 33 / 48
34. Git First repository Your first repository: website 8 Feel free to modify the html title (which is used as the tab name in your browser) (line 18) <title>Magnetic by FCT</title> # old <title>Example website</title> # new 9 Now check the status: git status 10 What do you see? 11 Notify git that you wish to save the new modifications (move them from the staging area to the repo) git add index.html 12 Create a copy of index.html called new.html cp index.html new.html 13 Check the status of website 34 / 48
35. Git First repository Your first repository: website git status 14 Add new.html to your repository git add contact.html 15 Mark with a message that you both modified index.html and added new.html git commit -m "Changed the home link to index.html and then copied index.html into new.html" 16 Check the history of changes in the repository git log 17 Rename new.html to contact.html git mv new.html contact.html 18 Check the status git st 35 / 48
36. Git First repository Your first repository: website 19 Mark contact.html as ready to be added to the repo. git add contact.html 20 Check the status. Was the git add contact.html necessary? git st 21 Open index.html with your fav text editor 22 Change the contact link to contact.html (line 42) <li class="last"><a href="#">Contact</a></li> # old <li class="last"><a href="contact.html">Contact</a></li> # new 23 Do the same for index.html 24 Add and commit the changes: in a single step! git commit -am "Renamed new.html to contact.html and changed the contact link" 36 / 48
37. Git First repository Your first repository: website 25 Change the big name in the center of the page to contact (line 31) <h1><a href="#">Magnetic</a></h1> # original <h1><a href="#">L. Collado-Torres</a></h1> # old <h1><a href="#">contact</a></h1> # new 26 Check the differences between the repo and your current version: git diff 27 Add and commit the changes git commit -am "Modified the big name in contact.html" 28 Simplify contact.html so it shows your email only. Change line 49 to say something like: <p>This is <strong>Magnetic ... </p> # old <p>My email is lcollado AT jhsph.edu</p> # new Delete all lines between 52 and 104. 37 / 48
38. Git First repository Your first repository: website <div id="three-columns"> # start delete here <!-- end #page --> # end just before here # new 29 Add and commit the changes git commit -am "Simplified contact.html" 30 View the log git log 31 Visualize the history gitk 32 Voila! Those were the basic commands! 38 / 48
39. Git Misc Bitbucket https://bitbucket.org/ Great if you have an academic email: unlimited private repos! Saves you having to set up a server as your central repo Private/public access Can work as another backup for your code/write up files 39 / 48
40. Git Misc Aliases The following commands create useful aliases git config --global alias.co checkout git config --global alias.br branch git config --global alias.ci commit git config --global alias.st status 40 / 48
41. Customize your academic homepage 1 Overview 2 Academic web-tour 3 Choose a template 4 Git Motivation Git setup First repository Misc 5 Customize your academic homepage 41 / 48
42. Customize your academic homepage Links The basic syntax is: <a href="url">name</a> For example: <a href="http://tinyurl.com/biostats-social">Biostats Social</a> 42 / 48
43. Customize your academic homepage Images The basic syntax is: <img src="path/to/img"> For example: <img src="images/me.png" width="124" height="200" alt="Me"> 43 / 48
44. Customize your academic homepage HTML lists There are two types: bulleted lists and numbered lists 1 Bullets: <ul> <li>Element one</li> <li>Element two</li> </ul> 2 Numbered: <ol> <li>Element one</li> <li>Element two</li> </ol> Check http://www.w3schools.com/html/html_lists.asp for more info! 44 / 48
45. Customize your academic homepage File icons First find an icon that you like. For example: http://manningcentre.ca/wp-content/uploads/2012/06/pdf-icon.png Save it in images8 Next, insert an image with a link. The basic syntax is: <a href="URL"><img src="images/file" alt="Something" width=20 height=20></a> Example: <a href="CV/en_CV_lcollado.pdf"><img src="images/pdf-icon.png" alt="PDF" width=20 height=20></a> 8I like using this directory for organization purposes. 45 / 48
46. Customize your academic homepage Google analytics http://www.google.com/analytics/ 46 / 48
47. Customize your academic homepage Other gadgets Clustrmaps http://clustrmaps.com/ Twitter feed https://twitter.com/settings/widgets Embedded pdf https://docs.google.com/viewer More tracking information (like sharing via copy-pasting from the address) via AddThis http://www.addthis.com/ 47 / 48
48. Customize your academic homepage End I hope that you will find Git useful and I look forward to seeing your websites! 48 / 48
49. Workflows Centralized workflow 9 9Source: http://git-scm.com/book/en/Distributed-Git-Distributed-Workflows 49 / 48
50. Workflows Distributed workflow 10 10Source: http://git-scm.com/book/en/Distributed-Git-Distributed-Workflows 50 / 48
51. Interacting with a web-repo Interacting with a central repo 1 Clone the repo git clone username@hosting/repo.git 2 Modify any file you want. 3 Add and commit your changes git commit -am "Changed something (specify)" 4 Push it back to the central repository git push -u origin master 51 / 48
52. Merging Merging 11 11Source: http://git-scm.com/book/en/Git-Branching-Basic-Branching-and-Merging 52 / 48
53. Merging Merge If you had already cloned the rep, pull the new code: git fetch Check your status (it will give some general guidance on what to do) git status You’ll probably need to commit your current changes (in case that you don’t have the latest version) git commit -am "My new changes" Merge your files with the remote version (updates your local files to the newest version) git merge origin/master Continue working Commit and push your changes when you are done git commit -am "Bla bla" git push -u origin master 53 / 48
54. Merging Advanced conflicts If you encounter a more complicated conflict (two or more people modified the exact same line) then you’ll have to do the merge manually After downloading the remote version, look at the differences git fetch git status git diff If you have a visual merge tool (recommended) use: git merge git mergetool git mergetool --tool=yourFavTool Either use your version, the remote version or create a mix. Commit your changes 54 / 48
55. Merging Advanced conflicts git commit -am "Fixed the merged, awesome!" Push the merge git push -u origin master 55 / 48