diff --git a/.gitignore b/.gitignore
index 0954e9da..7e4c2443 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,30 +2,6 @@
 .DS_Store
 Thumbs.db
 
-# IntelliJ
-.idea
-*.iml
-*.ipr
-*.iws
-
-# Xcode IDE
-xcuserdata/
-DerivedData/
-
-# Generated
-/platform-darwin/Resources/Media/Images.xcassets/
-
-# Media
-public/Press/Background.png
-public/Press/Front-Page.png
-public/Press/MasterPassword_PressKit/MasterPassword_pressrelease_*.pdf
-
-# Gradle
-build
-!/build
-.gradle
-local.properties
-
-# Maven
-target
-dependency-reduced-pom.xml
+# Jekyll
+.sass-cache
+_site
diff --git a/_config.yml b/_config.yml
index d0553a23..bc52fef6 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,3 +3,4 @@ email: info@masterpasswordapp.com
 url: "http://masterpasswordapp.com"
 github_username: Lyndir
 markdown: kramdown
+permalink: pretty
diff --git a/_includes/footer.html b/_includes/footer.html
index 1b93db27..1ecff793 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -4,10 +4,12 @@
         <div>
             <h4>Navigation</h4>
             <ul>
-                <li><a href="{{ site.baseurl }}">Home</a></li>
-                <li><a href="{{ site.baseurl }}/why.html">Why do I need it?</a></li>
-                <li><a href="{{ site.baseurl }}/what.html">What does it do?</a></li>
-                <li><a href="{{ site.baseurl }}/how.html">How do I use it?</a></li>
+                {% assign pages = site.pages | sort: 'order' %}
+                {% for aPage in pages %}
+                {% if aPage.order %}
+                <li><a href="{{ aPage.url }}">{{ aPage.title }}</a></li>
+                {% endif %}
+                {% endfor %}
             </ul>
         </div>
 
@@ -29,21 +31,21 @@
                 <li><a href="http://help.masterpasswordapp.com/">Support</a></li>
                 <li><a href="https://github.com/Lyndir/MasterPassword/">Source Code</a></li>
                 <li><a href="https://github.com/Lyndir/MasterPassword/issues">Report an Issue</a></li>
-                <li><a href="masterpassword-algorithm.pdf">Master Password: An Algorithm For Freedom (PDF)</a></li>
-                <li><a href="masterpassword-primer.pdf">A Primer on Passwords (PDF)</a></li>
+                <li><a href="{% link masterpassword-algorithm.pdf %}">Master Password: An Algorithm For Freedom (PDF)</a></li>
+                <li><a href="{% link masterpassword-primer.pdf %}">A Primer on Passwords (PDF)</a></li>
             </ul>
         </div>
     </div>
 
     <p>
         Master Password is a security product and algorithm by <a href="http://www.lhunath.com/">Maarten Billemont</a>, Lyndir (&copy; 2011-2018).<br>
-        Usage implies agreement with our <a href="{{ site.baseurl }}/privacy.html">privacy policy and disclaimer</a>.
+        Usage implies agreement with our <a href="{% link privacy.html %}">privacy policy and disclaimer</a>.
     </p>
     <p><a href="http://guide.bash.academy/">The Bash Guide</a> ● <a href="http://gorillas.lyndir.com">Gorillas</a> ● <a href="https://github.com/Lyndir">GitHub</a> ● <a href="http://thanks.lhunath.com">Send Thanks</a></p>
 
 </footer>
 
-<script src="{{ site.baseurl }}/js/jquery-3.3.1.min.js"></script>
-<script src="{{ site.baseurl }}/js/jquery.paroller.min.js"></script>
-<script src="{{ site.baseurl }}/js/main.js"></script>
+<script src="{% link js/jquery-3.3.1.min.js %}"></script>
+<script src="{% link js/jquery.paroller.min.js %}"></script>
+<script src="{% link js/main.js %}"></script>
 
diff --git a/_includes/head.html b/_includes/head.html
index afe23ad1..9230358f 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -3,12 +3,12 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
+  <title>{{ site.title | escape }}: {{ page.title | escape }}</title>
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
   <meta name="apple-itunes-app" content="app-id=510296984" />
 
-  <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
+  <link rel="stylesheet" href="{{ site.baseurl | append: '/css/main.css' }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-  <link rel="shortcut icon" href="img/favicon.png" type="image/x-png" />
-  <link rel="icon" href="img/favicon.png" type="image/x-png" />
+  <link rel="shortcut icon" href="{% link img/favicon.png %}" type="image/x-png" />
+  <link rel="icon" href="{% link img/favicon.png %}" type="image/x-png" />
 </head>
