[Astro] 개인 블로그 만들기

드디어 Astro를 이용한 개인 블로그를 만들었다.

이전에는 jekyll을 이용해서 만들었었는데, Astro의 경우 성능적으로 다른 프레임워크에 비해 정적 사이트 생성 속도가 빠르고 SEO 최적화가 잘 되어있다고 해서 선택하게 되었다.

또한, 내가 원하는 기능들과 디자인을 Tailwind를 이용해서 쉽게 구현할 수 있었다.

Astro

Astro 공식 문서 에 따르면, Astro는 MPA(Multi Page Application) 프레임워크로 정적 사이트 생성 속도가 빠르고 SEO 최적화가 잘 되어있다고 한다.

블로그는 정적 사이트이기 때문에, SEO 최적화가 잘 되어있는 것이 중요하다고 생각했다.

또한, 방문하는 사용자들에게 빠른 페이지 로딩 속도를 제공하고 싶었기 때문에, Astro를 선택하게 되었다.

시험삼아 새로 만든 블로그의 이력서 페이지를 Lighthouse로 테스트 해 본 결과, 실제로 성능이 꽤 좋은 것을 확인할 수 있었다.

Astro 시작하기 2023년 5월 28일 기준으로, Astro 공식 문서의 일부가 한글로 번역되어 있어 만약 Astro를 처음 사용하더라도 크게 어려움 없이 사용할 수 있을 것이다.

Tailwind

이번에 만든 블로그는 Tailwind를 이용해서 디자인을 구현했다.

이전에 jekyll을 이용해서 만든 블로그의 경우, 디자인을 구현하기 위해 Bootstrap을 사용했었는데, Bootstrap의 경우 내가 원하는 디자인을 구현하기 까다로워 Tailwind를 사용하게 되었다.

Add Integrations Astro에서는 UI 프레임워크 뿐만 아니라, 기타 다른 기능들도 쉽게 사용할 수 있도록 공식적으로 지원하기 때문에, Tailwind를 사용하는 것이 어렵지 않았다.

Dark Theme

예전부터 블로그를 직접 만든다면 Dark Theme는 꼭 구현해보고 싶었는데 이번 기회에 구현해보았다.

Tailwind에서는 Dark Mode를 쉽게 구현할 수 있도록 공식적으로 지원하고 있기 때문에, 어렵지 않게 기능을 구현할 수 있었다.

<!-- ThemeScript.astro -->
<script is:inline>
  (() => {
    if (typeof window !== 'undefined') {
      const $html = document.documentElement;
      const storageTheme = localStorage.getItem('theme')
        ? JSON.parse(localStorage.getItem('theme'))
        : null;
      const isSystemColorDark = window.matchMedia(
        '(prefers-color-scheme: dark)'
      ).matches;

      if (!storageTheme && isSystemColorDark) {
        $html.classList.add('dark');
      } else if (storageTheme === 'dark') {
        $html.classList.add('dark');
      } else {
        $html.classList.remove('dark');
      }
    }
  })();
</script>

<!-- ThemeSwitcher.astro -->
<button
  role="checkbox"
  tabindex="0"
  class="theme-switcher relative flex h-5 w-11 cursor-pointer items-center justify-end rounded-full bg-gray-200 px-1.5 dark:justify-start dark:bg-gray-700"
>
  <div
    class="absolute left-0.5 h-4 w-4 translate-x-0 transform rounded-full bg-white ease-out dark:translate-x-6 dark:bg-gray-800"
  >
  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="hidden h-3 w-3 text-white dark:block"
    viewBox="0 0 20 20"
    fill="#FFFFFF"
  >
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
    ></path>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="block h-3 w-3 text-white dark:hidden"
    viewBox="0 0 20 20"
    fill="#FFD43B"
  >
    <path
      fill-rule="evenodd"
      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
      clip-rule="evenodd"></path>
  </svg>
</button>

<script>
  import { setTheme } from '@/utils/theme';

  const themeSwitcher = document.querySelector(
    '.theme-switcher'
  ) as HTMLButtonElement;
  setTheme(themeSwitcher);
</script>

// Theme.ts
import { getStorage, setStorage } from '@utils/storage';

export const setTheme = (themeSwitch: HTMLButtonElement) => {
  themeSwitch.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
    const theme = document.documentElement.classList.contains('dark')
      ? 'dark'
      : 'light';

    setStorage('theme', theme);
    setGiscusTheme();
  });
};

export const getTheme = () => {
  const storedTheme = getStorage('theme', '');

  if (storedTheme) {
    return storedTheme;
  }

  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark'
    : 'light';
};

앞으로

Astro는 정보도 많이 부족하고 관련 커뮤니티도 활성화되어 있지 않아서 아직은 다른 프레임워크에 비해 부족한 점이 많다.

하지만, 정적 웹 사이트를 만드는데 있어서 매우 유용하고 성능적으로 뛰어난 프레임워크라고 생각한다. Astro가 더욱 발전하고 커뮤니티가 활성화되면, Astro를 사용하는 사람들이 많아질 것이라고 생각한다.

앞으로 블로그에 포스팅을 하면서 Astro를 사용하면서 느낀 점들을 계속해서 포스팅할 예정이다.