<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>Web - Tag - Rick Roché</title><link>https://www.rickroche.com/tags/web/</link><description>Web - Tag - Rick Roché</description><generator>Hugo -- gohugo.io</generator><language>en</language><copyright>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.</copyright><lastBuildDate>Mon, 04 Jan 2021 14:05:53 +0200</lastBuildDate><atom:link href="https://www.rickroche.com/tags/web/" rel="self" type="application/rss+xml"/><item><title>Creating This Website</title><link>https://www.rickroche.com/2021/01/creating-this-website/</link><pubDate>Mon, 04 Jan 2021 14:05:53 +0200</pubDate><author>
Richard Roché</author><guid>https://www.rickroche.com/2021/01/creating-this-website/</guid><description><![CDATA[<div class="featured-image">
                <img src="https://www.rickroche.com/2021/01/creating-this-website/install-website-cover.png" referrerpolicy="no-referrer">
            </div><p>I wanted to create a super simple website that is easy to maintain and easy to add content to. You are reading this on the finished product, here is what makes it tick.</p>
<p>My searches started looking around for static website generators (I was hoping that I could run this without a database and all that jazz that normally gets dragged along) and stumbled upon <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer">Hugo</a>
 whose <a href="https://github.com/gohugoio/hugo" target="_blank" rel="noopener noreffer">GitHub README</a>
 describes it as</p>
<blockquote>
<p>A Fast and Flexible Static Site Generator built with love by <a href="https://github.com/bep" target="_blank" rel="noopener noreffer">bep</a>
, <a href="http://spf13.com/" target="_blank" rel="noopener noreffer">spf13</a>
 and <a href="https://github.com/gohugoio/hugo/graphs/contributors" target="_blank" rel="noopener noreffer">friends</a>
 in <a href="https://golang.org/" target="_blank" rel="noopener noreffer">Go</a>
.</p>
</blockquote>
<p>This immediately ticked a few boxes for me being a Go fan, being able to keep everything in version control and write my posts in markdown. I dived right in by following the <a href="https://gohugo.io/getting-started/quick-start/" target="_blank" rel="noopener noreffer">Quick Start</a>
 and was up and running in a couple of minutes. Very awesome developer experience.</p>
<p>After reading <a href="https://flaviocopes.com/start-blog-with-hugo/" target="_blank" rel="noopener noreffer">How to start a blog using Hugo</a>
 I fiddled around with a few of the <a href="https://themes.gohugo.io/" target="_blank" rel="noopener noreffer">themes</a>
 available, initially choosing <a href="https://themes.gohugo.io/anatole/" target="_blank" rel="noopener noreffer">anatole</a>
 to get something up and running.</p>
<h2 id="the-basics">The basics</h2>
<p>With my initial investigations running on my local machine, the time for continuous deployment had arrived! First step: Get the code into version control&hellip; For me this means creating repo on <a href="https://github.com/" target="_blank" rel="noopener noreffer">GitHub</a>
 and pushing my initial code to <a href="https://stevenmortimer.com/5-steps-to-change-github-default-branch-from-master-to-main/" target="_blank" rel="noopener noreffer"><code>main</code></a>
.</p>
<p>For the deployment of the website I decided to use <a href="https://www.netlify.com/" target="_blank" rel="noopener noreffer">Netlify</a>
. It&rsquo;s awesome and has a great developer experience - essentially add the site, linking your repo on GitHub (or other supported version control), Hugo gets picked up automagically and after hitting Deploy Site! you will be up and running in less than a minute. There is a <a href="https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/" target="_blank" rel="noopener noreffer">Step-by-Step Guide</a>
 to get you on your way if you get stuck.</p>
<p>I gave my site a nice name (<code>rick-roche</code>) to test using <a href="https://rick-roche.netlify.app" target="_blank" rel="noopener noreffer">rick-roche.netlify.app</a>
 immediately and pointed my domain to the Netlify name servers (DNS propagation time can take up to 72 hours) for this site to be live.</p>
<h2 id="finishing-up">Finishing up</h2>
<p>There were a few features I was looking for such as search, extended markdown for adding copyable code snippets and the ability to add tips and notes like I am used to doing when using Confluence for work. I found the <a href="https://themes.gohugo.io/loveit/" target="_blank" rel="noopener noreffer">LoveIt</a>
 theme while browsing through the <a href="https://themes.gohugo.io/" target="_blank" rel="noopener noreffer">Hugo Themes</a>
 which had everything I was looking for.</p>
<p>A few updates later (LoveIt has a lot of configurable options), code pushed to GitHub and an automatic deployment thanks to Netlify and you are looking at the results.</p>
<p>Allowing Hugo and Netlify to do the heavy lifting I have ended up with a website that</p>
<ul>
<li>uses an open-source web framework (I like to be able to see the code)</li>
<li>allows me to easily write content using markdown</li>
<li>has continuous deployment for rapid publishing</li>
<li>my entire website can live in version control</li>
</ul>
<h2 id="references">References</h2>
<p>I googled and read a bunch as I hacked my way through getting this site up. Here are links to the content that stood out!</p>
<ul>
<li><a href="https://gohugo.io/" target="_blank" rel="noopener noreffer">Hugo</a>
</li>
<li><a href="https://themes.gohugo.io/" target="_blank" rel="noopener noreffer">Hugo Themes</a>
 (I used the awesome <a href="https://themes.gohugo.io/loveit/" target="_blank" rel="noopener noreffer">LoveIt</a>
 theme</li>
<li><a href="https://flaviocopes.com/start-blog-with-hugo/" target="_blank" rel="noopener noreffer">Start a blog with Hugo</a>
</li>
<li><a href="https://github.com/spech66/hugo-best-practices" target="_blank" rel="noopener noreffer">Hugo best practices</a>
</li>
<li><a href="https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/" target="_blank" rel="noopener noreffer">A Step-by-Step Guide: Deploying on Netlify</a>
</li>
</ul>
<p>Featured image background by <a href="https://unsplash.com/@nihongraphy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener noreffer">NihoNorway graphy</a>
 on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText%22" target="_blank" rel="noopener noreffer">Unsplash</a>
.</p>]]></description></item></channel></rss>