Implementing Blog

src/pages/blog.astro

@@ -1,16 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import BlogCard from '../components/blogCard.astro';
 import BasicSection from '../layouts/basicSection.astro';
 
-const description = "A placeholder until I get to designing the Blog pages. Future topics will include FGO, TA, Programming, web technologies and more!"
+const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
+const allPosts = await Astro.glob("../pages/blog/*.md");
 ---
 
 <Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
-    <BasicSection title="Work in Progress">
-        Nothing to see here (yet)<br>
-        Topics will range from FGO to technologies and programming.
+    <BasicSection title="Blog Articles">
+        {allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
     </BasicSection>
-    
 </Layout>
 
 <style>

src/pages/blog/hello-world.md

@@ -0,0 +1,54 @@
+---
+layout: ../../layouts/blogPost.astro
+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, [Neshura](https://mastodon.neshweb.net/@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](https://www.mitsunee.com/) 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](https://astro.build). 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