Description

A personal blog built with Astro.
It introduces me, projects I have worked on, and blog posts I write when I have time.
Blog, Project, and Playground use Astro’s Content Api, and posts are written as .mdx files so components can be embedded.

Project screenshots

Previous slideNext slide

Site links

• Personal blog
• Github

Tech stack

• Astro: SSG framework
• React: Main components
• TailwindCSS: Styling
• Framer Motion: Animation
• Github Actions: Automated deployment
• Docker: Container image builds
• Nginx: Web server
• Cloudflare: Domain management

Development process

Choosing technologies

• Astro
  • It attracted attention as a meta-framework, taking first place in interest, awareness, and positive sentiment in state of js 2024.
  • I wanted to build a personal blog with Astro, which led to this project.
  • For a detailed assessment of Astro, see the blog post.
    Astro framework assessment
• React
  • I wanted to become more familiar with React, which continues to enjoy overwhelming support.
  • I wanted to try Shadcn UI, a React-based CSS Library that has recently become very popular.

UI structure

• I wanted animations and dynamic effects, so I combined Motion and TailwindCSS to implement them.

• Developed a responsive UI and Dark/Light modes for the user experience

PC screen	Mobile screen

Dark mode	Light mode

Building the blog pages

• Using Astro’s Content API

  • I wanted to write blog posts in Markdown, so I used Astro’s Content API.

  1
  /**
  2
   * 파일 경로: ./src/content/config.ts
  3
   * 역할 설명: mdx의 frontmatter에 적혀있는 속성을 스키마로 가지는 콜렉션 지정
  4
   */
  5
  import { defineCollection, z } from 'astro:content';
  6
  
  7
  const blog = defineCollection({
  8
    type: 'content',
  9
    schema: z.object({
  10
      title: z.string(),
  11
      category: z.string(),
  12
      thumbnail: z.string().optional(),
  13
      created: z.coerce.date(),
  14
      tags: z.array(z.string()).optional(),
  15
      updated: z.coerce.date().optional(),
  16
    }),
  17
  });
  18
  
  19
  export const collections = { blog };

  1
  /**
  2
   * 파일 경로: ./pages/blog/[...slug].astro
  3
   * 역할 설명: post slug 경로와 일치하는 mdx를 렌더링하는 동적 페이지 생성
  4
   */
  5
  ---
  6
  import { type CollectionEntry, getCollection } from 'astro:content';
  7
  
  8
  export async function getStaticPaths() {
  9
    const posts = await getCollection('blog');
  10
    return posts.map((post, index) => ({
  11
      params: { slug: post.slug },
  12
      props: {
  13
        post,
  14
        prev: posts[index - 1] || null,
  15
        next: posts[index + 1] || null,
  16
      },
  17
    }));
  18
  }
  19
  
  20
  const { post, prev, next } = Astro.props;
  21
  const { Content } = await post.render();
  22
  ---
  23
  
  24
  <MdLayout post={post.data} nav={{ prev, next }} url={`/blog/${post.slug}`}>
  25
    <Content />
  26
  </MdLayout>

• Screen layout

  Blog list screen	Blog post screen

• Implemented fuzz search for posts

  • Used fuse.js to make searching easier for readers.
  

• MDX processing for asset loaders and code views

  • Added Expressive code, Mermaid, and Katex
  • See the blog link for details. https://www.jun-devlog.win/blog/web/common/markdown-test-mdx

  Expressive code	Mermaid	Katex

  • Developed ImageLoader with lazy image loading

    1
    // 이미지 로더
    2
    ---
    3
    import { getBasePathWithUrl } from '@/utils/getBasePathWithUrl.ts';
    4
    import React from 'react';
    5
    
    6
    type Props = {
    7
      src?: string;
    8
      alt?: string;
    9
      class?: string;
    10
      width?: number;
    11
      height?: number;
    12
    };
    13
    
    14
    const { src, alt = 'blog-image', class: className, width, height } = Astro.props;
    15
    ---
    16
    
    17
    <img
    18
      src={getBasePathWithUrl(src)}
    19
      alt={alt ?? 'blog-image'}
    20
      loading="lazy"
    21
      onerror={`this.src='/fallbackImg.svg'`}
    22
      class={className}
    23
      width={width}
    24
      height={height}
    25
    />

    1
    // mdx 파일
    2
    ---
    3
    title: Astro에 대해서
    4
    created: 2025-02-26
    5
    updated: 2025-02-27
    6
    tags: ['blog', 'astro', 'meta-framework']
    7
    category: Web
    8
    thumbnail: /files/blog/web/astro/assets/CleanShot_2025-02-26_20.22.28@2x.webp
    9
    ---
    10
    
    11
    import ImageLoader from '@/components/Blog/ImageLoader.astro';
    12
    import VideoLoader from '@/components/Blog/VideoLoader.astro';
    13
    
    14
    <ImageLoader src="/files/blog/web/astro/assets/[email protected]" alt="CleanShot_2025-02-26_20.22.28@2x" />
    15
    
    16
    ## 시작으로
    17
    
    18
    앞서 작성한 블로그 소개 글에서 언급했듯, 개발 블로그를 만들기 위하여 Astro를 사용해본 경험, 사용법에 대하여 기술하겠습니다.
    19
    ...

