<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/starting-a-rmarkdown-blog-with-bookdown-hugo-github/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://talesofr.wordpress.com/2017/08/18/starting-a-rmarkdown-blog-with-bookdown-hugo-github/"> R – Tales of R</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>Finally, -after 24h of failed attempts-, I could get my favourite <a rel="nofollow" href="https://gohugo.io/" target="_blank">Hugo</a> <a rel="nofollow" href="https://github.com/kakawait/hugo-tranquilpeak-theme" target="_blank">theme</a> up and running with R Studio and <a rel="nofollow" href="https://bookdown.org/yihui/blogdown/" target="_blank">Blogdown</a>.</p>
<p>All the steps I followed are detailed in my new <a rel="nofollow" href="https://aurora-mareviv.github.io/2017/08/r-blogdown-setup-in-gihub/" target="_blank">Blogdown entry</a>, which is also a GitHub repo.</p>
<p>After exploring some alternatives, like <a rel="nofollow" href="https://shiring.github.io/blogging/2016/12/04/diy_your_own_blog" target="_blank">Shirin’s</a> (with Jekyll), and <a rel="nofollow" href="https://proquestionasker.github.io/blog/Making_Site/" target="_blank">Amber Thomas</a> advice (which involved Git skills beyond my basic abilities), I was able to install Yihui’s <a rel="nofollow" href="https://github.com/yihui/hugo-lithium-theme" target="_blank">hugo-lithium-theme</a> in a new repository.</p>
<p>However, I wanted to explore other blog templates, hosted in GiHub, like:</p>
<ul>
<li><a rel="nofollow" href="https://sourcethemes.com/academic/" target="_blank">gcushen/hugo-academic</a></li>
<li><a rel="nofollow" href="https://jpescador.com/" target="_blank">jpescador/hugo-future-imperfect</a> and</li>
<li><a rel="nofollow" href="https://tranquilpeak.kakawait.com/" target="_blank">kakawait/hugo-tranquilpeak-theme</a></li>
<li>Or this one <a rel="nofollow" href="https://themes.gohugo.io/theme/hugo-creative-portfolio-theme/" target="_blank">kishaningithub/hugo-creative-portfolio-theme</a></li>
</ul>
<p>The three first themes are currently linked in the <a rel="nofollow" href="https://bookdown.org/yihui/blogdown/other-themes.html" target="_blank">blogdown</a> documentation as being most simple and easy to set up for unexperienced blog programmers, but I hope the list will grow in the following months. For those who are willing to experiment, the complete list is <a rel="nofollow" href="https://themes.gohugo.io/" target="_blank">here</a>.</p>
<p>Finally I chose the hugo-tranquilpeak theme, by <a rel="nofollow" href="https://github.com/kakawait" target="_blank">Thibaud Leprêtre</a>, for which I mostly followed Tyler Clavelle’s <a rel="nofollow" href="https://tclavelle.github.io/blog/blogdown_github/" target="_blank">entry</a> on the topic. This approach turned out to be easy and good, given some conditions:</p>
<ul>
<li>Contrary to Yihui Xie’s <a rel="nofollow" href="https://bookdown.org/yihui/blogdown/deployment.html" target="_blank">advice</a>, I chose github.io to host my blog, instead of Netlify (I love my desktop integration with GitHub, so it was interesting for me not to move to another service for my static content).</li>
<li>In my machine, I installed Blogdown &amp; Hugo using R studio (v 1.1.336).</li>
<li>In GiHub, it was easier for me to host the blog directly in my main github pages repository (always named <em><span>[USERNAME].github.io</span></em>), in the <span>master</span> branch, following Tyler’s tutorial.</li>
<li>I have basic knowledge of html, css and javascript, so I didn’t mind to tinker around with the theme.</li>
<li>My custom styles didn’t involve theme <a rel="nofollow" href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#quick--easy-modifications" target="_blank">rebuilding</a>. At this moment they’re simple cosmetic tricks.</li>
</ul>
<div>
<p>The steps I followed were:</p>
<div>
<h2>Git &amp; GitHub repos</h2>
<ul>
<li>Setting a <a rel="nofollow" href="https://github.com/" target="_blank">GitHub</a> repo with the name <em><span>[USERNAME].github.io</span></em> (in my case <em><span>aurora-mareviv.github.io</span></em>). See <a rel="nofollow" href="https://help.github.com/articles/create-a-repo/" target="_blank">this</a> and <a rel="nofollow" href="https://tclavelle.github.io/blog/blogdown_github/" target="_blank">this</a>.</li>
<li>Create a <code>git</code> repo in your machine:
<ul>
<li>Create manually a new directory called <span>[USERNAME].github.io</span>.</li>
<li>Run in the terminal (Windows users have to install <a rel="nofollow" href="https://git-scm.com/downloads" target="_blank"><code>git</code></a> first):</li>
</ul>
<pre><code><span>cd</span> /Git/[USERNAME].github.io <span># your path may be different</span>
</code></pre>
<pre><code>git init <span># initiates repo in the directory</span></code></pre>
<pre><code>git remote add origin https://github.com/[USERNAME]/[USERNAME].github.io <span># connects git local repo to remote Github repo</span>
</code></pre>
<pre><code>git pull origin master <span># in case you have LICENSE and Readme.md files in the GitHub repo, they're downloaded</span></code></pre>
</li>
<li>For now, your repo is ready. We will now focus in creating &amp; customising our Blogdown.</li>
</ul>
</div>
<div>
<h2>RStudio and <span>blogdown</span></h2>
<ul>
<li>We will open RStudio (v 1.1.336, <a rel="nofollow" href="https://www.rstudio.com/products/rstudio/download/preview/" target="_blank">development</a> version as of today).
<ul>
<li>First, you may need to install Blogdown in R:</li>
</ul>
<pre><code><span>install</span>.packages(<span>&quot;blogdown&quot;</span>)</code></pre>
<ul>
<li>In RStudio, select the <em>Menu > File > New Project</em> following the lower half of these <a rel="nofollow" href="https://bookdown.org/yihui/blogdown/rstudio-ide.html" target="_blank">instructions</a>. The wizard for setting up a Hugo Blogdown project may not be yet available in your RStudio version (not for much longer probably).</li>
</ul>
</li>
</ul>
<div>
<p><img alt="Creating new Project" src="https://i2.wp.com/aurora-mareviv.github.io/images/tuto/tuto1.png?w=456&ssl=1" data-recalc-dims="1"></p>
<p><em>Creating new Project</em></p>
</div>
<div>
<p><img alt="Selecting Hugo Blogdown format" src="https://i2.wp.com/aurora-mareviv.github.io/images/tuto/tuto2.png?w=456&ssl=1" data-recalc-dims="1"></p>
<p><em>Selecting Hugo Blogdown format</em></p>
</div>
<div>
<p><em><img alt="Selecting Hugo Blogdown theme" src="https://i0.wp.com/aurora-mareviv.github.io/images/tuto/tuto3.png?w=456&ssl=1" data-recalc-dims="1"></em></p>
<p><em>Selecting Hugo Blogdown theme</em></p>
<p><img alt="A config.toml file appears" src="https://i0.wp.com/aurora-mareviv.github.io/images/tuto/tuto4a.png?w=456&ssl=1" data-recalc-dims="1"></p>
</div>
<div>
<p> </p>
<p><em>A <strong>config.toml</strong> file appears</em></p>
</div>
<hr>
</div>
</div>
<div>
<h1></h1>
<h1>Customising paths and styles</h1>
<p>Before we <span>build</span> and <span>serve</span> our site, we need to tweak a couple of things in advance, if we want to smoothly deploy our blog into GitHub pages.</p>
<div>
<h2>Modify <span>config.toml</span> file</h2>
<p>To integrate with GiHub pages, there are the essential modifications at the top of our <em>config.toml</em> file:</p>
<ul>
<li>We need to set up the base URL to the “root” of the web page (<a rel="nofollow" href="https://%5Busername%5D.github.io/" target="_blank">https://[USERNAME].github.io/</a> in this case)</li>
<li>By default, the web page is published in the “public” folder. We need it to be published in the root of the repository, to match the structure of the GitHub <span>master</span>branch:</li>
</ul>
<pre><code><span>baseurl</span> = <span>&quot;/&quot;</span>
<span>publishDir</span> = <span>&quot;.&quot;</span></code></pre>
<ul>
<li>Other useful global settings:</li>
</ul>
<pre><code><span>ignoreFiles</span> = [<span>&quot;\\.Rmd$&quot;</span>, <span>&quot;\\.Rmarkdown$&quot;</span>, <span>&quot;_files$&quot;</span>, <span>&quot;_cache$&quot;</span>]
<span>enableEmoji</span> = <span>true</span></code></pre>
<div>
<h2>Images &amp; styling paths</h2>
<p>We can revisit the <em>config.toml</em> file to make changes to the default settings.</p>
<p>The logo that appears in the corner must be in the root folder. To modify it in the <em>config.toml</em>:</p>
<pre><code><span>picture</span> = <span>&quot;logo.png&quot;</span> <span># the path to the logo</span></code></pre>
<p>The cover (background) image must be located in <span>/themes/hugo-tranquilpeak-theme/static/images </span>. To modify it in the <em>config.toml</em>:</p>
<pre><code><span>coverImage</span> = <span>&quot;myimage.jpg&quot;</span></code></pre>
<p>We want some custom css and js. We need to locate it in <span>/static/css </span>and in <span>/static/js</span>respectively.</p>
<pre><code><span># Custom CSS. Put here your custom CSS files. They are loaded after the theme CSS;</span>
<span># they have to be referred from static root. Example</span>
<span>customCSS</span> = [<span>&quot;css/my-style.css&quot;</span>]

<span># Custom JS. Put here your custom JS files. They are loaded after the theme JS;</span>
<span># they have to be referred from static root. Example</span>
<span>customJS</span> = [<span>&quot;js/myjs.js&quot;</span>]</code></pre>
</div>
</div>
<div>
<h2>Custom css</h2>
<p>We can add arbitrary classes to our <em>css</em> file (see above).</p>
<p>Since I started writing in Bootstrap, I miss it a lot. Since this theme already has bootstrap classes, I brought some others I didn’t find in the theme (they’re <a rel="nofollow" href="https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md" target="_blank">available</a> for <em>.md</em> files, but currently not for <em>.Rmd</em>)</p>
<p>Here is my custom <em>css</em> file to date:</p>
<pre><code>/* @import url(<span>'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css'</span>); may conflict with default theme*/
@import url(<span>'https://fonts.googleapis.com/icon?family=Material+Icons'</span>); /*google icons*/
@import url(<span>'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'</span>); /*font awesome icons*/

.input-lg {
  font-size: 30px;
}
.input {
  font-size: 20px;
}
.font-sm {
    font-size: 0.7em;
}
.texttt {
  font-family: monospace;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: <span>#3c763d;</span>
background-color: <span>#dff0d8;</span>
border-color: <span>#d6e9c6;</span>
}
.alert-danger,
.alert-error {
  color: <span>#b94a48;</span>
  background-color: <span>#f2dede;</span>
  border-color: <span>#eed3d7;</span>
}
.alert-info {
  color: <span>#3a87ad;</span>
  background-color: <span>#d9edf7;</span>
  border-color: <span>#bce8f1;</span>
}
.alert-gray {
  background-color: <span>#f2f3f2;</span>
  border-color: <span>#f2f3f2;</span>
}

/*style <span>for</span> printing*/
@media <span>print</span> {
    .noPrint {
       display:none;
   }
    }

/*link formatting*/
a:link {
    color: <span>#478ca7;</span>
    text-decoration: none;
} 
a:visited {
    color: <span>#478ca7;</span>
    text-decoration: none;
}
a:hover {
    color: <span>#82b5c9;</span>
    text-decoration: none;
}</code></pre>
<p>Also, we have <a rel="nofollow" href="http://fontawesome.io/icons/" target="_blank">font-awesome</a> icons!</p>
</div>
</div>
<div>
<h1>Site build with <span>blogdown</span></h1>
<p>Once we have ready our theme, we can add some content, modifying or deleting the various examples we will find in <span>/content/post </span>.</p>
<p>We need to make use of Blogdown &amp; Hugo to compile our <em>.Rmd</em> file and create our <em>html </em>post:</p>
<pre><code>blogdown::build_site()
blogdown::serve_site()</code></pre>
<p>In the viewer, at the right side of the IDE you can examine the resulting <em>html</em> and see if something didn’t go OK.</p>
</div>
<div>
<h1>Deploying the site</h1>
<div>
<h4>Updating the local <span>git </span>repository</h4>
<p>This can be done with simple git commands:</p>
<pre><code><span>cd</span> /Git/[USERNAME].github.io <span># your path to the repo may be different</span>
git add . <span># indexes all files that wil be added to the local repo</span>
git commit -m <span>&quot;Starting my Hugo blog&quot;</span> <span># adds all files to the local repo, with a commit message</span></code></pre>
</div>
<div>
<h4>Pushing to GitHub</h4>
<pre><code>git push origin master <span># we push the changes from the local git repo to the remote repo (GitHub repo)</span></code></pre>
<p>Just go to the page <span><a rel="nofollow" href="https://%5Busername%5D.github.io/" target="_blank">https://[USERNAME].github.io</a></span> and enjoy your blog!</p>
<hr>
</div>
</div>
<div>
<h1></h1>
<h1>R code</h1>
<p>Works just the same as in Rmarkdown. R code is compiled into an <em>html</em> and published as static web content in few steps. Welcome to the era of reproducible blogging!</p>
<p>The figure <a rel="nofollow" href="https://aurora-mareviv.github.io/2017/08/r-blogdown-setup-in-gihub/#fig:diamond" target="_blank">1</a> uses the <code>ggplot2</code> library:</p>
<pre><code>library(ggplot2)
ggplot(diamonds, aes(x=carat, y=price, color=clarity)) + geom_point()</code></pre>
<div>
<p><span></span><img alt="diamonds plot with ggplot2." src="https://i0.wp.com/aurora-mareviv.github.io/post/2017-08-17-r-rmarkdown_files/figure-html/diamond-1.png?w=450&ssl=1" data-recalc-dims="1"></p>
<p>Figure 1: diamonds plot with ggplot2.</p>
</div>
</div>
<div>
<h1>Rmd source code</h1>
<p>You can download it from <a rel="nofollow" href="https://github.com/aurora-mareviv/aurora-mareviv.github.io/blob/master/content/post/2017-08-17-r-rmarkdown.Rmd" target="_blank">here</a></p>
</div>
<div></div>
<div></div>
<p>I, for one, welcome the new era of reproducible blogging!</p>
<p><img data-orig-file="https://talesofr.files.wordpress.com/2017/08/hexbins.png?w=456" data-orig-size="676,676" data-medium-file="https://talesofr.files.wordpress.com/2017/08/hexbins.png?w=456?w=300" data-attachment-id="895" data-image-meta="{" data-image-description="" src="https://talesofr.files.wordpress.com/2017/08/hexbins.png?w=456" data-permalink="https://talesofr.wordpress.com/?attachment_id=895" data-large-file="https://talesofr.files.wordpress.com/2017/08/hexbins.png?w=456?w=584" alt="hexbins" data-image-title="hexbins" sizes="(max-width: 584px) 100vw, 584px" data-comments-opened="1" class="wp-image-895" data-recalc-dims="1"></p>
<p> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/talesofr.wordpress.com/901/" target="_blank"><img border="0" alt="" src="http://feeds.wordpress.com/1.0/comments/talesofr.wordpress.com/901/"></a> <img border="0" alt="" src="https://i1.wp.com/pixel.wp.com/b.gif?resize=1%2C1&ssl=1" data-recalc-dims="1"></p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://talesofr.wordpress.com/2017/08/18/starting-a-rmarkdown-blog-with-bookdown-hugo-github/"> R – Tales of R</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/_Sd2PWU8WkU" height="1"></a></div>