<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.8.5">Jekyll</generator><link href="https://therontjapkes.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://therontjapkes.com/" rel="alternate" type="text/html" /><updated>2020-04-13T14:20:51+00:00</updated><id>https://therontjapkes.com/feed.xml</id><title type="html">Theron Tjapkes</title><subtitle>Random hacks and projects</subtitle><entry><title type="html">Reading BitLocker Encrypted Drives on Linux</title><link href="https://therontjapkes.com/share-bitlocker-drives/" rel="alternate" type="text/html" title="Reading BitLocker Encrypted Drives on Linux" /><published>2020-04-11T00:00:00+00:00</published><updated>2020-04-11T00:00:00+00:00</updated><id>https://therontjapkes.com/share-bitlocker-drives</id><content type="html" xml:base="https://therontjapkes.com/share-bitlocker-drives/">&lt;p&gt;On my desktop I have 4 drives: two solid state drives and two hard disk drives. Each solid state drive is dedicated to a single OS: one Windows 10 and the other the latest version of Fedora (currently 31). The two hard disk drives are dedicated to storage. The larger of the two is for general storage of music, photos, videos, and any other large files. The smaller drive contains my Steam library and large programs that don’t need the speed of an SSD. I wanted to have all 4 drives encrypted because why not. VeraCrypt would work for this, but it isn’t included in the Fedora or RPMFusion repos and I figured if I was going to spend the time getting something “unofficial” working it may as well be BitLocker which works seamlessly on the Windows side.&lt;/p&gt;

&lt;h2 id=&quot;setting-up-bitlocker&quot;&gt;Setting up BitLocker&lt;/h2&gt;

&lt;p&gt;First, I had to set up BitLocker from within Windows 10. A TPM is typically required for BitLocker to function properly however my motherboard doesn’t have one built in. I could purchase one but TPM’s frequently have vulnerabilities and would likely complicate the setup on the Fedora side later on. I wanted to only enter a single password at boot and end with the OS drive and the two HDDs unlocked, mounted, and ready to go for regardless of the OS booting. To allow BitLocker to be used without a TPM and have a password entered at boot instead you must run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;gpedit.msc&lt;/code&gt; and enable “Require additional authentication at startup” under “Local Computer Policy &amp;gt; Computer Configuration &amp;gt; Administrative Templates &amp;gt; Windows Components &amp;gt; BitLocker Drive Encryption &amp;gt; Operating System Drives”. Once this is done you can enable BitLocker for &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;C:&lt;/code&gt; and select “Enter a Password” when asked how to unlock the drive at startup. Once &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;C:&lt;/code&gt; is encrypted I could enable BitLocker for the two HDDs and set them up to unlock at login. It took a while for the drives to be encrypted, once completed I could move on to Linux.&lt;/p&gt;

&lt;h2 id=&quot;reading-bitlocker-drives-in-linux&quot;&gt;Reading BitLocker Drives in Linux&lt;/h2&gt;

&lt;p&gt;When installing Fedora I checked the option to encrypt my installation with LUKS, which is the native way to encrypt a disk in Linux. To unlock BitLocker drives in Linux you need to use &lt;a href=&quot;https://github.com/Aorimn/dislocker&quot;&gt;Dislocker&lt;/a&gt;. This can be installed from the Fedora repos, but the version there &lt;a href=&quot;https://github.com/Aorimn/dislocker/issues/185&quot;&gt;didn’t work for me&lt;/a&gt;. The solution was to build from source. I installed the required build dependencies and ran&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;git clone https://github.com/Aorimn/dislocker.git
&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;dislocker
cmake &lt;span class=&quot;nb&quot;&gt;.&lt;/span&gt;
make
&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;make &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;From there it was a matter of reading the documentation to get the drives mounted automatically on boot. For this you will need the recovery keys which you can export to a flash drive from BitLocker settings on Windows. First, I tested Dislocker by mounting my storage drive. Dislocker mounts the drive as a file which can then be mounted as a loop device. I’d need to create a location for the file, as well as a location to mount the loop device. I chose to mount the file to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/mnt/storage-bitlocker&lt;/code&gt; and the loop device to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/media/storage&lt;/code&gt;. In order to mount the drive, needed to find the device path for the drive, I found this by running &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;lsblk&lt;/code&gt; and saw that &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/dev/sdb1&lt;/code&gt; is the device path for my storage disk. Running the following command unlocked the drive and mounted a file representing it’s filesystem:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;dislocker /dev/sdb1 &lt;span class=&quot;nt&quot;&gt;-p123456-123456-123456-123456-123456-123456-123456-123456&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;--&lt;/span&gt; /mnt/storage-bitlocker
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;If running this youself you’ll need to replace &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/dev/sdb1&lt;/code&gt; with the device you want to mount and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;123456-123456-123456-123456-123456-123456-123456-123456&lt;/code&gt; with the BitLocker recovery key.&lt;/p&gt;

