update css, make articles more uniform, add toc and add functionality to scroll to the top

1 files changed, 35 insertions, 14 deletions

diff --git a/live/blog/a/website_with_nginx.html b/live/blog/a/website_with_nginx.html
index 386b95d..6070c82 100644
--- a/live/blog/a/website_with_nginx.html
+++ b/live/blog/a/website_with_nginx.html
@@ -16,14 +16,21 @@
     <!-- theme related -->
     <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
     <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/theme.css">
+    <!-- misc functions-->
+    <script type="text/javascript" src="https://static.luevano.xyz/scripts/return_top.js"></script>
     <!-- extra -->
-<!-- highlight support for code blocks -->
+    <!-- highlight support for code blocks -->
 <script type="text/javascript" src="https://static.luevano.xyz/hl/highlight.min.js"></script>
 <script type="text/javascript">
   hljs.initHighlightingOnLoad();
 </script>
 <link id="code-theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/hl/styles/nord.min.css">
 
+
+
+
+
+
     <!-- og meta -->
   <meta property="og:title" content="Create a website with Nginx and Certbot -- Luevano's Blog"/>
   <meta property="og:type" content="article"/>
@@ -73,25 +80,39 @@
     </header>
 
     <main>
+      <div class="return-top">
+        <button class="return-top" onclick="returnTop()" id="returnTopButton">
+        <i class="fas fa-arrow-up" alt="Return to top"></i>
+        </button>
+      </div>
   <h1>Create a website with Nginx and Certbot</h1>
 
   <p>These are general notes on how to setup a Nginx web server plus Certbot for SSL certificates, initially learned from <a href="https://www.youtube.com/watch?v=OWAqilIVNgE">Luke&rsquo;s video</a> and after some use and research I added more stuff to the mix. And, actually at the time of writing this entry, I&rsquo;m configuring the web server again on a new VPS instance, so this is going to be fresh.</p>
-<p>As a side note, (((i use arch btw))) so everything here es aimed at an Arch Linux distro, and I&rsquo;m doing everything on a VPS. Also note that most if not all commands here are executed with root privileges.</p>
-<h3 id="prerequisites">Prerequisites<a class="headerlink" href="#prerequisites" title="Permanent link">&para;</a></h3>
+<p>As a side note, <mark>i use arch btw</mark> so everything here es aimed at an Arch Linux distro, and I&rsquo;m doing everything on a VPS. Also note that most if not all commands here are executed with root privileges.</p>
+<h2 id="table-of-contents">Table of contents<a class="headerlink" href="#table-of-contents" title="Permanent link">&para;</a></h2>
+<div class="toc">
+<ul>
+<li><a href="#table-of-contents">Table of contents</a></li>
+<li><a href="#prerequisites">Prerequisites</a></li>
+<li><a href="#nginx">Nginx</a></li>
+<li><a href="#certbot">Certbot</a></li>
+</ul>
+</div>
+<h2 id="prerequisites">Prerequisites<a class="headerlink" href="#prerequisites" title="Permanent link">&para;</a></h2>
 <p>You will need two things:</p>
 <ul>
 <li>A domain name (duh!). I got mine on <a href="https://www.epik.com/?affid=da5ne9ru4">Epik</a> (affiliate link, btw).<ul>
-<li>With the corresponding <strong>A</strong> and <strong>AAA</strong> records pointing to the VPS&rsquo; IPs (&ldquo;A&rdquo; record points to the ipv4 address and &ldquo;AAA&rdquo; to the ipv6, basically). I have three records for each type: empty one, &ldquo;www&rdquo; and &ldquo;*&rdquo; for a wildcard, that way &ldquo;domain.name&rdquo;, &ldquo;www.domain.name&rdquo;, &ldquo;anythingelse.domain.name&rdquo; point to the same VPS (meaning that you can have several VPS for different sub-domains).</li>
+<li>With the corresponding <strong>A</strong> and <strong>AAA</strong> records pointing to the VPS&rsquo; IPs. I have three records for each type: empty string, &ldquo;www&rdquo; and &ldquo;*&rdquo; for a wildcard, that way &ldquo;domain.name&rdquo;, &ldquo;www.domain.name&rdquo;, &ldquo;anythingelse.domain.name&rdquo; point to the same VPS (meaning that you can have several VPS for different sub-domains). These depend on the VPS provider.</li>
 </ul>
 </li>