• Added a JavaScript file to preprocess post data

  • Preprocessing is needed because I first write posts in a Markdown editor and then add the content to the blog site.
  • Developed a preprocessing plugin for image paths and other components, run before adding blog content.
    • addMdEnter.js
    • convertLoader.js
    • removeUnusedImages.js
  

Setting up a web server and automated deployment with Docker and Nginx

Identifying the problem and planning a solution

• During initial development, I built and deployed the site on netlify.
  • Problem: As photo assets increased, GitHub began warning that the size limit had been exceeded.
  • Solution: Store blog assets on Amazon S3 or a personal file server.
• I chose to create a personal file server on my own Linux server, and decided to move the web server there as part of the configuration change.

---

Web server and automated deployment setup

• Installing the Github Action runner

  • Installed a self-hosted runner on the Linux server by following GitHub’s guide.
  

• Configuring nginx, the docker file, and workflow

  • Configured the workflow so the runner builds and deploys on pushes to the remote branch.
  • At deployment, build a Docker image through the docker file, then create and run an Nginx container with the specified settings.
  • Set up the domain through Cloud flare so it is accessible via the nameserver.

  1
  name: Astro Blog
  2
  
  3
  on:
  4
    push:
  5
      branches:
  6
        - master # 배포를 트리거하는 브랜치
  7
  
  8
  jobs:
  9
    build:
  10
      runs-on: self-hosted
  11
      steps:
  12
        - name: Checkout
  13
          uses: actions/checkout@v4
  14
  
  15
        - uses: pnpm/action-setup@v4
  16
          name: Install pnpm
  17
          with:
  18
            version: 10
  19
            run_install: false
  20
  
  21
        - name: Install Node.js
  22
          uses: actions/setup-node@v4
  23
          with:
  24
            node-version: 22
  25
            cache: 'pnpm'
  26
  
  27
        - name: Install dependencies
  28
          run: pnpm install
  29
  
  30
        - name: Build
  31
          run: pnpm build
  32
    deploy:
  33
      runs-on: self-hosted
  34
      needs: build
  35
      steps:
  36
        - name: Build Docker Image
  37
          run: DOCKER_BUILDKIT=1 docker build -t astro-blog .
  38
  
  39
        - name: docker stop & remove pre
  40
          run: docker stop astro-blog && docker rm astro-blog
  41
  
  42
        - name: docker run
  43
          run: docker run -d -v astro-blog-volume:/home/files --name astro-blog -p 4321:80  astro-blog

  1
  FROM ubuntu/nginx:1.18-22.04_beta
  2
  
  3
  ENV TZ="Asia/Seoul"
  4
  
  5
  COPY ./nginx.conf /etc/nginx/nginx.conf
  6
  COPY ./dist /var/www/html

  1
  worker_processes  1;
  2
  
  3
  events {
  4
    worker_connections  1024;
  5
  }
  6
  
  7
  http {
  8
    server {
  9
      listen 80;
  10
      server_name   _;
  11
  
  12
      root   /var/www/html;
  13
      index  index.html index.htm;
  14
      include /etc/nginx/mime.types;
  15
  
  16
      gzip on;
  17
      gzip_min_length 1000;
  18
      gzip_proxied expired no-cache no-store private auth;
  19
      gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  20
  
  21
      error_page 404 /404.html;
  22
      location = /404.html {
  23
              root /var/www/html;
  24
              internal;
  25
      }
  26
  
  27
      location / { #
  28
              try_files $uri $uri/index.html =404;
  29
      }
  30
      location /files { # 파일 서버
  31
          alias /home/files;
  32
      }
  33
    }
  34
  }

• Store images in a docker volume so the nginx file server can load them