Finishig touches & translations
- Added Czech translation of the first blog post - Finishing touches and details - Translaitions of composition names - Changing naming scheme in content/music/
This commit is contained in:
parent
e605fab161
commit
16d493c820
@ -7,7 +7,6 @@ import {
|
|||||||
CardTitle,
|
CardTitle,
|
||||||
} from "../components/ui/card";
|
} from "../components/ui/card";
|
||||||
import { Separator } from "../components/ui/separator";
|
import { Separator } from "../components/ui/separator";
|
||||||
import { Image } from "astro:assets";
|
|
||||||
|
|
||||||
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
import { getLangFromUrl, useTranslations } from "../i18n/utils";
|
||||||
const t = useTranslations(getLangFromUrl(Astro.url));
|
const t = useTranslations(getLangFromUrl(Astro.url));
|
||||||
@ -20,10 +19,9 @@ const { song } = Astro.props;
|
|||||||
src={song.data.image.url}
|
src={song.data.image.url}
|
||||||
alt={song.data.image.alt}
|
alt={song.data.image.alt}
|
||||||
class="rounded-md"
|
class="rounded-md"
|
||||||
inferSize
|
|
||||||
/>
|
/>
|
||||||
<span class="py-2"></span>
|
<span class="py-2"></span>
|
||||||
<CardTitle>{song.data.name}</CardTitle>
|
<CardTitle>{song.data.name[getLangFromUrl(Astro.url)]}</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
<br />
|
<br />
|
||||||
{song.data.comment[Astro.currentLocale]}
|
{song.data.comment[Astro.currentLocale]}
|
||||||
|
@ -1,67 +1,66 @@
|
|||||||
---
|
---
|
||||||
title: "Pushing site to production"
|
title: "Cesta k webovkám"
|
||||||
description: "My journey of creating this amazing personal website"
|
description: "Příběh vzniku těchto úžasných stránek"
|
||||||
author: "Cyril Šebek"
|
author: "Cyril Šebek"
|
||||||
publishDate: 2024-06-07T9:34:25Z
|
publishDate: 2024-06-07T9:34:25Z
|
||||||
image:
|
image:
|
||||||
url: "/blog/post-1.png"
|
url: "/blog/post-1.png"
|
||||||
alt: "Screenshot of my personal website"
|
alt: "Snímek mojí osobní webové stránky"
|
||||||
language: "cs"
|
language: "cs"
|
||||||
tags: ["dev", "selfhosting"]
|
tags: ["dev", "selfhosting"]
|
||||||
---
|
---
|
||||||
Here, I will start with an explanation of how I got here: to having my own website and writing a blog, almost pretending as if I am someone and someone will read this.
|
Vysvětlení toho jak jsem sem vlastně dostal: mít vlastní webovou stránku a psát si blog, skoro aŽ předstírat že to někdo někdy bude číst.
|
||||||
|
|
||||||
## You need a website RIGHT NOW
|
## You need a website RIGHT NOW
|
||||||
|
|
||||||
That was the title of a [YouTube video by NetworkChuck](https://www.youtube.com/watch?v=gwUz3E9AW0w) three years ago. In that video, he lists three reasons:
|
V překladu "Potřebuješ webovou stránku PRÁVĚ TEĎ". To byl titulek [videa](https://www.youtube.com/watch?v=gwUz3E9AW0w), které vyšlo na kanále NetworkChuck před třemi lety. Ve videu autor podepírá své tvrzení třemi důvody:
|
||||||
|
|
||||||
1. Stand out
|
1. Vyniknout
|
||||||
2. Make a difference
|
2. Udělat rozdíl
|
||||||
3. Create opportunities
|
3. Vytváření příležitostí
|
||||||
|
|
||||||
I would say that if you are interested in his reasons, go check out that video. Personally, I would expand it with a 4th point:
|
Pokud by vás to zajímalo víc tak si dané video pusťte, ale já osobně bych to rozšířil ještě o jeden důvod:
|
||||||
|
|
||||||
4. Learn
|
4. Získání zkušeností
|
||||||
|
|
||||||
Even by following his video on how to get your own website for free, you might learn something. But if you decide to go a step further and invest that 200 CZK (~8 EUR) and buy yourself a domain, you'll learn even more. Or take an even bigger step and get yourself proper hosting and manage that. Maybe you are a Linux user and feel the need to frown upon everything that wasn't coded in the command line; then you can program your site from scratch. Just doing that will teach you an incredible amount about how the web works. And maybe your first website won't be really pretty, but you can always make it better later as you learn more. In fact, that's what I've done—this is probably my 6th iteration of my personal website.
|
V jeho videu následně ukazuje, jak je možné si založit jednoduchou webovou stránku zdarma a bez nutnosti umět programovat, a i tím se může člověk něco naučit, ale když se rozhodne udělat o krok víc a investovat necelých 200 korun ročně a koupit si doménu tak se může naučit víc, třeba o tom jak se taková doména spravuje, a jak se řeší DNS. Ještě větším krokem by pak bylo zařídit si lepší hosting s více možnostmi. A nebo možná být správný "linux user" a mít potřebu pohrdat vším, co nebylo naprogramované pouze v příkazové řádce a napsat si celé stránky bez použití nástrojů jako wordpress. Každý tento krok je součástí cesty k pochopení toho jak web funguje a získání užitečných zkušeností v tomto oboru. A možná že první verze stránky nebude zrovna nejhezčí, ale vylepšit později se dá pokaždé. Upřímně, tohle je nejmíň 6. verze mých stránek.
|
||||||
|
|
||||||
## The “Linux user’s way”
|
## Cesta uživatele linuxu
|
||||||
|
|
||||||
Since I am a Linux user, I had to opt for the hardest possible way—well, maybe not THE HARDEST, but close enough, I'd say. Of course, I haven't coded my own OS just to run my website on my custom-designed CPU, so it could have been harder, but I decided that using a website builder was not for me, a true Linux user. Since I was already playing with some microcomputers, I thought, "Wow, maybe I could use my Raspberry Pi." And yes, of course, I could. I started by setting up my Raspberry Pi as a home server of sorts.
|
Vzhledem k tomu že používám Linux tak jsem si musel zvolit složitější cestu, možná ne úplně tu nejsložitější, vlastní systém jenom pro moje stránky jsem si nenaprogramoval... ale rozhodl jsem se že používat nástroje jako wordpress není pro mě. Protože jsem si již tenkrát hrál s mikropočítači jako je Raspberry Pi, začal jsem přemýšlet jestli by se to nedalo využít, no a samozřejmě že dalo. Tak jsem si z jednoho Raspberry Pi začal dělat pomalu takový malý domácí server.
|
||||||
|
|
||||||
While researching, I found a lot of amazing stuff that you could self-host, and I fell into that rabbit hole—Pi-hole, Unbound DNS, Jellyfin, Nextcloud—it felt like I tried everything. That was when I realised that one single Raspberry Pi would not be enough, so I got another… and another… and then I suddenly had four running in a Kubernetes K3s cluster.
|
Při hledání různých možností a postpů jsem objevil nepřeberné množství aplikací, které bych si mohl selfhostovat. A tak nějak jsem se dostal do bodu kdy jsem měl pocit že jsem snad už musel vyzkoušet selfhostovat všechno co se dalo - Unbound DNS, Pi-Hole, Jellyfin, Nextcloud... a v ten moment to začínalo vypadat že jedno Raspberry Pi nebude mít dost výkonu na to všechno. Nejsnazší řešení ? více Raspberry Pi počítačů! Než jsem se nadál byli 4 a běželi v organizovaném K3s clusteru.
|
||||||
|
|
||||||
The Pi cluster (or DRAG0N_PI, as I’ve named it) was great, but it had some issues, mostly due to the limitations of the Pis themselves, like hardware encoding/decoding, 4GB RAM limit, etc. So I did the only sensible thing and upgraded once more—to an old computer with a 4th generation i7 CPU, 16GB of RAM, and a dedicated RX 580 GPU. It worked like a charm, but it too had some issues. The most prominent was the fact that it had trouble turning on after a power outage, and there was no real way to remotely turn it on.
|
DRAG0N_PI, tedy ten můj malý Raspberry Pi cluster byl skvělý, a rozhodně úžasný co se vzdělávání se týče, začínal mít své liimtace - převážně kvůli limitům jednotlivých Raspberry Pi počítačů. Slabší hardwarové kódování videí, limity v úložišti, nedostatek jednovláknového výkonu, limitace 4GB RAM na počítač atd. Další upgrade, jediná rozumná cesta, byl na starý počítač. Intel i7 procesor 4. generace, 16GB RAM, dedikovaná grafická karta AMD RX 580 a dva 4TB HDD disky. Velké zlepšení oproti 4 mikropočítačům. Bohužel i tato konfigurace měla své problémy, největším z nich neschopnost automaticky se zapnout po výpadku proudu a neexistence funkce vzdáleného zapnutí.
|
||||||
|
|
||||||
Then one day, I found someone offering old IBM servers. The first one I got was an x3550 M3, but I didn’t even have the time to properly set it up before I got more—two x3550 M4s with a managed 24-port switch and an old IBM StorWize V3700 storage unit with an expansion enclosure, fully kitted with disks totaling 25TiB of raw HDD storage. Of course, that was a bit expensive, but still surprisingly cheap, only about 6500 CZK (~270 EUR).
|
Naštěstí se problém brzy vyřešil, kamarád našel na bazaru starý IBM x3550 M3 server. Ještě než jsem ho stihl nastavit podařilo se mi sehnat další dva, o generaci novější, IBM x3550 M4 servery. K tomu 24 portový managed switch a IBM StorWize V3700 s rozšířením včetně 42 disků s celkovou kapacitou kolem 25TiB. Každého teď možná napadá, že to zní jako hodně peněz. Mě samotného výsledná cena překvapila - asi 6500 korun. Neříkám, že to není málo, ale rozhodně to není tak moc.
|
||||||
|
|
||||||
That was in October 2023. I then set everything up, migrated what I had, and expanded what could be expanded. I had more than enough of everything—CPU cores? Each server decked with 2 CPUs, and each CPU being 6c/12t (6 cores, 12 threads), totaling 48 threads. RAM? Older DDR3 ECC RAM is pretty cheap, totaling 142 GB. Storage? The 25TiB in 42 drives, as already mentioned. Pretty sweet, right? But now you may ask, how am I managing all that? Am I just running Ubuntu Server on everything? Of course not—actually Debian, but that’s under the hood. I am running Proxmox. It's a great piece of software for managing something like that, although I would recommend it even for single servers and even smaller servers, like my previous “one old computer” server.
|
To bylo někdy na podzim 2023. Do Vánoc jsem všechno nastavil a přesunul všechno, co běželo na předchozím serveru. Výkonu na to bylo víc než dost - jádra procesorů ? každý server má 2 procesory a každý procesor je v konfiguraci 6c/12t (tedy 6 jader, 12 vláken), což dohromady dá 48 jader. Starší DDR3 ECC RAM moduly jsou naštěsí celkem levné, a tak se mi podařílo celkem levně osadit servery dohromady 142GB paměti. A úložistě víc než dost. No a jak se spravují takové servery ? No snad bych na to prostě nenainstaloval Ubuntu server, i když debian tam je - Proxmox. Proxmox je operační systém/software pro správu serverů až datových center, je používaný i na profesionální úrovni, ale není problém ho využívat zdarma na domácích serverech. Osobně bych ho doporučil všem, kteří nějakým způsobem o domácím serveru přemýšlejí.
|
||||||
|
|
||||||
|
## Takže konečně webovky ?
|
||||||
|
|
||||||
|
No a teď, je to skoro rok co jsem si začal platit doménu a začal se více věnovat selfhostování. Moje webová stránka v průběhu tohoto období samozřejmě existovala, v různých variantách, ale ve všech případech to bylo něco základního.
|
||||||
|
|
||||||
|
A tak jsem udělal tu nejvíc smysluplnou věc - vsadil jsem se s kamarádem ([který má také své webové stránky](https://www.adamdenko.com/), ale postavené pomocí nástrojů jako webnode) o to, kdo bude mít na konci prázdnin 2023 lepší stránky. A to byli moje webové stránky hostované na clusteru z Raspberry Pi a postupně stěhovány na starý počítač. No nevyhrál jsem, protože jsem je nikdy pořádně nedodělal. Zato jsem však dozvěděl něco nového a užitečného - jak moc nesnáším next.js.
|
||||||
|
|
||||||
|
Věřte tomu nebo ne, ale tahle verze mých stránek nevypadal zas tak špatně, ale nikdy pořádně nefungovala. Jako software pro správu obsahu jsem používal Strapi CMS a nikdy mi pořádně nefungovalo a přidávání nového obsahu trvalo zbytečně dlouho. A tak jsem začal o Vánocích 2023 pracovat na nové verzi... a nedokončil jí. Během jara jsem pak zkoušel různé zajímavé blbosti - jako napsat si vlastní webový server v C. Nevím proč jsem si myslel, že by to mohl být dobrý nápad, ale úplně nebyl.
|
||||||
|
|
||||||
|
|
||||||
## Finally building the website ?
|
## Záchrana YouTube algoritmem
|
||||||
|
|
||||||
So now, it’s been almost a year since I bought my domain and started self-hosting something on it. My website at the time was mostly placeholder plain HTML that just said it was my domain, with a bit about me, my hardware, and what I’d done so far. But it looked terrible.
|
Jednoho dne mě zachránil YouTube algoritmus - náhodou mi doporučil jedno video o webovém frameworku [Astro.js](https://astro.build/).
|
||||||
|
|
||||||
So, I did the only sensible thing—I made a bet with my friend (who also has [his own website](https://www.adamdenko.com/), but built using a website builder) on who would have the better website by the end of summer 2023. Yes, that was when my website was being hosted on a cluster of Pis and slowly migrated to an old computer. To put it lightly, I didn’t win that bet. I redid my website in Next.js and realised how much I actually hate Next.js.
|
A pro ty, kteří nevíco je astro - je to webový framework, který umožňuje snadné kombinování jednoduchosti čistého HTML a funkcionality pokročilých webových frameworků jako React. Následně se pokusí postavit celé stránky s co největším množstvím čistého HTML a nejmenším množstvím JS, ve snaze snížit výslednou velikost stránek a tedy zrychlení jejich načítání. A pro interaktivní prvky využívá tzv. "islands", tedy ostrůvky, a ty mohou být prakticky v jakémkoliv webovém frameworku. Takže ano, i moje stránky využívají pro interaktivní prvky React. Hlavně díky [shadcn/ui](https://ui.shadcn.com/) knihovně prvků pro webové stránky. Ale co jde tak je napsané v co nejčisštím HTML a CSS. No, CSS moc ne, protože proč se vztekat s CSS, když existuje TailwindCSS.
|
||||||
|
|
||||||
Believe it or not, that version of my website didn’t look too terrible, but it was very empty because the CMS didn’t really work. Adding content would have taken me an unreasonable amount of time. So right after setting up my fancy IBM servers, I started working on another version of my site…and didn’t finish. I tried a couple more times but never actually finished. I was still trying to make it work with Next.js or React because my friend had recommended it to me sometime before that. I also tried writing my own C web server because, for some reason, I thought that would be a great idea (it really wasn’t).
|
O 4 měsíce později jsem tady. Zní to jako dost času na takovéhle stránky, ale pořád jsem student a mám dost jiných povinností. Navíc jsem s astro.js předtím nikdy nepracoval, tak jsem věnoval první měsíc různým experimentům. A pak jsem začal, kousek po kousku, stavět tyto stránky. Úžasná věc na většině webových frameworků je snadné znovu použití stejných prvků, komponent. Takže jsem postupně začal stavět jednotlivé komponenty a z nich stránky - domovská stránka, blog... a přidával jsem různé funkcionality - responsivní design, RSS feed pro blog, i18n (internationalization - překlady), tmavý a světlý režim... netvrdím, že teď jsou tyto stránky bezchybné, ale alespoň už se neděje, že by náhodně spadli kvůli překlepu v URL adrese.
|
||||||
|
|
||||||
|
Konečně jednou taky nepíšu kód, ale text v nějakém lidském jazyce.
|
||||||
|
|
||||||
|
|
||||||
## Astro saves the day
|
## Závěr
|
||||||
|
|
||||||
Actually… yes, because I don’t think I would have been able to get here without it. I found it by accident when trying to learn how to make Android UI (another project I think I will talk about, so stay tuned) and a video about [Astro.js](https://astro.build/) was recommended to me by YouTube’s algorithms.
|
Celkově musím říct, že jsem se v průběho poslední dvou nebo tří let naučil hromadu věcí o tom jak funguje web, jak se starat o servery a jaké jsou možnosti moderního vývoje webových stránek. Rozhodně bych to doporučil jako projekt komukoliv, kdo se zajímá o počítače, a je úplně jedno co přesně dělá, jestli vývoj her nebo programování robotů, tak jako tak věřím že je v tom hodně věcí, co se člověk naučí.
|
||||||
|
|
||||||
For those of you who don’t know what Astro is, go look it up and read more about it. In short, it’s a JS framework that allows you to combine plain HTML with JS and basically every JS framework possible. It then builds as much of the page as possible as static HTML, because it’s the fastest, with these interactive things called ‘islands’. Those islands can be in whatever framework you like, even Next or React. Yes, most interactive things on my page are still in React, thanks to the fact that they are from the [shadcn/ui](https://ui.shadcn.com/) library—really amazing stuff there. But everything that doesn’t need to be dynamic or interactive is just almost plain old HTML, simple yet effective. Also, I use Tailwind because I hate CSS.
|
To je vlastně asi nejlepší věc na počítačích - jak rychle se všechno vyvíjí a mění, a to nutí člověka se pořád rozhlížet a učit se nové věci. Jenom správa serveru je nějaké množství práce pokaždé, když vyjde nový update. Nainstalovat, zkontrolova ,že všechno funguje, opravit co nefunguje... a pak opravování všech náhodných problémů - někde došlo místo na disku, něco z nějakého důvodu spadlo, databáze PostgreSQL pro synapse matrix server zabírá 80GB (jsem si jistý že o tom taky napíšu něco víc)...
|
||||||
|
|
||||||
It took me about four months to get here, but keep in mind that I am a student and it was during the school year. I started working on this version about four months ago. The first month, I just experimented with Astro by doing some silly things and testing different ideas. Then I started building this, piece by piece, from little components. First the main page, then the blog, then all the theming options. I added i18n (internationalisation, aka translations) and did a lot of bug fixing. I don’t claim it to be bug-free now, but at least it builds and doesn’t randomly crash when you make a typo in the URL or something like that.
|
Takže měl Chuck z kanálu NetworkChuck vlastně docela pravdu - všichni potřebujeme webové stránky.
|
||||||
|
|
||||||
And now I am here, for once not writing code but text in English about writing code. Isn’t that fun?
|
|
||||||
|
|
||||||
|
|
||||||
## Conclusion
|
|
||||||
|
|
||||||
In the end, I am sure I’ve learned a lot over the past two or three years while building my server and this website. It has definitely been an interesting project, which I would recommend to anyone interested in computers and programming. It doesn’t matter if you are just starting out or are an expert in C or video game development; either way, it’s going to be interesting, and I bet you can learn something new.
|
|
||||||
|
|
||||||
I’d say that one of the best things about working with computers is the fact that they are constantly changing, forcing you to learn something new. Even just maintaining that server is some amount of work—all the updates and then checking what got broken during the updates and troubleshooting it. Fixing all the random errors that just appear for no apparent reason, like my Matrix Synapse server taking up 80 GB with a PostgreSQL database (I am sure I will write about that too).
|
|
||||||
|
|
||||||
So yeah, NetworkChuck was right—you need a website.
|
|
||||||
|
@ -20,7 +20,12 @@ const blogCollection = defineCollection({
|
|||||||
const musicCollection = defineCollection({
|
const musicCollection = defineCollection({
|
||||||
type: "content",
|
type: "content",
|
||||||
schema: z.object({
|
schema: z.object({
|
||||||
name: z.string(),
|
name: z.object({
|
||||||
|
en: z.string(),
|
||||||
|
de: z.string(),
|
||||||
|
fr: z.string(),
|
||||||
|
cs: z.string()
|
||||||
|
}),
|
||||||
comment: z.object({
|
comment: z.object({
|
||||||
en: z.string(),
|
en: z.string(),
|
||||||
de: z.string(),
|
de: z.string(),
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
---
|
---
|
||||||
name: "Fantasia for Bb Clarinet and Piano"
|
name:
|
||||||
|
en: "Fantasia for Bb Clarinet and Piano"
|
||||||
|
fr: "Fantaisie pour clarinette et piano"
|
||||||
|
de: "Fantasia für B-Klarinette und Klavier"
|
||||||
|
cs: "Fantasie pro Bb klarinet a klavír"
|
||||||
publishDate: 2024-05-07T19:55:48Z
|
publishDate: 2024-05-07T19:55:48Z
|
||||||
pdfLink: "/music/Fantasia_Clarinet_Piano/Fantasia_Clarinet_Piano.pdf"
|
pdfLink: "/music/Fantasia_Clarinet_Piano/Fantasia_Clarinet_Piano.pdf"
|
||||||
mp3Link: "/music/Fantasia_Clarinet_Piano/Fantasia_Clarinet_Piano.mp3"
|
mp3Link: "/music/Fantasia_Clarinet_Piano/Fantasia_Clarinet_Piano.mp3"
|
Loading…
Reference in New Issue
Block a user