Docker Blog Post

- Add docker tutorial to README to-do list
- Add VirtualBox screenshot for docker blog post
- Add blog post about getting started with docker
- Add blog page with cards linking to each blog post
- Add blog page to navigation bar

README.md

@@ -42,6 +42,7 @@ This is the repository for my personal website. This includes all linked files a
     - [ ] Quality of Life
     - [ ] Interviews / Networking
     - [ ] Undergrad / Grad Applications
+    - [x] Docker Tutorial
 - [x] Documentation
 - [x] Page Restructure
 - [x] Add Styling w/ CSS

Web Pages/Common/navbar.html

@@ -76,6 +76,13 @@
                 </div>
             </li>
 
+            <!-- Blog -->
+            <li class="nav-item">
+                <a class="nav-link" href="blog.html">
+                    Blog
+                </a>
+            </li>
+
             <!-- Documentation -->
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="documentation.html" id="navbardrop" data-toggle="dropdown">

Web Pages/Common/navbar.txt

@@ -1 +1 @@
-document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="index.html"> <img src="../Assets/Branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top"> <img src="../Assets/Branding/name.png" alt="Name" height="30px" class="d-inline-block align-center"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="about.html" id="navbardrop" data-toggle="dropdown"> About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="about.html#bio"> Bio </a> <a class="dropdown-item" href="about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="portfolio.html" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="portfolio.html#education"> Education </a> <a class="dropdown-item" href="portfolio.html#professional_experience"> Professional Experience </a> <!-- <a class="dropdown-item" href="portfolio.html#research"> Research </a> <a class="dropdown-item" href="portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="personal.html" id="navbardrop" data-toggle="dropdown"> Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="personal.html#software"> Software </a> <a class="dropdown-item" href="personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="personal.html#music"> Music </a> </div> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="documentation.html" id="navbardrop" data-toggle="dropdown"> Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="documentation.html#introduction"> Introduction </a> <a class="dropdown-item" href="documentation.html#website_hosting"> Website Hosting </a> <a class="dropdown-item" href="documentation.html#web_design"> Web Design </a> <a class="dropdown-item" href="documentation.html#aesthetics"> Aesthetics </a> <a class="dropdown-item" href="documentation.html#inspiration"> Inspiration </a> </div> </li> </ul> </div> </nav>')
+document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="index.html"> <img src="../Assets/Branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top"> <img src="../Assets/Branding/name.png" alt="Name" height="30px" class="d-inline-block align-center"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="about.html" id="navbardrop" data-toggle="dropdown"> About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="about.html#bio"> Bio </a> <a class="dropdown-item" href="about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="portfolio.html" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="portfolio.html#education"> Education </a> <a class="dropdown-item" href="portfolio.html#professional_experience"> Professional Experience </a> <!-- <a class="dropdown-item" href="portfolio.html#research"> Research </a> <a class="dropdown-item" href="portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="personal.html" id="navbardrop" data-toggle="dropdown"> Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="personal.html#software"> Software </a> <a class="dropdown-item" href="personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="documentation.html" id="navbardrop" data-toggle="dropdown"> Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="documentation.html#introduction"> Introduction </a> <a class="dropdown-item" href="documentation.html#website_hosting"> Website Hosting </a> <a class="dropdown-item" href="documentation.html#web_design"> Web Design </a> <a class="dropdown-item" href="documentation.html#aesthetics"> Aesthetics </a> <a class="dropdown-item" href="documentation.html#inspiration"> Inspiration </a> </div> </li> </ul> </div> </nav>')

Web Pages/blog.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script language="javascript" type="text/javascript" src="Common/header.txt"></script>
+        <title>Blog</title>
+    </head>
+
+    <script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
+
+    <body>
+        <div class="container-fluid px-md-6">
+            <div class="row align-items-center">
+                <div class="col-md-12">
+                    <h1>Blog Posts</h1>
+                </div>
+            </div>
+            <div class="row align-items-center">
+                <div class="col-md-3">
+                    <div class="card">
+                        <img class="card-img-top" src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png" alt="Docker Whale">
+                        <div class="card-body">
+                            <h4 class="card-title"><a href="blog_docker.html">Getting Started with Docker</a></h4>
+                            <p class="card-text">A brief introduction to docker, how to use it, and what you can do with it.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="col-md-3">
+                    <div class="card">
+                        <img class="card-img-top" src="" alt="">
+                        <div class="card-body">
+                            <h4 class="card-title"></h4>
+                            <p class="card-text"></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="card">
+                        <img class="card-img-top" src="" alt="">
+                        <div class="card-body">
+                            <h4 class="card-title"></h4>
+                            <p class="card-text"></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="card">
+                        <img class="card-img-top" src="" alt="">
+                        <div class="card-body">
+                            <h4 class="card-title"></h4>
+                            <p class="card-text"></p>
+                        </div>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+    </body>
+
+    <footer>
+        <script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
+    </footer>
+</html>

