[CI] Publish Documentation for 05ba969 - 05ba969 🚀

podman-desktop-tutorial/building-images.html

@@ -6,7 +6,7 @@
     <title>Exercise: Building Images in Podman Desktop :: Podman Desktop Tutorial</title>
     <link rel="canonical" href="https://redhat-scholars.github.io/podman-desktop-tutorial/podman-desktop-tutorial/building-images.html">
     <link rel="prev" href="podman-basics.html">
-    <link rel="next" href="#running-containers.adoc">
+    <link rel="next" href="running-containers.html">
     <meta name="generator" content="Antora 3.0.0">
     <link rel="stylesheet" href="../_/css/site.css">
   </head>
@@ -52,13 +52,7 @@ <h3 class="title"><a href="index.html"></a></h3>
   <li class="nav-item" data-depth="0">
 <ul class="nav-list">
   <li class="nav-item" data-depth="1">
-    <button class="nav-item-toggle"></button>
-    <span class="nav-text">Requirements</span>
-<ul class="nav-list">
-  <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="setup.html">Podman Desktop Setup</a>
-  </li>
-</ul>
+    <a class="nav-link" href="setup.html">Installing Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="1">
     <button class="nav-item-toggle"></button>
@@ -74,7 +68,7 @@ <h3 class="title"><a href="index.html"></a></h3>
     <a class="nav-link" href="building-images.html">Exercise: Building Images in Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="#running-containers.adoc">Running and Managing Containers</a>
+    <a class="nav-link" href="running-containers.html">Exercise: Running and Managing Containers</a>
   </li>
 </ul>
   </li>
@@ -141,7 +135,19 @@ <h1 class="page">Exercise: Building Images in Podman Desktop</h1>
 <div id="preamble">
 <div class="sectionbody">
 <div class="paragraph">
-<p>Fantastic, let&#8217;s start the Podman Desktop tutorial with the most basic step in the inner loop development process: building container images.</p>
+<p>Fantastic, let&#8217;s start the Podman Desktop tutorial with the most basic step in the inner loop development process: <strong>building container images</strong>. We&#8217;ll also cover authenticating to registries amd pulling images.</p>
+</div>
+<div class="admonitionblock tip">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-tip" title="Tip"></i>
+</td>
+<td class="content">
+Feel free to down if you&#8217;d just like to <a href="#pulling.adoc">pull the container images</a>, without downloading the application source code.
+</td>
+</tr>
+</table>
 </div>
 </div>
 </div>
@@ -151,28 +157,16 @@ <h2 id="_demo_application"><a class="anchor" href="#_demo_application"></a>Demo
 <div class="paragraph">
 <p>For this exercise, we&#8217;ll be using a basic Python web server application, which uses a Redis cache to store the number of times we&#8217;ve visited the webpage. This is a simple microservice, but it&#8217;s a good example of a multi-container application.</p>
 </div>
-<div class="imageblock unresolved">
+<div class="imageblock">
 <div class="content">
-<img src="podman-desktop-demo-app.png" alt="Podman Desktop Demo App" width="600">
+<img src="_images/podman-desktop-python-app-browser.png" alt="Podman Desktop Python App" width="600">
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_getting_started_with_the_source_code"><a class="anchor" href="#_getting_started_with_the_source_code"></a>Getting Started with the Source Code</h2>
 <div class="sectionbody">
-<div class="admonitionblock tip">
-<table>
-<tr>
-<td class="icon">
-<i class="fa icon-tip" title="Tip"></i>
-</td>
-<td class="content">
-Feel free to skip this section if you&#8217;d just like to pull the container images directly in the next step, without downloading the application source code.
-</td>
-</tr>
-</table>
-</div>
 <div class="paragraph">
 <p>Let&#8217;s start off with downloading the source code for the demo application, found <a href="https://github.com/redhat-developer/podman-desktop-demo">here on GitHub</a>. This repository contains a variety of different Podman related demo&#8217;s you can try later, including Minikube, WASM, Compose, and more!</p>
 </div>
@@ -297,11 +291,116 @@ <h2 id="_building_the_container_image"><a class="anchor" href="#_building_the_co
 <div class="paragraph">
 <p>Now that we&#8217;ve taken a look at the source code and Dockerfile, let&#8217;s build the container image from directly within Podman Desktop. From the <strong>Images</strong> section, click the <strong>Build</strong> button in the top right corner.</p>
 </div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-build-image-button.png" alt="Podman Desktop Build Image" width="600">