-<li>A VPS or somewhere else to host it. I&rsquo;m using <a href="https://www.vultr.com/?ref=8732849">Vultr</a> (also an affiliate link).<ul>
+<li>A VPS or somewhere else to host it. I&rsquo;m using <a href="https://www.vultr.com/?ref=8732849">Vultr</a> (also an affiliate link, btw).<ul>
 <li>With <code>ssh</code> already configured both on the local machine and on the remote machine.</li>
-<li>Firewall already configured to allow ports 80 (HTTP) and 443 (HTTPS). I use <code>ufw</code> so it&rsquo;s just a matter of doing <code>ufw allow 80,443/tcp</code> as root and you&rsquo;re golden.</li>
-<li><code>cron</code> installed if you follow along (you could use <code>systemd</code> timers, or some other method you prefer to automate running commands every X time).</li>
+<li>Firewall already configured to allow ports <code>80</code> (HTTP) and <code>443</code> (HTTPS). I use <code>ufw</code> so it&rsquo;s just a matter of doing <code>ufw allow 80,443/tcp</code> (for example) as root and you&rsquo;re golden.</li>
+<li><code>cron</code> installed if you follow along (you could use <code>systemd</code> timers, or some other method you prefer to automate running commands every certain time).</li>
 </ul>
 </li>
 </ul>
-<h3 id="nginx">Nginx<a class="headerlink" href="#nginx" title="Permanent link">&para;</a></h3>
+<h2 id="nginx">Nginx<a class="headerlink" href="#nginx" title="Permanent link">&para;</a></h2>
 <p><a href="https://wiki.archlinux.org/title/Nginx">Nginx</a> is a web (HTTP) server and reverse proxy server.</p>
 <p>You have two options: <code>nginx</code> and <code>nginx-mainline</code>. I prefer <code>nginx-mainline</code> because it&rsquo;s the &ldquo;up to date&rdquo; package even though <code>nginx</code> is labeled to be the &ldquo;stable&rdquo; version. Install the package and enable/start the service:</p>
 <pre><code class="language-sh">pacman -S nginx-mainline
@@ -100,7 +121,7 @@ systemctl start nginx.service
 </code></pre>
 <p>And that&rsquo;s it, at this point you can already look at the default initial page of Nginx if you enter the IP of your server in a web browser. You should see something like this:</p>
 <figure id="__yafg-figure-1">
-<img alt="Nginx welcome page" src="images/b/notes/nginx/nginx_welcome_page.png" title="Nginx welcome page">
+<img alt="Nginx welcome page" src="https://static.luevano.xyz/images/b/notes/nginx/nginx_welcome_page.png" title="Nginx welcome page">
 <figcaption>Nginx welcome page</figcaption>
 </figure>
 <p>As stated in the welcome page, configuration is needed, head to the directory of Nginx:</p>
@@ -167,7 +188,7 @@ systemctl restart nginx
 </code></pre>
 <p>If everything goes correctly, you can now go to your website by typing <code>domain.name</code> on a web browser. But you will see a &ldquo;404 Not Found&rdquo; page like the following (maybe with different Nginx version):</p>
 <figure id="__yafg-figure-2">