&lt;p&gt;The next step is to mount the filesystem file as a loop device which I did with the following command:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;sudo &lt;/span&gt;mount &lt;span class=&quot;nt&quot;&gt;-o&lt;/span&gt; loop /mnt/storage-bitlocker/dislocker-file /media/storage
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;I navigated to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/media/storage&lt;/code&gt; and was able to read and write files as expected.&lt;/p&gt;

&lt;h2 id=&quot;automatically-unlock-and-mount-the-drives-at-boot&quot;&gt;Automatically Unlock and Mount the Drives at Boot&lt;/h2&gt;

&lt;p&gt;The next step is to add entries to do unlock and mount the drives automatically at boot by adding entries to the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/etc/fstab&lt;/code&gt; file. My &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fstab&lt;/code&gt; entries look like this:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;c&quot;&gt;# BitLocker&lt;/span&gt;
&lt;span class=&quot;c&quot;&gt;# Storage&lt;/span&gt;
/dev/sdb1 /mnt/storage-bitlocker fuse.dislocker recovery-password&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;123456-123456-123456-123456-123456-123456-123456-123456,nofail 0 0
/mnt/storage-bitlocker/dislocker-file /media/storage auto &lt;span class=&quot;nv&quot;&gt;uid&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1000,gid&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1000,rw,user,exec,umask&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;000 0 0
&lt;span class=&quot;c&quot;&gt;# Programs&lt;/span&gt;
/dev/sdc1 /mnt/programs-bitlocker fuse.dislocker recovery-password&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;123456-123456-123456-123456-123456-123456-123456-123456,nofail 0 0
/mnt/programs-bitlocker/dislocker-file /media/programs auto &lt;span class=&quot;nv&quot;&gt;uid&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1000,gid&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;1000,rw,user,exec,umask&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;000 0 0
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Storing the recovery keys in plaintext isn’t the greatest solution, but since they are stored on an encrypted disk I didn’t see an issue. If you are following along yourself you will need to replace the device path and recovery password. The &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;uid=1000,gid=1000,rw,user,exec,umask=000&lt;/code&gt; options are also important if you want to have proper permissions for the drive. Launching Windows games with Proton through Steam will not work for many games without these options. You will need to change the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;uid&lt;/code&gt; and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;gid&lt;/code&gt; options to match your users id, which can be found using &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;id -u&lt;/code&gt; and &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;id -g&lt;/code&gt;. Once I was finished editing the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fstab&lt;/code&gt;, I rebooted since it’s the easiest way to mount the drives with the new options and tests that it is working correctly.&lt;/p&gt;

&lt;h2 id=&quot;sharing-my-steam-library&quot;&gt;Sharing My Steam Library&lt;/h2&gt;

&lt;p&gt;Linux can run the Windows versions of nearly all games through the use of Proton, and in many cases Windows games in Proton perform better than the native linux versions. There are some issues running Windows games stored on an NTFS filesystem through Proton. &lt;a href=&quot;https://github.com/ValveSoftware/Proton/wiki/Using-a-NTFS-disk-with-Linux-and-Windows&quot;&gt;Luckily the Proton wiki page has instructions to make things work&lt;/a&gt;. The above &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;fstab&lt;/code&gt; instructions cover most of the requirements. To prevent windows from having issues, you must symlink the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/SteamLibrary/steamapps/compatdata&lt;/code&gt; folder to the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;compatdata&lt;/code&gt; folder on you OS drive to prevent Proton from creating files with invalid names according to Windows. To do this you must install a Windows game to the OS drive and run it which creates a &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;compatdata&lt;/code&gt; folder at &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;~/.steam/steam/steamapps/compatdata&lt;/code&gt;. Once done, you can delete the game you installed and symlink the folder to your Steam library. In my case the following command did the trick:&lt;/p&gt;

