Slide 1
Slide 1 text
Introducing Git while creating an academic homepage
L Collado-Torres
September 20th, 2012
1 / 48
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Overview
Intention
Learn through practice
Get you started!
Serve as a reference
3 / 48
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Academic web-tour
Alyssa Frazee
http://www.biostat.jhsph.edu/~afrazee/
Super concise!
Clean
Has all the main information in one place
8 / 48
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Git Motivation
Key distributed version control idea4
4Source: http://git-scm.com/book/en/Getting-Started-About-Version-Control
18 / 48
Slide 19
Slide 19 text
Git Motivation
Basic git flow5
5Source: http://git-scm.com/book/en/Getting-Started-Git-Basics
19 / 48
Slide 20
Slide 20 text
Git Motivation
Basic git flow6
6Source: http://git-scm.com/book/en/Getting-Started-Git-Basics
20 / 48
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Git Git setup
Install git (Windows)
Install bash
22 / 48
Slide 23
Slide 23 text
Git Git setup
Install git (Windows)
Have git auto-change the line endings to make your Linux/Mac friends happy
23 / 48
Slide 24
Slide 24 text
Git Git setup
Install git (Windows)
Git bash
24 / 48
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Git Git setup
What is the status?
cd html_git_intro
git status
27 / 48
Slide 28
Slide 28 text
Git Git setup
Configure git
git config --global user.name "lcolladotor"
git config --global user.email [email protected]
28 / 48
Slide 29
Slide 29 text
Git Git setup
Configure git
Config file
29 / 48
Slide 30
Slide 30 text
Git Git setup
Status alias
git st
git config --global alias.st status
git st
30 / 48
Slide 31
Slide 31 text
Git First repository
Basic git flow6
6Source: http://git-scm.com/book/en/Getting-Started-Git-Basics
31 / 48
Slide 32
Slide 32 text
Git First repository
Your first repository: website
Lets create your first repo! First of all, if you need help use:
git help
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
Slide 33
Slide 33 text
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):
Home # old
Home # new
7 You can also modify the big name that shows in the center (line 31):
Magnetic
# oldL. Collado-Torres
# new 33 / 48Slide 34
Slide 34 text
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)
Magnetic by FCT # old
Example website # 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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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)
Contact # old
Contact # 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
Slide 37
Slide 37 text
Git First repository
Your first repository: website
25 Change the big name in the center of the page to contact (line 31)
Magnetic
# originalL. Collado-Torres
# oldcontact
# 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:This is Magnetic ...
# oldMy email is lcollado AT jhsph.edu
# new Delete all lines between 52 and 104. 37 / 48Slide 38
Slide 38 text
Git First repository
Your first repository: website
# start delete here
# 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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Customize your academic homepage
Links
The basic syntax is:
name
For example:
Biostats Social
42 / 48
Slide 43
Slide 43 text
Customize your academic homepage
Images
The basic syntax is:
For example:
43 / 48
43 / 48
Slide 44
Slide 44 text
Customize your academic homepage
HTML lists
There are two types: bulleted lists and numbered lists
1 Bullets:
- Element one
- Element two
- Element one
- Element two
Slide 45
Slide 45 text
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:
Example:
8I like using this directory for organization purposes.
45 / 48
8I like using this directory for organization purposes.
45 / 48
Slide 46
Slide 46 text
Customize your academic homepage
Google analytics
http://www.google.com/analytics/
46 / 48
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
Customize your academic homepage
End
I hope that you will find Git useful and I look forward to seeing your websites!
48 / 48
Slide 49
Slide 49 text
Workflows
Centralized workflow 9
9Source: http://git-scm.com/book/en/Distributed-Git-Distributed-Workflows
49 / 48
Slide 50
Slide 50 text
Workflows
Distributed workflow 10
10Source: http://git-scm.com/book/en/Distributed-Git-Distributed-Workflows
50 / 48
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
Merging
Merging 11
11Source: http://git-scm.com/book/en/Git-Branching-Basic-Branching-and-Merging
52 / 48
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
Merging
Advanced conflicts
git commit -am "Fixed the merged, awesome!"
Push the merge
git push -u origin master
55 / 48