From 70e783628b1bf863da45cc8879b06288a498840b Mon Sep 17 00:00:00 2001
From: David Luevano Alvarado <david@luevano.xyz>
Date: Fri, 5 May 2023 03:16:06 -0600
Subject: update css, make articles more uniform, add toc and add functionality
to scroll to the top
---
live/blog/a/website_with_nginx.html | 49 ++++++++++++++++++++++++++-----------
1 file changed, 35 insertions(+), 14 deletions(-)
(limited to 'live/blog/a/website_with_nginx.html')
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’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’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’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">¶</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’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">¶</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">¶</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’ IPs (“A” record points to the ipv4 address and “AAA” to the ipv6, basically). I have three records for each type: empty one, “www” and “*” for a wildcard, that way “domain.name”, “www.domain.name”, “anythingelse.domain.name” 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’ IPs. I have three records for each type: empty string, “www” and “*” for a wildcard, that way “domain.name”, “www.domain.name”, “anythingelse.domain.name” 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’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’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’s just a matter of doing <code>ufw allow 80,443/tcp</code> as root and you’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’s just a matter of doing <code>ufw allow 80,443/tcp</code> (for example) as root and you’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">¶</a></h3>
+<h2 id="nginx">Nginx<a class="headerlink" href="#nginx" title="Permanent link">¶</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’s the “up to date” package even though <code>nginx</code> is labeled to be the “stable” 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’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 “404 Not Found” 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’s no problem, because it means that the web server it’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">¶</a></h3>
+<h2 id="certbot">Certbot<a class="headerlink" href="#certbot" title="Permanent link">¶</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’s Encrypt</a>.</p>
<p>The only “bad” (bloated) thing about Certbot, is that it uses <code>python</code>, but for me it doesn’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’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’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’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>
--
cgit v1.2.3-70-g09d2