basic_workflow.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<title>Basic workflow</title>

<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/yeti.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="site_libs/navigation-1.1/tabsets.js"></script>
<link href="site_libs/highlightjs-9.12.0/textmate.css" rel="stylesheet" />
<script src="site_libs/highlightjs-9.12.0/highlight.js"></script>

<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs) {
  hljs.configure({languages: []});
  hljs.initHighlightingOnLoad();
  if (document.readyState && document.readyState === "complete") {
    window.setTimeout(function() { hljs.initHighlighting(); }, 0);
  }
}
</script>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>


</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>


<style type="text/css">
/* padding for bootstrap navbar */
body {
  padding-top: 45px;
  padding-bottom: 40px;
}
/* offset scroll position for anchor links (for fixed navbar)  */
.section h1 {
  padding-top: 50px;
  margin-top: -50px;
}

.section h2 {
  padding-top: 50px;
  margin-top: -50px;
}
.section h3 {
  padding-top: 50px;
  margin-top: -50px;
}
.section h4 {
  padding-top: 50px;
  margin-top: -50px;
}
.section h5 {
  padding-top: 50px;
  margin-top: -50px;
}
.section h6 {
  padding-top: 50px;
  margin-top: -50px;
}
</style>

<script>
// manage active state of menu based on current page
$(document).ready(function () {
  // active menu anchor
  href = window.location.pathname
  href = href.substr(href.lastIndexOf('/') + 1)
  if (href === "")
    href = "index.html";
  var menuAnchor = $('a[href="' + href + '"]');

  // mark it active
  menuAnchor.parent().addClass('active');

  // if it's got a parent navbar menu mark it active as well
  menuAnchor.closest('li.dropdown').addClass('active');
});
</script>


<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->


<div class="navbar navbar-default  navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">HOME</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
  <a href="first_observations.html">First Observations</a>
</li>
<li>
  <a href="basic_workflow.html">Basic Workflow</a>
</li>
<li>
  <a href="getting_sophisticated.html">Getting Sophisticated</a>
</li>
<li>
  <a href="your_turn.html">Your Turn</a>
</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</div><!--/.navbar -->

<div class="fluid-row" id="header">


<h1 class="title toc-ignore">Basic workflow</h1>

</div>


<p>Building websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.</p>
<ol style="list-style-type: decimal">
<li>add content (text, code, images, etc) in an RMarkdown file</li>
<li>knit the RMarkdown file to view</li>
<li>update <code>_site.yml</code> (perhaps, if it is a new file)</li>
<li>build the website
<ul>
<li>Build tab &gt; Build Website or</li>
<li>in the console: <code>rmarkdown::render_site()</code></li>
</ul></li>
<li>repeat, repeat, repeat</li>
<li>commit and push your website to github, it’s live!</li>
<li>repeat all of the above</li>
</ol>
<p>Let’s see what this looks like. We are not going to have time to learn all of the capabilities of R Markdown today, but the purpose here is to give you familiarlity with the workflow and confidence to explore further on your own.</p>
<hr />
<div id="rstudio-landscape" class="section level2">
<h2>RStudio landscape</h2>
<p>Here is what you’ll see when you’ve opened our <code>rmarkdown-website-tutorial</code> project in RStudio.</p>
<p>The ‘Build tab’ in the top right corner will show up once RStudio knows you’re making a website, don’t worry if you don’t have it yet.</p>
<p>If we open <code>index.Rmd</code> we will see that it’s all text with a bit of formatting. This top part is called the ‘front matter’.</p>
<div class="figure">
<img src="https://docs.google.com/drawings/d/1ff_I5VJAtmF0FYZOIFE6ZW_-8sfwfoOij2AR0eyFs00/pub?w=960&amp;h=720" />

