RSS DEV 커뮤니티
팔로우
빌드 로그: Astro, Cloudflare Pages 및 Umami로 블로그 재구축하기
저자는 특정 원칙에 중점을 두고 Astro를 사용하여 개인 웹사이트를 재구축했습니다. 여기에는 SEO 유지, 모든 자산 소유, JavaScript 최소화, 개인 정보 보호 및 공급업체 종속성 방지가 포함됩니다. 게시물은 Git 리포지토리 내의 Markdown 파일로 관리되며, SEO 연속성을 위해 이전 URL과 일치하도록 슬러그가 유지됩니다. 마이그레이션 프로세스에는 게시물을 가져오고, 원치 않는 콘텐츠를 제거하고, 이미지를 로컬로 다운로드하고, 최적화하는 스크립트가 포함되었습니다.
SEO는 중요한 고려 사항이었으며, 기존 블로그 경로를 메인 도메인으로 리디렉션하는 캐노니컬 URL 및 301 리디렉션을 구현하여 해결되었습니다. 이를 통해 순위 신호를 단일 호스트로 통합했습니다. 캐시된 콘텐츠를 제공하는 잔존하는 Gatsby 서비스 워커로 인해 지속적인 버그가 발생했습니다. 해결책은 이전 서비스 워커를 등록 해제하고 라이브 사이트로 새로 고침하도록 강제하는 새로운 "킬 스위치" 서비스 워커였습니다.
검색 기능은 백엔드 서버의 필요성을 피하기 위해 클라이언트 측에서 정적 JSON 인덱스를 사용하여 구현되었습니다. Astro의 범위 지정 스타일과 관련된 사소한 문제는 동적으로 생성된 요소에 대한 CSS 배치를 조정하여 해결되었습니다. Mermaid 다이어그램은 올바르게 로드되도록 비동기 가져오기 후 명시적으로 클라이언트 측에서 렌더링됩니다. 가독성을 높이기 위해 다이어그램에 클릭 투 줌 기능이 추가되었습니다.
태그 위생은 단일 사용 태그 및 중복 태그를 캐노니컬 태그로 통합하여 해결되었으며, 게시물이 두 개 미만인 페이지는 noindexing으로 표시되었습니다. 쿠키 없는 분석은 Umami를 사용하여 구현되었으며, 광고 차단기를 우회하기 위해 Cloudflare Pages Functions를 통한 퍼스트 파티 프록시가 사용되었습니다. 링크 클릭에 대한 이벤트 추적이 Umami에 추가되었습니다.
Astro의 View Transitions는 `transition:persist`가 스크립트 연결 리스너를 유지하지 않기 때문에 각 탐색 시 스크립트를 다시 초기화해야 합니다. 마지막으로 Cloudflare의 Rocket Loader가 Safari에서 사이트 오류를 일으키는 원인으로 파악되어 비활성화되었습니다.