+</div>
+</div>
+<div class="paragraph">
+<p>This will open up a new window where we can specify the Dockerfile/Containerfile, the build context, and image name. Let&#8217;s select the <code>Dockerfile</code>, the build directory as <code>primary-podify-demo/front</code>, and <code>python-app</code> for the image name.</p>
+</div>
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+The build context is the directory where the source code and Dockerfile are located, and the Dockerfile is the recipe for building the container image. We can use Podman Desktop to easily rename/retag the image later, so don&#8217;t worry too much about the image name for now.
+</td>
+</tr>
+</table>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-build-image-window.png" alt="Podman Desktop Build Image Window" width="600">
+</div>
+</div>
+<div class="paragraph">
+<p>After clicking <strong>Build</strong>, Podman Desktop will start building the container image, and you can see the build logs in the bottom pane. This will take a few minutes, as it&#8217;s downloading the base image, installing dependencies, copying the source code, etc.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-build-image-logs.png" alt="Podman Desktop Build Image Logs" width="600">
+</div>
+</div>
+<div class="paragraph">
+<p>Once the build is complete, you should see the new <code>python-app</code> image in the <strong>Images</strong> section of Podman Desktop. You&#8217;ll see the default image <a href="https://www.redhat.com/sysadmin/container-image-short-names">short name</a> here, which we&#8217;ll retag for our registry in another step.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-built-image.png" alt="Podman Desktop Built Image" width="600">
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="pulling"><a class="anchor" href="#pulling"></a>Optional: Pulling the Python App Image</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>If you&#8217;d like to skip the build process from above, you can pull the <code>quay.io/cclyburn/python-app</code> image from a public registry. This is the same image we just built, but it&#8217;s already available for use. Head to the <strong>Images</strong> section, and click the <strong>Pull</strong> button in the top right corner.</p>
+</div>
+<div class="listingblock console-input">
+<div class="content">
+<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">quay.io/cclyburn/python-app</code></pre>
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-built-image-layers.png" alt="Podman Desktop Built Image" width="600">
+</div>
+</div>
+<div class="admonitionblock tip">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-tip" title="Tip"></i>
+</td>
+<td class="content">
+Due to it&#8217;s popularity, Podman uses the Docker Hub registry to pull images by default. However, you can authenticate other registries in the Podman Desktop <strong>Settings &gt; Registries</strong>, or set defaults via the <a href="https://www.redhat.com/sysadmin/manage-container-registries">Podman registry configuration file</a>.
+</td>
+</tr>
+</table>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_pulling_the_redis_image"><a class="anchor" href="#_pulling_the_redis_image"></a>Pulling the Redis Image</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>As you may have seen from the Python web application source code, we&#8217;re using a Redis cache to store the number of times we&#8217;ve visited the webpage. Thus, if you were to start the Python web application without the Redis cache, it would crash.</p>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-redis-image-start.png" alt="Podman Desktop Redis Image" width="600">
+</div>
+</div>
+<div class="paragraph">
+<p>Let&#8217;s go ahead and pull the Redis image from Docker Hub by clicking the <strong>Pull</strong> button from the top right corner menu. We&#8217;ll be pulling the official <code>redis</code> image, which is a popular choice for caching in containerized applications.</p>
+</div>
+<div class="listingblock console-input][ console-input">
+<div class="content">
+<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">redis</code></pre>
+</div>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="_images/podman-desktop-redis-image-layers.png" alt="Podman Desktop Redis Image" width="600">
+</div>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_next_steps"><a class="anchor" href="#_next_steps"></a>Next Steps</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Fantastic! We&#8217;ve built the container image for the Python web application, and pulled the Redis image for the cache. In the next tutorial, we&#8217;ll start the containers and test the web application.</p>
+</div>
 </div>
 </div>
 <nav class="pagination">
   <span class="prev"><a href="podman-basics.html">Podman Desktop Interface &amp; Essentials</a></span>
-  <span class="next"><a href="#running-containers.adoc">Running and Managing Containers</a></span>
+  <span class="next"><a href="running-containers.html">Exercise: Running and Managing Containers</a></span>
 </nav>
 </article>
 <aside class="toc sidebar" data-title="Contents" data-levels="2">

podman-desktop-tutorial/index.html

@@ -51,13 +51,7 @@ <h3 class="title"><a href="index.html"></a></h3>
   <li class="nav-item" data-depth="0">
 <ul class="nav-list">
   <li class="nav-item" data-depth="1">
