Big update

2024-11-16 15:11:00 +03:00 · 2024-11-16 15:11:00 +03:00 · 95086af257
commit 95086af257
parent b249ce9d91
18 changed files with 41 additions and 1195 deletions
--- a/.gitea/workflows/main-build.yaml
+++ b/.gitea/workflows/main-build.yaml
@ -0,0 +1,14 @@
 name: Build & Deploy
 on:
    push:
        branches:
            - main
 jobs:
    build-or-sth:
        runs-on: ubuntu-latest
        steps:
            - run: echo "hi!"
            - name: Get hugo
              run: apt install hugo
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,7 @@
-/resources/_gen/
+resources/_gen/
-/assets/jsconfig.json
+assets/jsconfig.json
 public/*
 hugo_stats.json
 .hugo_build.lock
--- a/content/posts/setup_p1.md
+++ b/content/posts/setup_p1.md
@ -138,7 +138,7 @@ services:
            - 3000:80
 ```
-Or you could even have *two* servers, like, a gogs and a web server!
+Or you could even have *two* servers, like, a Gogs and a web server!
 ```yaml
 services:
@ -162,6 +162,28 @@ It just works!
 Of course, you can add volumes to tie it all, and 'secrets' to manage sensitive
 files (like keys and certificates). I won't go into those here though.
 ## Automation
 Yeah, okay. I like automating, I know I talked big game up in the introduction.
 It's obvious. I just love it when things do themselves instead of me having to
 do them. I remember wanting to make a robot to do my homework when I was a kid.
 I still want to do that. Of course, the fact that it would be easier to just do
 my homework is irrelevant. It was always irrelevant. It's not about doing less
 work, it's about the ***principle***.
 Anyway, so the point is that I want to automate the process of deploying from a
 git repository directly to my blog. Thankfully, gitea provides a nice feature
 for Continuous Integration (CI), gitea actions. It's similar to GitHub actions.
 Essentially, you install gitea normally, then register an act_runner to it with
 a registration token you get from the instance. I use docker compose and the
 gitea/act_runner image to automate this step as well.
 Once a runner is registered, you can write a workflow file, which tells the
 runner what it should do once you push some changes. In my case, for example,
 this would be building the website using hugo, then putting the files into the
 web directory.
 # Conclusion
 Docker and Docker Compose are a lot more useful than my younger self would have
--- a/public/404.html
+++ b/public/404.html
@ -1,176 +0,0 @@
 <!doctype html><html lang="en-us">
  <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="generator" content="Qubt theme for Hugo" />
 <title>haxala1r</title>
 <meta name="title" content="haxala1r" />
  <meta name="author" content="Emin Arslan" />
 <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
 <script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
 <meta property="og:url" content="https://emin.software/404.html">
  <meta property="og:site_name" content="haxala1r">
  <meta property="og:title" content="404 Page not found">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="404 Page not found">
 <script>
  if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
 </script>
  </head>
  <body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
    <div>
      <header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
 <section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
  <a href="https://emin.software/" class="flex items-center space-x-3">
    <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
      haxala1r
    </span>
  </a>
  <div class="flex flex-row space-x-8">
    <nav class="hidden space-x-8 text-xl md:block" aria-label="main">
        <a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Home
        </a>
        <a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          About
        </a>
        <a href="/posts/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Posts
        </a>
    </nav>
    <button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
      <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
      </svg>
      <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
      <div
        class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
    </button>
  </div>
 </section>
 <section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
  <nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
      <a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Home
      </a>
      <a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        About
      </a>
      <a href="/posts/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Posts
      </a>
  </nav>
 </section>
      </header>
      <main>
  <div class="mb-2 mt-24 flex flex-col items-center justify-center md:mt-48">
    <h1 class="text-3xl font-extrabold text-slate-700 md:text-8xl dark:text-slate-200">Page not found!</h1>
    <div class="m-4 flex flex-row justify-center space-x-4">
        <a href="/" class="rounded-full bg-slate-700 px-3 py-1 text-slate-200 hover:text-indigo-500 dark:bg-slate-200 dark:text-slate-700">
          Home
        </a>
        <a href="/about/" class="rounded-full bg-slate-700 px-3 py-1 text-slate-200 hover:text-indigo-500 dark:bg-slate-200 dark:text-slate-700">
          About
        </a>
        <a href="/posts/" class="rounded-full bg-slate-700 px-3 py-1 text-slate-200 hover:text-indigo-500 dark:bg-slate-200 dark:text-slate-700">
          Posts
        </a>
    </div>
  </div>
      </main>
    </div>
    <footer>
      <div class="flex flex-col justify-center p-10">
  <p class="text-center text-slate-700 dark:text-slate-400">
    &copy;
    2024
    Emin Arslan
  </p>
  <p class="text-center text-sm text-slate-700 dark:text-slate-400">
    Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
  </p>
 </div>
    </footer>
  </body>
 </html>
--- a/public/Emin-Arslan_hu13852530772249569318.webp
+++ b/public/Emin-Arslan_hu13852530772249569318.webp
--- a/public/about/index.html
+++ b/public/about/index.html
@ -1,214 +0,0 @@
 <!doctype html><html lang="en-us">
  <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="generator" content="Qubt theme for Hugo" />
 <title>haxala1r</title>
 <meta name="title" content="haxala1r" />
  <meta name="author" content="Emin Arslan" />
 <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
 <script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
 <meta property="og:url" content="https://emin.software/about/">
  <meta property="og:site_name" content="haxala1r">
  <meta property="og:title" content="About">
  <meta property="og:description" content="Hi, I’m Emin!
 I am a second year Computer Engineering student at Izmir University of Economics. I like all things programming and computers.
 I mostly do systems programming - I feel most at home when I use C&#43;&#43; or C, though I’ve used Rust, Java and many other languages to varying degrees. I also had a phase when I was really into Common Lisp. Seriously, using a language with true macros is an entirely different experience.">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="article">
    <meta property="article:published_time" content="2024-10-24T23:17:52+03:00">
    <meta property="article:modified_time" content="2024-10-24T23:17:52+03:00">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="About">
  <meta name="twitter:description" content="Hi, I’m Emin!
 I am a second year Computer Engineering student at Izmir University of Economics. I like all things programming and computers.
 I mostly do systems programming - I feel most at home when I use C&#43;&#43; or C, though I’ve used Rust, Java and many other languages to varying degrees. I also had a phase when I was really into Common Lisp. Seriously, using a language with true macros is an entirely different experience.">
 <script>
  if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
 </script>
  </head>
  <body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
    <div>
      <header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
 <section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
  <a href="https://emin.software/" class="flex items-center space-x-3">
    <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
      haxala1r
    </span>
  </a>
  <div class="flex flex-row space-x-8">
    <nav class="hidden space-x-8 text-xl md:block" aria-label="main">
        <a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Home
        </a>
        <a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          About
        </a>
        <a href="/posts/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Posts
        </a>
    </nav>
    <button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
      <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
      </svg>
      <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
      <div
        class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
    </button>
  </div>
 </section>
 <section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
  <nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
      <a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Home
      </a>
      <a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        About
      </a>
      <a href="/posts/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Posts
      </a>
  </nav>
 </section>
      </header>
      <main>
  <div class="mx-auto mb-2 mt-12 flex max-w-screen-xl flex-col items-center justify-center">
      <div class="relative w-48">
        <img class="mb-2 h-48 w-48 rounded-full" width="192" height="192" alt="Emin Arslan" src="/Emin-Arslan_hu13852530772249569318.webp" />
      </div>
    <h1 class="text-center text-4xl font-extrabold text-slate-700 dark:text-slate-200">
      Emin Arslan
    </h1>
    <div class="mt-4 flex flex-wrap items-center justify-center">
    </div>
  </div>
  <div class="justify-left mx-auto mt-8 flex max-w-screen-lg px-4">
    <article>
        <h1 class="mb-4 text-4xl font-extrabold text-slate-700 dark:text-slate-200">Biography</h1>
        <span class="prose prose-slate break-words text-lg text-slate-700 dark:prose-invert prose-pre:max-w-[90vw] md:prose-pre:max-w-screen-md dark:text-slate-200">
          <p>Hi, I&rsquo;m Emin!</p>
 <p>I am a second year Computer Engineering student at Izmir University of
 Economics. I like all things programming and computers.</p>
 <p>I mostly do systems programming - I feel most at home when I use C++ or
 C, though I&rsquo;ve used Rust, Java and many other languages to varying
 degrees. I also had a phase when I was <em>really</em> into Common Lisp.
 Seriously, using a language with true macros is an entirely different
 experience.</p>
 <p>This website exists to be my blog/toy. It&rsquo;s hosted on a VPS, so that I
 can practice my hosting/web skills. I use <a href="https://gohugo.io/">Hugo</a>
 with the <a href="https://themes.gohugo.io/themes/qubt/">Qubt</a> theme to
 generate pages from my content. I think it looks pretty good, check
 them out.</p>
 <p>Hopefully I&rsquo;ll post a bit more on here soon.</p>
        </span>
    </article>
  </div>
      </main>
    </div>
    <footer>
      <div class="flex flex-col justify-center p-10">
  <p class="text-center text-slate-700 dark:text-slate-400">
    &copy;
    2024
    Emin Arslan
  </p>
  <p class="text-center text-sm text-slate-700 dark:text-slate-400">
    Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
  </p>
 </div>
    </footer>
  </body>
 </html>
--- a/public/ai.txt
+++ b/public/ai.txt
@ -1,3 +0,0 @@
 User-Agent: *
 Disallow: *
 Disallow: /
--- a/public/categories/index.xml
+++ b/public/categories/index.xml
@ -1,11 +0,0 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Categories on haxala1r</title>
    <link>https://emin.software/categories/</link>
    <description>Recent content in Categories on haxala1r</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <atom:link href="https://emin.software/categories/index.xml" rel="self" type="application/rss+xml" />
  </channel>
 </rss>
--- a/public/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css
+++ b/public/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css
--- a/public/healthcheck.json
+++ b/public/healthcheck.json
@ -1 +0,0 @@
 { "status": "ok" }
--- a/public/index.html
+++ b/public/index.html
@ -1,187 +0,0 @@
 <!doctype html><html lang="en-us">
  <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="generator" content="Qubt theme for Hugo" />
 <title>haxala1r</title>
 <meta name="title" content="haxala1r" />
  <meta name="author" content="Emin Arslan" />
 <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
 <script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
 <meta property="og:url" content="https://emin.software/">
  <meta property="og:site_name" content="haxala1r">
  <meta property="og:title" content="haxala1r">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="haxala1r">
 <script>
  if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
 </script>
  </head>
  <body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
    <div>
      <header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
 <section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
  <a href="https://emin.software/" class="flex items-center space-x-3">
    <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
      haxala1r
    </span>
  </a>
  <div class="flex flex-row space-x-8">
    <nav class="hidden space-x-8 text-xl md:block" aria-label="main">
        <a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Home
        </a>
        <a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          About
        </a>
        <a href="/posts/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Posts
        </a>
    </nav>
    <button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
      <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
      </svg>
      <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
      <div
        class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
    </button>
  </div>
 </section>
 <section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
  <nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
      <a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Home
      </a>
      <a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        About
      </a>
      <a href="/posts/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Posts
      </a>
  </nav>
 </section>
      </header>
      <main>
  <div class="flex items-center justify-center">
    <div class="mt-auto flex h-[75vh] flex-col items-center justify-center">
        <div class="relative w-48">
          <img class="mb-2 h-48 w-48 rounded-full" width="192" height="192" alt="Emin Arslan" src="/Emin-Arslan_hu13852530772249569318.webp" />
        </div>
      <h1 class="text-center text-4xl font-extrabold text-slate-700 dark:text-slate-200">
        Emin Arslan
      </h1>
        <h2 class="mt-4 text-center text-xl text-slate-600 dark:text-slate-400">
          Welcome to my personal blog :)
        </h2>
      <div class="mt-4 flex flex-wrap items-center justify-center">
      </div>
    </div>
  </div>
      </main>
    </div>
    <footer>
      <div class="flex flex-col justify-center p-10">
  <p class="text-center text-slate-700 dark:text-slate-400">
    &copy;
    2024
    Emin Arslan
  </p>
  <p class="text-center text-sm text-slate-700 dark:text-slate-400">
    Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
  </p>
 </div>
    </footer>
  </body>
 </html>
--- a/public/index.xml
+++ b/public/index.xml
@ -1,26 +0,0 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>haxala1r</title>
    <link>https://emin.software/</link>
    <description>Recent content on haxala1r</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <lastBuildDate>Fri, 25 Oct 2024 23:11:17 +0300</lastBuildDate>
    <atom:link href="https://emin.software/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>My Setup </title>
      <link>https://emin.software/posts/setup_p1/</link>
      <pubDate>Fri, 25 Oct 2024 23:11:17 +0300</pubDate>
      <guid>https://emin.software/posts/setup_p1/</guid>
      <description>I go over the things I&amp;rsquo;ve learned about docker, and how I&amp;rsquo;ve used it to host my website.</description>
    </item>
    <item>
      <title>About</title>
      <link>https://emin.software/about/</link>
      <pubDate>Thu, 24 Oct 2024 23:17:52 +0300</pubDate>
      <guid>https://emin.software/about/</guid>
      <description>Hi, I&amp;rsquo;m Emin!&#xA;I am a second year Computer Engineering student at Izmir University of Economics. I like all things programming and computers.&#xA;I mostly do systems programming - I feel most at home when I use C++ or C, though I&amp;rsquo;ve used Rust, Java and many other languages to varying degrees. I also had a phase when I was really into Common Lisp. Seriously, using a language with true macros is an entirely different experience.</description>
    </item>
  </channel>
 </rss>
--- a/public/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js
+++ b/public/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js
@ -1 +0,0 @@
 const initSite=()=>{const t=document.getElementById("hamburger-button"),e=document.getElementById("mobile-menu"),n=()=>{e.classList.toggle("hidden"),e.classList.toggle("flex"),t.classList.toggle("toggle-btn")};t.addEventListener("click",n),e.addEventListener("click",n)};document.addEventListener("DOMContentLoaded",initSite);var themeToggleBtn,themeToggleDarkIcon=document.getElementById("theme-toggle-dark-icon"),themeToggleLightIcon=document.getElementById("theme-toggle-light-icon");localStorage.getItem("color-theme")==="dark"||!("color-theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?themeToggleLightIcon.classList.remove("hidden"):themeToggleDarkIcon.classList.remove("hidden"),themeToggleBtn=document.getElementById("theme-toggle"),themeToggleBtn.addEventListener("click",function(){themeToggleDarkIcon.classList.toggle("hidden"),themeToggleLightIcon.classList.toggle("hidden"),localStorage.getItem("color-theme")?localStorage.getItem("color-theme")==="light"?(document.documentElement.classList.add("dark"),localStorage.setItem("color-theme","dark")):(document.documentElement.classList.remove("dark"),localStorage.setItem("color-theme","light")):document.documentElement.classList.contains("dark")?(document.documentElement.classList.remove("dark"),localStorage.setItem("color-theme","light")):(document.documentElement.classList.add("dark"),localStorage.setItem("color-theme","dark"))})
--- a/public/posts/index.html
+++ b/public/posts/index.html
@ -1,201 +0,0 @@
 <!doctype html><html lang="en-us">
  <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="generator" content="Qubt theme for Hugo" />
 <title>haxala1r</title>
 <meta name="title" content="haxala1r" />
  <meta name="author" content="Emin Arslan" />
 <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
 <script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
 <meta property="og:url" content="https://emin.software/posts/">
  <meta property="og:site_name" content="haxala1r">
  <meta property="og:title" content="Blog">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Blog">
 <script>
  if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
 </script>
  </head>
  <body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
    <div>
      <header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
 <section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
  <a href="https://emin.software/" class="flex items-center space-x-3">
    <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
      haxala1r
    </span>
  </a>
  <div class="flex flex-row space-x-8">
    <nav class="hidden space-x-8 text-xl md:block" aria-label="main">
        <a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Home
        </a>
        <a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          About
        </a>
        <a href="/posts/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Posts
        </a>
    </nav>
    <button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
      <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
      </svg>
      <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
      <div
        class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
    </button>
  </div>
 </section>
 <section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
  <nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
      <a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Home
      </a>
      <a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        About
      </a>
      <a href="/posts/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Posts
      </a>
  </nav>
 </section>
      </header>
      <main>
  <div class="justify-left mx-auto mt-8 flex max-w-screen-xl px-4">
    <article>
      <h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
        Blog
      </h1>
      <div class="mt-2 text-lg text-slate-500 dark:text-slate-400">
      </div>
    </article>
  </div>
  <div class="mx-auto max-w-screen-xl">
    <div class="mt-8 grid grid-flow-row grid-cols-1 justify-items-center gap-8 px-4 lg:grid-cols-2">
        <a href="/posts/setup_p1/">
          <div class="flex h-full max-h-80 w-full max-w-2xl flex-row rounded-xl bg-neutral-300 bg-clip-border text-slate-400 shadow-md dark:bg-neutral-700">
            <div class="flex flex-col justify-between p-6">
              <div>
                <h4 class="mb-2 line-clamp-2 text-base font-semibold text-slate-700 antialiased md:text-2xl dark:text-slate-200">
                  My Setup 
                </h4>
                <p class="mb-4 line-clamp-6 text-base text-slate-500 dark:text-slate-400">
                  I go over the things I&rsquo;ve learned about docker, and how I&rsquo;ve used it to host my website.
                </p>
              </div>
              <div class="flex flex-row justify-between">
                <div class="flex items-center -space-x-3">
                </div>
                <div class="p-3 text-xs text-slate-500 dark:text-slate-400">
                  Oct 25, 2024
                </div>
              </div>
            </div>
          </div>
        </a>
    </div>
  </div>
      </main>
    </div>
    <footer>
      <div class="flex flex-col justify-center p-10">
  <p class="text-center text-slate-700 dark:text-slate-400">
    &copy;
    2024
    Emin Arslan
  </p>
  <p class="text-center text-sm text-slate-700 dark:text-slate-400">
    Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
  </p>
 </div>
    </footer>
  </body>
 </html>
--- a/public/posts/index.xml
+++ b/public/posts/index.xml
@ -1,19 +0,0 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Blog on haxala1r</title>
    <link>https://emin.software/posts/</link>
    <description>Recent content in Blog on haxala1r</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <lastBuildDate>Fri, 25 Oct 2024 23:11:17 +0300</lastBuildDate>
    <atom:link href="https://emin.software/posts/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>My Setup </title>
      <link>https://emin.software/posts/setup_p1/</link>
      <pubDate>Fri, 25 Oct 2024 23:11:17 +0300</pubDate>
      <guid>https://emin.software/posts/setup_p1/</guid>
      <description>I go over the things I&amp;rsquo;ve learned about docker, and how I&amp;rsquo;ve used it to host my website.</description>
    </item>
  </channel>
 </rss>
--- a/public/posts/setup_p1/index.html
+++ b/public/posts/setup_p1/index.html
@ -1,320 +0,0 @@
 <!doctype html><html lang="en-us">
  <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="generator" content="Qubt theme for Hugo" />
 <title>haxala1r</title>
 <meta name="title" content="haxala1r" />
  <meta name="author" content="Emin Arslan" />
 <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.955b22a3fcff20511a11d9c7fdac7dd57e8293ee16e4d4ca0d6ab737f4895c3017582739cfd1f17a7c3feae23b42a8f4b01d7052fa2bc03a1430fa0669bf2d60.css" integrity="sha512-lVsio/z/IFEaEdnH/ax91X6Ck&#43;4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" />
 <script defer src="/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity="sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg=="></script>
 <meta property="og:url" content="https://emin.software/posts/setup_p1/">
  <meta property="og:site_name" content="haxala1r">
  <meta property="og:title" content="My Setup ">
  <meta property="og:description" content="I go over the things I’ve learned about docker, and how I’ve used it to host my website.">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="article">
    <meta property="article:section" content="posts">
    <meta property="article:published_time" content="2024-10-25T23:11:17+03:00">
    <meta property="article:modified_time" content="2024-10-25T23:11:17+03:00">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="My Setup ">
  <meta name="twitter:description" content="I go over the things I’ve learned about docker, and how I’ve used it to host my website.">
 <script>
  if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
 </script>
  </head>
  <body class="flex h-screen flex-col justify-between bg-neutral-100 dark:bg-neutral-800">
    <div>
      <header class="sticky top-0 z-10 bg-neutral-100 dark:bg-neutral-800">
 <section class="mx-auto flex max-w-screen-xl items-center justify-between p-4">
  <a href="https://emin.software/" class="flex items-center space-x-3">
    <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-700 dark:text-slate-400">
      haxala1r
    </span>
  </a>
  <div class="flex flex-row space-x-8">
    <nav class="hidden space-x-8 text-xl md:block" aria-label="main">
        <a href="/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Home
        </a>
        <a href="/about/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          About
        </a>
        <a href="/posts/" class="px-3 py-2 text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
          Posts
        </a>
    </nav>
    <button id="theme-toggle" type="button" class="rounded-lg text-sm text-slate-700 hover:text-indigo-500 dark:text-slate-400" aria-label="theme-switcher">
      <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
      </svg>
      <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
          fill-rule="evenodd"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <button id="hamburger-button" class="relative h-8 w-8 cursor-pointer text-3xl md:hidden" aria-label="hamburger-button">
      <div
        class="absolute top-4 -mt-0.5 h-[3px] w-8 rounded bg-slate-700 transition-all duration-500 before:absolute before:h-[3px] before:w-8 before:-translate-x-4 before:-translate-y-2.5 before:rounded before:bg-slate-700 before:transition-all before:duration-500 before:content-[''] after:absolute after:h-[3px] after:w-8 after:-translate-x-4 after:translate-y-2.5 after:rounded after:bg-slate-700 after:transition-all after:duration-500 after:content-[''] dark:bg-slate-400 before:dark:bg-slate-400 after:dark:bg-slate-400"></div>
    </button>
  </div>
 </section>
 <section id="mobile-menu" class="absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-neutral-100 text-4xl dark:bg-neutral-800">
  <nav class="flex min-h-screen flex-col items-center py-8" aria-label="mobile">
      <a href="/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Home
      </a>
      <a href="/about/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        About
      </a>
      <a href="/posts/" class="px-3 py-2 text-center text-slate-700 hover:text-indigo-500 md:p-0 dark:text-slate-400">
        Posts
      </a>
  </nav>
 </section>
      </header>
      <main>
  <div class="justify-left mx-auto mt-8 flex max-w-screen-md px-4">
    <article>
      <h1 class="text-4xl font-extrabold text-slate-700 dark:text-slate-200">
        My Setup 
      </h1>
      <h2 class="mt-4 text-2xl text-slate-500 dark:text-slate-400">
        Containers! Docker!
      </h2>
      <div class="mb-4 mt-2 text-sm text-slate-500 dark:text-slate-400">
        Oct 25, 2024 - 6 minute read
      </div>
      <span class="prose prose-slate break-words text-lg text-slate-700 dark:prose-invert prose-pre:max-w-[90vw] md:prose-pre:max-w-screen-md dark:text-slate-200">
        <h1 id="my-setup">My Setup</h1>
 <p>In this &lsquo;series&rsquo; I will be walking you through my process of how I
 host everything on this server.</p>
 <p>I&rsquo;m currently running, on top of <a href="https://emin.software">my blog</a>, a <a href="https://git.emin.software">gogs
 instance</a>.</p>
 <p>When first creating this website, I just had my blog. I generated this blog
 using <a href="https://hugo.io">hugo</a>: a static site generator. Hugo allowed me to
 focus on writing whatever I wanted in Markdown format, it would take care of
 converting my writing into HTML and CSS.</p>
 <p>I had a small issue with how I wrote my code and deployed it though: whenever I
 made a small change to the page, I had to manually rebuild it, then upload the
 updated version to my server and put it in the web directory.</p>
 <p>This is a cumbersome process. The whole point of using hugo is to <em>focus on the
 writing</em>, so having to zip and reupload for every typo is&hellip; not great. I
 wanted to be able to do a simple <code>git push</code>, and not worry about the rest.</p>
 <p>The &ldquo;manual&rdquo; approach also depends on me having already installed all
 necessary software. If you have a dedicated server that you&rsquo;re running yourself,
 that&rsquo;s probably okay, you just have to setup once, but I&rsquo;m running this on a VPS
 that I&rsquo;m not sure I&rsquo;ll keep forever. The ability to reproduce this exact setup
 within minutes actually matters.</p>
 <p>After reading a bit on this topic, I decided I would use docker for this. Podman
 would work just as nicely (any containerization software would work, really),
 but I decided on docker because it&rsquo;s been the standard for a while now</p>
 <h2 id="motivation">Motivation</h2>
 <p>Basically, I&rsquo;m already running a web server. Why shouldn&rsquo;t I also host several
 other services for friends and family while I&rsquo;m at it? Why shouldn&rsquo;t I make the
 entire setup reproducible?</p>
 <p>Here are some of the services I wanted to self-host:</p>
 <ul>
 <li>Web server: obviously, who doesn&rsquo;t want a website?</li>
 <li>Some git server: having my own place to show off all the things I&rsquo;ve done is
 certainly really cool. For this, something like <a href="https://about.gitea.com/">Gitea</a>
 would normally be great. I went with <a href="https://gogs.io/">Gogs</a> instead, because
 it is far more lightweight.</li>
 <li>Wireguard: Free VPN along with the website? sign me up.</li>
 <li>CI/CD: automatic testing and releases of my software is cool, and also
 incredibly useful.</li>
 </ul>
 <p>Of course, there are always more things I could be self-hosting. So it makes
 sense to automate the setup, and that&rsquo;s where docker comes in.</p>
 <h2 id="basics-of-docker">Basics of docker</h2>
 <p>Before we can get to the exciting stuff, we need to go over what docker is, and how to
 use it. Essentially, docker is a container engine: it lets you build and run
 applications in a containerized environment. Containers are useful because they
 provide security, easy setup and most importantly, reproducibility.</p>
 <p>I&rsquo;m not going to spend any more time explaining what containers are and why they&rsquo;re
 good, that&rsquo;s been done to death already. Right now, what matters is the actual setup,
 so let&rsquo;s get on with it.</p>
 <p>If you&rsquo;ve used docker before, you&rsquo;ll feel right at home. Many commands are unchanged
 from docker, making docker a suitable drop-in replacement. Some things like network
 setups tend to be a little different, but that won&rsquo;t matter too much right now.</p>
 <p>In case you&rsquo;re unfamiliar with docker, here are some basic commands (run these
 either as root, or as a user in the <code>docker</code> group):</p>
 <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-sh" data-lang="sh"><span style="display:flex;"><span><span style="color:#75715e"># Search for container images (on docker.io unless you configure otherwise)</span>
 </span></span><span style="display:flex;"><span>$ docker search &lt;image name&gt;
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># Download (pull) an image from remote repo</span>
 </span></span><span style="display:flex;"><span>$ docker pull &lt;image name&gt;
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># list the images you have pulled.</span>
 </span></span><span style="display:flex;"><span>$ docker images
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># run a container.</span>
 </span></span><span style="display:flex;"><span>$ docker run &lt;image name&gt;
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># run a container, but with a LOT of flags. I just listed the most useful ones.</span>
 </span></span><span style="display:flex;"><span>$ docker run
 </span></span><span style="display:flex;"><span>    -i <span style="color:#75715e"># interactive, so you can e.g. run a shell in the container</span>
 </span></span><span style="display:flex;"><span>    -t <span style="color:#75715e"># allocates a tty. useful with -i so that shell completion etc. can work</span>
 </span></span><span style="display:flex;"><span>    -d <span style="color:#75715e"># opposite of -i, detach and run in the background</span>
 </span></span><span style="display:flex;"><span>    --port &lt;HOST PORT&gt;:&lt;CONTAINER PORT&gt; <span style="color:#75715e"># port forwarding, for when you need a server.</span>
 </span></span><span style="display:flex;"><span>    -v &lt;HOST DIR&gt;:&lt;CONT DIR&gt;:&lt;FLAGS&gt; <span style="color:#75715e"># give the container access to some directory</span>
 </span></span><span style="display:flex;"><span>    &lt;image name&gt;
 </span></span><span style="display:flex;"><span>    &lt;command&gt; <span style="color:#75715e"># ... want a shell?</span>
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># list running containers. add -a to list ALL containers, running or stopped.</span>
 </span></span><span style="display:flex;"><span>$ docker ps &lt;-a&gt;
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># stop a running container.</span>
 </span></span><span style="display:flex;"><span>$ docker stop &lt;id&gt;
 </span></span><span style="display:flex;"><span>
 </span></span><span style="display:flex;"><span><span style="color:#75715e"># stopped containers don&#39;t automatically get removed. This command removes it.</span>
 </span></span><span style="display:flex;"><span>$ docker rm &lt;id&gt;
 </span></span></code></pre></div><h2 id="compose-is-nice">Compose is nice.</h2>
 <p>Docker compose is a nice way to essentially &ldquo;group together&rdquo; some containers,
 and ship them in an easy way.</p>
 <p>Usually, on a server, each application <em>isn&rsquo;t</em> totally separate from each other</p>
 <ul>
 <li>for my own use case, I want my git server (e.g. gogs) to automatically build
 and update my website whenever I push to its git repository. That means my git
 server and web server can&rsquo;t be <em>totally</em> separate, there&rsquo;s some amount of
 relation.</li>
 </ul>
 <p>At the same time&hellip; I don&rsquo;t really want to set up both containers, then their
 volumes, and their ports etc. by hand. Sure I could stick it in a shell script,
 but that&rsquo;s hardly elegant.</p>
 <p>Docker compose helps with this: you can create a
 <code>compose.yaml</code> file, and define containers, ports, volumes, secrets all inside
 this file. Then, when you run <code>docker compose up</code> this configuration is read,
 and all of it is processed as you would want it to.</p>
 <p>e.g you might have this for starting a web server on port 3000:</p>
 <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">services</span>:
 </span></span><span style="display:flex;"><span>    <span style="color:#f92672">web</span>:
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;nginx&#34;</span>
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">ports</span>:
 </span></span><span style="display:flex;"><span>            - <span style="color:#ae81ff">3000</span>:<span style="color:#ae81ff">80</span>
 </span></span></code></pre></div><p>Or you could even have <em>two</em> servers, like, a gogs and a web server!</p>
 <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">services</span>:
 </span></span><span style="display:flex;"><span>    <span style="color:#f92672">web</span>:
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;nginx&#34;</span>
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">ports</span>:
 </span></span><span style="display:flex;"><span>            - <span style="color:#ae81ff">80</span>:<span style="color:#ae81ff">80</span>
 </span></span><span style="display:flex;"><span>    <span style="color:#f92672">gogs-haha</span>:
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;gogs/gogs&#34;</span>
 </span></span><span style="display:flex;"><span>        <span style="color:#f92672">ports</span>:
 </span></span><span style="display:flex;"><span>            - <span style="color:#ae81ff">3000</span>:<span style="color:#ae81ff">3000</span>
 </span></span><span style="display:flex;"><span>            - <span style="color:#ae81ff">3022</span>:<span style="color:#ae81ff">22</span>
 </span></span></code></pre></div><p>See how we got multiple services to run, very very easily? Isn&rsquo;t that just
 really nice? You can just keep adding stuff. And compose even sets up dns for
 these containers! That means, for example, you can have your web server act as
 a reverse proxy by having it access http://gogs-haha:3000 in the above config!
 It just works!</p>
 <p>Of course, you can add volumes to tie it all, and &lsquo;secrets&rsquo; to manage sensitive
 files (like keys and certificates). I won&rsquo;t go into those here though.</p>
 <h1 id="conclusion">Conclusion</h1>
 <p>Docker and Docker Compose are a lot more useful than my younger self would have
 given them credit for. It was really fun learning about them, and hopefully I&rsquo;ll
 use this knowledge in the future.</p>
 <p>Thank you for reading.</p>
      </span>
    </article>
  </div>
      </main>
    </div>
    <footer>
      <div class="flex flex-col justify-center p-10">
  <p class="text-center text-slate-700 dark:text-slate-400">
    &copy;
    2024
    Emin Arslan
  </p>
  <p class="text-center text-sm text-slate-700 dark:text-slate-400">
    Published with <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-indigo-500 hover:text-indigo-500" href="https://github.com/chrede88/qubt" target="_blank" rel="noopener noreferrer">Qubt</a>
  </p>
 </div>
    </footer>
  </body>
 </html>
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@ -1,21 +0,0 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://emin.software/posts/</loc>
    <lastmod>2024-10-25T23:11:17+03:00</lastmod>
  </url><url>
    <loc>https://emin.software/</loc>
    <lastmod>2024-10-25T23:11:17+03:00</lastmod>
  </url><url>
    <loc>https://emin.software/posts/setup_p1/</loc>
    <lastmod>2024-10-25T23:11:17+03:00</lastmod>
  </url><url>
    <loc>https://emin.software/about/</loc>
    <lastmod>2024-10-24T23:17:52+03:00</lastmod>
  </url><url>
    <loc>https://emin.software/categories/</loc>
  </url><url>
    <loc>https://emin.software/tags/</loc>
  </url>
 </urlset>
--- a/public/tags/index.xml
+++ b/public/tags/index.xml
@ -1,11 +0,0 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Tags on haxala1r</title>
    <link>https://emin.software/tags/</link>
    <description>Recent content in Tags on haxala1r</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <atom:link href="https://emin.software/tags/index.xml" rel="self" type="application/rss+xml" />
  </channel>
 </rss>
		`@ -1 +0,0 @@`
			const initSite=()=>{const t=document.getElementById("hamburger-button"),e=document.getElementById("mobile-menu"),n=()=>{e.classList.toggle("hidden"),e.classList.toggle("flex"),t.classList.toggle("toggle-btn")};t.addEventListener("click",n),e.addEventListener("click",n)};document.addEventListener("DOMContentLoaded",initSite);var themeToggleBtn,themeToggleDarkIcon=document.getElementById("theme-toggle-dark-icon"),themeToggleLightIcon=document.getElementById("theme-toggle-light-icon");localStorage.getItem("color-theme")==="dark"\|\|!("color-theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?themeToggleLightIcon.classList.remove("hidden"):themeToggleDarkIcon.classList.remove("hidden"),themeToggleBtn=document.getElementById("theme-toggle"),themeToggleBtn.addEventListener("click",function(){themeToggleDarkIcon.classList.toggle("hidden"),themeToggleLightIcon.classList.toggle("hidden"),localStorage.getItem("color-theme")?localStorage.getItem("color-theme")==="light"?(document.documentElement.classList.add("dark"),localStorage.setItem("color-theme","dark")):(document.documentElement.classList.remove("dark"),localStorage.setItem("color-theme","light")):document.documentElement.classList.contains("dark")?(document.documentElement.classList.remove("dark"),localStorage.setItem("color-theme","light")):(document.documentElement.classList.add("dark"),localStorage.setItem("color-theme","dark"))})