<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Deploying Your Dumb Ideas with Dokku</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Introduction -->
<section>
<h1>Deploying</h1>
<h3 class="fragment">Your Dumb Ideas</h3>
<h3 class="fragment">with Dokku</h3>
</section>
<section>
<h2>What is Deploying?</h2>
<aside class="notes">This is mostly for web applications and websites</asides>
</section>
<section>
<div>Publishing an application to be used.</div>
</section>
<!-- My history of deploying shit -->
<section>
<h2>A Brief History of Deploying</h2>
</section>
<section>
<h2>Shared Web Hosting</h2>
<div class="fragment">
<img src="images/cpanel-logo.png" />
</div>
<aside class="notes">cPanel had a file manager you could upload your PHP files to!</aside>
</section>
<section>
<div>
<img src="images/cPanel-Interface.jpg" />
</div>
</section>
<section>
<h2>FTP</h2>
<div class="fragment">
<img src="images/filezilla-screenshot.webp" />
</div>
<aside class="notes">Then we evolve. Connect to your cPanel instance with FTP!</aside>
</section>
<section>
<h2>More Advanced Shared Hosting</h2>
<div class="fragment">
<img src="images/WHM_orange_RGB.png" />
</div>
<aside class="notes">Small mention of WHM and managing many installations of cPanel!</aside>
</section>
<section>
<h2>Git</h2>
<ol>
<li class="fragment"><code>$ ssh root@domain</code></li>
<li class="fragment"><code>$ cd /usr/var/www</code></li>
<li class="fragment"><code>$ git pull</code></li>
</ol>
<aside class="notes">I have never actually used Github professionally, oddly enough.</aside>
</section>
<section>
<h2>Modern Build & Deployment Systems</h2>
</section>
<section>
<h2>AWS</h2>
</section>
<!-- Talk about Virtual Machines, Containers, K8s,
Talk about Jenkins, Ansible, GitHub Actions,
Bitbucket Pipelines, Terraform, Packer -->
<section>
<h2>Deployment as a Service</h2>
<ul>
<li>Heroku</li>
<li>Vercel</li>
</ul>
</section>
<section>
<h2>Dokku</h2>
<h3><em>(finally)</em></h3>
</section>
<section>
<h2 class="fragment" data-transition="fade-in">But first...</h2>
</section>
<!-- Set up the VPS, set up namesavers, set the DNS records -->
<section>
<h2>VPS</h2>
<ul>
<li>Easiest way to get a public IP</li>
<li>Cheap, modest servers, running Linux (<em>Debian</em>)
<ul>
<li>Linode</li>
<li>DigitalOcean</li>
</ul>
</li>
<li>Root access!</li>
</ul>
<aside class="notes">Virtual Private Servers, super easy for getting off the ground quickly</aside>
</section>
<section>
<h2>Domains</h2>
<ul>
<li>Buy a domain</li>
<li>Update the Nameservers</li>
<li>Add <strong>A Record</strong> for the IP to the VPS</li>
</ul>
</section>
<section>
<h2>Dokku</h2>
<ul>
<li class="fragment">Open Source, Self-Hosted, Platform as a Service</li>
<li class="fragment">Your very own Heroku</li>
</ul>
<aside class="notes">I have never used Heroku</aside>
</section>
<section>
<div class="fragment" data-transition="fade-in fade-out"><em>I have never used Heroku...</em></div>
</section>
<section>
<h2>Set Up</h2>
<ul>
<li>Install Dokku on VPS</li>
<li>Setting up Domains</li>
<li>Set up Dokku remote in your Git repo</li>
<li>Have a global <code>Dockerfile</code> in your code</li>
<li><code>$ git push -u dokku main</code></li>
</ul>
</section>
<section>
<blockquote>Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno.</blockquote>
<div class="fragment" data-transition="fade-in">That feels made up.</div>
</section>
<section>
<h2>Real Life Example</h2>
<aside class="notes">Show deploying the chat application.</aside>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// More info about initialization & config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html>