Web Pages/blog_docker.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script language="javascript" type="text/javascript" src="Common/header.txt"></script>
+        <title>Docker</title>
+
+        <style>
+            img {
+                max-height: 500px;
+                margin: auto;
+                display: block;
+            }
+        </style>
+    </head>
+
+    <script language="javascript" type="text/javascript" src="Common/navbar.txt"></script>
+
+    <body>
+        <div class="container-fluid px-md-6">
+            <div class="row align-items-center">
+                <div class="col-md-2">
+                    <!-- Nothing -->
+                </div>
+                <div class="col-md-8">
+                    <!-- Title -->
+                    <h1>Getting Started with Docker</h1>
+
+                    <!-- Author & Date/Time -->
+                    <p class="lead">
+                        Updated on March 17, 2020
+                    </p>
+                    
+                    <!-- Preview Image -->
+                    <img class="img-fluid rounded" src="https://cdn.vox-cdn.com/thumbor/fbrTLtxuP2D29o8VJUaE-u3NKfU=/0x0:792x613/1200x800/filters:focal(300x237:426x363)/cdn.vox-cdn.com/uploads/chorus_image/image/59850273/Docker_logo_011.0.png" alt="">
+
+                    <hr>
+
+                    <!-- Post Content -->
+                    <h2><a name="introduction">Introduction</a></h2>
+                    <p>
+                        Throughout my college career in computer science, I have found the need to develop applications that will be deployed in a Linux environment. As a windows user, I have usually turned to a couple of different options: virtual machines, <a href="https://docs.microsoft.com/en-us/windows/wsl/about" target="_blank">Windows Subsystem for Linux</a>, or <a href="https://www.cygwin.com" target="_blank">Cygwin</a>. Recently, I discovered an alternative method for building and testing Linux apps that is especially useful for collaboration and deployment. Docker allows you to package an OS and all the necessary dependencies into a <b>docker image</b>. You can then spin up an instance of this image called a <b>docker container</b> in which you can run your source code. The video below was incredibly helpful in my understanding of what docker is, how it's different from virtual machines, and how to use it.
+                    </p>
+
+                    <div class="embed-responsive embed-responsive-16by9">
+                        <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/YFl2mCHdv24" allowfullscreen></iframe>
+                    </div>
+
+                    <hr>
+
+                    <h2><a name="installing_docker"></a>Installing Docker</h2>
+                    <p>
+                        Depending on your host machine's operating system, you will install one of the following Docker products. If you have macOS or Windows, your first option should be Docker Desktop. Check if you meet the system requirements. If you do not, Docker Toolbox is the legacy option that uses Oracle VirtualBox rather than Hyper-V or HyperKit for virtualization. I am using a computer with Windows 10 Home, so I use Docker Toolbox for Windows. This blog post will discuss some solutions to edge-case issues with Docker Toolbox that Docker Desktop users will hopefully not have to deal with.
+                    </p>
+                    <ul>
+                        <li>macOS</li>
+                        <ul>
+                            <li><a href="https://docs.docker.com/docker-for-mac/install/" target="_blank">Docker Desktop for Mac</a></li>
+                            <li><a href="https://docs.docker.com/toolbox/toolbox_install_mac/" target="_blank">Docker Toolbox for macOS</a> (Legacy)</li>
+                        </ul>
+
+                        <li>Windows</li>
+                        <ul>
+                            <li><a href="https://docs.docker.com/docker-for-windows/install/" target="_blank">Docker Desktop for Windows</a></li>
+                            <ul>
+                                <li>Chocolatey: <a href="https://chocolatey.org/packages/docker-desktop/2.2.0.4" target="_blank"><code>choco install docker-desktop</code></a></li>
+                            </ul>
+
+                            <li><a href="https://docs.docker.com/toolbox/toolbox_install_windows/" target="_blank">Docker Toolbox for Windows</a> (Legacy)</li>
+                            <ul>
+                                <li>Chocolatey: <a href="https://chocolatey.org/packages/docker-toolbox" target="_blank"><code>choco install docker-toolbox</code></a></li>
+                            </ul>
+                        </ul>
+                        
+                        <li>Linux</li>
+                        <ul>
+                            <li><a href="https://docs.docker.com/install/linux/docker-ce/centos/" target="_blank">Docker Engine - Community for CentOS</a></li>
+                            <li><a href="https://docs.docker.com/install/linux/docker-ce/debian/" target="_blank">Docker Engine - Community for Debian</a></li>
+                            <li><a href="https://docs.docker.com/install/linux/docker-ce/fedora/" target="_blank">Docker Engine - Community for Fedora</a></li>
+                            <li><a href="https://docs.docker.com/install/linux/docker-ce/ubuntu/" target="_blank">Docker Engine - Community for Ubuntu</a></li>
+                        </ul>
+                    </ul>
+
+                    <h3>Docker Toolbox & WSL</h3>
+                    <p>
+                        As mentioned previously, I am using Docker Toolbox since Windows 10 Home does not support Hyper-V for virtualization with Docker Desktop. You can run docker toolbox in a command prompt or powershell terminal, but I personally prefer to use WSL because I am more familiar with bash terminal commands. If you are interested in this setup, continue reading this section. Otherwise, you can skip ahead.
+                    </p>
+
+                    <h4>Installing WSL</h4>
+                    <p>
+                        The default way to install WSL is through the <a href="https://docs.microsoft.com/en-us/windows/wsl/about" target="_blank">Microsoft Store</a>. This will install WSL on your system drive (e.g. C:\). If you are like me and don't want to install it on your system drive, follow the instructions <a href="https://kontext.tech/column/tools/308/how-to-install-windows-subsystem-for-linux-on-a-non-c-drive" target="_blank">here</a>.
+                    </p>
+
+                    <h4>Setting Up Docker Toolbox with WSL</h4>
+                    <p>
+                        After installing WSL, follow the instructions in <a href="https://medium.com/@joaoh82/setting-up-docker-toolbox-for-windows-home-10-and-wsl-to-work-perfectly-2fd34ed41d51" target="_blank">Setting Up Docker Toolbox for Windows Home 10 and WSL to Work Perfectly!</a> starting with <b>Install Docker and Docker Compose within WSL</b>. As you will have seen near the end of that post, there are some extra steps needed to ensure that volume mounts work. After setting <code>root = /</code>, you will need to configure shared folders for the <code>default</code> docker machine in VirtualBox.
+                    </p>
+
+                    <h4>Shared Folder Configuration for Volume Mounting</h4>
+                    <p>
+                        I configured all of my drives as shared folders so I can mount any folders on my host machine to any docker containers I run. In your WSL terminal, run <code>docker-machine.exe start</code> to start the <code>default</code> docker machine created by the Docker Quickstart Terminal. After your docker machine is running, open the shared folder settings as shown in <a href="https://medium.com/@Charles_Stover/fixing-volumes-in-docker-toolbox-4ad5ace0e572" target="_blank">Fixing Volumes in Docker Toolbox</a>. The image below shows how <code>C:\</code> on my host computer is mounted at <code>/</code> in folder <code>c</code> on my docker machine such that <code>C:\</code> maps to <code>/c</code>. Make sure you have enabled <code>Auto-mount</code> and <code>Make Permanent</code>. Click <b>OK</b> to save all settings, then go back to the WSL terminal and run <code>docker-machine.exe restart default</code>. Now your docker machine should be properly configured to allow volume mounting.
+                    </p>
+                    <img class="img-fluid mx-auto d-block" src="../Assets/Blog Posts/Docker/virtual_box_shared_folder.jpg">
+
+                    <h4>Increase Docker Machine Resources</h4>
+                    <p>
+                        One issue I ran into with the default settings for the <code>default</code> docker machine is the amount of RAM allocated to it. I attempted to build the <a href="https://github.com/borglab/gtsam" target="_blank">GTSAM</a> library inside a docker container and ran into an <i>internal compiler error: Killed (program cc1plus)</i>. As mentioned <a href="https://github.com/docker/for-win/issues/403" target="_blank">here</a>, the solution is to increase the RAM allocated to the docker machine in VirtualBox. In the WSL terminal, run <code>docker-machine.exe stop</code> to shutdown the docker machine. When this is complete, right click on the <code>default</code> docker machine in VirtualBox and open <b>Settings</b>. In the <b>System</b> tab, increase <i>Base Memory</i>. Similar to virtual machines, I would not recommend allocating more than half of your system's RAM. For example, my computer has 16 GB of RAM, so I would only recommend allocating up to 8 GB of RAM to the docker machine. You can look through the other options, such as number of allocated processor cores, as well if you wish.
+                    </p>
+
+                    <hr>
+
+                    <h2><a name="building_images_and_running_containers"></a>Building Images & Running Containers</h2>
+                    <p>
+                        To learn about Dockerfiles and a basic example, check out the video in the <a href="#introduction">introduction</a>. To learn about Docker Compose, check out the video below.
+                    </p>
+                    <div class="embed-responsive embed-responsive-16by9">
+                        <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/Qw9zlE3t8Ko" allowfullscreen></iframe>
+                    </div>
+
+                    <hr>
+                </div>
+                <div class="col-md-2">
+                    <!-- Nothing -->
+                </div>
+            </div>
+        </div>
+    </body>
+
+    <footer>
+        <script language="javascript" type="text/javascript" src="Common/footer.txt"></script>
+    </footer>
+</html>