-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial.html
More file actions
601 lines (531 loc) · 26 KB
/
tutorial.html
File metadata and controls
601 lines (531 loc) · 26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
<!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" />
<meta name="author" content="Dani Cosme & Sam Chavez" />
<title>Websites in RStudio</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/flatly.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/default.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>
<link rel="stylesheet" href="style.css" type="text/css" />
</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: 60px;
padding-bottom: 40px;
}
/* offset scroll position for anchor links (for fixed navbar) */
.section h1 {
padding-top: 65px;
margin-top: -65px;
}
.section h2 {
padding-top: 65px;
margin-top: -65px;
}
.section h3 {
padding-top: 65px;
margin-top: -65px;
}
.section h4 {
padding-top: 65px;
margin-top: -65px;
}
.section h5 {
padding-top: 65px;
margin-top: -65px;
}
.section h6 {
padding-top: 65px;
margin-top: -65px;
}
</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">Sam's Silly Website</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Me</a>
</li>
<li>
<a href="projects.html">Projects</a>
</li>
<li>
<a href="HomerResume.pdf">Street Cred</a>
</li>
<li>
<a href="presentations.html">Resources</a>
</li>
<li>
<a href="shiny.html">Shiny</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">Websites in RStudio</h1>
<h4 class="author"><em>Dani Cosme & Sam Chavez</em></h4>
<h4 class="date"><em>06-03-2018</em></h4>
</div>
<div id="overview-of-the-tutorial" class="section level3">
<h3>Overview of the tutorial</h3>
<ol style="list-style-type: decimal">
<li>Background</li>
<li>Learn the basics<br />
</li>
<li>Explore advanced features<br />
</li>
<li>Check out the <code>hugo-academic</code> theme</li>
<li>Publish your website to GitHub</li>
</ol>
</div>
<div id="background" class="section level1">
<h1>Background</h1>
<p>Most of the information in this tutorial is taken from a few amazing resources on using the <strong>blogdown</strong> package to create static websites in RStudio using R Markdown:</p>
<ul>
<li><a href="https://bookdown.org/yihui/blogdown/"><em>blogdown: Creating Websites with R Markdown</em></a><br />
</li>
<li>Various presentations and posts by Alison Hill
<ul>
<li><a href="https://apreshill.github.io/data-vis-labs-2018/slides/06-slides_blogdown.html#1" class="uri">https://apreshill.github.io/data-vis-labs-2018/slides/06-slides_blogdown.html#1</a><br />
</li>
<li><a href="https://alison.rbind.io/slides/blogdown-workshop-slides" class="uri">https://alison.rbind.io/slides/blogdown-workshop-slides</a><br />
</li>
<li><a href="https://alison.rbind.io/post/up-and-running-with-blogdown/#build-your-site-in-rstudio" class="uri">https://alison.rbind.io/post/up-and-running-with-blogdown/#build-your-site-in-rstudio</a></li>
</ul></li>
</ul>
<div id="why-use-rstudio-to-make-static-websites" class="section level2">
<h2>Why use RStudio to make static websites?</h2>
<ul>
<li>It’s easy</li>
<li>It’s free</li>
<li>It’s a simple way to share your code and analyses</li>
</ul>
</div>
<div id="what-is-blogdown" class="section level2">
<h2>What is blogdown?</h2>
<p><strong>blogdown</strong> is a package that leverages R Markdown and Hugo to create static websites.</p>
</div>
<div id="what-is-hugo" class="section level2">
<h2>What is Hugo?</h2>
<p>Hugo is a static website generator. Static websites are collections of HTML files and the external dependencies referenced within them. More on Hugo <a href="https://bookdown.org/yihui/blogdown/hugo.html">here</a>.</p>
</div>
</div>
<div id="learn-the-basics" class="section level1">
<h1>Learn the basics</h1>
<div id="install-blogdown-and-hugo" class="section level2">
<h2>Install blogdown and hugo</h2>
<pre class="r"><code>install.packages("blogdown")
library(blogdown)
blogdown::install_hugo()</code></pre>
</div>
<div id="update-hugo-if-necessary" class="section level2">
<h2>Update hugo if necessary</h2>
<pre class="r"><code>blogdown::hugo_version()
blogdown::update_hugo()</code></pre>
</div>
<div id="create-a-website-using-the-default-lithium-template" class="section level2">
<h2>Create a website using the default lithium template</h2>
<p>There are a number of ways to create a new website project. You can create it using the IDE by clicking <code>File > New Project > New Directory > Website Using Blogdown</code> or by simply specifying the path to the new website as a argument in the <code>blogdown::new_site()</code> function. Make sure that you specify the new directory (e.g. the name of the folder you would like to create) in the path.</p>
<p>Here we’ll create the website one level above our current working directory. The reason for doing this is that our current working directory is a git repository and if we try to publish this later, it will cause problems (it’s not straight forward to have a repo inside of a repo).</p>
<pre class="r"><code>blogdown::new_site("../default-site")</code></pre>
<p>You can also specify a theme when creating your new site. The default is the <a href="https://github.com/yihui/hugo-lithium">lithium theme</a>, but there are a variety of other <a href="https://themes.gohugo.io/">Hugo themes</a> available. We’ll use the <a href="https://github.com/gcushen/hugo-academic">hugo-academic</a> theme later in the tutorial.</p>
<pre><code>blogdown::new_site(theme = 'yihui/hugo-lithium')
blogdown::new_site(theme = 'devcows/hugo-universal-theme')
blogdown::new_site(theme = 'gcushen/hugo-academic')</code></pre>
</div>
<div id="render-the-site" class="section level2">
<h2>Render the site</h2>
<p>Anytime you want to render the site, you can do so by either clicking <code>Addins > Serve Site</code> or executing the <code>blogdown::serve_site()</code> function. This function should be executed from the site directory, so if you are not currently in that directory, make sure to change you current working directory to the site directory.</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::serve_site()</code></pre>
</div>
<div id="where-does-the-content-live" class="section level2">
<h2>Where does the content live?</h2>
<p>Take a look at what’s in the site directory.</p>
<p>Key components:<br />
+ <code>config.toml</code> = configuration file that the user edits to customize their site<br />
+ <code>/content/</code> = where the actual content (e.g. pages, posts live)<br />
+ <code>/public/</code> = the directory containing the website for online deployment<br />
+ <code>/layouts/</code> = where you’ll place code to override the original template design<br />
+ <code>/static/</code> = where content such as images and CSS code are stored<br />
+ <code>/theme/</code> = where the theme template is stored</p>
</div>
<div id="config.toml-file" class="section level2">
<h2><code>config.toml</code> file</h2>
<p>The configuration file is where global variables and settings are defined. More about configuration files and the variables specified within it <a href="http://gohugo.io/getting-started/configuration/">here</a>. More information on TOML syntax <a href="https://bookdown.org/yihui/blogdown/configuration.html#toml-syntax">here</a>.</p>
<div id="edit-config.toml" class="section level3">
<h3>Edit <code>config.toml</code></h3>
<p>Change the site name</p>
<pre><code>title = "Dani Cosme, M.S."</code></pre>
<p>Enable emojis</p>
<pre><code>enableEmoji = true</code></pre>
</div>
<div id="navigation-bar" class="section level3">
<h3>Navigation bar</h3>
<p>More on menu management <a href="https://gohugo.io/variables/menus/">here</a>. <code>[[menu.main]]</code> = Pages and links in the menu bar</p>
<ul>
<li>Can be external links (e.g. Twitter page) or internal links (e.g. /posts/)<br />
</li>
<li>Default arrangement is alphabetical order<br />
</li>
<li>To manually specify the order, add <code>weight</code> as a field</li>
</ul>
<p>Add the following text to your <code>config.toml</code> page and see what happens:</p>
<pre><code>[[menu.main]]
name = "UO Data Science Club"
url = "https://github.com/uodatascience"
weight = 1</code></pre>
</div>
</div>
<div id="homepage" class="section level2">
<h2>Homepage</h2>
<p>Create a file called <code>index.html</code> in the <code>layouts/</code> directory.</p>
<pre class="bash"><code>touch ../default-site/layouts/index.html</code></pre>
<p>Copy the following text into <code>layouts/index.html</code>. I borrowed this code from <a href="https://github.com/rladies-pdx/rladies-PDX/blob/master/layouts/index.html">Alison Hill’s awesome blogdown tutorial</a>, but you could write your own html code to create the layout for your homepage.</p>
<pre><code>{{ partial "header" . }}
<div class="intro">
<div><center><img class="center-image" src={{ .Site.Params.img }} width="20%"/></center></div>
<h1><center>{{ markdownify .Title }}</center></h1>
<h2><center>{{ markdownify .Site.Params.Description }}</center></h2>
</div>
{{ partial "footer" . }}</code></pre>
<p>We referenced a field<code>.Site.Params.img</code>, but it currently doesn’t exist. Let’s add it to <code>config.toml</code> and also update the site description.</p>
<pre><code>[params]
description = "Welcome to my website!<br>Here is a bunch of text about me.<br>Yada yada yada."
img = "https://avatars1.githubusercontent.com/u/11858670?s=460&v=4"</code></pre>
<p>Since the posts are no longer on linked from the landing page, let’s add the <code>Posts</code> page to the navigation bar by adding it as a field in <code>config.toml</code>:</p>
<pre><code>[[menu.main]]
name = "Posts"
url = "/post/"</code></pre>
</div>
<div id="about-page" class="section level2">
<h2>About page</h2>
<p>Open <code>/content/about.md</code> and check it out. Add the following text to the <code>about.md</code> file and look at the difference.</p>
<pre><code>Because we enabled emojis in `config.toml`, we can use them here. I :heart: emojis!
Posts are written in plain markdown. Here is some useful syntax. More on plain markdown in the default post [A Plain Markdown Post](../2016/12/30/a-plain-markdown-post/). There's also lots more information in the digital book [*blogdown: Creating Websites with R Markdown*](https://bookdown.org/yihui/blogdown/output-format.html).
## h2 header
### h3 header
#### h4 header
**bold**<br>
*italics*<br>
~~strikethrough~~
Also check out [Cory's awesome markdown tutorial](https://github.com/uodatascience/markdown) for more markdown magic.
Note: you can write in html.
<h4> Embed a gif <br>
<img src="https://media.giphy.com/media/l0Nwvo3slpo6nS0PC/giphy.gif" alt="neato">
<h4> Embed a calendar <br>
<iframe src="https://calendar.google.com/calendar/embed?src=beo4lsbjns0kqovh8nktjou8l4%40group.calendar.google.com&ctz=America%2FLos_Angeles" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></code></pre>
</div>
<div id="pages" class="section level2">
<h2>Pages</h2>
<p>Create a new page called <code>CV</code> in the content folder.</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::new_content("content/cv")</code></pre>
<p>Copy the following text into the document:</p>
<pre><code>---
title: ''
date: '2018-06-03 23:25:08 GMT'
---
<div style="text-align: right"><h1>DANI COSME</div>
<div style="text-align: right">dcosme@uoregon.edu</div>
<div style="text-align: right"><a href="http://dcosme.github.io">dcosme.github.io</a></div>
### EDUCATION //
**Doctoral Candidate, Psychology, 2015-present**<br>
University of Oregon (Eugene, OR)<br>
Advisors: Drs. Jennifer Pfeifer & Elliot Berkman
### PUBLICATIONS //
**Cosme, D.** (2018) Brilliant article. *Science*, 1(1), 1-5.<br>
[DOI](http://doi.org/) [OSF](http://osf.io/) [NEUROVAULT](http://neurovault.org/)</code></pre>
<p>Add the page to the navigation bar by adding the following text to <code>config.toml</code>. Note that while the filepath is <code>site root/content/cv.md</code>, the webpath is <code>/baseurl/cv</code>.</p>
<pre><code>[[menu.main]]
name = "CV"
url = "/cv/"</code></pre>
<p>This is the start of a super basic markdown CV, but there are a number of more advanced templates out there, such as <a href="https://github.com/elipapa/markdown-cv">this one</a>.</p>
</div>
<div id="posts" class="section level2">
<h2>Posts</h2>
<p>Open <code>content/post</code> and look around.</p>
<div id="create-a-new-post" class="section level3">
<h3>Create a new post</h3>
<p>Using the IDE: <code>Addins > New Post</code></p>
<p>In the console, the <code>new_post()</code> function will automatically create a new post and append the date to the front of the file name that you specify as an input.</p>
<div id="markdown-post" class="section level4">
<h4>Markdown post</h4>
<p>Let’s create a plain markdown post and add some content.</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::new_post("newmd", ext = '.md')</code></pre>
<p>Add the following text to the new <code>.md</code> file:</p>
<pre><code>Here is some text. Lots of text. So much text.
**Gee this is fun!**
Let's add a table, just for kicks.
| hours of sun | happiness |
|---|---|
| 0 | 1 |
| 3 | 4 |
| 5 | 7 |
| 7 | 10 |</code></pre>
<p>Add the following r code chunks (removing <code>eval=FALSE</code>) and view the file in the browser:</p>
<pre class="r"><code>mean(iris$Sepal.Length)</code></pre>
<pre class="r"><code>require(ggplot2)
ggplot(iris, aes(Sepal.Length, Sepal.Width, color = Species)) +
geom_point() +
geom_smooth(method = "lm") +
scale_color_manual(values = c("#3B9AB2", "#E4B80E", "#F21A00"))</code></pre>
</div>
<div id="rmarkdown-post" class="section level4">
<h4>Rmarkdown post</h4>
<p>Now let’s create a plain markdown post and see how it differs from the plain markdown file.</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::new_post("newrmd", ext = '.Rmd')</code></pre>
<p>Add the same text as above to your <code>.Rmd</code> file and view it in the browser. We can see that the text looks similar in both files, but only in the R Markdown file are we able to execute code chunks.</p>
<p>This feature makes R Mardown posts ideal for sharing code via your website.</p>
</div>
<div id="adding-html-files-directly" class="section level4">
<h4>Adding HTML files directly</h4>
<p>Rather than creating a markdown post, you may simply want to an HTML file that you’ve already created (e.g. your data science tutorial). To do this, you would simply copy the file into <code>/content/</code> or an alternative location.</p>
<p>To compare the output of adding an HTML file versus adding an Rmd file, we’ll create a folder called “data-visualization” and copy two test files into it.</p>
<pre class="bash"><code># make the directory
mkdir ../default-site/content/data-visualization
# copy the HTML and .Rmd files to the directory
cp datavis.html ../default-site/content/data-visualization
cp datavis_rmd.Rmd ../default-site/content/data-visualization</code></pre>
<p>Serve the site</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::serve_site()</code></pre>
<p>Compare the files by opening the site in the browser and navigating to:</p>
<pre><code>/data-visualization/datavis
/data-visualization/datavis_rmd</code></pre>
</div>
</div>
</div>
</div>
<div id="advanced-features" class="section level1">
<h1>Advanced features</h1>
<div id="password-protection" class="section level2">
<h2>Password protection</h2>
</div>
<div id="shiny-apps" class="section level2">
<h2>Shiny apps</h2>
</div>
<div id="commenting" class="section level2">
<h2>Commenting</h2>
</div>
</div>
<div id="explore-the-hugo-academic-template" class="section level1">
<h1>Explore the <code>hugo-academic</code> template</h1>
<p>Now that we’ve gotten our bearings with the default template, let’s check out a popular template for making personal academic website created by <a href="https://github.com/gcushen/hugo-academic">George Cushen</a>.</p>
<p>Here are a few examples of how people have modified this template:<br />
+ <a href="https://alison.rbind.io/">Alison Hill</a><br />
+ <a href="http://physics.ucr.edu/~flip/">Flip Tandeo</a><br />
+ <a href="https://amlankar.github.io/">Amlan Kar</a><br />
+ <a href="https://fischcheng.github.io/">Yu Cheng</a></p>
<p>We’ll call our new website <code>academic-site</code> and it will be saved to the <code>rstudio-websites</code> directory.</p>
<pre class="r"><code>blogdown::new_site("../academic-site", theme = "gcushen/hugo-academic")</code></pre>
<p>Render the site, if necessary.</p>
<pre class="r"><code>setwd("../academic-site/")
blogdown::serve_site()</code></pre>
<p>Click around the rendered website. What features seem useful? What features would you want in a personal website?</p>
<p>Now, let’s check out the file structure and take a look at what’s in the following files/directories: + <code>config.toml</code> + content</p>
</div>
<div id="publish-your-website" class="section level1">
<h1>Publish your website</h1>
<p>To create your website for publishing, execute <code>blogdown::hugo_build()</code>. This will create/update the <code>public/</code> directory in your site’s root directory.</p>
<p>Before we build and deploy our site, we need to do a couple of things:</p>
<p>Create a repo for your website on GitHub. Make sure that you <strong>do not</strong> initialize it with a <code>README</code> (you could, but then the following directions will not work properly).</p>
<p>If you’re site will be hosted in a subdirectory (e.g. username.github.io/repo-name), you’ll need to set <code>relativeurls = true</code> in <code>config.toml</code>. More info on this <a href="https://github.com/rstudio/blogdown/issues/84">here</a>.</p>
<pre><code>relativeurls = true</code></pre>
<p>Build the site. Executing this command will update the <code>/public/</code> folder with all of your new content.</p>
<pre class="r"><code>setwd("../default-site/")
blogdown::hugo_build()</code></pre>
<p>There are several ways to publish your website. Today, we’re going to go over how to deploy your sit using git from the command line. There are other options though, e.g. the authors of <em>blogdown: Creating Websites with R Markdown</em> recommend using Netlify to serve your site. Lots more on publishing your site <a href="https://bookdown.org/yihui/blogdown/deployment.html">in the book</a>.</p>
<p>In the command line, navigate to the public folder in your site</p>
<pre class="bash"><code>cd ~/Documents/Courses/PSY607_DataScience/default-site/public</code></pre>
<p>Inialize git</p>
<p>It’s important that the public folder is not currenly living in a git repository. To check whether git is initialized type <code>git status</code>.</p>
<pre class="bash"><code>git init</code></pre>
<p>Add remote repository</p>
<pre class="bash"><code>git remote add origin https://github.com/dcosme/test-site.git</code></pre>
<p>Add and commit all the files</p>
<pre class="bash"><code>git add .
git commit -m "initial commit"</code></pre>
<p>Push local changes to remote repository</p>
<pre class="bash"><code>git push origin master</code></pre>
<p>In Github, enable GitHub Pages <code>Your repo > Settings > GitHub Page > Source = master branch > Save</code></p>
<p>If this has worked, there should now be a link highlighted in blue with the address to your website. <img src="git_site.png" alt=""></p>
<p>Go to your website and bask in the glory <f0><U+009F><U+008E><U+0089></p>
</div>
<div id="workflow" class="section level1">
<h1>Workflow</h1>
<p>Here is the <a href="https://slides.yihui.name/2017-rmarkdown-UNL-Yihui-Xie.html#30">suggested workflow</a> from the main developer of <strong>blogdown</strong>, Yihui Xie:</p>
<blockquote>
<ol style="list-style-type: decimal">
<li>Open your website project, click the “Serve Site” addin<br />
</li>
<li>Revise old pages/posts, or click the “New Post” addin<br />
</li>
<li>Write and save (take a look at the automatic preview)<br />
</li>
<li>Push everything to Github, or upload the public/ directory to Netlify directly</li>
</ol>
</blockquote>
<p>More on the recommended workflow <a href="https://bookdown.org/yihui/blogdown/workflow.html">here</a>.</p>
</div>
<div id="mini-mega-ulimate-hack" class="section level1">
<h1>Mini (mega? ulimate?) hack</h1>
<p>You final hack in this class if to create a personal website and post it to GitHub. You can use any template you want or make it from scratch using the <strong>rmarkdown</strong> package <a href="http://nickstrayer.me/RMarkdown_Sites_tutorial/">(tutorial here)</a>.</p>
<p>Here are the components you should include:</p>
<ol style="list-style-type: decimal">
<li>Homepage with a brief description about your research interests</li>
<li>A CV (either written in markdown or simply uploaded as a PDF)</li>
<li>Your tutorial from this class</li>
</ol>
<p>Change colors, futz with custom CSS, make a shiny app and link to it – feel free to add anything else you’d like!</p>
<p>Go <f0><U+009F><U+008D><U+008C> <f0><U+009F><U+008D><U+008C></p>
<p>Or just do the bare minimum because it’s the last week of the term <f0><U+009F><U+0098><U+0084></p>
</div>
<div id="helpful-resources" class="section level1">
<h1>Helpful resources</h1>
<ul>
<li><a href="https://bookdown.org/yihui/blogdown/" class="uri">https://bookdown.org/yihui/blogdown/</a><br />
</li>
<li><a href="https://apreshill.github.io/data-vis-labs-2018/slides/06-slides_blogdown.html#1" class="uri">https://apreshill.github.io/data-vis-labs-2018/slides/06-slides_blogdown.html#1</a><br />
</li>
<li><a href="https://alison.rbind.io/slides/blogdown-workshop-slides" class="uri">https://alison.rbind.io/slides/blogdown-workshop-slides</a></li>
<li><a href="https://alison.rbind.io/post/up-and-running-with-blogdown/#build-your-site-in-rstudio" class="uri">https://alison.rbind.io/post/up-and-running-with-blogdown/#build-your-site-in-rstudio</a></li>
<li><a href="http://amber.rbind.io/blog/2016/12/19/creatingsite/" class="uri">http://amber.rbind.io/blog/2016/12/19/creatingsite/</a></li>
<li><a href="https://gohugo.io/" class="uri">https://gohugo.io/</a><br />
</li>
<li><a href="http://elipapa.github.io/markdown-cv/" class="uri">http://elipapa.github.io/markdown-cv/</a></li>
</ul>
</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>