In this repository you will find the source code for klinger.io.
It is a markdown based blog developed with React, Next, Tailwind CSS and TypeScript. The site is statically hosted on Firebase and uses the Realtime Database to capture and display the current views of each blog post.
Step 1: Clone repository
git clone git@github.com:andreasklinger/klinger-io.gitStep 2: Install dependencies
pnpm installStep 3: Start development server
pnpm devChanges to the "main" branch that are added to the GitHub repository result in an automatic deployment of a static version on Firebase Hosting. Therefore, it is not necessary to update the website manually.
If a circumstance requires manual deployment, perform the following steps:
Step 1: Create production build
pnpm buildStep 2: Deploy via Firebase
pnpm deployFor this, the Firebase CLI must be installed globally (
npm install -g firebase-tools) and it is required that you log in through it (firebase login). Furthermore, you need the necessary project permissions for the deployment.
New blog posts can be added directly via the GitHub website.
Step 1: Open /posts directory
Step 2: Click on "Add file" in upper right corner
Step 3: Open sluggenerator and convert title of post to a slug, which you then use with file extension ".mdx" as filename
Step 4: Insert following header into file and replace placeholders
---
title: 'Title'
publishedAt: 'YYYY-MM-DD'
summary: 'Summary (max. 160 characters)'
---To make a post stand out, you can add a tag that will be displayed on the overview page. For example:
tag: '🚀 Popular'
Step 5: Add content as markdown to file
Since it is a .mdx file, React elements (HTML) can be added between the markdown as JSX.
Follow these steps to add a new image to a blog post that is not from an external source. In this way, the image is automatically saved in different quality levels during the building process to reduce network traffic.
Step 1: Add your image to /public/images
Step 2: Use the image as follows
<Image src="your-image.jpg" alt="Your image description" />The
<Image />component does not need to be imported, but can be inserted directly between the markdown code. It is important to pass only the file name to the src attribute. The path to the/public/imagesdirectory is automatically resolved.