diff --git a/.travis.yml b/.travis.yml
index 9b6fbac9d..46a545351 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,34 +1,44 @@
-
-
-
-
-
-
+# == INSTRUCTIONS FOR SETTING UP TRAVIS (and GitHub Pages) ==
+#
+# 1. Find this repository in your Travis-CI dashboard.
+#    open settings and add an environment variable called
+#    GITHUB_ACCESS_TOKEN and set it to your personal access token.addons:
+#    See: https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line
+#
+#    **DO NOT TURN ON 'Display value in build log'!!!!**
+#
+# 2. Push the code to the repository.
+# 3. Set the GitHub Pages source in the GitHub repository settings to the
+#    gh-pages branch.
 
 language: node_js
 node_js:
-  - "8"
+ - "12"
+
+env:
+ - DEPLOY_ENV=GH_PAGES
 
 cache:
-  directories:
-    - "node_modules"
+ directories:
+  - "node_modules"
 
 branches:
-  only:
-  - master
+ only:
+  - "master"
 
 install:
-  - npm install
-  - npm run generate
+ - "npm install"
+ - "npm run generate"
 
-script:
-  - echo "Skipping tests"
+notifications:
+  webhooks: https://www.travisbuddy.com
 
 deploy:
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_ACCESS_TOKEN  # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
-  target-branch: gh-pages
-  local-dir: dist
-  on:
-    branch: master
+ provider: pages
+ skip_cleanup: true
+ # Refer to: https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
+ github_token: $GITHUB_ACCESS_TOKEN
+ target-branch: gh-pages
+ local_dir: dist
+ on:
+  branch: master
\ No newline at end of file
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index ed3e08281..05e894ed2 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -70,6 +70,12 @@ footer {
   justify-content: space-between;
 }
 
