diff --git a/archetypes/posts.md b/archetypes/posts.md new file mode 100644 index 0000000..11b1a82 --- /dev/null +++ b/archetypes/posts.md @@ -0,0 +1,20 @@ +--- +title: {{ replace .TranslationBaseName "-" " " | title }} +date: {{ .Date }} +author: "ahmza" +draft: true +weight: + +tags: [""] +description: "" +canonicalURL: "{{ .Page | absURL }}" + +cover: + image: "" # image path/url + alt: "" # alt text + caption: "" # display caption under cover + relative: false # when using page bundles set this to true + searchHidden: false +showtoc: true +searchHidden: true +--- diff --git a/config.yml b/config.yml index f18218b..9e7fb94 100644 --- a/config.yml +++ b/config.yml @@ -12,6 +12,12 @@ minify: disableXML: true minifyOutput: true +outputs: + home: + - HTML + - RSS + - JSON + params: env: production # to enable google analytics, opengraph, twitter-cards and schema. title: Blog @@ -24,8 +30,8 @@ params: disableThemeToggle: false ShowReadingTime: true - ShowShareButtons: true - ShowPostNavLinks: true + #ShowShareButtons: true + #ShowPostNavLinks: true ShowBreadCrumbs: true ShowCodeCopyButtons: true disableSpecial1stPost: false @@ -33,7 +39,7 @@ params: comments: false hidemeta: false hideSummary: false - showtoc: false + showtoc: true tocopen: false assets: @@ -45,10 +51,10 @@ params: apple_touch_icon: "" safari_pinned_tab: "" - label: - text: "Blog" - icon: /apple-touch-icon.png - iconHeight: 35 + #label: + #text: "Blog" + #icon: /apple-touch-icon.png + #iconHeight: 35 # profile-mode profileMode: @@ -81,10 +87,10 @@ params: cover: hidden: true # hide everywhere but not in structured data hiddenInList: true # hide on list pages and home - hiddenInSingle: true # hide on single page + hiddenInSingle: false # hide on single page editPost: - URL: "https://github.com/4hmz4/blog/content" + URL: "https://github.com/4hmz4/blog/blob/main/content" Text: "Suggest Changes" # edit text appendFilePath: true # to append file path to Edit link @@ -108,9 +114,9 @@ menu: name: tags url: /tags/ weight: 20 - - identifier: example - name: blog.ahmza.com - url: https://blog.ahmza.com + - identifier: search + name: search + url: /search/ weight: 30 # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma # pygmentsUseClasses: true diff --git a/content/posts/Setup-an-NGINX-Reverse-Proxy.md b/content/posts/Setup-an-NGINX-Reverse-Proxy.md new file mode 100644 index 0000000..2491fc2 --- /dev/null +++ b/content/posts/Setup-an-NGINX-Reverse-Proxy.md @@ -0,0 +1,182 @@ +--- + +title: Setup an NGINX Reverse Proxy +date: 2021-12-01T22:59:00Z +author: "ahmza" +draft: false + +tags: ["HomeLab", "Networking", "NGINX", "ReverseProxy"] +description: "Learn to setup a quick and easy reverse proxy using NGINX" +canonicalURL: "https://blog.ahmza.com/Page%28/posts/Setup-an-NGINX-Reverse-Proxy.md%29" + +cover: + image: "/img/Reverse-Proxy/feature-anim.gif" # image path/url + alt: "abstracted reverse proxy diagram" # alt text + caption: "" # display caption under cover + relative: false # when using page bundles set this to true + searchHidden: false + +--- + + +# **Introduction** +In this post we will go over setting up an *NGINX* reverse proxy to **allow different +web services to reach the outside world.** We will also cover setting up **auto +renewing SSL certificates.** + +Why not just port forward the services, it does the same thing Right? Reverse +proxies are a great way to expose web services to the outside world in a more +secure and customisable manner. **Some of the features that a reverse proxy provides +are as follows:** + +* **Host multiple services using the same HTTP/HTTPS ports** +* **Hides the origin server** +* **HTTPS TLS encryption** +* **Caching** +* **Compression** + +# **Creating a Reverse Proxy** +## **Prerequisites** +* **a server to act as the reverse proxy** +* **a web server** +* **a registered domain name** +* **Have A records setup for the Domain name** + +## **Install** ***NGINX*** +I'll be using the apt package manager as I'm on Ubuntu server, +this may differ for you + +Update packages, then **install** ***NGINX*** +``` bash +sudo apt update +sudo apt install nginx +``` +Now we want to **enable** ***NGINX*** so the program will start when the server boots +``` bash +sudo systemctl enable --now nginx +``` + +# **Firewall** +> **Quick Note:** now is a good time to port forward ports 80 and 443 from the router +> to the reverse proxy + +Ubuntu server comes with a firewall (ufw), so be sure to allow access to *NGINX* and +enable it. + +The reverse proxy handles both HTTP and HTTPS so **allow "Nginx Full"** +``` bash +sudo ufw allow 'Nginx full' +``` +**If you are using SSH allow it through** +``` bash +sudo ufw allow 'OpenSSH' +``` + +# **Configure** ***NGINX*** +**Unlink the default ***NGINX*** config** +``` bash +sudo unlink /etc/nginx/sites-enabled/default +``` +## **Create ***NGINX*** Config** +Create a config file in **/etc/nginx/site-available** +> **Quick Note:** use whichever text editor you want, I'm using vim +``` bash +sudo vim /etc/nginx/sites-available/blog.conf +``` +``` nginx +server { + listen 80; + server_name blog.example.com; + location / { + proxy_pass http://ip-of-server:port; + } +} +``` +* **server_name** is the domain name you want use this can include sub-domains +* **proxy_pass is the IP address of the web server** + +## **Enable ***NGINX*** Config** +To activate a config file we need to link the file from the **sites-available** +folder to **sites-enabled**. +> **Pro Tip:** make sure to use full paths when creating symlinks +``` bash +sudo ln -s /etc/nginx/sites-available/blog.conf /etc/nginx/sites-enabled/blog.conf +``` +**Check the config**, this is an important step as it warns you of any errors before +reloading *NGINX* +``` bash +sudo nginx -t +``` +If the output looks simmiler to below then you're good to go !! +``` bash +nginx: the configuration file /etc/nginx/nginx.conf syntax is ok +nginx: configuration file /etc/nginx/nginx.conf test is successful +``` +Now **restart the ***NGINX*** service** +``` bash +sudo systemctl restart nginx +``` +you should now have a working reverse proxy !! + +# **Setting up SSL** +## **Prerequisites** +* Make sure HTTP and HTTPS are port forwarded to the reverse proxy +* Make sure **server_name** is set in the config file you created + +## **Installing** ***Certbot*** +*Certbot* is a tool that requests an SSL certificate and makes sure it is renewed +when needed. +**Install** ***Certbot*** as well as the **python ***NGINX*** plug-in** +``` bash +sudo apt install certbot python3-certbot-nginx +``` +> **Quick Note:** double check firewall rules + +## **Request SSL Certificate** +Now all we need to do is **request the certificate** !! +``` bash +sudo certbot --nginx -d blog.example.com +``` +* **--nginx** specifies we are using NGINX, this will update the config file we created +to allow the use of SSL +* **-d** is the domain name you want to use + +If this is the first time running *Certbot* you will be asked to enter an email as well +as agree to terms and services. + +If the certificate request is successful you will be prompted with + +``` bash +Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +1: No redirect - Make no further changes to the webserver configuration. +2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for +new sites, or if you're confident your site works on HTTPS. You can undo this +change by editing your web server's configuration. +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Select the appropriate number [1-2] then [enter] (press 'c' to cancel): +``` +**If you want all traffic to be SSL encrypted choose option 2** +That's it we have SSL certificates installed. You will need a new certificate for each +different domain name or subdomain. + +## **Verify Auto Renewal** +All we need to do now is make sure that Certbot can automatically renew certificates. +``` bash +sudo certbot renew --dry-run +``` +If you see no errors then you are ready to go. + +# **Conclusion** +By following this you have hopefully managed to setup an *NGINX* Reverse proxy to +handle incoming HTTP/HTTPS requests as well as configured automatically renewing +SSL certificates. + +This posts barely scratches the surface of what *NGINX* can do, I would highly +recommend reading more into this great piece of software !! + +My reverse proxy handling non existent traffic +![neo awakening](/img/gifs/i-know-kung-fu.gif) + +Give it a few months and this blog will ... +![matrix flop](/img/gifs/matrix-jump-fail.gif) diff --git a/content/posts/welcome.md b/content/posts/welcome.md index 341cdd3..c44ee06 100644 --- a/content/posts/welcome.md +++ b/content/posts/welcome.md @@ -1,9 +1,25 @@ --- -title: "Welcome" + +title: Welcome date: 2021-12-01T13:36:08Z +author: "ahmza" draft: false + +tags: ["welcome", "misc"] +canonicalURL: "https://blog.ahmza.com/Page%28/posts/Setup-an-NGINX-Reverse-Proxy.md%29" + +#cover: +#image: "/img/Reverse-Proxy/feature-anim.gif" # image path/url +#alt: "abstracted reverse proxy diagram" # alt text +#caption: "" # display caption under cover +#relative: false # when using page bundles set this to true + +showtoc: false +searchHidden: true + --- + ### Hello World The mandatory hello world when you start something new. @@ -26,7 +42,7 @@ I feel If you are interested in something then definitely go ahead and try to learn it I'm sure you will learn a lot more than you expect. Like a lot of people say - Its about the Journey as much as it is the destination +> ***Its about the Journey as much as it is the destination*** I have always tinkered and naturally gained an interest for technology, I don't limit myself to one part of tech I try to dabble diff --git a/content/search.md b/content/search.md new file mode 100644 index 0000000..ff6080b --- /dev/null +++ b/content/search.md @@ -0,0 +1,4 @@ +--- +title: "Search" # in any language you want +layout: "search" # is necessary +--- diff --git a/static/img/Reverse-Proxy/feature-anim.aseprite b/static/img/Reverse-Proxy/feature-anim.aseprite new file mode 100755 index 0000000..5143607 Binary files /dev/null and b/static/img/Reverse-Proxy/feature-anim.aseprite differ diff --git a/static/img/Reverse-Proxy/feature-anim.gif b/static/img/Reverse-Proxy/feature-anim.gif new file mode 100755 index 0000000..caf6d7b Binary files /dev/null and b/static/img/Reverse-Proxy/feature-anim.gif differ diff --git a/static/img/gifs/i-know-kung-fu.gif b/static/img/gifs/i-know-kung-fu.gif new file mode 100644 index 0000000..4260200 Binary files /dev/null and b/static/img/gifs/i-know-kung-fu.gif differ diff --git a/static/img/gifs/matrix-jump-fail.gif b/static/img/gifs/matrix-jump-fail.gif new file mode 100644 index 0000000..f38fed5 Binary files /dev/null and b/static/img/gifs/matrix-jump-fail.gif differ