<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/all-my-talks-in-one-place-plus-a-hugo-walkthrough/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://itsalocke.com/presentation-site-hugo-walkthrough/"> R – Locke Data</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<div></div>
<p>I mentioned in an earlier post about how I’m <a rel="nofollow" href="http://itsalocke.com/improving-automatic-document-production-with-r/" target="_blank">revamping my presentation slides process</a> but that I hadn’t tackled the user experience of browsing my slides, which wasted lots of the effort I put in. To tackle this part of it, I’ve made <a rel="nofollow" href="http://lockedata.uk/" target="_blank">lockedata.uk</a> using Hugo to be a way of finding and browsing presentations on R, SQL, and more. As Hugo is so easy, I thought I’d throw in a quick Hugo walkthrough too so that you could build your own blog/slides/company site if you wanted to.</p>
<p>The great thing about using Hugo with a sort of blog taxonomy system is now all my presentations have categories and tags so you can find something relevant. Additionally, I’m also ordering slides by the date of the last presentation. This means if you see me present, you can straight away get the slides – they’ll be the first thing on the page.</p>
<p>A number of the talks will also include the videos (embedded with <a rel="nofollow" href="http://gohugo.io/extras/shortcodes/" target="_blank">Hugo shortcodes</a> for the most part) from when I’ve presented the talk as that’s the most robust way of getting value out of the slides.</p>
<p>
<figure class="wp-caption"><a rel="nofollow" href="http://lockedata.uk/" target="_blank"><img sizes="(max-width: 750px) 100vw, 750px" src="https://i2.wp.com/itsalocke.com/wp-content/uploads/2017/06/lockedatapreview-1024x506.png?w=450" alt="lockedata.uk - presentation website built with Hugo. Read the post to get a hugo walkthrough." class="wp-image-62246" data-recalc-dims="1"></a><br>
<figcaption class="wp-caption-text">lockedata.uk – presentation website built with Hugo. Read the post to get a hugo walkthrough.</figcaption>
</figure>
<p>
If you’re interested in the tech behind the site read on…</p>
<h2>Hugo walkthrough</h2>
<p>This site uses <a rel="nofollow" href="https://gohugo.io/" target="_blank">Hugo</a>. Hugo is a “static site generator” which means you write a bunch of markdown and it generates html. This is great for building simple sites like company leafletware or blogs.</p>
<p>You can get Hugo across platforms and on Windows it’s just an executable you can put in your program files. You can then work with it like git in the command line.</p>
<p>You will want to read some of the <a rel="nofollow" href="https://gohugo.io/overview/introduction/" target="_blank">docs</a> to make customisations but the “happy path” Hugo walkthrough to get started is:</p>
<ol>
<li>Make a new site you simply run <code>hugo new site NAME</code></li>
<li>Let’s do some git, run <code>git init</code> inside the new site’s directory to get your git repo going</li>
<li>Make a repo on GitHub that we’ll want to push to later on</li>
<li>Find a <a rel="nofollow" href="https://themes.gohugo.io/" target="_blank">theme</a> to suit your needs and go to its github page</li>
<li>Change to the themes directory then clone the theme into the themes directory</li>
<li>Back on the top-level of your site, extract your themes example content with something like <code>cp -av themes/academic/exampleSite/* .</code></li>
<li>Get your site running locally with real-time changes by running <code>hugo server -w</code></li>
<li>Start editing the sample content to meet your needs and using the site (available at <code>localhost:1313</code>) to see how it’s going</li>
<li>When you’re happy, stop the local server (in Windows, this is ctrl+c) </li>
<li>Make sure in the <code>config.toml</code> file, the site URL reflects where it’ll go on Github i.e. <code>http://yourusername.gihub.io/yourreponame/</code></li>
<li>Generate your site to the <code>docs</code> directory with <code>hugo -d docs</code></li>
<li>Commit everything and push to your GitHub repo</li>
<li>In the Settings page for the Github repo, set the <code>Github Pages > Source</code> option to “master branch /docs folder”</li>
</ol>
<p>Now your site will be available <code>yourusername.gihub.io/yourreponame</code></p>
<p>PS If you want to do a lot of R in your blog, you can utilise <a rel="nofollow" href="https://github.com/rstudio/blogdown" target="_blank">blogdown</a> which is an rmarkdown Hugo hybrid.</p>
<p>The post <a rel="nofollow" href="http://itsalocke.com/presentation-site-hugo-walkthrough/" target="_blank">All my talks in one place (plus a Hugo walkthrough!)</a> appeared first on <a rel="nofollow" href="http://itsalocke.com/" target="_blank">Locke Data</a>. Locke Data are a data science consultancy aimed at helping organisations get ready and get started with data science.</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="http://itsalocke.com/presentation-site-hugo-walkthrough/"> R – Locke Data</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 width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/2Kjz33t8Kqk" height="1"></a></div>