-    <button class="nav-item-toggle"></button>
-    <span class="nav-text">Requirements</span>
-<ul class="nav-list">
-  <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="setup.html">Podman Desktop Setup</a>
-  </li>
-</ul>
+    <a class="nav-link" href="setup.html">Installing Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="1">
     <button class="nav-item-toggle"></button>
@@ -73,7 +67,7 @@ <h3 class="title"><a href="index.html"></a></h3>
     <a class="nav-link" href="building-images.html">Exercise: Building Images in Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="#running-containers.adoc">Running and Managing Containers</a>
+    <a class="nav-link" href="running-containers.html">Exercise: Running and Managing Containers</a>
   </li>
 </ul>
   </li>
@@ -210,14 +204,7 @@ <h2>Tutorial Steps</h2>
 <div class="ulist">
 <ul>
 <li>
-<p>Requirements</p>
-<div class="ulist">
-<ul>
-<li>
-<p><a href="setup.html" class="xref page">Podman Desktop Setup</a></p>
-</li>
-</ul>
-</div>
+<p><a href="setup.html" class="xref page">Installing Podman Desktop</a></p>
 </li>
 <li>
 <p>I. Podman Desktop Fundamentals</p>
@@ -233,7 +220,7 @@ <h2>Tutorial Steps</h2>
 <p><a href="building-images.html" class="xref page">Exercise: Building Images in Podman Desktop</a></p>
 </li>
 <li>
-<p><a href="#running-containers.adoc" class="xref unresolved">Running and Managing Containers</a></p>
+<p><a href="running-containers.html" class="xref page">Exercise: Running and Managing Containers</a></p>
 </li>
 </ul>
 </div>
@@ -282,7 +269,7 @@ <h2>Tutorial Steps</h2>
 </div>
 </div>
 <nav class="pagination">
-  <span class="next"><a href="setup.html">Podman Desktop Setup</a></span>
+  <span class="next"><a href="setup.html">Installing Podman Desktop</a></span>
 </nav>
 </article>
 <aside class="toc sidebar" data-title="Contents" data-levels="2">

podman-desktop-tutorial/intro.html

@@ -52,13 +52,7 @@ <h3 class="title"><a href="index.html"></a></h3>
   <li class="nav-item" data-depth="0">
 <ul class="nav-list">
   <li class="nav-item" data-depth="1">
-    <button class="nav-item-toggle"></button>
-    <span class="nav-text">Requirements</span>
-<ul class="nav-list">
-  <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="setup.html">Podman Desktop Setup</a>
-  </li>
-</ul>
+    <a class="nav-link" href="setup.html">Installing Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="1">
     <button class="nav-item-toggle"></button>
@@ -74,7 +68,7 @@ <h3 class="title"><a href="index.html"></a></h3>
     <a class="nav-link" href="building-images.html">Exercise: Building Images in Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="#running-containers.adoc">Running and Managing Containers</a>
+    <a class="nav-link" href="running-containers.html">Exercise: Running and Managing Containers</a>
   </li>
 </ul>
   </li>
@@ -235,7 +229,7 @@ <h2 id="_next_steps"><a class="anchor" href="#_next_steps"></a>Next Steps</h2>
 </div>
 </div>
 <nav class="pagination">
-  <span class="prev"><a href="setup.html">Podman Desktop Setup</a></span>
+  <span class="prev"><a href="setup.html">Installing Podman Desktop</a></span>
   <span class="next"><a href="podman-basics.html">Podman Desktop Interface &amp; Essentials</a></span>
 </nav>
 </article>

podman-desktop-tutorial/podman-basics.html

@@ -52,13 +52,7 @@ <h3 class="title"><a href="index.html"></a></h3>
   <li class="nav-item" data-depth="0">
 <ul class="nav-list">
   <li class="nav-item" data-depth="1">
-    <button class="nav-item-toggle"></button>
-    <span class="nav-text">Requirements</span>
-<ul class="nav-list">
-  <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="setup.html">Podman Desktop Setup</a>
-  </li>
-</ul>
+    <a class="nav-link" href="setup.html">Installing Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="1">
     <button class="nav-item-toggle"></button>
@@ -74,7 +68,7 @@ <h3 class="title"><a href="index.html"></a></h3>
     <a class="nav-link" href="building-images.html">Exercise: Building Images in Podman Desktop</a>
   </li>
   <li class="nav-item" data-depth="2">
-    <a class="nav-link" href="#running-containers.adoc">Running and Managing Containers</a>
+    <a class="nav-link" href="running-containers.html">Exercise: Running and Managing Containers</a>
   </li>
 </ul>
   </li>