계기
지인이 글또라는 활동을 추천해서 다시 기술 블로그를 써야겠다고 마음을 먹었습니다.
이전에는 일상 글은 네이버 블로그를 이용했고, (1년째 죽어있는)개발 블로그는 티스토리를 이용했었는데요. 요즘 개인적으로 MDX에 관심이 많아서, 직접 개발해야겠다고 생각해서 따로 만들게 되었습니다.
올해 1분기쯤에 챕터 리드인 재엽님이 Astro를 사내에 소개하는 자리가 있었는데, 그 때 Astro에 관심을 가지게 되어서 사용하게 되었습니다.
Astro의 아일랜드 아키텍쳐가 매력적이었어요. 다양한 프레임워크로 각각의 아일랜드를 구성할 수 있고, JS가 필요없는 부분에선 JS를 다 제거하여 빠른 속도를 제공하는게 정적인 블로그에 정말 잘 맞는다고 생각해요.
Astro
템플릿
근데 막상 0에서 시작하려고 하니까 막막하더라고요. 그래서 Astro 공식문서에서 소개하고 있는 Showcase 에서 가장 마음에 드는 템플릿을 가져왔습니다. (컨텐츠 카테고리, 기술 스택으로 필터링이 가능해서 편했습니다.)
이 템플릿을 기반으로 MD -> MDX로 전환하고, 필요없는 페이지와 기능들은 지우고 새로 살을 붙여나갈 계획입니다. 😄
일단 필요없는 remark-collapse를 지우고.. rehype-autolink-headings, rehype-external-links을 설치했습니다.
Astro에서 rehype-auto-link-headings를 이용하기 위해선 rehype-slug를 필수로 설치해야 합니다. (관련 이슈)
rehype-auto-link-headings
이 플러그인을 설치하면 헤딩에 <a><span class="icon-link"></span></a> html이 추가되는데요. icon-link 클래스명에 스타일링을 줬습니다.
after selector를 이용해서 아이콘을 넣어줬어요.
.prose .icon-link {
@apply absolute cursor-pointer no-underline opacity-0 transition-opacity ease-in-out;
margin-left: -1em;
padding-right: 0.5em;
}
.prose .icon-link:after {
@apply inline-block bg-current;
content: " ";
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
}
.prose h1 .icon-link:after {
@apply h-6 w-6;
}
.prose h2 .icon-link:after {
@apply h-5 w-5;
}
.prose h3 .icon-link:after {
@apply h-4 w-4;
}
.prose h4 .icon-link:after,
.prose h5 .icon-link:after,
.prose h6 .icon-link:after {
@apply h-3 w-3;
}
.icon-link:hover,
.prose h1:hover .icon-link,
.prose h2:hover .icon-link,
.prose h3:hover .icon-link,
.prose h4:hover .icon-link,
.prose h5:hover .icon-link,
.prose h6:hover .icon-link {
@apply opacity-100;
}rehype-external-links
외부 링크일 경우엔 새탭으로 열게 하기 위해 target을 설정해줬습니다. 보안을 위한 rel="noreferrer noopener" 설정도 필수입니다.
[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer" }];giscus
블로그에 댓글 기능을 추가하기 위해 giscus를 사용합니다. github의 discussions를 이용해서 댓글 기능을 만들어주는 라이브러리에요.
공식문서에 사용법이 자세하게 나와있어서 쉽게 적용할 수 있습니다!
Astro에서는 client:load, idle, visible, media, only 를 통해 프레임워크가 hydration 하는 방식을 조정할 수 있습니다. 댓글은 포스트의 맨 밑에 있으니까 idle로 불러오도록 설정했습니다.
// Comments.tsx
import Giscus from "@giscus/react";
export function Comments() {
return (
<Giscus
id="Comments"
...
/>
);
}
// PostDetail.astro
<Comments client:idle />당장은 이정도만으로도 충분한 것 같아보이고, 앞으로 계속 추가해나갈 생각입니다.