#astro
- 이제 iframe을 직접 사용하지 말고, 유튜브 영상이 반응형으로 브라우저 크기에 맞게 나오도록 해봅시다.
모바일 시대에 맞게 Shorts 영상도 반응형 + 원하는 크기로 표시됩니다. 블로그에 obsidian or github 스타일 callouts 기능을 추가한 경험
markdown의 blockquote 하나로는 부족하니까 obsidian or github 스타일 callouts을 추가해봅시다.JS 없이 CSS만 사용해서 쉽고 빠르게 Reading progress bar 적용하기
자바스크립트없이 css 만으로 페이지 상단에 reading progress bar 를 구현합니다.PageSpeed Insights FCP, LCP 최적화 경험
PageSpeed 100점을 받고 싶은가. 폰트 swap 설정해도 안되고 로컬 폰트를 이용해도 안되고, 가변 다이나믹 서브셋으로 설정해도 안되면 폰트를 제.거.한.다.markdown 스타일 예제
markdown 문법이 어떻게 표현되는지를 보여주는 샘플 페이지입니다.Astro localhost:4321 모바일 미리보기
모바일에서 localhost 접속하는 방법을 검색해봤는데 무슨 같은 WiFi에 접속해서 디펜더에서 뭐를 설정하고…
2025년에도 이렇게 복잡하게 해야 되나?astro 만 가능한지는 모르겠지만 아무런 설정을 하지 않아도 됩니다.
npx astro dev --hostbuild 후 preview 도 마찬가지입니다.
npx astro preview --host
Cloudflare 에러 코드 522
Cloudflare 에서 새로운 사이트를 빌드하고 내 도메인에 접속했는데 Error code 522 !
신난 마음에 성급해서 생긴 결과이며 쉽게 수정할 수 있습니다.
아마도 당신은 Cloudflare 를 처음 이용하는 것이 아니라, 원래 Page를 하나 이상 가지고 있었고, 새로 빌드한 페이지가 만족스러워서 도메인에 연결하려는 상황일 것입니다.- Workers 및 Pages 에서 현재 도메인에 연결된 페이지를 클릭, 상단의 사용자 설정 도메인 탭을 클릭하고, 오른쪽 … 에서 도메인 제거를 해줍니다.
- 새로 만든 페이지 제목 클릭, 상단의 사용자 설정 도메인 탭을 클릭하고, 사용자 설정 도메인 설정을 눌러 보유한 도메인 입력을 해줍니다.
- 잠시 후 사이트가 정상적으로 보여야 합니다.
cloudflare 사이트에 배포하는 astro 정적사이트 주소 끝 슬래시 제거하기
cloudflare 로 배포하는 astro 사이트의 후행 슬래시 제거가 잘 안되나요?
build format을 file로 설정해도 후행 슬래시가 잘 제거되지만 canonicalURL이 문제될 수 있습니다.아래 설정을 시도해봅시다.
astro.config.mjsexport default defineConfig({ trailingSlash: "never", build: { format: 'preserve', }, ...... });wrangler.jsonc{ "name": "chatter", "compatibility_date": "2025-07-16", "assets": { "directory": "./dist", "html_handling": "drop-trailing-slash" } }완전 초보자를 위한 "astro-paper 블로그를 내 것으로"
astro-paper 블로그 디자인이나 기능이 마음에 드나요? 써봅시다.