diff --git a/_includes/header.html b/_includes/header.html
index 14af6ac9..cc7236c5 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,6 +1,6 @@
 <header class="{{ page.header }}">
     <nav>
-        <a href="{{ site.baseurl }}" data-hero="main">Master Password</a>
+        <a href="{% link index.html %}" data-hero="main">Master Password</a>
         <div class="flex-auto">
             <a href="https://itunes.apple.com/app/id510296984" data-hero="ios">iOS.</a>
             <a href="https://ssl.masterpasswordapp.com/masterpassword-android.apk" data-hero="android">Android.</a>
@@ -17,8 +17,11 @@
     <div class="flex-auto"></div>
 
     <nav>
-        <a href="{{ site.baseurl }}/why.html"{% if page.nav == "why" %} class="active"{% endif %}>Why</a>
-        <a href="{{ site.baseurl }}/what.html"{% if page.nav == "what" %} class="active"{% endif %}>What</a>
-        <a href="{{ site.baseurl }}/how.html"{% if page.nav == "how" %} class="active"{% endif %}>How</a>
+        {% assign pages = site.pages | sort: 'order' %}
+        {% for aPage in pages %}
+        {% if aPage.nav %}
+        <a href="{{ aPage.url }}"{% if page.url == aPage.url %} class="active"{% endif %}>{{ aPage.nav }}</a>
+        {% endif %}
+        {% endfor %}
     </nav>
 </header>
diff --git a/how.html b/how.html
index 986759d7..d855ab5e 100644
--- a/how.html
+++ b/how.html
@@ -1,12 +1,15 @@
 ---
+nav: How
+title: How do I use it?
+
+order: 3
 layout: default
-nav: how
 ---
 
 <section id="how">
-    <h1>How do I use it?</h1>
+    <h1>{{ page.title }}</h1>
 
-    <h2><img src="{{ site.baseurl }}/img/password_offer_944292.svg" title="https://thenounproject.com/term/key-delivery/944292/" />
+    <h2><img src="{% link img/password_offer_944292.svg %}" title="https://thenounproject.com/term/key-delivery/944292/" />
         One, two, enter.</h2>
 
     <p>Good security depends on ease of use.</p>
@@ -19,7 +22,7 @@ nav: how
     <hr>
     <p>Most browsers will then ask you to "save" the site's password. If you're comfortable with that, it's a good way of skipping the above steps and logging in even faster next time.</p>
 
-    <h2><img src="{{ site.baseurl }}/img/getting_started_162761.svg" title="https://thenounproject.com/term/rocket/162761/" />
+    <h2><img src="{% link img/getting_started_162761.svg %}" title="https://thenounproject.com/term/rocket/162761/" />
         Getting started.</h2>
 
     <p>As explained, Master Password is not a password manager or a vault.  It is not made to hold your existing site passwords &mdash; that would violate the principles it stands for and break the advantages it offers over ordinary password managers.</p>
@@ -30,28 +33,28 @@ nav: how
 
     <p>All right. Here's Robert on his iPhone:</p>
 
-    <img src="{{ site.baseurl }}/img/howto-twitter-signup.png" />
+    <img src="{% link img/howto-twitter-signup.png %}" />
 
     <p>He wants to sign up for Twitter. Robert filled in all the fields, except for password. Not wanting to worry about what his twitter secret is going to be, he switches to Master Password.</p>
 
-    <img src="{{ site.baseurl }}/img/howto-mp-login.png" />
+    <img src="{% link img/howto-mp-login.png %}" />
 
     <p>Of course, he begins by unlocking his user with his master password. Robert can skip this step by going into Master Password's preferences and setting it to either save his master key or remember his login, but he choses not to.</p>
 
-    <img src="{{ site.baseurl }}/img/howto-mp-create.png" />
-    <img src="{{ site.baseurl }}/img/howto-mp-create-confirm.png" />
+    <img src="{% link img/howto-mp-create.png %}" />
+    <img src="{% link img/howto-mp-create-confirm.png %}" />
 
     <p>He creates a password for Twitter by using its bare domain name: twitter.com. He knows not to use mobile.twitter.com or Twitter or anything non-standard, because that would be very difficult to remember correctly on a later date. If he has multiple twitter accounts, he could prefix the name with a user name and an @: rmitchell@twitter.com, superbob@twitter.com.</p>
 
