Quarto Blog Tutorial 2: From Git to GitHub using RStudio

This post shows how to create the initial (first) Git commit using RStudio. I will initialize a GitHub repo, and push the content of the initial commit into the new repository.
git
github
rstudio
tutorial
Author

Peter Baumgartner

Published

July 23, 2024

Modified

July 23, 2024

Requirements to follow this post

The following procedure requires some credential setup for GitHub on your end. There are several routes you can go:

  • Set up the GitHub repo first. It my sound counter-intuitive, but the easiest way to get your work onto GitHub is to initiate a GitHub repo first, then use RStudio to start working in a synced local copy. This approach is described in Happy Git’s workflows New project, GitHub first and Existing project, GitHub first.
  • Command line Git. I will use this approach to add a remote repository post hoc. This is described detailed in the Happy Git workflow Existing project, GitHub last.

Why using Git and GitHub?

After initializing a new Quarto blog I will create the initial (first) Git commit, initialize a GitHub repo, and push the content of the initial commit into the new repository.

There are several reasons to use Git:

  • A Git repository (or repo) holds all the project files and their entire revision history. It is therefore not only easier to track changes but also to restore a previous version if necessary. (See the nice introduction)
  • GitHub is an online platform to store and manage your content (code but also text and other resources), as well as track changes to it. It facilitates collaborations with your team but also with other (unknown) people.

Procedure for using Git

In the previous blog post, we have already initialized the Quarto weblog, including Git support, by checking the appropriate check box.

  1. To see all the changes you have made so far, click on the Git tab at the top right pane of RStudio. You should see a picture similar to the following one.
RStudio top right pane with the following tabs: Environment, History, Connection, Build, Git, and Tutorial. The Git pane is selected and therefore active. Under the tabs is another line of icons and text buttons representing Git actions: From left to right: Diff, Commit, Pull (greyed out), Push (greyed out), History, More (drop-down menu), New Branch, (no branch). Underneath it shows added or changed files or folders (ending with a slash) from the initialization process. From top to the bottom: .gitignote, _freeze/, _quarto.yml, _site/, about.qmd, index.qmd, posts/, profile.jpg, quarto-pb-blog.Rproj, style.css.
Figure 1: Selected the Git tab of the RStudio right top pane (Screenshot):
  1. After selecting all files and checking them (checking a single file of a group of selected files checks all selected files), the Git window shows all files seen above but also the files inside folders that are now prepared for the next Git commit.
RStudio top right pane with the following tabs: Environment, History, Connection, Build, Git, and Tutorial. The Git pane is selected and therefore active. Under the tabs is another line of icons and text buttons representing Git actions: From left to right: Diff, Commit, Pull (greyed out), Push (greyed out), History, More (drop-down menu), New Branch, (no branch). There is a tool tip under the Commit button saying: 'Commit pending changes (CTRL-ALT-M)'. Underneath it shows added or changed files from the initialization process. From top to the bottom in a blue background: .gitignote, _freeze/, _quarto.yml, _site/, about.qmd, index.qmd, posts/, profile.jpg, quarto-pb-blog.Rproj, style.css. These files are followed by the files in the directories from top to left: _freeze/post/post-with-code/index/execute-results/html.json, _freeze/site_libs/clipboard/clipboard.min.js, _freeze/site_libs/quarto-listing/list.min.js, _freeze/site_libs/quarto-listing/quarto-listing.js, _site/about.html, _site/index.html, _site/listing.json, _site/profile.jpg. There are more files not visible because the window ends here.
Figure 2: Selecting all added or changed files in the RStudio Git pane (Screenshot)
  1. After clicking on the “Commit” tab (or using the shortcut CTRL-ALT-M) a window opens for writing the commit message. Write short notes using a commando language. For example a commit text for the main index.qmd file could be: “change title-block-banner to true”.

    It is usual to start the commit messages with “initial commit”. I had erroneously used “first commit” in the screenshot.