&lt;div class=&quot;language-bash highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;nb&quot;&gt;ln&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-s&lt;/span&gt; ~/.steam/steam/steamapps/compatdata /media/programs/SteamLibrary/steamapps
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;You will need to delete &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;/media/programs/SteamLibrary/steamapps/compatdata&lt;/code&gt; if it already exists before running this command.&lt;/p&gt;

&lt;p&gt;After doing this I am able to launch my Windows games that are stored on a Windows formatted NTFS filesystem that is encrypted by Windows BitLocker from Linux seamlessly. If a game doesn’t work or perform well under Proton, I can simply reboot and run the game from the same location on Windows. I think that’s pretty cool.&lt;/p&gt;</content><author><name></name></author><summary type="html">On my desktop I have 4 drives: two solid state drives and two hard disk drives. Each solid state drive is dedicated to a single OS: one Windows 10 and the other the latest version of Fedora (currently 31). The two hard disk drives are dedicated to storage. The larger of the two is for general storage of music, photos, videos, and any other large files. The smaller drive contains my Steam library and large programs that don’t need the speed of an SSD. I wanted to have all 4 drives encrypted because why not. VeraCrypt would work for this, but it isn’t included in the Fedora or RPMFusion repos and I figured if I was going to spend the time getting something “unofficial” working it may as well be BitLocker which works seamlessly on the Windows side.</summary></entry><entry><title type="html">Rip Van Twinkle: Rip Van Winkle as a Video Game Except It’s on Mars</title><link href="https://therontjapkes.com/rip-van-winkle/" rel="alternate" type="text/html" title="Rip Van Twinkle: Rip Van Winkle as a Video Game Except It's on Mars" /><published>2019-04-24T00:00:00+00:00</published><updated>2019-04-24T00:00:00+00:00</updated><id>https://therontjapkes.com/rip-van-winkle</id><content type="html" xml:base="https://therontjapkes.com/rip-van-winkle/">&lt;p&gt;My American Literature class provided a lot of freedom for the final project. With this freedom I created a video game representation of Rip Van Winkle with a twist. Rather than taking place in America it takes place in the future at a Mar’s colony. The people of Mar’s wish for independence from Earth. Rip is abducted by an alien who challenges him to a Tic Tac Toe match. During the epic face off between the alien Tic Tac Toe master and Rip, the alien ship passes a blackhole causing time for Rip to pass much more slowly relative to time back on Mars. After defeating the alien in Tic Tac Toe, Rip is brought back to Mar’s where he finds that years have passed despite only being gone for hours at most from his perspective…&lt;/p&gt;

&lt;p&gt;Click the Load Game button to load the game your browser:&lt;/p&gt;

&lt;p&gt;&lt;button id=&quot;loadGame&quot;&gt;Load Game&lt;/button&gt;&lt;/p&gt;
&lt;iframe id=&quot;game&quot; src=&quot;about:blank&quot; scrolling=&quot;no&quot; style=&quot;width: 640px; height: 480px;&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;If the game doesn’t work or you want to see a playthrough:&lt;/p&gt;

&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube-nocookie.com/embed/ipfjC7BHsLI&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;