</div>
<p><br></p>
</div>
<div id="markdown-syntax" class="section level2">
<h2>Markdown Syntax</h2>
<p>Now let’s look explore the first few webpages/R Markdown files to get familiar with Markdown syntax:</p>
<ul>
<li><code>index.Rmd</code></li>
<li><code>first_observations.Rmd</code></li>
<li><code>basic_workflow.Rmd</code></li>
</ul>
<p>These first few pages have simple formatting (<strong>bold</strong>, <em>italics</em>), headers, bullet points, links, and images. These are the majority of things you’ll do in Markdown. See a full list of options at <a href="http://rmarkdown.rstudio.com/authoring_basics.html"><strong>RStudio’s Markdown basics</strong></a> or go to Help &gt; Markdown Quick Reference. Also, check out their <a href="https://www.rstudio.com/resources/cheatsheets/">R Markdown cheatsheet</a>.</p>
<p>Notice that you can insert images locally (from the /images folder), or from online e.g. Google Drawings!</p>
<p>From <a href="http://rmarkdown.rstudio.com/lesson-8.html">rmarkdown.rstudio.com lesson 8</a>:</p>
<div class="figure">
<img src="images/markdown_rmarkdownlesson-8.png" />

</div>
<p><br></p>
</div>
<div id="build-your-website" class="section level2">
<h2>Build your website!</h2>
<p>Let’s make a few changes to this file and knit it to inspect. Try adding some new Markdown formatted text.</p>
<p>Also, now is a good time to make sure you have the the Build tab; you may need to install <code>rmarkdown</code> if you haven’t already (below).</p>
<p>Click <code>Build Website</code> in the Build tab (or type <code>rmarkdown::render_site()</code> in the Console) and inspect your Website! Commit and push to see it live online.</p>
<p><br></p>
</div>
<div id="other" class="section level2">
<h2>Other</h2>
<div id="tips-for-learning-markdown" class="section level3">
<h3>Tips for learning Markdown</h3>
<p><strong>In Markdown, spaces can be tricky</strong>.<br />
To start a new line here, I needed 2 spaces after <code>tricky.</code> above. As you can see, a simple carriage return doesn’t cut it.</p>
<p>To force carriage returns, use the <code>&lt;br&gt;</code> html tag…</p>
<p><br> <br></p>
<p>…like this.</p>
<p>Also, this bulleted list won’t render properly: - because there is no carriage return between the line above - and where the bullet points start.</p>
<p>To have the bullet points render nicely:</p>
<ul>
<li>you must have a full blank line</li>
<li>following “To have the bullet points render nicely:”</li>
</ul>
<p><br></p>
</div>
<div id="building-a-website-from-scratch" class="section level3">
<h3>Building a website from scratch</h3>
<p>If you want to build a website from scratch (i.e. not fork this one), follow RStudio’s instructions here: <a href="https://rmarkdown.rstudio.com/rmarkdown_websites.html">R Markdown Websites</a>.</p>
<p><strong>Troubleshooting:</strong></p>
<p>We recently had trouble having our nicely built website display online: the website’s url only showed the README (nicely formatted though!). We solved it by adding:</p>
<pre><code>output_dir: &quot;.&quot;</code></pre>
<p>to the <code>_site.yml</code>. This knits all the .html files in place in the home directory instead of in a <code>_site</code> folder, and this solved our problem!</p>
</div>
<div id="install-the-rmarkdown-package" class="section level3">
<h3>Install the <code>rmarkdown</code> package</h3>
<p>You can do this by:</p>
<ol style="list-style-type: decimal">
<li><p>paste this code in the Console and hit enter</p>
<pre><code>install.packages(&#39;rmarkdown&#39;)
library(rmarkdown) </code></pre></li>
<li>from the menu bar select: Tools &gt; Install Packages… “rmarkdown”</li>
<li><p>from the bottom right pane, click on the Packages tab, click on Install, “rmarkdown”</p></li>
</ol>
<!---note that the ``` ``` syntax above renders text as a code-looking block--->
</div>
</div>


</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>