Jekyll2021-07-12T21:47:14+02:00http://localhost:4000/feed.xmlJanne Hasslöf2021-07-11T00:00:00+02:002021-07-11T00:00:00+02:00http://localhost:4000/blog/2021/07/11/A-github-pages-blog-with-Jekyll-developed-on-WSL2<h1 id="getting-started">Getting Started</h1> <p><a href="https://ketchdigital.com/">ketchdigital.com</a> is built using <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://pages.github.com/">GitHub Pages</a>.<br /> GitHub has an excellent guide on how to get started<br /> <a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll">Setting up a GitHub Pages site with Jekyll</a></p> <p>This post is a shortcut to get you stared with a project website that you can develop and test locally on a PC with WSL2 and host on github pages.</p> <h2 id="install-dependencies">Install dependencies</h2> <p>First make sure you have the pre-requisites on your PC:</p> <ul> <li><a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10">Install WSL 2</a></li> <li><a href="https://www.microsoft.com/store/apps/9n6svws3rx71">Install Ubuntu 20.04</a></li> <li>Install initial Ruby version</li> </ul> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> ~ <span class="nb">sudo </span>apt-get update <span class="nt">--fix-missing</span> <span class="nb">sudo </span>apt <span class="nb">install </span>ruby </code></pre></div></div> <p>Test that you have ruby and gem installed:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby <span class="nt">-v</span> gem <span class="nt">-v</span> </code></pre></div></div> <ul> <li><a href="https://jekyllrb.com/docs/installation/ubuntu/">Install full Ruby developer edition and the Jekyll bundle</a></li> </ul> <p>Test Jekyll is installed</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll <span class="nt">-v</span> </code></pre></div></div> <ul> <li><a href="https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git">Setup Git in WSL</a></li> </ul> <p>Check your git configuration:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git config <span class="nt">-l</span> user.name<span class="o">=</span>&lt;my name&gt; user.email<span class="o">=</span>&lt;my mail&gt; credential.helper<span class="o">=</span>/mnt/c/Program<span class="se">\ </span>Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe </code></pre></div></div> <ul> <li>Install VS Code</li> </ul> <p>This code automatically installs code in WSL.<br /> Reference: <a href="https://code.visualstudio.com/docs/remote/wsl">Developing in WSL</a></p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> ~ code <span class="nb">.</span> </code></pre></div></div> <h2 id="initialize-the-local-jekyll-site">Initialize the local Jekyll site</h2> <ul> <li> <p>Fork the repo <a href="https://github.com/jhasslof/github-pages-example">github-pages-example</a> to your account.</p> </li> <li> <p>Clone your forked project to your dev machine and initialize bundle</p> </li> </ul> <p>Reference: <a href="https://jekyllrb.com/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nb">cd</span> ~/&lt;repo-root&gt; git clone https://github.com/&lt;yourAccount&gt;/github-pages-example.git <span class="nb">cd </span>github-pages-example bundle config <span class="nb">set</span> <span class="nt">--local</span> path <span class="s1">'vendor/bundle'</span> bundle <span class="nb">install</span> </code></pre></div></div> <h2 id="start-your-local-development">Start your local development</h2> <p>Start development server:</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">--config</span> _config.yml,_config.dev.yml <span class="nt">--livereload</span> &amp; </code></pre></div></div> <p>Browse to <a href="http://127.0.0.1:4000/">http://127.0.0.1:4000/</a></p> <p>Edit file <code class="language-plaintext highlighter-rouge">./index.markdown</code>and see that the UI automatically reload to render your update in the browser</p> <h2 id="configure-website-setup-github-pages-site">Configure website setup Github Pages site</h2> <ul> <li>Configure site settings in <code class="language-plaintext highlighter-rouge">./_config.yml</code></li> </ul> <div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">baseurl</span><span class="pi">:</span> <span class="s2">"</span><span class="s">/github-pages-example"</span> <span class="c1"># the subpath of your site</span> <span class="na">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://&lt;yourAccount&gt;.github.io"</span> <span class="c1"># the base hostname &amp; protocol for your site</span> </code></pre></div></div> <p>Reference: <a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll#creating-your-site">Creating a GitHub Pages site with Jekyll</a>, <a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll#configuring-jekyll-in-your-github-pages-site">Configuring Jekyll in your GitHub Pages site</a></p> <ul> <li> <p>Commit changes and push commits to github</p> </li> <li> <p><a href="https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#choosing-a-publishing-source">Configuring a publishing source for your GitHub Pages site</a></p> </li> </ul> <p>To configure continuous deployment (CD) on each update to the main-branch in GitHub, make sure to change the GitHub Pages to <code class="language-plaintext highlighter-rouge">main</code>.</p> <ul> <li>Test your new website.</li> </ul> <p>Browse to: <code class="language-plaintext highlighter-rouge">https://&lt;yourAccount&gt;.github.io/github-pages-example/</code></p>Janne Hasslöf

Getting Started