Jekyll2021-08-22T23:47:39+00:00https://blog.taylorsteinberg.com/feed.xmlTaylor SteinbergThis is the personal blog of Taylor SteinbergHow to Build a Simple Personal Blog2019-07-05T19:37:00+00:002019-07-05T19:37:00+00:00https://blog.taylorsteinberg.com/software/2019/07/05/how-to-build-a-simple-personal-blog<p>This is a tutorial on how to create a simple blog using <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://pages.github.com/">GitHub Pages</a>. I want to give you a fair warning. If you have never worked in software development this process may seem cumbersome. But, if you are willing to get your hands dirty it is well worth it. You’ll also be able to tell all your friends and co-workers that you are a real website developer!</p>
<p>I decided to use Jekyll instead of one of the many other blogging platforms (WordPress, Squarespace, Medium, etc…) because it is free and gives me full control over my design choices. It also has a lot of great features built in; such as themes, Google Analytics, and Disqus support.</p>
<p>There are hundreds of themes available online. Some of them are free and some are not. The following websites are great resources to get an idea of what is out there:</p>
<ul>
<li><a href="https://jekyllthemes.io/">Jekyll Themes</a></li>
<li><a href="https://themeforest.net/search/jekyll">Theme Forest</a></li>
<li><a href="https://pages.github.com/themes/">GitHub Pages Themes</a></li>
</ul>
<p><em>Note: This guide is written with MacOS users in mind.</em></p>
<h2 id="prerequisites">Prerequisites</h2>
<p>The following software is required to get started.</p>
<ul>
<li><a href="https://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="https://bundler.io/">Bundler</a></li>
<li><a href="https://jekyllrb.com/">Jekyll</a></li>
</ul>
<h3 id="installing-ruby">Installing Ruby</h3>
<p>My preferred way to manage Ruby is using <code class="language-plaintext highlighter-rouge">rbenv</code>, a Ruby environment manager. Install <code class="language-plaintext highlighter-rouge">rbenv</code> using <a href="https://brew.sh/">Homebrew</a>.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>brew <span class="nb">install </span>rbenv
</code></pre></div></div>
<p>Once installed, add <code class="language-plaintext highlighter-rouge">rbenv</code> shims to your path:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s1">'export PATH="$HOME/.rbenv/bin:$PATH"'</span> <span class="o">>></span> ~/.bash_profile
<span class="nb">echo</span> <span class="s1">'eval "$(rbenv init -)"'</span> <span class="o">>></span> ~/.bash_profile
<span class="nb">exec</span> <span class="nv">$SHELL</span>
</code></pre></div></div>
<p>This will make the <code class="language-plaintext highlighter-rouge">ruby</code> version we are about to install available.</p>
<p>Find the latest version of <code class="language-plaintext highlighter-rouge">ruby</code> using <code class="language-plaintext highlighter-rouge">rbenv</code>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv <span class="nb">install</span> <span class="nt">--list</span>
</code></pre></div></div>
<p>The output will look something like this:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2.6.1 <span class="c"># Previous</span>
2.6.2 <span class="c"># Previous</span>
2.6.3 <span class="c"># Latest</span>
2.7.0-dev <span class="c"># Developer</span>
2.7.0-preview1 <span class="c"># Preview</span>
</code></pre></div></div>
<p>You want to install the “Latest” version. That is the version with the highest number that isn’t the “Developer” or “Preview” version.</p>
<p>Install the latest version of <code class="language-plaintext highlighter-rouge">ruby</code>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv <span class="nb">install </span>2.6.3
</code></pre></div></div>
<p>Set this version as your global <code class="language-plaintext highlighter-rouge">ruby</code> version:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv global 2.6.3
</code></pre></div></div>
<p>Confirm that this version is set:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby <span class="nt">-v</span>
</code></pre></div></div>
<h3 id="installing-bundler">Installing Bundler</h3>
<p><code class="language-plaintext highlighter-rouge">ruby</code> includes a package manager called <code class="language-plaintext highlighter-rouge">gem</code>. Use <code class="language-plaintext highlighter-rouge">gem</code> to install <code class="language-plaintext highlighter-rouge">bundler</code>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>bundler
</code></pre></div></div>
<p>Confirm that <code class="language-plaintext highlighter-rouge">bundler</code> is installed using:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundler <span class="nt">-v</span>
</code></pre></div></div>
<h3 id="installing-jekyll">Installing Jekyll</h3>
<p><code class="language-plaintext highlighter-rouge">jekyll</code> is a framework for building static websites. Install it using <code class="language-plaintext highlighter-rouge">gem</code>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>jekyll
</code></pre></div></div>
<p>Confirm that <code class="language-plaintext highlighter-rouge">jekyll</code> is installed using:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll <span class="nt">-v</span>
</code></pre></div></div>
<h2 id="creating-your-blog">Creating Your Blog</h2>
<p>Now that we have everything installed, we can create an awesome simple blog using <code class="language-plaintext highlighter-rouge">jekyll</code>!</p>
<p>You can use any name you like for your project. I chose <code class="language-plaintext highlighter-rouge">personal-blog</code>.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll new personal-blog <span class="o">&&</span> <span class="nb">cd </span>personal-blog
</code></pre></div></div>
<p>This will generate everything you need to get started in a new directory called <code class="language-plaintext highlighter-rouge">personal-blog</code>. You can view those files using <code class="language-plaintext highlighter-rouge">ls</code> or open them in your favorite editor. I like to use <a href="https://code.visualstudio.com/">Visual Studio</a> for working on websites. This is how the contents of your blog will appear in Visual Studio:</p>
<p><img src="/assets/images/how-to-build-a-simple-personal-blog/1.jpg" alt="My Personal Blog in Visual Studio" /></p>
<p>Next, you need to use bundler to install all of the necessary dependencies:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle install
</code></pre></div></div>
<p>You can now view your blog at <a href="http://localhost:4000">localhost:4000</a> in your web browser after starting your server using:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>
<h2 id="draft-a-post">Draft a Post</h2>
<p>I like to use the <code class="language-plaintext highlighter-rouge">jekyll-compose</code> <code class="language-plaintext highlighter-rouge">gem</code> to streamline my writing. Install it by adding it to the <code class="language-plaintext highlighter-rouge">jekyll_plugins</code> section of your <code class="language-plaintext highlighter-rouge">Gemfile</code>:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">group</span> <span class="ss">:jekyll_plugins</span> <span class="k">do</span>
<span class="n">gem</span> <span class="s1">'jekyll-compose'</span>
<span class="k">end</span>
</code></pre></div></div>
<p>Then install it using:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">install</span>
</code></pre></div></div>
<p>Once installed you have some new commands at your disposal to draft, publish and unpublish posts. Let’s get started by creating our first draft:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll draft <span class="s2">"My First Post"</span>
</code></pre></div></div>
<p>This will create a new file in the <code class="language-plaintext highlighter-rouge">_drafts</code> directory called <code class="language-plaintext highlighter-rouge">my-first-post.md</code>.</p>
<p>You can then view it on your local server by issuing the <code class="language-plaintext highlighter-rouge">--drafts</code> flag on startup:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div></div>
<p>Now when you navigate to <a href="http://localhost:4000">localhost:4000</a> in your web browser, you will see your new post, “My First Post”:</p>
<p><img src="/assets/images/how-to-build-a-simple-personal-blog/2.jpg" alt="My First Post" /></p>
<h2 id="publish-a-post">Publish a Post</h2>
<p>Once you are ready, use the <code class="language-plaintext highlighter-rouge">publish</code> command to publish your draft:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll publish _drafts/my-first-post.md
</code></pre></div></div>
<p>This will move the file <code class="language-plaintext highlighter-rouge">my-first-post.md</code> to the <code class="language-plaintext highlighter-rouge">_posts</code> folder and rename it using the current date as <code class="language-plaintext highlighter-rouge">2019-07-05-my-first-post.md</code>.</p>
<p>Now the post will be available on our server without using the <code class="language-plaintext highlighter-rouge">--drafts</code> flag:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>
<p>If you want to unpublish the post and return it to the drafts folder, you can do so using the <code class="language-plaintext highlighter-rouge">unpublish</code> command:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll publish _posts/2019-07-05-my-first-post.md
</code></pre></div></div>
<h2 id="deploy-to-github-pages">Deploy to GitHub Pages</h2>
<p>Deploying to GitHub Pages is the easiest way to make your blog accessible on the internet. Once deployed your blog will be available on the <code class="language-plaintext highlighter-rouge">github.io</code> domain.</p>
<p>Before publishing to GitHub Pages, you first need to add the <code class="language-plaintext highlighter-rouge">github-pages</code> <code class="language-plaintext highlighter-rouge">gem</code> to your <code class="language-plaintext highlighter-rouge">Gemfile</code>. Jekyll already generated it for us, all you have to do is uncomment the following line and run <code class="language-plaintext highlighter-rouge">bundle install</code>.</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">gem</span> <span class="s2">"github-pages"</span><span class="p">,</span> <span class="ss">group: :jekyll_plugins</span>
</code></pre></div></div>
<p>Now you are ready to <code class="language-plaintext highlighter-rouge">push</code> your project to GitHub. Create a public repository using this <a href="https://help.github.com/en/articles/create-a-repo">guide</a>.</p>
<p>Once you have pushed your code to the master branch. Go to your project settings and enable GitHub Pages:</p>
<p><img src="/assets/images/how-to-build-a-simple-personal-blog/3.jpg" alt="GitHub Pages Settings" /></p>
<p>Note: I’ve registered my blog under a custom domain so your settings will look a little bit different. Check out my post on <a href="/software/2019/07/02/how-to-build-a-simple-personal-website.html">How to Build a Simple Personal Website</a> to learn how to register a custom domain.</p>
<p>More information on deploying to GitHub Pages can be found <a href="https://help.github.com/en/articles/setting-up-your-github-pages-site-locally-with-jekyll">here</a>.</p>
<h2 id="next-steps">Next Steps</h2>
<p>Now you have an awesome blog published on the internet!</p>
<p>Jekyll has tons of features and they have provided some great documentation to learn how everything works. Check out the <a href="https://jekyllrb.com/docs/step-by-step/01-setup/">Step by Step Tutorial</a> after a nice hike to learn more.</p>
<p>I hope you learned something. Leave me a comment below if you run into any problems or have additional questions.</p>This is a tutorial on how to create a simple blog using Jekyll and GitHub Pages. I want to give you a fair warning. If you have never worked in software development this process may seem cumbersome. But, if you are willing to get your hands dirty it is well worth it. You’ll also be able to tell all your friends and co-workers that you are a real website developer!How to Build a Simple Personal Website2019-07-02T18:37:00+00:002019-07-02T18:37:00+00:00https://blog.taylorsteinberg.com/software/2019/07/02/how-to-build-a-simple-personal-website<p>This tutorial will teach you how to host a personal website on the internet for free, plus domain fees, using <a href="https://admin.gandi.net">Gandi.net</a>, <a href="https://pages.github.com/">GitHub Pages</a>, and <a href="https://cloudflare.com/">Cloudlfare</a>.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>You will need a personal account on each of the following:</p>
<ul>
<li><a href="https://admin.gandi.net">Gandi.net</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="https://cloudflare.com/">Cloudlfare</a></li>
</ul>
<h2 id="domain">Domain</h2>
<ol>
<li>Register a domain on <a href="https://www.gandi.net/">Gandi.net</a>.</li>
</ol>
<h2 id="dns">DNS</h2>
<h3 id="a-records">A Records</h3>
<ol>
<li>On <a href="https://admin.gandi.net">Gandi.net</a> add the following <a href="#a">A records</a> to your DNS settings: Domain > DNS Records.</li>
</ol>
<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>;; A Records
example.com. 1 IN A 185.199.108.153
example.com. 1 IN A 185.199.111.153
example.com. 1 IN A 185.199.110.153
example.com. 1 IN A 185.199.109.153
</code></pre></div></div>
<p>Note: Replace <code class="language-plaintext highlighter-rouge">example.com</code> with your domain.</p>
<p>Note: Make sure you have a ‘.’ at the end of each record: <code class="language-plaintext highlighter-rouge">example.com.</code></p>
<h3 id="cname">CNAME</h3>
<ol>
<li>On <a href="https://admin.gandi.net">Gandi.net</a> update the <code class="language-plaintext highlighter-rouge">www</code> <a href="#cname">CNAME record</a> in your DNS settings: Domain > DNS Records.</li>
</ol>
<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>;; CNAME Records
www.example.com. 1 IN CNAME username.github.io.
</code></pre></div></div>
<p>Note: Replace username with your GitHub username.</p>
<h2 id="website">Website</h2>
<ol>
<li>Create a new public repository on <a href="https://github.com/">GitHub</a> under your personal account. I called mine <a href="https://github.com/tdstein/personal-website"><code class="language-plaintext highlighter-rouge">personal-website</code></a>. You can call yours whatever you want to.</li>
<li>Create an <a href="#index.html"><code class="language-plaintext highlighter-rouge">index.html</code></a> file on the main branch of your new repository:</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE HTML></span>
<span class="nt"><html></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Hello, World!<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h2 id="hosting">Hosting</h2>
<ol>
<li>Enable <a href="https://pages.github.com/">GitHub Pages</a> for your repository: Settings > GitHub Pages > Source > Main Branch.</li>
<li>Configure GitHub Pages to use your custom domain: Settings > GitHub Pages > Custom Domain > <code class="language-plaintext highlighter-rouge">www.example.com</code></li>
</ol>
<p>Note: Make sure you include <code class="language-plaintext highlighter-rouge">www.</code> in the domain name.</p>
<p>This will create a CNAME record in your repository the value you entered.</p>
<h2 id="ssl">SSL</h2>
<p>Use the following steps to enable <code class="language-plaintext highlighter-rouge">ssl</code> to secure your website by encrypting all traffic over <code class="language-plaintext highlighter-rouge">https</code>.</p>
<ol>
<li>Add your domain on <a href="https://cloudflare.com/">Cloudlfare</a>.</li>
<li>Choose a free plan.</li>
<li>Follow the instructions to change your nameserver on Gandi.net to Cloudflare: Domain > Nameserver</li>
<li>Enable “Always Use HTTPS”: Crypto > Always Use HTTPS</li>
</ol>
<p>Once configured your domain will automatically be redirected over <code class="language-plaintext highlighter-rouge">https</code>.</p>
<p>At this point, your DNS will transfer to Cloudflare and traffic will be redirected.</p>
<h2 id="wait">Wait</h2>
<p>Your website will be available at your domain once your DNS changes have been propagated. This can take a few minutes or a few hours.</p>This tutorial will teach you how to host a personal website on the internet for free, plus domain fees, using Gandi.net, GitHub Pages, and Cloudlfare.Welcome2019-07-02T12:18:00+00:002019-07-02T12:18:00+00:00https://blog.taylorsteinberg.com/2019/07/02/welcome<p>Check back in a few weeks to see how things are going.</p>Check back in a few weeks to see how things are going.