A pop-up window overlaying the RStudio window separated in two parts: The left part contains at the top small buttons. From left to the right: Changes, History, (no branch), icon for update display, stage, revert, and ignore. The right part contains the dysfunctional buttons (grayed out) 'Pull' and 'Push.' The left part shows underneath added or changed file from the initialization process. From top to the bottom in a blue background: .gitignote, _freeze/, _quarto.yml, _site/, about.qmd, index.qmd, posts/, profile.jpg, quarto-pb-blog.Rproj, style.css. These files are followed by the files in the directories from top to left: _freeze/post/post-with-code/index/execute-results/html.json, _freeze/site_libs/clipboard/clipboard.min.js, _freeze/site_libs/quarto-listing/list.min.js. There are more files not visible because the window ends here. On the right side there is a writing pane with the header 'Commit message' and '12 characters'. The text in the writing pane says 'First commit'. Under the writing pane are two unchecked check boxes 'Amend previous commit' and 'Sign commit' with a 'Commit' button. Underneath those two window parts is another line of action buttons covering the whole length of the window: From left to the right: 'Show Staged' text followed by an empty radio button, 'Staged' text followed by an active radio button, 'Context' (text), 5 lines (drop-down menu), 'Ignore Whitespace' (active check box). Underneath is an empty white field over the whole length of the window dedicated to show more detailed information inf only one file would have been selected.
Figure 3: Writing a commit message (Screenshot)
  1. After clicking the Commit button, RStudio presents a window with the results of the action:
RStudio review window listing the result of the last git commit action: From top to the bottom: 'create mode 100644 about.qmd', 'create mode 100644 index.qmd' 'create mode 100644 posts/metadata.yml', 'create mode 100644 posts/post-with-code/image.png', 'create mode 100644 posts/post-with-code/index.qmd', 'posts/post-with-code/posts/welcome/index.qmd', 'create mode 100644 posts/welcome/thumbnail.jpg', 'create mode 100644 profile.jpg', 'create mode 100644 quarto-pb-blog.Rproj', 'create mode 100644 style.css'. There other lines covered at the top covered as the window scroll button shows only the end of the list. On the top right is a 'Close' button.
Figure 4: Resulted actions after the last commit (Screenshot)

Closing both windows will end the Git procedure to the local repository.

Procedure for initializing a GitHub repo

Next create a GitHub repo with all the locally committed content. I am using here the {usethis} package because it automates all the necessary steps. However, — as I mentioned above — there are several requirements before you can create and connect a GitHub repo. With Happy Git and GitHub for the useR you should read and learn how to connect an RStudio project to GitHub under different conditions. In this case, I have applied Chapter 17, “Existing project, GitHub last”.

  1. Write usethis::use_github() into the console window of the RStudio window (lower left pane). After return your console will display the following lines:
The screenshot shows the following lines, from top to the bottom: 'R version 4.4.1 (2024-04-14)' written in red, '> usethis::use_github()' written in red. From here the next lines start with a green ok check mark icon, 'Setting active project to' followed by the path, 'Creating GitHub repository' followed by the Github.com path of my repo., 'Setting remote `origin` to' followed by the appropriate path, 'Pushing `master` branch to gitHub and setting `origin/master` as upstream branch.', 'Opening URL' followed by the URL to my Github repo.
Figure 5: Text of the RStudio window console window (Screenshot)

The screenshot above shows the different actions for the usethis::use_github() command. In the last step, the newly generated and updated repository on GitHub was opened.

Listing the committed files on the GitHub repo web page in three columns. Name, different commit messages and time ('15 minutes ago' and '10 hours ago' accordingly). At the top left of this list there is a small profile picture of me, followed by the name of my GitHub account 'petzi53' and the text 'first commit'. On the top side you can see the unique commit code '0ced0df' followed by the text '19 minutes ago' and in bold '1 Commit'
Figure 6: Web page of the GitHub repository of the Quarto blog after the initial commit

Summary

This post shows how to initialize Git and GitHub using RStudio after crating of the brand-new Quarto blog:

  1. Commit all the files generated automatically after launching the Quarto blog (as described in Initializing a Quarto Blog with RStudio) to the local Git repository.
  2. Initializing a remote GitHub repository, connecting the local repo with it, and connecting it with the local repo.
Back to top