52 lines
3.8 KiB
Markdown
52 lines
3.8 KiB
Markdown
---
|
|
title: 'Hello World!'
|
|
pubDate: 2023-03-08
|
|
description: 'First blog post, talking a bit about the site, the technologies behind it and the future ideas'
|
|
author: 'Firq'
|
|
tags: ['astro', 'hello']
|
|
---
|
|
|
|
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, <a href="https://mastodon.neshweb.net/@neshura" target="_blank" rel="noopener noreferrer">Neshura</a> 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 <a href="https://www.mitsunee.com/" target="_blank" rel="noopener noreferrer">Mitsunee</a> 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 <a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a>. 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:
|
|
|
|
```typescript
|
|
<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**
|