2024-10-30 15:02:21 +00:00
<!doctype html> < html lang = "en-us" >
2024-10-30 15:19:01 +00:00
< head >
2024-10-30 15:02:21 +00:00
< 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+4W5NTKDWq3N/SJXDAXWCc5z9Hxenw/6uI7Qqj0sB1wUvorwDoUMPoGab8tYA==" / >
< script defer src = "/js/main.bundle.min.4657c962c90bb42241e3db9c00332ac44a2ff6a901654b8248b4e2f4b586571fd2aa672dcadf728d6f2135b0ea6088f21d1cf5302b4cae8557e0593f70081d72.js" integrity = "sha512-RlfJYskLtCJB49ucADMqxEov9qkBZUuCSLTi9LWGVx/Sqmctyt9yjW8hNbDqYIjyHRz1MCtMroVX4Fk/cAgdcg==" > < / script >
2024-10-30 15:19:01 +00:00
< meta property = "og:url" content = "https://emin.software/posts/setup_p1/" >
2024-10-30 15:02:21 +00:00
< meta property = "og:site_name" content = "haxala1r" >
< meta property = "og:title" content = "My Setup - p1" >
2024-10-30 15:46:43 +00:00
< meta property = "og:description" content = "I go over the things I’ ’ >
2024-10-30 15:02:21 +00:00
< 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 - p1" >
2024-10-30 15:46:43 +00:00
< meta name = "twitter:description" content = "I go over the things I’ ’ >
2024-10-30 15:02:21 +00:00
< 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" >
2024-10-30 15:19:01 +00:00
< a href = "https://emin.software/" class = "flex items-center space-x-3" >
2024-10-30 15:02:21 +00:00
< 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 - p1
< / h1 >
< h2 class = "mt-4 text-2xl text-slate-500 dark:text-slate-400" >
2024-10-30 15:46:43 +00:00
Containers!
2024-10-30 15:02:21 +00:00
< / h2 >
< div class = "mb-4 mt-2 text-sm text-slate-500 dark:text-slate-400" >
Oct 25, 2024 - 5 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 ‘ series’ I will be walking you through my process of how I
host everything on this server.< / p >
< p > I’ 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
2024-10-30 15:18:30 +00:00
writing< / em > , so having to zip and reupload for every typo is… not great. I
2024-10-30 15:02:21 +00:00
wanted to be able to do a simple < code > git push< / code > , and not worry about the rest.< / p >
2024-10-30 15:46:43 +00:00
< p > The “ manual” approach also depends on me having already installed all
2024-10-30 15:02:21 +00:00
necessary software. If you have a dedicated server that you’ re running yourself,
that’ s probably okay, you just have to setup once, but I’ m running this on a VPS
that I’ m not sure I’ ll keep forever. The ability to reproduce this exact setup
within minutes actually matters.< / p >
2024-10-30 15:46:43 +00:00
< p > After reading a bit on this topic, I decided I would use docker for this. Podman
2024-10-30 15:02:21 +00:00
would work just as nicely (any containerization software would work, really),
2024-10-30 15:46:43 +00:00
but I decided on docker because it’ s been the standard for a while now< / p >
2024-10-30 15:02:21 +00:00
< h2 id = "motivation" > Motivation< / h2 >
2024-10-30 15:46:43 +00:00
< p > Basically, I’ m already running a web server. Why shouldn’ t I also host several
other services for friends and family while I’ m at it? Why shouldn’ 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’ t want a website?< / li >
< li > Some git server: having my own place to show off all the things I’ 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’ 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 >
2024-10-30 15:02:21 +00:00
< p > I’ m not going to spend any more time explaining what containers are and why they’ re
good, that’ s been done to death already. Right now, what matters is the actual setup,
so let’ s get on with it.< / p >
< p > If you’ ve used docker before, you’ ll feel right at home. Many commands are unchanged
2024-10-30 15:46:43 +00:00
from docker, making docker a suitable drop-in replacement. Some things like network
2024-10-30 15:02:21 +00:00
setups tend to be a little different, but that won’ t matter too much right now.< / p >
2024-10-30 15:46:43 +00:00
< p > In case you’ 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 >
2024-10-30 15:02:21 +00:00
< 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 >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker search < image name>
2024-10-30 15:02:21 +00:00
< / 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 >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker pull < image name>
2024-10-30 15:02:21 +00:00
< / 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 >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker images
2024-10-30 15:02:21 +00:00
< / span > < / span > < span style = "display:flex;" > < span >
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#75715e" > # run a container.< / span >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker run < image name>
2024-10-30 15:02:21 +00:00
< / 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 >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker run
2024-10-30 15:02:21 +00:00
< / 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 < HOST PORT> :< CONTAINER PORT> < span style = "color:#75715e" > # port forwarding, for when you need a server.< / span >
< / span > < / span > < span style = "display:flex;" > < span > -v < HOST DIR> :< CONT DIR> :< FLAGS> < span style = "color:#75715e" > # give the container access to some directory< / span >
< / span > < / span > < span style = "display:flex;" > < span > < image name>
< / span > < / span > < span style = "display:flex;" > < span > < command> < 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 >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker ps < -a>
2024-10-30 15:02:21 +00:00
< / span > < / span > < span style = "display:flex;" > < span >
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#75715e" > # stop a running container.< / span >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker stop < id>
2024-10-30 15:02:21 +00:00
< / span > < / span > < span style = "display:flex;" > < span >
< / span > < / span > < span style = "display:flex;" > < span > < span style = "color:#75715e" > # stopped containers don' t automatically get removed. This command removes it.< / span >
2024-10-30 15:46:43 +00:00
< / span > < / span > < span style = "display:flex;" > < span > $ docker rm < id>
< / span > < / span > < / code > < / pre > < / div > < h2 id = "compose-is-nice" > Compose is nice.< / h2 >
< p > Docker compose is a nice way to essentially “ group together” some containers,
and ship them in an easy way.< / p >
2024-10-30 15:02:21 +00:00
< p > Usually, on a server, each application < em > isn’ t< / em > totally separate from each other< / p >
< ul >
2024-10-30 15:46:43 +00:00
< li > for my own use case, I want my git server (e.g. gogs) to automatically build
2024-10-30 15:02:21 +00:00
and update my website whenever I push to its git repository. That means my git
2024-10-30 15:18:30 +00:00
server and web server can’ t be < em > totally< / em > separate, there’ s some amount of
2024-10-30 15:46:43 +00:00
relation.< / li >
2024-10-30 15:02:21 +00:00
< / ul >
2024-10-30 15:46:43 +00:00
< p > At the same time… I don’ 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’ 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 >
2024-10-30 15:02:21 +00:00
< / 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" >
©
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 >