+nav {
+  a:not(:last-of-type) {
+    margin-right: 15px;
+  }
+}
+
 body.sticky-footer footer {
   position: fixed;
   bottom: 0;
@@ -104,7 +110,7 @@ legend {
   cursor: pointer;
 }
 
-fieldset textarea {
+fieldset textarea, fieldset pre {
   resize: vertical;
 }
 
@@ -163,7 +169,8 @@ fieldset.response legend {
 select,
 input,
 option,
-textarea {
+textarea,
+pre {
   margin: 4px;
   padding: 8px 16px;
   width: calc(100% - 8px);
diff --git a/layouts/default.vue b/layouts/default.vue
index 6a17733d9..d3f92bedc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,6 +7,11 @@
         </nuxt-link>
         <h3>Lightweight API request builder</h3>
       </div>
+
+      <nav>
+        <nuxt-link to="/">HTTP</nuxt-link>
+        <nuxt-link to="/websocket">WebSocket</nuxt-link>
+      </nav>
     </header>
 
     <nuxt id="main" />
@@ -41,6 +46,43 @@
     margin: 0 auto;
     max-width: 1200px;
   }
+
+  header { padding-right: 0; }
+
+  nav {
+    a {
+      display: inline-block;
+      position: relative;
+      padding: 8px 16px;
+
+      &.nuxt-link-exact-active {
+        color: black;
+        &:before { width: 100%; height: 100% }
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: -1;
+
+        background-color: var(--ac-color);
+        border-radius: 4px;
+        margin: auto;
+      }
+
+      &:not(.nuxt-link-exact-active):hover:before {
+        animation: linkHover 0.3s forwards ease-in-out;
+      }
+
+      @keyframes linkHover {
+        0% { width: 0; height: 2px; }
+        100% { width: 100%; height: 2px; }
+      }
+    }
+  }
 </style>
 
 <script>
@@ -49,11 +91,16 @@
   export default {
     data () {
       return {
+        // Once the PWA code is initialized, this holds a method
+        // that can be called to show the user the installation
+        // prompt.
         showInstallPrompt: null
       }
     },
 
     mounted () {
+      // Initializes the PWA code - checks if the app is installed,
+      // etc.
       (async () => {
         this.showInstallPrompt = await intializePwa();
       })();
diff --git a/layouts/error.vue b/layouts/error.vue
index 89090039f..7c2030dbd 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -4,7 +4,7 @@
     <h2>{{ error.message }}</h2>
     <br>
     <p><nuxt-link to="/"><button>Go Home</button></nuxt-link></p>
-    <p><a href="/">Reload</a></p>
+    <p><a href="" @click.prevent="reloadApplication">Reload</a></p>
   </div>
 </template>
 
@@ -24,6 +24,13 @@
 <script>
   export default {
       props: ['error'],
+
+      methods: {
+        reloadApplication () {
+          this.$router.push('/', () => window.location.reload());
+        }
+      },
+
       head () {
           return {
               bodyAttrs: {
diff --git a/nuxt.config.js b/nuxt.config.js
index 3bb5ff8bb..60240633b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,11 +1,28 @@
+
 // Some helpful application constants.
 // TODO: Use these when rendering the pages (rather than just for head/meta tags...)
-const meta = {
+export const meta = {
   name: "Postwoman",
   shortDescription: "Lightweight API request builder",
   description: "The Postwoman API request builder helps you create your requests faster, saving you precious time on your development."
 };
 
+// Sets the base path for the router.
+// Important for deploying to GitHub pages.
+
+// -- Travis includes the author in the repo slug,
+//    so if there's a /, we need to get everything after it.
+let repoName = (process.env.TRAVIS_REPO_SLUG || '').split('/').pop();
+export const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
+  router: {
+    base: `/${repoName}/`
+  }
+} : {
+  router: {
+    base: '/'
+  }
+};
+
 export default {
   mode: 'spa',
   /*
@@ -21,7 +38,7 @@ export default {
       { name: 'X-UA-Compatible', content: "IE=edge, chrome=1" },
       { itemprop: "name", content: `${meta.name} \u2022 ${meta.shortDescription}` },
       { itemprop: "description", content: meta.description },
-      { itemprop: "image", content: "/icons/icon-192x192.png" },
+      { itemprop: "image", content: `${routerBase.router.base}icons/icon-192x192.png` },
 
       // Add to homescreen for Chrome on Android. Fallback for PWA (handled by nuxt)
       { name: 'application-name', content: meta.name },
@@ -32,7 +49,7 @@ export default {
       { name: 'apple-mobile-web-app-title', content: meta.name },
 
       // Windows phone tile icon
-      { name: 'msapplication-TileImage', content: 'icons/icon-144x144.png' },
+      { name: 'msapplication-TileImage', content: `${routerBase.router.base}icons/icon-144x144.png` },
       { name: 'msapplication-TileColor', content: '#121212' },
       { name: 'msapplication-tap-highlight', content: 'no' },
 
@@ -42,7 +59,7 @@ export default {
       { property: 'og:type', content: 'website' },
       { property: 'og:title', content: `${meta.name} \u2022 ${meta.shortDescription}` },
       { property: 'og:description', content: meta.description },
-      { property: 'og:image', content: '/icons/icon-144x144.png' },
+      { property: 'og:image', content: `${routerBase.router.base}icons/icon-144x144.png` },
 
       // Twitter
       { name: 'twitter:card', content: "summary" },
@@ -51,18 +68,18 @@ export default {
       { name: 'twitter:url', content: "https://liyasthomas.github.io/postwoman" },
       { name: 'twitter:title', content: meta.name },
       { name: 'twitter:description', content: meta.shortDescription },
-      { name: 'twitter:image', content: '/icons/icon-144x144.png' },
+      { name: 'twitter:image', content: `${routerBase.router.base}icons/icon-144x144.png` },
 
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
 
       // Home-screen icons (iOS)
-      { rel: 'apple-touch-icon', href: '/icons/icon-48x48.png' },
-      { rel: 'apple-touch-icon', sizes: '72x72', href: '/icons/icon-72x72.png' },
-      { rel: 'apple-touch-icon', sizes: '96x96', href: '/icons/icon-96x96.png' },
-      { rel: 'apple-touch-icon', sizes: '144x144', href: '/icons/icon-144x144.png' },
-      { rel: 'apple-touch-icon', sizes: '192x192', href: '/icons/icon-192x192.png' },
+      { rel: 'apple-touch-icon', href: `${routerBase.router.base}icons/icon-48x48.png` },
+      { rel: 'apple-touch-icon', sizes: '72x72', href: `${routerBase.router.base}icons/icon-72x72.png` },
+      { rel: 'apple-touch-icon', sizes: '96x96', href: `${routerBase.router.base}icons/icon-96x96.png` },
+      { rel: 'apple-touch-icon', sizes: '144x144', href: `${routerBase.router.base}icons/icon-144x144.png` },
+      { rel: 'apple-touch-icon', sizes: '192x192', href: `${routerBase.router.base}icons/icon-192x192.png` },
     ]
   },
   /*
@@ -106,7 +123,7 @@ export default {
 
           for(let size of sizes){
             icons.push({
-              "src": `/icons/icon-${size}x${size}.png`,
+              "src": `${routerBase.router.base}icons/icon-${size}x${size}.png`,
               "type": "image/png",
               "sizes": `${size}x${size}`
             });
@@ -134,5 +151,10 @@ export default {
   */
   generate: {
     fallback: true
-  }
+  },
+
+  /*
+   ** Router configuration
+   */
+  ...routerBase
 }
diff --git a/pages/index.vue b/pages/index.vue
index 8f3aaf6bd..4be215994 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -239,7 +239,7 @@
                   '((\\d{1,3}\\.){3}\\d{1,3}))' +
                   '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
                   '(\\?[;&a-z\\d%_.~+=-]*)?' +
-                  '(\\#[-a-z\\d_]*)?$', 'i')
+                  '(\\#[-a-z\\d_]*)?$', 'i');
               return !pattern.test(this.url)
           },
           rawRequestBody() {
diff --git a/pages/websocket.vue b/pages/websocket.vue
new file mode 100644
index 000000000..ec7e89bf9
--- /dev/null
+++ b/pages/websocket.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="page">
+
+    <fieldset class="request" ref="request">
+      <legend v-on:click="collapse">Request ↕</legend>
+      <div class="collapsible">
+        <ul>
+          <li>
+            <label for="url">URL</label>
+            <input type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
+          </li>
+          <li class="no-grow">
+            <label for="action">&nbsp;</label>
+            <button class="action" :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
+          </li>
+        </ul>
+      </div>
+    </fieldset>
+
+    <fieldset class="response" id="response" ref="response">
+      <legend v-on:click="collapse">Communication ↕</legend>
+      <div class="collapsible">
+        <ul>
+          <li>
+            <label for="body">Log</label>
+            <div name="body" class="body" readonly>
+              <span v-if="communication.log">
+                <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">{{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
+              </span>
+              <span v-else>(Waiting for connection...)</span>
+            </div>
+          </li>
+        </ul>
+
+        <ul>
+          <li>
+            <label for="status">Message</label>
+            <input name="status" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
+          </li>
+
+          <li class="no-grow">
+            <label for="send">&nbsp;</label>
+            <button class="action" name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
+          </li>
+        </ul>
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<style lang="scss">
+  .no-grow { flex-grow: 0; }
+  .action {
+    padding-left: 30px;
+    padding-right: 30px;
+    width: 150px;
+  }
+
+  div.body {
+    margin: 4px;
+    padding: 8px 16px;
+    width: calc(100% - 8px);
+    border-radius: 4px;
+    background-color: #000;
+    color: var(--fg-color);
+    height: 300px;
+    overflow: auto;
+
+    &, span {
+      font-weight: 700;
+      font-size: 18px;
+      font-family: monospace;
+    }
+
+    span {
+      display: block;
+      white-space: pre-wrap;
+    }
+  }
+</style>
+
+<script>
+  export default {
+
+      data () {
+        return {
+          connectionState: false,
+          url: "wss://echo.websocket.org",
+          socket: null,
+
+          communication: {
+            log: null,
+            input: ""
+          }
+        }
+      },
+
+      computed: {
+        toggleConnectionVerb () {
+            return !this.connectionState ? "Connect" : "Disconnect";
+        },
+
+        urlValid () {
+            const pattern = new RegExp('^(wss?:\\/\\/)?' +
+                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+                '((\\d{1,3}\\.){3}\\d{1,3}))' +
+                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+                '(\\?[;&a-z\\d%_.~+=-]*)?' +
+                '(\\#[-a-z\\d_]*)?$', 'i');
+            return pattern.test(this.url);
+        }
+      },
+
+      methods: {
+        toggleConnection () {
+          // If it is connecting:
+          if(!this.connectionState) return this.connect();
+
+          // Otherwise, it's disconnecting.
+          else return this.disconnect();
+        },
+
+        connect () {
+          this.communication.log = [
+            {
+              payload: `Connecting to ${this.url}...`,
+              source: 'info',
+              color: 'lime'
+            }
+          ];
+
+          try {
+              this.socket = new WebSocket(this.url);
+
+              this.socket.onopen = (event) => {
+                  this.connectionState = true;
+
+                  this.communication.log = [
+                      {
+                          payload: `Connected to ${this.url}.`,
+                          source: 'info',
+                          color: 'lime'
+                      }
+                  ];
+              };
+
+              this.socket.onerror = (event) => {
+                  this.handleError();
+              };
+
+              this.socket.onclose = (event) => {
+                  this.connectionState = false;
+
+                  this.communication.log.push({
+                      payload: `Disconnected from ${this.url}.`,
+                      source: 'info',
+                      color: 'red'
+                  });
+              };
+
+              this.socket.onmessage = (event) => {
+                  this.communication.log.push({
+                      payload: event.data,
+                      source: 'server'
+                  });
+              }
+          }catch(ex){
+              this.handleError(ex);
+          }
+        },
+
+        disconnect () {
+          if(this.socket != null) this.socket.close();
+        },
+
+        handleError (error) {
+            this.disconnect();
+            this.connectionState = false;
+
+            this.communication.log.push({
+                payload: `An error has occurred.`,
+                source: 'info',
+                color: 'red'
+            });
+            if(error != null) this.communication.log.push({
+                payload: error,
+                source: 'info',
+                color: 'red'
+            });
+        },
+
+        sendMessage () {
+          const message = this.communication.input;
+
+          this.socket.send(message);
+          this.communication.log.push({
+              payload: message,
+              source: 'client'
+          });
+
+          this.communication.input = "";
+        },
+
+        collapse({target}) {
+          const el = target.parentNode.className;
+          document.getElementsByClassName(el)[0].classList.toggle('hidden');
+        },
+
+        getSourcePrefix(source){
+          const sourceEmojis = {
+            // Source used for info messages.
+            'info': 'ℹ️ [INFO]:\t',
+            // Source used for client to server messages.
+            'client': '👽 [SENT]:\t',
+            // Source used for server to client messages.
+            'server': '📥 [RECEIVED]:\t'
+          };
+
+          if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source];
+          return '';
+        }
+      }
+
+  }
+</script>