Add new entries and reflect updated blog (now with timestamps!)

8 files changed, 238 insertions, 11 deletions

diff --git a/blog/src/a/el_blog_ya_tiene_timestamps.md b/blog/src/a/el_blog_ya_tiene_timestamps.md
new file mode 100644
index 0000000..1405b7a
--- /dev/null
+++ b/blog/src/a/el_blog_ya_tiene_timestamps.md
@@ -0,0 +1,9 @@
+# Así es raza, el blog ya tiene timestamps
+
+Pues eso, esta entrada es sólo para tirar update sobre mi [primer post](https://blog.luevano.xyz/a/first_blog_post.html). Ya modifiqué el `ssg` lo suficiente como para que maneje los *timestamps*, y ya estoy más familiarizado con este script entonces ya lo podré extender más, pero por ahora las entradas ya tienen su fecha de creación (y modificación en dado caso) al final y en el índice ya están organizados por fecha, que por ahora está algo simple pero está sencillo de extender.
+
+Ya lo único que queda es cambiar un poco el formato del blog (y de la página en general), porque en un momento de desesperación puse todo el texto en justificado y pues no se ve chido siempre, entonces queda corregir eso. *Y aunque me tomó más tiempo del que quisiera, así nomás quedó, diría un cierto personaje.*
+
+El `ssg` modificado está en mis [dotfiles](https://git.luevano.xyz/.dots) (o directamente [aquí](https://git.luevano.xyz/.dots/tree/.local/bin/ssg)).
+
+Por último, también quité las extensiones `.html` de las URLs, porque se veía bien pitero, pero igual los links con `.html` al final redirigen a su link sin `.html`, así que no hay rollo alguno.
diff --git a/blog/src/a/linux_video_notes.md b/blog/src/a/linux_video_notes.md
index 25d0a0b..2c6697a 100644
--- a/blog/src/a/linux_video_notes.md
+++ b/blog/src/a/linux_video_notes.md
@@ -1,6 +1,6 @@
 # Linux tutorial video notes
 
-I was requested to make a summary of a video about basic Linux stuff (like the [SQL tutorial video notes](https://blog.luevano.xyz/a/sql_video_notes.html)); this time, I did most of the notes depending on the topic since I'm familiar with most of the stuff presented in the video. The video in question is: [The Complete Linux Course: Beginner to Power User!](https://www.youtube.com/watch?v=wBp0Rb-ZJak). Also, some notes were taken from [Arch Linux Wiki](https://wiki.archlinux.org/) since it's got pretty decent documentation, and, of course, general googling.
+I was requested to make a summary of a video about basic Linux stuff (like the [SQL tutorial video notes](https://blog.luevano.xyz/a/sql_video_notes)); this time, I did most of the notes depending on the topic since I'm familiar with most of the stuff presented in the video. The video in question is: [The Complete Linux Course: Beginner to Power User!](https://www.youtube.com/watch?v=wBp0Rb-ZJak). Also, some notes were taken from [Arch Linux Wiki](https://wiki.archlinux.org/) since it's got pretty decent documentation, and, of course, general googling.
 
 ## (Basic) commands
 
diff --git a/blog/src/a/shell_scripting.md b/blog/src/a/shell_scripting.md
index abcddbc..b337aac 100644
--- a/blog/src/a/shell_scripting.md
+++ b/blog/src/a/shell_scripting.md
@@ -1,6 +1,6 @@
 # Shell scripting tutorial video notes
 
-Another summary, this time about shell scripting in general. And just like with the [Linux notes](https://blog.luevano.xyz/a/linux_video_notes.html), I also did most of the notes myself or with resources outside the video. The videos in question are: [The Bad Tutorials (YT): Shell Scripting Tutorials](https://www.youtube.com/playlist?list=PL7B7FA4E693D8E790) and [Automation with SCripting (YT): Complete Shell Scripting Tutorials](https://www.youtube.com/playlist?list=PL2qzCKTbjutJRM7K_hhNyvf8sfGCLklXw). Also, some notes were taken from [tutorialspoint: UNIX / LINUX Tutorial](https://www.tutorialspoint.com/unix/index.htm) and general googling.
+Another summary, this time about shell scripting in general. And just like with the [Linux notes](https://blog.luevano.xyz/a/linux_video_notes), I also did most of the notes myself or with resources outside the video. The videos in question are: [The Bad Tutorials (YT): Shell Scripting Tutorials](https://www.youtube.com/playlist?list=PL7B7FA4E693D8E790) and [Automation with SCripting (YT): Complete Shell Scripting Tutorials](https://www.youtube.com/playlist?list=PL2qzCKTbjutJRM7K_hhNyvf8sfGCLklXw). Also, some notes were taken from [tutorialspoint: UNIX / LINUX Tutorial](https://www.tutorialspoint.com/unix/index.htm) and general googling.
 
 ## Basic concepts
 
diff --git a/blog/src/a/website_with_nginx.md b/blog/src/a/website_with_nginx.md
new file mode 100644
index 0000000..4e55fed
--- /dev/null
+++ b/blog/src/a/website_with_nginx.md
@@ -0,0 +1,157 @@
+# Create a website with Nginx and Certbot
+
+These are general notes on how to setup a Nginx web server plus Certbot for SSL certificates, initially learned from [Luke's video](https://www.youtube.com/watch?v=OWAqilIVNgE) 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.
+
+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.
+
+## Prerequisites
+
+You will need two things:
+
+* A domain name (duh!). I got mine on [Epik](https://www.epik.com/?affid=da5ne9ru4) (affiliate link, btw).
+	* With the corresponding **A** and **AAA** 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).
+* A VPS or somewhere else to host it. I'm using [Vultr](https://www.vultr.com/?ref=8732849) (also an affiliate link).
+	* With `ssh` already configured both on the local machine and on the remote machine.
+	* Firewall already configured to allow ports 80 (http) and 443 (https). I use `ufw` so it's just a matter of doing `ufw allow 80,443/tcp` as root and you're golden.
+	* `cron` installed if you follow along (you could use `systemd` timers, or some other method you prefer to automate running commands every X time).
+
+## Nginx
+
+You have two options: `nginx` and `nginx-mainline`. I prefer `nginx-mainline` because it's the "up to date" package even though `nginx` is labeled to be the "stable" version. Install the package and enable/start the service:
+
+```sh
+# pacman -S nginx-mainline
+# systemctl enable nginx.service
+# systemctl start nginx.service
+```
+
+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:
+
+![Nginx welcome page](https://static.luevano.xyz/images/b/notes/nginx/nginx_welcome_page.png)
+
+As stated in the welcome page, configuration is needed, head to the directory of nginx:
+
+```sh
+# cd /etc/nginx
+```
+
+Here you have several files, the important one is `nginx.conf`, which as its name implies, contains general configuration of the web server. If you peek into the file, you will see that it contains around 120 lines, most of which are commented out and contains the welcome page server block. While you can configure a website in this file, it's common practice to do it on a separate file (so you can scale really easily if needed for mor websites or sub-domains).
+
+Inside the `nginx.conf` file, delete the `server` blocks and add the lines `include sites-enabled/*;` (to look into individual server configuration files) and `types_hash_max_size 4096;` (to get rid of an ugly warning that will keep appearing) somewhere inside the `http` block. The final `nginx.conf` file would look something like (ignoring the comments just for clarity, but you can keep them as side notes):
+
+```nginx
+worker_processes 1;
+
+events {
+	worker_connections 1024;
+}
+
+http {
+	include sites-enabled/*;
+	include mime.types;
+	default_type application/octet-stream;
+
+	sendfile on;
+
+	keepalive_timeout 65;
+
+	types_hash_max_size 4096;
+}
+```
+
+Next, inside the directory `/etc/nginx/` create the `sites-available` and `sites-enabled`, and go into the `sites-available` one:
+
+```sh
+# mkdir sites-available
+# mkdir sites-enabled
+# cd sites-available
+```
+
+Here, create a new `.conf` file for your website and add the following lines (this is just the sample content more or less):
+
+```nginx
+server {
+	listen 80;
+	listen [::]:80;
+
+	root /path/to/root/directory;
+	server_name domain.name another.domain.name;
+	index index.html anotherindex.otherextension;
+
+	location /{
+		try_files $uri $uri/ =404;
+	}
+}
+```
+
+Note several things:
+
+* `listen`: we're telling nginx which port to listen to (ipv4 and ipv6, respectively).
+* `root`: the root directory of where the website files (`.html`, `.css`, `.js`, etc. files) are located. I followed Luke's directory path `/var/www/some_folder`.
+* `server_name`: the actual domain to "listen" to (for my website it is: `server_name luevano.xyz www.luevano.xyz`; and for this blog is: `server_name blog.luevano.xyz www.blog.luevano.xyz`).
+* `index`: what file to serve as the index (could be any `.html`, `.htm`, `.php`, etc. file) when just entering the website.
+* `location`: used in case of different configurations across different URL paths.
+	* `try_files`: tells what files to look for, don't look into this too much for now.
+
+Then, make a symbolic from this config file to the `sites-enabled` directory:
+
+```sh
+# ln -s /etc/nginx/sites-available/your_config_file.conf /etc/nginx/sites-enabled
+```
+
+This is so the `nginx.conf` file can look up the newly created server config. With this method of having each server configuration file separate you can easily "deactivate" any website by just deleting the symbolic link in `sites-enabled` and you're good, or just add new configuration files and keep everything nice and tidy.
+
+All you have to do now is restart (or enable and start if you haven't already) the nginx service (and optionally test the configuration):
+
+```sh
+# nginx -t
+# systemctl restart nginx
+```
+
+If everything goes correctly, you can now go to your website by typing "domain.name" on a web browser. But you will see a "404 Not Found" page like the following (maybe with different nginx version):
+
+![Nginx 404 page](https://static.luevano.xyz/images/b/notes/nginx/nginx_404_page.png)
+
+That's no problem, because it means that the web server it's actually working. Just add an `index.html` file with something simple to see it in action. If you keep seeing the 404 page make sure your `root` line is correct and that the directory/index file exists.
+
+I like to remove the `.html` and trailing `/` on the URLs of my website, for that you need to add the following `rewrite` lines and modify the `try_files` line (for more: [Sean C. Davis: Remove HTML Extension And Trailing Slash In Nginx Config](https://www.seancdavis.com/blog/remove-html-extension-and-trailing-slash-in-nginx-config/)):
+
+```nginx
+server {
+	...
+	rewrite ^(/.*)\.html(\?.*)?$ $1$2 permanent;
+	rewrite ^/(.*)/$ /$1 permanent;
+	...
+	try_files $uri/index.html $uri.html $uri/ $uri =404;
+	...
+```
+
+For more: [Arch Linux Wiki: nginx](https://wiki.archlinux.org/index.php/nginx).
+
+## Certbot
+
+The only "bad" (bloated) thing about certbot, is that it uses `python`, but for me it doesn't matter too much. You may want to look up another alternative if you prefer. Install the packages `certbot` and `certbot-nginx`:
+
+```sh
+# pacman -S certbot certbot-nginx
+```
+
+After that, all you have to do now is run `certbot` and follow the instructions given by the tool:
+
+```sh
+# certbot --nginx
+```
+
+It will ask you for some information, for you to accept some agreements and the names to activate https for. Also, you will want to "say yes" to the redirection from http to https. And that's it, you can now go to your website and see that you have https active.
+
+Now, the certificate given by certbot expires every 3 months or something like that, so you want to renew this certificate every once in a while. Using `cron`, you can do this by running:
+
+```sh
+# crontab -e
+```
+
+And a file will be opened where you need to add a new rule for certbot, just append the line: `1 1 1 * * certbot renew` (renew on the first day of every month) and you're good. Alternatively use `systemd` timers as stated in the [Arch Linux Wiki](https://wiki.archlinux.org/index.php/Certbot#Automatic_renewal).
+
+For more: [Arch Linux Wiki: Certbot](https://wiki.archlinux.org/index.php/Certbot).
+
+That's it, you now have a website with SSL certificate.
diff --git a/blog/src/index.md b/blog/src/index.md
index c8bc0c6..2a871ee 100644
--- a/blog/src/index.md
+++ b/blog/src/index.md
@@ -3,4 +3,3 @@
 Welcome to my blog where I'll post whatever I'm pleased, ranging from rants to how-to's. Además, este pex va a estar en español e inglés porque quiero (no una mezcla en cada entrada, pero sí entradas completas en diferentes lenguajes).
 
 ## Articles
----
diff --git a/luevano/404.html b/luevano/404.html
index 81047f1..1347a7c 100644
--- a/luevano/404.html
+++ b/luevano/404.html
@@ -1,15 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/style.css">
-    <link rel="icon" href="https://static.luevano.xyz/images/icons/dragon.svg">
+    <script type="text/javascript" src="https://static.luevano.xyz/scripts/theme.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/fa/css/all.min.css">
+    <link id="theme-css" rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/dark.css">
+    <link rel="stylesheet" type="text/css" href="https://static.luevano.xyz/css/general_style.css">
+
+    <link rel="icon" href="https://static.luevano.xyz/fa/svgs/solid/dragon.svg">
     <meta charset="utf-8">
 
     <title>404 Not found</title>
   </head>
 
   <body>
-    <a href="https://luevano.xyz/">[HOME]</a>
+    <div id="theme-switcher-container">
+      <i class="fas fa-sun"></i>
+      <label class="switch theme">
+        <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
+        <span class="slider round"></span>
+      </label>
+      <i class="fas fa-moon"></i>
+    </div>
+
+    <header>
+      <ul class="menubar">
+        <li>
+          <a href="https://luevano.xyz/"><i class="fas fa-home" alt="Home"></i><span>Home</span></a>
+        </li>
+
+        <li>
+          <a href="https://blog.luevano.xyz/"><i class="fas fa-book-open" alt="Blog"></i><span>Blog</span></a>
+        </li>
+
+        <li><i class="fab fa-git" alt="Git"></i><span>Git</span>
+          <ul>
+            <li><a href="https://git.luevano.xyz/" target="_blank"><i class="fab fa-git-alt" alt="Git-alt"></i></a></li>
+
+            <li><a href="https://github.com/luevano" target="_blank"><i class="fab fa-github" alt="Github"></i></a></li>
+
+            <li><a href="https://gitlab.com/dluevano" target="_blank"><i class="fab fa-gitlab" alt="Gitlab"></i></a></li>
+          </ul>
+        </li>
+
+        <li><i class="fas fa-box-open" alt="Stuff"></i><span>Stuff</span>
+          <ul>
+            <li><a href="https://gb.luevano.xyz/"><i class="fas fa-gamepad" alt="Gameboy"></i><span>Gameboy</span></a></li>
+          </ul>
+        </li>
+
+        <li>
+          <a href="https://luevano.xyz/donate"><i class="fas fa-donate" alt="Donate"></i><span>Donate</span></a>
+          <ul>
+            <li><a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i><span>Paypal</span></a></li>
+          </ul>
+        </li>
+      </ul>
+      </nav>
+    </header>
 
     <div class="not-found">
       <h1>
@@ -21,11 +69,25 @@
       <p>
       Hey, it looks like the page you are looking for does not exist.
       </p>
+    </div>
+    <footer class="footer">
+      <i class="fas fa-envelope" alt="Email"></i>
+      Email
+      <a href="mailto:david@luevano.xyz">
+        david@luevano.xyz
+      </a>
+      <br>
 
-      <p>
-      Try going back.
-      </p>
+      <i class="fas fa-rss" alt="RSS"></i>
+      RSS
+      <a href="https://blog.luevano.xyz/rss.xml">
+        https://blog.luevano.xyz/rss.xml
+      </a>
+      <br>
 
-      <a href="https://luevano.xyz/">[HOME]</a>
-    </div>
+      <i class="fas fa-donate" alt="Donate"></i>
+      <a href="https://luevano.xyz/donate">Donate</a>
+      <a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i></a>
+    </footer>
   </body>
+</html>
diff --git a/static/images/b/notes/nginx/nginx_404_page.png b/static/images/b/notes/nginx/nginx_404_page.png
new file mode 100644
index 0000000..e420588
--- /dev/null
+++ b/static/images/b/notes/nginx/nginx_404_page.png
diff --git a/static/images/b/notes/nginx/nginx_welcome_page.png b/static/images/b/notes/nginx/nginx_welcome_page.png
new file mode 100644
index 0000000..c98cc4d
--- /dev/null
+++ b/static/images/b/notes/nginx/nginx_welcome_page.png