-<img alt="Nginx 404 Not Found page" src="images/b/notes/nginx/nginx_404_page.png" title="Nginx 404 Not Found page">
+<img alt="Nginx 404 Not Found page" src="https://static.luevano.xyz/images/b/notes/nginx/nginx_404_page.png" title="Nginx 404 Not Found page">
 <figcaption>Nginx 404 Not Found page</figcaption>
 </figure>
 <p>That&rsquo;s no problem, because it means that the web server it&rsquo;s actually working. Just add an <code>index.html</code> file with something simple to see it in action (in the <code>/var/www/some_folder</code> that you decided upon). If you keep seeing the 404 page make sure your <code>root</code> line is correct and that the directory/index file exists.</p>
@@ -180,7 +201,7 @@ systemctl restart nginx
     try_files $uri/index.html $uri.html $uri/ $uri =404;
     ...
 </code></pre>
-<h3 id="certbot">Certbot<a class="headerlink" href="#certbot" title="Permanent link">&para;</a></h3>
+<h2 id="certbot">Certbot<a class="headerlink" href="#certbot" title="Permanent link">&para;</a></h2>
 <p><a href="https://wiki.archlinux.org/title/Certbot">Certbot</a> is what provides the SSL certificates via <a href="https://letsencrypt.org/">Let&rsquo;s Encrypt</a>.</p>
 <p>The only &ldquo;bad&rdquo; (bloated) thing about Certbot, is that it uses <code>python</code>, but for me it doesn&rsquo;t matter too much. You may want to look up another alternative if you prefer. Install the packages <code>certbot</code> and <code>certbot-nginx</code>:</p>
 <pre><code class="language-sh">pacman -S certbot certbot-nginx
@@ -192,7 +213,7 @@ systemctl restart nginx
 <p>Now, the certificate given by <code>certbot</code> expires every 3 months or something like that, so you want to renew this certificate every once in a while. Using <code>cron</code>, you can do this by running:</p>
 <pre><code class="language-sh">crontab -e
 </code></pre>
-<p>And a file will be opened where you need to add a new rule for Certbot, just append the line: <code>1 1 1 * * certbot renew</code> (renew on the first day of every month) and you&rsquo;re good. Alternatively use <code>systemd</code> timers as stated in the <a href="https://wiki.archlinux.org/title/Certbot#Automatic_renewal">Arch Linux Wiki</a>.</p>
+<p>And a file will be opened where you need to add a new rule for Certbot, just append the line: <code>1 1 1 * * certbot renew --quiet --agree-tos --deploy-hook "systemctl reload nginx.service"</code> (renew on the first day of every month) and you&rsquo;re good. Alternatively use <code>systemd</code> timers as stated in the <a href="https://wiki.archlinux.org/title/Certbot#Automatic_renewal">Arch Linux Wiki</a>.</p>
 <p>That&rsquo;s it, you now have a website with SSL certificate.</p>
 
   <div class="page-nav">
@@ -223,10 +244,10 @@ systemctl restart nginx
   <div class="article-info">
     <p>By David Luévano</p>
     <p>Created: Fri, Mar 19, 2021 @ 02:58 UTC</p>
-      <p>Modified: Tue, Jun 08, 2021 @ 07:27 UTC</p>
+      <p>Modified: Fri, May 05, 2023 @ 08:34 UTC</p>
     <div class="article-tags">
   <p>Tags:
-<a href="https://blog.luevano.xyz/tag/@english.html">english</a>, <a href="https://blog.luevano.xyz/tag/@server.html">server</a>, <a href="https://blog.luevano.xyz/tag/@tools.html">tools</a>, <a href="https://blog.luevano.xyz/tag/@tutorial.html">tutorial</a>  </p>
+<a href="https://blog.luevano.xyz/tag/@code.html">code</a>, <a href="https://blog.luevano.xyz/tag/@english.html">english</a>, <a href="https://blog.luevano.xyz/tag/@server.html">server</a>, <a href="https://blog.luevano.xyz/tag/@tools.html">tools</a>, <a href="https://blog.luevano.xyz/tag/@tutorial.html">tutorial</a>  </p>
 </div>
 
   </div>