-    <img src="{{ site.baseurl }}/img/howto-mp-type-change.png" />
-    <img src="{{ site.baseurl }}/img/howto-mp-type-basic.png" />
+    <img src="{% link img/howto-mp-type-change.png %}" />
+    <img src="{% link img/howto-mp-type-basic.png %}" />
 
     <p>If the account Robert's signing up for is with a website that prohibits symbols for some daft reason, Robert can change the type to Basic or something similar instead. Robert can also bump up the complexity to get an even more secure password if he wants.</p>
 
-    <img src="{{ site.baseurl }}/img/howto-twitter-paste.png" />
-    <img src="{{ site.baseurl }}/img/howto-twitter-done.png" />
+    <img src="{% link img/howto-twitter-paste.png %}" />
+    <img src="{% link img/howto-twitter-done.png %}" />
 
     <p>When Robert created the site in Master Password, it copied the password to his pasteboard. Now, Robert just switches back to Safari and pastes his brand-new password he doesn't care to remember in twitter's password field. All done!</p>
 
-    <h2><img src="{{ site.baseurl }}/img/thumb-iphone-types.png"></h2>
+    <h2><img src="{% link img/thumb-iphone-types.png %}"></h2>
 </section>
diff --git a/index.html b/index.html
index a053d762..aeb371f3 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,13 @@
 ---
-layout: default
+title: Home
 header: large
+
+order: 0
+layout: default
 ---
 
 <section id="intro">
-    <h2><img src="{{ site.baseurl }}/img/password_forgot_882804.svg" title="https://thenounproject.com/term/forget/882804/" />
+    <h2><img src="{% link img/password_forgot_882804.svg %}" title="https://thenounproject.com/term/forget/882804/" />
         What's your <input type="password" value="password" size="5">?</h2>
     <p>Passwords are regarded as a "necessary evil" to having accounts online.  We accept them as <q>the way things are done online</q> and try to adapt.<br>
     But upon reflection, we find that we've adapted quite poorly.<br>
@@ -12,16 +15,16 @@ header: large
     <p>Sites everywhere expect us to come up with a secure and unique password for them.  But we're not security professionals. We do our best to compensate for this unrealistic demand: to keep track of passwords, we reach for notebooks, our computers, apps, or we simplify them so we won't forget.<br>
     <b>We've become symptomatic</b>.</p>
 
-    <h2><img src="{{ site.baseurl }}/img/thinking_882797.svg" title="https://thenounproject.com/term/thinking/882797/" />
+    <h2><img src="{% link img/thinking_882797.svg %}" title="https://thenounproject.com/term/thinking/882797/" />
         The real issue.</h2>
     <p>Humans are no good at remembering lots of passwords.  But writing them down or saving them is dangerous, too.</p>
     <p>Master Password avoids all the pitfalls: a cryptographic algorithm calculates your site's password for you, only when you need it.<br>
     When you're done, it erases the password from the device, so it can't be stolen.</p>
 
     <video controls>
-        <source src="vid/about.webm" type="video/webm; codecs=vp8,vorbis">
-        <source src="vid/about.mp4" type="video/mp4">
-        <source src="vid/about.ogv" type="video/ogg; codecs=theora,vorbis">
+        <source src="{% link vid/about.webm %}" type="video/webm; codecs=vp8,vorbis">
+        <source src="{% link vid/about.mp4 %}" type="video/mp4">
+        <source src="{% link vid/about.ogv %}" type="video/ogg; codecs=theora,vorbis">
     </video>
 
     <p>Master Password's unique approach makes you safer from loss, theft, problems with backups, sync, confiscation, snooping, and more.</p>
diff --git a/what.html b/what.html
index bacb2d64..13ca1767 100644
--- a/what.html
+++ b/what.html
@@ -1,13 +1,15 @@
 ---
+nav: What
+title: What does it do?
+
+order: 2
 layout: default
-nav: what
 ---
 
 <section id="intro">
-    <h1>What does it do?</h1>
+    <h1>{{ page.title }}</h1>
 
-
-    <h2><img src="{{ site.baseurl }}/img/password_generate_861293.svg" title="https://thenounproject.com/term/expert/861293/" />
+    <h2><img src="{% link img/password_generate_861293.svg %}" title="https://thenounproject.com/term/expert/861293/" />
         Know one password.<br>
         Generate all the others.</h2>
 
@@ -86,5 +88,5 @@ nav: what
     <hr>
     <p>With Master Password you leave no passwords laying around.  You no longer store passwords in commercial, proprietory apps and no longer send them off to the cloud.  You are no longer tied to your laptop or the internet if you need to look one up.  Even if a personal or natural catastrophe causes you loss, you can never lose your account passwords &mdash; all you ever need is your one and only secret master password and anyone's Master Password calculator app.</p>
 