&lt;script&gt;
    $(window).on(&quot;load&quot;, function() {
        $('#game').hide();
        $('#loadGame').bind('click', function(){
            $('#game').show();
            $(&quot;#game&quot;).attr(&quot;src&quot;, &quot;https://therontjapkes.com/projects/ripvantwinkle/Rip%20VanTwinkle.html&quot;);
        });
    });
&lt;/script&gt;</content><author><name></name></author><summary type="html">My American Literature class provided a lot of freedom for the final project. With this freedom I created a video game representation of Rip Van Winkle with a twist. Rather than taking place in America it takes place in the future at a Mar’s colony. The people of Mar’s wish for independence from Earth. Rip is abducted by an alien who challenges him to a Tic Tac Toe match. During the epic face off between the alien Tic Tac Toe master and Rip, the alien ship passes a blackhole causing time for Rip to pass much more slowly relative to time back on Mars. After defeating the alien in Tic Tac Toe, Rip is brought back to Mar’s where he finds that years have passed despite only being gone for hours at most from his perspective…</summary></entry><entry><title type="html">Windows ME (Mistake Edition): Classic Windows Imitation in Javascript</title><link href="https://therontjapkes.com/javascript-windows/" rel="alternate" type="text/html" title="Windows ME (Mistake Edition): Classic Windows Imitation in Javascript" /><published>2019-02-20T00:00:00+00:00</published><updated>2019-02-20T00:00:00+00:00</updated><id>https://therontjapkes.com/javascript-windows</id><content type="html" xml:base="https://therontjapkes.com/javascript-windows/">&lt;p&gt;In my &lt;a href=&quot;https://cs.calvin.edu/courses/cs/352/index.html&quot;&gt;computer graphics&lt;/a&gt; class I was assigned &lt;a href=&quot;https://cs.calvin.edu/courses/cs/352/projects/proj2.pdf&quot;&gt;a project&lt;/a&gt; to create a “self portrait” using HTML canvas and JavaScript. The assignment required the use of shapes, text, colors, and gradients. Classic windows has all these requirements covered. It draw’s plenty of text and shapes and the window title bars have a color gradient. I had some extra time as it was early in the semester so I decided to create an imitation of old versions of Windows. How is it a self portrait? Well I added an option to open tpt3.png, my project 1 submission which was created through raytracing with povray and constructive solid geometry.&lt;/p&gt;

&lt;p&gt;Looking ahead I saw that the next project was to create a paint program. Originally I wanted to have paint program run within a window on this project, and possibly all future projects for the class. Now that I’ve finished this project I’ve decided it probably won’t be worth the amount of time needed to get that working. Still the end result is quite entertaining. It even has the best classic windows feature (try turning “Enable Redraws” off)!&lt;/p&gt;

&lt;p&gt;My project made it into the &lt;a href=&quot;https://cs.calvin.edu/courses/cs/352/showcase/selfportrait.html&quot;&gt;showcase&lt;/a&gt;, where the coolest submissions from each semester are kept as examples/inspiration for future students.&lt;/p&gt;

&lt;p&gt;Click the button below to “Boot Windows”:&lt;/p&gt;

&lt;p&gt;&lt;button id=&quot;loadProject2&quot;&gt;Boot Windows&lt;/button&gt;&lt;/p&gt;
&lt;iframe id=&quot;project2&quot; src=&quot;about:blank&quot; scrolling=&quot;no&quot; style=&quot;width: 640pt; height: 400pt;&quot;&gt;&lt;/iframe&gt;

&lt;h2 id=&quot;update&quot;&gt;Update:&lt;/h2&gt;

&lt;p&gt;My submission for project 4 also made it’s respective &lt;a href=&quot;https://cs.calvin.edu/courses/cs/352/showcase/widget.html&quot;&gt;showcase&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Check it out here:&lt;/p&gt;

&lt;p&gt;&lt;button id=&quot;loadProject4&quot;&gt;Load Project 4&lt;/button&gt;&lt;/p&gt;
&lt;iframe id=&quot;project4&quot; src=&quot;about:blank&quot; scrolling=&quot;no&quot; style=&quot;width: 700pt; height: 450pt&quot;&gt;&lt;/iframe&gt;

&lt;script&gt;
    $(window).on(&quot;load&quot;, function() {
        $('#project2').hide();
        $('#project4').hide();
        $('#loadProject2').bind('click', function(){
            $('#project2').show();
            $(&quot;#project2&quot;).attr(&quot;src&quot;, &quot;https://therontjapkes.com/projects/CS352/proj2/proj2.html#mainWindow&quot;);
        });
        $('#loadProject4').bind('click', function(){
            $('#project4').show();
            $(&quot;#project4&quot;).attr(&quot;src&quot;, &quot;https://therontjapkes.com/projects/CS352/proj4/proj4.html#mainWindow&quot;);
        });
    });
&lt;/script&gt;</content><author><name></name></author><summary type="html">In my computer graphics class I was assigned a project to create a “self portrait” using HTML canvas and JavaScript. The assignment required the use of shapes, text, colors, and gradients. Classic windows has all these requirements covered. It draw’s plenty of text and shapes and the window title bars have a color gradient. I had some extra time as it was early in the semester so I decided to create an imitation of old versions of Windows. How is it a self portrait? Well I added an option to open tpt3.png, my project 1 submission which was created through raytracing with povray and constructive solid geometry.</summary></entry><entry><title type="html">How This Site Is/Was Made</title><link href="https://therontjapkes.com/how-this-site-was-made/" rel="alternate" type="text/html" title="How This Site Is/Was Made" /><published>2018-08-20T00:00:00+00:00</published><updated>2018-08-20T00:00:00+00:00</updated><id>https://therontjapkes.com/how-this-site-was-made</id><content type="html" xml:base="https://therontjapkes.com/how-this-site-was-made/">&lt;p&gt;For my first project/post here, why not describe how I made this site itself? Using GitHub Pages and Jekyll, it’s surprisingly simple to build a website. Essentially all that you need to do to create a site using GitHub Pages is create a repository and fill it with a few markdown files. However, the default themes don’t offer much in the way of customization without major additions/modifications to those themes. I decided to search for a more flexible theme to fit my needs when I found &lt;a href=&quot;https://mmistakes.github.io/minimal-mistakes/&quot;&gt;Minimal Mistakes&lt;/a&gt;. I set up &lt;a href=&quot;https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/&quot;&gt;a site locally&lt;/a&gt; with the theme, I quickly found it was a bit more than what I was looking for. I also wasn’t sure how I would fix the theme if it were to break in the future due to an update to Jekyll or GitHub Pages and the project was no longer mantained for whatever reason. I decided to look for a theme that looked nice, but was simple enough that I could easily modify it for my needs and fix it if it were to break due to future updates. I found &lt;a href=&quot;http://www.jekyllnow.com/&quot;&gt;Jekyll Now&lt;/a&gt;, a very basic Jekyll theme that looked good and was quite simple. I made a few modifications to the theme to fit my needs:&lt;/p&gt;

&lt;h2 id=&quot;landing-page&quot;&gt;Landing Page&lt;/h2&gt;

&lt;p&gt;I wanted the landing page to show the most recent projects, with the most recent project at the top of the list. To accomplish this I modified index.html to look like this:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;---
layout: default
---

&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;posts&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
  {% for post in site.posts %}
    {% if forloop.index &lt;span class=&quot;nt&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;10&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;%}&lt;/span&gt;
      &lt;span class=&quot;err&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;article&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;post&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}{{ post.url }}&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;{{ post.title }}&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;entry&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
          {{ post.excerpt }}
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;

        &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}{{ post.url }}&quot;&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;read-more&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Read More&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
      &lt;span class=&quot;nt&quot;&gt;&amp;lt;/article&amp;gt;&lt;/span&gt;
    {% endif %}
  {% endfor %}
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This will display the 10 most recent posts, with a small excerpt from the article and a link to read more of the article. You probably notice the tags {% and %}, these are &lt;a href=&quot;https://github.com/Shopify/liquid&quot;&gt;Liquid template&lt;/a&gt; tags which are used by Jekyll to create more dynamic pages.&lt;/p&gt;

&lt;h2 id=&quot;top-navigation-links&quot;&gt;Top Navigation Links&lt;/h2&gt;
&lt;p&gt;I wanted to have 3 links at the top of the page, one back to the landing/homepage, one to a list of all my projects/posts, and one to a page about me with some contact info. The navigation links are controlled by this section of html in the file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_layout/default.html&lt;/code&gt;:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Blog&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/about&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;About&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;which I modified to:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/archive&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Archive&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
  &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/about&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;About&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;To make the links actually go to the proper pages, I created a &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.md&lt;/code&gt; file for each of the links. If you prefer markdown doesn’t fit your needs or you prefer html, you can create html files as well. Each &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.md&lt;/code&gt;/&lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;.html&lt;/code&gt; file representing a page requires front matter which looks like this:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-yml&quot; data-lang=&quot;yml&quot;&gt;&lt;span class=&quot;nn&quot;&gt;---&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;layout&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;default&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;About&lt;/span&gt;
&lt;span class=&quot;na&quot;&gt;permalink&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;/about/&lt;/span&gt;
&lt;span class=&quot;nn&quot;&gt;---&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The above front matter is used for my About page. The &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;layout:&lt;/code&gt; key is what determines which html file from the folder &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_layout&lt;/code&gt; to use to display the content. For example the front matter for this post contains &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;layout: post&lt;/code&gt; which means it uses &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_layout/post.html&lt;/code&gt; to format the page. The &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;title:&lt;/code&gt; key is pretty self explanitory, it controls what you see at the top of the page. The last key in the example front matter above is the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;permalink:&lt;/code&gt; key. This key sets the address for accessing the page. For example if I set &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;permalink: /asdfghjkl/&lt;/code&gt; then going to &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;therontjapkes.com/asdfghjkl&lt;/code&gt; would take me to the page containing the equivalent &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;permalink&lt;/code&gt; value.&lt;/p&gt;

&lt;h2 id=&quot;the-archive-page&quot;&gt;The Archive Page&lt;/h2&gt;

&lt;p&gt;Every other page aside from the landing page (see &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;index.html&lt;/code&gt; above) and the posts page is a simple markdown file so I won’t go into detail about them. The posts page is dynamic in that it will display all project posts to this site, sorted by year. To achieve this, I created the file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;archive.html&lt;/code&gt; containing:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;---
layout: default
title: Archive
permalink: /archive/
---

&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;well&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
{%for post in site.posts %}
    {% unless post.next %}
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;{{ post.date | date: '%Y' }}&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;nt&quot;&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
    {% else %}
        {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
        {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
        {% if year != nyear %}
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;{{ post.date | date: '%Y' }}&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;nt&quot;&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
        {% endif %}
    {% endunless %}
    &lt;span class=&quot;nt&quot;&gt;&amp;lt;li&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl}}{{ post.url }}&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;{{ post.date | date: &quot;%b %-d&quot; }} - {{ post.title }}&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
{% endfor %}
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;footer&quot;&gt;Footer&lt;/h2&gt;

&lt;p&gt;I didn’t want the social links and icons at the bottom of the site. I don’t really use any social media, and I thought it was reduntant to have contact information both at the bottom of the page and in my about page. The footer is controlled by the file &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_includes/footer.html&lt;/code&gt; I modified the file to the following html:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/contact&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Contact&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt; | &lt;span class=&quot;nt&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;{{ site.baseurl }}/feed.xml&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;RSS Feed&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;page__footer-copyright&quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;ni&quot;&gt;&amp;amp;copy;&lt;/span&gt; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This will have the footer include a link to my contact page, and to an RSS feed. It will also generate a copyright notice using the sites title.&lt;/p&gt;

&lt;p&gt;If you wish to host your own site using GitHub Pages and Jekyll, follow the instructions &lt;a href=&quot;https://pages.github.com/&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;</content><author><name></name></author><summary type="html">For my first project/post here, why not describe how I made this site itself? Using GitHub Pages and Jekyll, it’s surprisingly simple to build a website. Essentially all that you need to do to create a site using GitHub Pages is create a repository and fill it with a few markdown files. However, the default themes don’t offer much in the way of customization without major additions/modifications to those themes. I decided to search for a more flexible theme to fit my needs when I found Minimal Mistakes. I set up a site locally with the theme, I quickly found it was a bit more than what I was looking for. I also wasn’t sure how I would fix the theme if it were to break in the future due to an update to Jekyll or GitHub Pages and the project was no longer mantained for whatever reason. I decided to look for a theme that looked nice, but was simple enough that I could easily modify it for my needs and fix it if it were to break due to future updates. I found Jekyll Now, a very basic Jekyll theme that looked good and was quite simple. I made a few modifications to the theme to fit my needs:</summary></entry></feed>