First Try

.gitignore

@@ -0,0 +1 @@
+public

README.MD

@@ -0,0 +1,10 @@
+# My Personal Blog Using Hugo
+
+<a href="https://gohugo.io/"><img src="https://raw.githubusercontent.com/gohugoio/gohugoioTheme/master/static/images/hugo-logo-wide.svg?sanitize=true" alt="Hugo" width="565"></a>
+
+
+
+- A try to create a personal blog using Hugo. https://github.com/gohugoio/hugo
+
+### Credits and Thanks
+[Lama Dev](https://www.youtube.com/watch?v=6BRZ-yHjYwo)

archetypes/default.md

@@ -0,0 +1,10 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = false
+description = ""
+image = ""
+imageBig = ""
+categories = ["general"]
+avatar = "/images/avatar.webp"
++++

config.toml

@@ -0,0 +1,17 @@
+baseURL = 'http://example.org/'
+languageCode = 'en-us'
+title = 'OMAR.A'
+
+
+paginate = 4
+
+[params]
+  description = "My Tech Blog"
+  dateFormat = "Jan 2, 2006 03:04:05 PM"
+
+  [params.social]
+    linkedin = 'https://www.linkedin.com/in/omar-a-5956ba215/'
+    github = 'https://github.com/civilcoder55'
+
+[taxonomies]
+  category = "categories"

content/journey/mission-1.md

@@ -0,0 +1,72 @@
+---
+title: "Sw Journey: Mission 1"
+date: 2024-08-06T19:11:50+03:00
+draft: true
+description: "Software Journey Mission 1"
+image: "/images/journey/1.jpg"
+imageBig: "/images/journey/1.jpg"
+categories: ["journey", "k8s", "kubernetes"]
+avatar: "/images/avatar.webp"
+---
+
+I'm starting a journey to build random stuff, and apply and practice Backend Engineering, I will go from a Monolithic application to a Microservices exploring and building cool stuff and Proof of Concepts. 🚀💻
+
+## Mission 1
+
+during this week I will discover and learn Kubernetes, and how to deploy a simple application to k8s.
+
+I will build a simple API application with Express and then deploy it to Kubernetes, including a database and Redis cache.
+
+the API will be a **Incantogamus app** a simple CRUD application for video games.
+
+**Incantogamus**: is a whimsical and imaginary word created with a mix of Latin and whimsy, inspired by the magical world of Harry Potter. However, in terms of actual meaning, it doesn't have a specific definition or translation as it's a made-up term. It's intended to evoke a sense of enchantment and mystery, fitting for a magical word related to games in the Harry Potter universe.
+
+### To Do
+
+#### project: https://github.com/civilcoder55/incantogamus
+
+- [x] Create a simple API application with express
+![incantogamus](/images/journey/incantogamus-api-example.png " {width='1360', height='720'}")
+
+- [x] Dockerize the application
+- [x] Deploy the application to Kubernetes
+
+  - I deployed the application to a Kubernetes cluster on my local machine using minikube. the cluster looks like this:
+
+    ![cluster-overview](/images/journey/cluster-overview.png)
+
+  - created an ingress to expose the application to the outside world, and made a domain point to the minikube node IP address.
+    ![hosts](/images/journey/hosts.png)
+
+  - the application is accessible at `incantogamus.com`
+    ![incantogamus](/images/journey/incantogamus-api.png)
+
+- [ ] Discover and play with Kubernetes features
+- [x] Learning Helm Charts
+  - During this sub-mission, I learned what Helm is and how to use and create Helm Charts.
+  - I created a Helm Chart for the Incantogamus application. And I have published it to a Helm Repo hosted on GitHub using GitHub pages and helm releaser.
+  - The Helm Chart is accessible at: https://civilcoder55.github.io/learning-helm-charts/
+  - updated the application readme to include the Helm Chart usage. https://github.com/civilcoder55/incantogamus
+
+## Mission 2
+
+- [x] Discover Prometheus and Grafana
+
+  - I discovered Prometheus, understanding its functionality and how to use it for monitoring applications. Additionally, I learned about Grafana and how to visualize the metrics collected by Prometheus.
+  - I also gained knowledge on creating and using an Exporter to gather metrics from an application and expose them to Prometheus.
+
+- [x] Collect and Visualize Asterisk Metrics
+
+  - I collected metrics from an Asterisk server using the Asterisk `res_prometheus` module and exposed them to Prometheus.
+  - I visualized these metrics using a simple Grafana dashboard.
+  - Additionally, I used `node_exporter` to collect metrics from the Asterisk server node.
+
+  ![incantogamus](/images/journey/prom-1.png)
+
+  ![incantogamus](/images/journey/prom-2.png)
+
+  ![incantogamus](/images/journey/prom-3.png)
+
+- [ ] Collect K8s Cluster Metrics Using Prometheus
+- [ ] Visualize the Metrics Using Grafana
+- [ ] Create Alerts using Prometheus Alertmanager

layouts/404.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Not Found</title>
+</head>
+
+<body>
+  Not Found
+  <a href="/">Go to homepage</a>
+</body>
+
+</html>

layouts/_default/_markup/render-image.html

@@ -0,0 +1,4 @@
+<a href="{{ .Destination | safeURL }}" class="lightbox-image current gallery">
+  <img class='md-img' src="{{ .Destination | safeURL }}" {{- with .Text }} alt="{{ . }}" {{ end -}} {{- with .Title }}
+    title="{{ . }}" {{ end -}}>
+</a>

layouts/_default/baseof.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content={{or .Params.description .Site.Params.description}}>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="/styles/style.css">
+  <link rel="icon" href="/images/favicon.png" />
+  <title>{{ .Title }}</title>
+</head>
+
+<body>
+  <div class="container">
+    {{ partial "navbar" . }}
+    {{ block "main" . }} {{ end }}
+    {{ partial "footer" . }}
+  </div>
+  <script src="/js/app.js"></script>
+  <script type="text/javascript" src="/js/lightbox.js"></script>
+  <link rel="stylesheet" href="/styles/lightbox.css">
+</body>
+
+</html>

layouts/_default/list.html

@@ -0,0 +1,39 @@
+{{ define "main" }}
+<div class="list">
+  {{ range .Paginator.Pages }}
+
+  <div class="list-item">
+    <img src={{ .Params.image }} alt="{{.Title}}" class="list-item__image" loading="lazy" />
+
+    <div class="list-item__texts">
+      <h1 class="list-item__title">
+        <a href="{{.Permalink}}">{{.Title}}</a>
+      </h1>
+
+
+      <p class="list-item__desc">{{.Params.description}}</p>
+
+      <div class="list-item__detail">
+        <img src="{{.Params.avatar}}" loading="lazy" alt="" class="list-item__avatar" />
+        <span>{{ range (.GetTerms "authors")}}
+          <a href={{.Permalink}}>{{ .Name }}</a>
+          {{end}}</span>
+        <time>{{ dateFormat .Site.Params.dateFormat .Date}}</time>
+      </div>
+
+
+      <div class="list-item__categories">
+        {{ range (.GetTerms "categories") }}
+        <a class="list-item__category" href={{ .Permalink }}>{{ .Name }}</a>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+
+
+  <div class="divider"></div>
+
+  {{ end }} {{ template "_internal/pagination.html" . }}
+
+</div>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,30 @@
+{{ define "main" }}
+<div class="single">
+  <div class="single-head">
+    <div class="single-head__texts">
+      <h1 class="single-head__title">{{.Title}}</h1>
+
+      <p class="single-head__desc">{{.Params.description}}</p>
+
+      <div class="single-head__detail">
+        <img src={{.Params.avatar}} loading="lazy" alt="" class="single-avatar">
+        <span>{{ range (.GetTerms "authors")}}
+          <a href={{.Permalink}}>{{ .Name }}</a>
+          {{end}}
+        </span>
+        {{ range (.GetTerms "categories")}}
+        <a href={{.Permalink}} class="single-category">{{ .Name }}</a>
+        {{end}}
+      </div>
+
+      <time>{{ dateFormat .Site.Params.dateFormat .Date }}</time>
+    </div>
+
+    <img src={{ .Params.imageBig }} alt={{.Title}} class="single-head__img">
+  </div>
+
+  <div class="single-bottom">
+    <div class="single-content">{{ .Content }}</div>
+  </div>
+</div>
+{{ end }}

layouts/categories/list.html

@@ -0,0 +1,35 @@
+{{ define "main" }}
+{{ if eq .RelPermalink "/categories/"}}
+{{ range $.Site.Taxonomies.categories.ByCount }}
+<a href="/categories/{{ .Name }}">
+  # {{ .Name }} <small>({{.Count}})</small>
+</a>
+{{end}}
+{{ else }}
+
+<div class="list">
+  {{ range .Paginator.Pages }}
+  <div class="list-item">
+    <img src={{ .Params.image }} alt="{{.Title}}" class="list-item__image" loading="lazy" />
+    <div class="list-item__texts">
+      <h1 class="list-item__title">
+        <a href="{{.Permalink}}">{{.Title}}</a>
+      </h1>
+      <p class="list-item__desc">{{.Params.description}}</p>
+      <div class="list-item__detail">
+        <img src="{{.Params.avatar}}" loading="lazy" alt="" class="list-item__avatar" />
+        <span>{{ range (.GetTerms "authors")}}
+          <a href="{{.Permalink}}">{{ .Name }}</a>
+          {{end}}</span>
+        <time>{{ dateFormat .Site.Params.dateFormat .Date}}</time>
+      </div>
+      <div class="list-item__categories">
+        {{ range (.GetTerms "categories") }}
+        <a class="list-item__category" href={{ .Permalink }}>{{ .Name }}</a>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+  {{ end }} {{ template "_internal/pagination.html" . }}
+</div>
+{{end}} {{ end }}

layouts/partials/footer.html

@@ -0,0 +1,57 @@
+<div class="footer">
+  <div class="footerLinks">
+    <a href="/">Home</a> |
+    <a href="/categories">Categories</a> |
+    <a href="/sitemap.xml">Sitemap</a>
+  </div>
+
+  <div class="social">
+    <a href="{{ .Site.Params.social.linkedin }}" title="LinkedIn">
+      <svg height="20" width="20" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+        version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
+        xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g id="g5891">
+          <path
+            d="M512,64c0,-35.323 -28.677,-64 -64,-64l-384,0c-35.323,0 -64,28.677 -64,64l0,384c0,35.323 28.677,64 64,64l384,0c35.323,0 64,-28.677 64,-64l0,-384Z"
+            id="background" style="fill:#2867b2;" />
+          <g id="shapes">
+            <rect height="257.962" id="rect11" style="fill:#fff;" width="85.76" x="61.053" y="178.667" />
+            <path
+              d="M104.512,54.28c-29.341,0 -48.512,19.29 -48.512,44.573c0,24.752 18.588,44.574 47.377,44.574l0.554,0c29.903,0 48.516,-19.822 48.516,-44.574c-0.555,-25.283 -18.611,-44.573 -47.935,-44.573Z"
+              id="path13-0" style="fill:#fff;fill-rule:nonzero;" />
+            <path
+              d="M357.278,172.601c-45.49,0 -65.866,25.017 -77.276,42.589l0,-36.523l-85.738,0c1.137,24.197 0,257.961 0,257.961l85.737,0l0,-144.064c0,-7.711 0.554,-15.42 2.827,-20.931c6.188,-15.4 20.305,-31.352 43.993,-31.352c31.012,0 43.436,23.664 43.436,58.327l0,138.02l85.741,0l0,-147.93c0,-79.237 -42.305,-116.097 -98.72,-116.097Z"
+              id="path15" style="fill:#fff;fill-rule:nonzero;" />
+          </g>
+        </g>
+      </svg>
+    </a>
+
+    <a href="{{ .Site.Params.social.github }}" title="GitHub">
+      <svg enable-background="new -1163 1657.697 56.693 56.693" height="20" width="20" id="Layer_1" version="1.1"
+        viewBox="-1163 1657.697 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink">
+        <g>
+          <path clip-rule="evenodd"
+            d="M-1134.6598,1662.9163c-13.601,0-24.63,11.0267-24.63,24.6299   c0,10.8821,7.0573,20.1144,16.8435,23.3713c1.2308,0.2279,1.6829-0.5345,1.6829-1.1849c0-0.587-0.0227-2.5276-0.0334-4.5857   c-6.8521,1.4901-8.2979-2.906-8.2979-2.906c-1.1205-2.8467-2.7347-3.6039-2.7347-3.6039   c-2.2349-1.5287,0.1685-1.4972,0.1685-1.4972c2.473,0.1737,3.7755,2.5385,3.7755,2.5385c2.1967,3.7651,5.7618,2.6765,7.1675,2.0472   c0.2211-1.5917,0.8591-2.6786,1.5637-3.2936c-5.4707-0.6226-11.2218-2.7347-11.2218-12.1722c0-2.6888,0.9623-4.8861,2.538-6.611   c-0.2557-0.6206-1.0989-3.1255,0.2386-6.5183c0,0,2.0684-0.6616,6.7747,2.525c1.9648-0.5458,4.0719-0.8195,6.165-0.829   c2.093,0.0095,4.2017,0.2832,6.17,0.829c4.7012-3.1866,6.7665-2.525,6.7665-2.525c1.3406,3.3928,0.4974,5.8977,0.2417,6.5183   c1.5793,1.7249,2.5348,3.9221,2.5348,6.611c0,9.4602-5.7618,11.5428-11.2465,12.1527c0.8834,0.7644,1.6704,2.2632,1.6704,4.561   c0,3.2955-0.0282,5.9479-0.0282,6.7592c0,0.6556,0.4432,1.4236,1.6915,1.1818c9.7812-3.2605,16.8296-12.4896,16.8296-23.3682   C-1110.0299,1673.943-1121.0574,1662.9163-1134.6598,1662.9163z"
+            fill-rule="evenodd" />
+          <path
+            d="M-1149.9611,1698.2793c-0.0542,0.1227-0.2469,0.1593-0.4222,0.0753c-0.1788-0.0804-0.2788-0.2473-0.2211-0.37   c0.053-0.126,0.2457-0.161,0.4242-0.0769C-1150.0013,1697.9882-1149.8993,1698.1566-1149.9611,1698.2793L-1149.9611,1698.2793z    M-1150.2642,1698.0547" />
+          <path
+            d="M-1148.9634,1699.3922c-0.1174,0.1086-0.3473,0.0581-0.5031-0.1139c-0.1613-0.1718-0.1912-0.4016-0.072-0.5118   c0.1211-0.1088,0.3438-0.0579,0.505,0.1139C-1148.8721,1699.0541-1148.8407,1699.2819-1148.9634,1699.3922L-1148.9634,1699.3922z    M-1149.1984,1699.14" />
+          <path
+            d="M-1147.9922,1700.8105c-0.151,0.1051-0.3979,0.0067-0.5505-0.2123c-0.151-0.2191-0.151-0.4819,0.0035-0.5872   c0.1526-0.1051,0.396-0.0104,0.5505,0.2068C-1147.8381,1700.4406-1147.8381,1700.7034-1147.9922,1700.8105L-1147.9922,1700.8105z    M-1147.9922,1700.8105" />
+          <path
+            d="M-1146.6619,1702.1812c-0.1351,0.1489-0.4227,0.1086-0.6329-0.0945c-0.2155-0.1984-0.2753-0.4803-0.1403-0.6293   c0.1371-0.149,0.4263-0.1072,0.6381,0.0944C-1146.5831,1701.7501-1146.5182,1702.0337-1146.6619,1702.1812L-1146.6619,1702.1812z    M-1146.6619,1702.1812" />
+          <path
+            d="M-1144.8265,1702.9769c-0.0597,0.1927-0.3365,0.2804-0.6154,0.1984c-0.2788-0.0845-0.4608-0.3103-0.4047-0.5051   c0.0577-0.1943,0.3361-0.2855,0.6169-0.1979C-1144.9512,1702.5563-1144.7688,1702.7805-1144.8265,1702.9769L-1144.8265,1702.9769z    M-1144.8265,1702.9769" />
+          <path
+            d="M-1142.8107,1703.1243c0.0067,0.2031-0.2299,0.3716-0.5226,0.3752c-0.2944,0.0067-0.533-0.1577-0.5361-0.3577   c0-0.2052,0.2313-0.3717,0.5258-0.3768C-1143.0509,1702.7594-1142.8107,1702.9227-1142.8107,1703.1243L-1142.8107,1703.1243z    M-1142.8107,1703.1243" />
+          <path
+            d="M-1140.9351,1702.8052c0.035,0.198-0.1686,0.4015-0.4594,0.4557c-0.2859,0.0526-0.5504-0.0701-0.587-0.2665   c-0.0354-0.2031,0.1716-0.4066,0.4573-0.4592C-1141.233,1702.4846-1140.9722,1702.6036-1140.9351,1702.8052L-1140.9351,1702.8052z    M-1140.9351,1702.8052" />
+        </g>
+      </svg>
+
+    </a>
+  </div>
+</div>

layouts/partials/navbar.html

@@ -0,0 +1,26 @@
+<nav class="navbar">
+  <div class="logo">
+    <a href="/">{{ .Site.Title }}</a>
+  </div>
+  <div class="links">
+    <div class="toggle">
+      <svg width="20px" height="20px" viewBox="-0.14 0 20.03 20.03" fill="#000000">
+        <g id="moon-alt" transform="translate(-2.25 -2)">
+          <path id="secondary" fill="#ffe01b"
+            d="M21,12A9,9,0,0,1,3.25,14.13,6.9,6.9,0,0,0,8,16,7,7,0,0,0,11.61,3H12a9,9,0,0,1,9,9Z"></path>
+        </g>
+      </svg>
+      <div class="ball"></div>
+      <svg width="20px" height="20px" viewBox="0 0 20 20" fill="#000000">
+        <g id="sun" transform="translate(-2 -2)">
+          <circle id="secondary" fill="#ffe01b" cx="4" cy="4" r="4" transform="translate(8 8)"></circle>
+          <path id="primary"
+            d="M12,3V4M5.64,5.64l.7.7M3,12H4m1.64,6.36.7-.7M12,21V20m6.36-1.64-.7-.7M21,12H20M18.36,5.64l-.7.7M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Z"
+            fill="none" stroke="#ffe01b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+        </g>
+      </svg>
+    </div>
+    <a href="/">Homepage</a>
+    <a href="/categories">Categories</a>
+  </div>
+</nav>

static/js/app.js

@@ -0,0 +1,10 @@
+const mode = localStorage.getItem("mode") || "";
+const toggle = document.querySelector(".toggle");
+const body = document.querySelector("body");
+
+document.body.className = mode;
+
+toggle.addEventListener("click", () => {
+  localStorage.setItem("mode", mode === "light" ? "" : "light");
+  body.classList.toggle("light");
+});