Well … that took some time to get up and running. But nonetheless, here we are, and my site is starting to work!
What is this whole thing?
My own site! Well, I should explain a bit more …
Last year, someone asked me if I could provide them with a list of servants and CEs that I own and that are often used in FGO TA. At first, I started writing down the servants as markdown files (kinda ironic, this is a markdown file as well). But after a while, a good friend, Neshura said to me: “Why don’t you just create a small site with GitLab Pages? You can host that on my instance”. And so, I started writing HTML and CSS by hand, getting the first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to Mitsunee for helping me so much with the CSS).
But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
But then came Astro. When Mitsunee recommended it to me, I was instantly amazed by how easy this was … I just needed to migrate the existing site to Astro (which took me a bit) and adapt the gitlab-ci.yml, and it was done! It felt amazing, having reusable components and simple creation of those.
Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
<BaseSection title="Servants">
{servantdata.map((item) => (
<ServantCard {...item} />
))}
</BaseSection>But still, the whole site felt odd. It was a single page, with everything just cramped in there. So around 2 weeks ago, I started to rewrite the whole thing as a multi-page website. GitLab made it sometimes pretty hard (because having a baseurl of /fgosite was forced), but it worked and felt a lot cooler.
Still, I was a bit annoyed that I had this long-ish URL for the site (firq.pages.neshweb.net/fgosite), but the GitLab instance didn’t offer to set a custom domain (because of how the server where it runs is set up).
So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution.
But … how does it work?
In general, this whole site is an Astro project that is being built using GitLab Pipelines. For that, the project is copied onto an Alpine-Linux Proxmox instance where it then gets built. This is necessary so that once it is served to localhost using npx serve, it has it’s own IP address and port. Using those in nginx, the site can be assigned the firq.dev domain and be made public.
To prevent the serve-command from ending once the GitLab runner cuts the SSH connection the Proxmox instance, screen is being used to start a headless session where serve is then executed. This also makes it easy to reload the site after a finished build, as I can easily kill the running screen session with the specific tag.
So … what can be expected here?
I have some more blog topics that I want to write about in the future (FGO TA being the most prominent one, followed by a detailed explanation of this project). I also want to tackle the design in some cases, as I am not completely satisfied how some parts of the site look.
But in general, this whole thing is a hobby-project which aims to enhance my web-dev skills and provide others with information.
Thanks for reading, and until next time
~ Firq