-    <h2><img src="{{ site.baseurl }}/img/thumb-iphone-types.png"></h2>
+    <h2><img src="{% link img/thumb-iphone-pw.png %}"></h2>
 </section>
diff --git a/why.html b/why.html
index 6fa3c9cc..1dd9feec 100644
--- a/why.html
+++ b/why.html
@@ -1,12 +1,15 @@
 ---
+nav: Why
+title: Why do I need it?
+
+order: 1
 layout: default
-nav: why
 ---
 
 <section id="intro">
-    <h1>Why do I need it?</h1>
+    <h1>{{ page.title }}</h1>
 
-    <h2><img src="{{ site.baseurl }}/img/frustrated_625996.svg" title="https://thenounproject.com/term/professor/625996/" />
+    <h2><img src="{% link img/frustrated_625996.svg %}" title="https://thenounproject.com/term/professor/625996/" />
         Passwords are frustrating.</h2>
 
     <p>We all struggle so hard, trying to keep our accounts secure.</p>
@@ -19,9 +22,9 @@ nav: why
     <div class="widget_gallery">
         <h2>Where do <i>you</i> keep your passwords?</h2>
         <ul>
-            <li><label for="mp_keep_head"><img src="{{ site.baseurl }}/img/password_head_336886.svg" title="https://thenounproject.com/term/password/336886/"></label></li>
-            <li><label for="mp_keep_notebook"><img src="{{ site.baseurl }}/img/password_notebook_4740.svg" title="https://thenounproject.com/term/password/4740/"></label></li>
-            <li><label for="mp_keep_app"><img src="{{ site.baseurl }}/img/password_app_667404.svg" title="https://thenounproject.com/term/password/667404/"></label></li>
+            <li><label for="mp_keep_head"><img src="{% link img/password_head_336886.svg %}" title="https://thenounproject.com/term/password/336886/"></label></li>
+            <li><label for="mp_keep_notebook"><img src="{% link img/password_notebook_4740.svg %}" title="https://thenounproject.com/term/password/4740/"></label></li>
+            <li><label for="mp_keep_app"><img src="{% link img/password_app_667404.svg %}" title="https://thenounproject.com/term/password/667404/"></label></li>
         </ul>
 
         <input type="radio" name="mp_keep" checked>
@@ -32,7 +35,7 @@ nav: why
 
         <input type="radio" name="mp_keep" id="mp_keep_notebook">
         <div>
-            <h2><img src="{{ site.baseurl }}/img/password_notebook_4740.svg" title="https://thenounproject.com/term/password/4740/">
+            <h2><img src="{% link img/password_notebook_4740.svg %}" title="https://thenounproject.com/term/password/4740/">
                 The password notebook.</h2>
 
             <p>Have you considered?
@@ -50,7 +53,7 @@ nav: why
 
         <input type="radio" name="mp_keep" id="mp_keep_app">
         <div>
-            <h2><img src="{{ site.baseurl }}/img/password_app_667404.svg" title="https://thenounproject.com/term/password/667404/">
+            <h2><img src="{% link img/password_app_667404.svg %}" title="https://thenounproject.com/term/password/667404/">
                 The vault in an app.</h2>
 
             <p>Have you considered?
@@ -69,7 +72,7 @@ nav: why
 
         <input type="radio" name="mp_keep" id="mp_keep_head">
         <div>
-            <h2><img src="{{ site.baseurl }}/img/password_head_336886.svg" title="https://thenounproject.com/term/password/336886/">
+            <h2><img src="{% link img/password_head_336886.svg %}" title="https://thenounproject.com/term/password/336886/">
                 The privacy of memory.</h2>
 
             <p>Have you considered?
@@ -86,7 +89,7 @@ nav: why
         </div>
     </div>
 
-    <h2><img src="{{ site.baseurl }}/img/head_key_336882.svg" title="https://thenounproject.com/term/password/336882/" />
+    <h2><img src="{% link img/head_key_336882.svg %}" title="https://thenounproject.com/term/password/336882/" />
         A password is something you know,<br>
         not something you have.</h2>
 
@@ -100,5 +103,5 @@ nav: why
     <p>But this is a panicked reaction to a problem we simply don't know how to handle:<br>
     <b>The problem of passwords for everything</b>.</p>
 
-    <h2><img src="{{ site.baseurl }}/img/thumb-iphone-types.png"></h2>
+    <h2><img src="{% link img/thumb-iphone-broken.png %}"></h2>
 </section>