폴스나인

폴스나인 사이트 제작기 10편 | 하루 만에 블로그에서 사이트로 — 회고와 다음 계획

자! 마지막 편이다. 아침에 '티스토리 보안문자 너무 귀찮다'에서 시작해서, 저녁엔 내 도메인에 댓글·조회수·예약 발행까지 붙은 사이트가 돌아가고 있었다. 하루를 돌아보며 정리해 본다.하루 동안 만든 것가비아 도메인 → Cloudflare DNS 이전파이썬 사이트 생성기 + Cloudflare Pages 자동 배포루트·www 도메인 연결, HTTPScontact@ 도메인 메일 전달구글·네이버 검색 등록(사이트맵·RSS)자체 댓글(답글·@멘션·IP 앞자리)·조회수·최신순/인기순 정렬15시 예약 발행카드형 디자인, 모바일 한글 줄바꿈, 읽기 진행 막대, 맨 위로 버튼, 파비콘 세트제일 어려웠던 것 TOP 5Cloudflare 화면 찾기: Workers와 Pages가 섞인 메뉴, 프로젝트 안에 숨은 Custo..

폴스나인 사이트 제작기 9편 | 모바일에서 한글이 예쁘게 보이게 — 줄바꿈·표·읽기 진행 막대

기능을 다 붙이고 폰으로 열어 보니... 어색한 데가 한두 군데가 아니었다. 이번 편은 CSS로 하나씩 고친 기록이다. 특히 한글 줄바꿈은 꼭 보고 가시길.1. 문단 오른쪽이 들쭉날쭉한글은 word-break: keep-all을 주면 단어(어절) 중간에서 안 끊겨서 PC에선 깔끔하다. 그런데 폰처럼 좁은 화면에선 '10라운드경기다.' 같은 긴 어절이 통째로 다음 줄로 넘어가서 앞줄 오른쪽에 큰 구멍이 생긴다.@media (max-width: 600px) { .entry p { word-break: normal; line-break: strict; text-align: justify; }}좁은 화면에서만 글자 단위로 줄을 채우고(word-break: normal) 양쪽 정렬을 줬다. 마침표·쉼표가 줄 맨..

폴스나인 사이트 제작기 8편 | 예약 발행 만들기 — GitHub Actions cron으로 매일 15시 재배포

티스토리엔 예약 발행 버튼이 있다. 정적 사이트엔 그런 게 없다. 페이지는 빌드할 때 만들어지니까, '15시에 공개'하려면 15시에 한 번 더 빌드를 해 줘야 한다.아이디어글 원고에 발행 시각(date)을 적는다사이트 생성기는 date가 지금보다 미래인 글은 빼고 만든다GitHub Actions가 매일 15:00(한국시간)에 깨어나서, 방금 발행 시각이 지난 글이 있으면 빈 커밋을 올린다빈 커밋을 본 Cloudflare Pages가 다시 빌드 → 그 글이 사이트에 나타난다on: schedule: - cron: "0 6 * * *" # 15:00 KST (cron 은 UTC 기준!) workflow_dispatch: {}permissions: contents: write😵 삽질 포인트cro..

폴스나인 사이트 제작기 7편 | 서버 없이 댓글·조회수 만들기 — Cloudflare Pages Functions + D1

정적 사이트의 약점은 '저장'이 안 된다는 거다. 댓글을 받으려면 어딘가에 데이터를 써야 한다. 외부 댓글 서비스도 봤는데 Giscus는 GitHub 로그인이 필요해서 축구 팬들은 못 쓰고, Disqus 무료판은 광고가 붙는다. 그래서 직접 만들었다. Cloudflare에 이미 다 있다.구조Pages Functions: 저장소에 functions/api/comments.js 파일을 두면 /api/comments 주소에서 돌아가는 작은 서버 함수가 된다. 따로 서버를 안 띄워도 된다.D1: Cloudflare의 무료 SQLite 데이터베이스. 댓글과 조회수를 여기에 저장한다.Cloudflare에서 할 일 (클릭 몇 번)Storage & databases → D1 → Create → 이름 정해서 생성(위치는..

폴스나인 사이트 제작기 6편 | 구글 서치콘솔·네이버 서치어드바이저에 새 도메인 등록하기

사이트를 열었으면 검색엔진에 '나 여기 있어요' 하고 알려 줘야 한다. 구글과 네이버 둘 다 했는데, 둘의 인증 방식이 달라서 따로 적는다.구글 서치콘솔 — 도메인 속성 + Cloudflare 자동 인증속성 추가에서 도메인 유형을 고르고 도메인만 입력(https 없이)DNS 인증 화면에서 공급업체로 Cloudflare를 고르면 승인 창이 뜬다 → Authorize. TXT 레코드가 자동으로 들어가서 손댈 게 없다인증 후 왼쪽 Sitemaps에 사이트맵 제출😵 삽질 포인트도메인 속성은 사이트맵 칸에 전체 주소(https://fls9.kr/sitemap.xml)를 넣어야 한다. 제출 직후 '가져올 수 없음'이 떠도 몇 시간 뒤 '성공'으로 바뀌니 놀라지 말 것.네이버 서치어드바이저 — HTML 태그사이트 ..

폴스나인 사이트 제작기 5편 | 무료로 contact@내도메인 메일 만들기 — Cloudflare Email Routing

사이트 소개·문의 페이지에 연락처를 넣으려니 고민이 됐다. 전화번호는 스팸 전화 지옥이 될 거고, 개인 지메일을 그대로 쓰기도 싫었다. 그래서 만든 게 contact@fls9.kr. 메일함을 새로 만드는 게 아니라, 이 주소로 온 메일을 내 지메일로 전달만 해 주는 방식이다. 비용 0원!설정 순서Cloudflare → Email → Email Routing → Onboard Domain → 도메인 선택MX 3개 + TXT 2개 레코드를 추가하겠다는 화면 → ActivateDestination addresses 탭 → 받을 지메일 추가 → 지메일로 온 인증 메일에서 VerifyRouting rules 탭 → Create routing rule → Email pattern에 contact, 도메인 선택, A..

폴스나인 사이트 제작기 4편 | Pages에 내 도메인 붙이기 — 루트와 www, SSL까지

4편은 짧고 굵다. xxx.pages.dev로 열리던 사이트를 fls9.kr로 열리게 만드는 단계다. 2편에서 네임서버를 Cloudflare로 넘겨 놨으니 버튼 몇 번이면 끝난다.순서Compute → Workers & Pages → 내 프로젝트 클릭위쪽 탭 Custom domains → Set up a custom domain루트 도메인(fls9.kr) 입력 → Continue → Activate domain같은 방법으로 www.fls9.kr도 따로 추가😵 삽질 포인트Custom domains 탭이 어디 있냐로 한참 헤맸다. 왼쪽 'Domains' 메뉴(도메인 목록)에는 없다. 반드시 Workers & Pages → 프로젝트 안으로 들어가야 탭이 보인다.www는 자동으로 안 붙는다. 루트만 추가해 두고..

폴스나인 사이트 제작기 3편 | Cloudflare Pages로 정적 사이트 배포하기 — GitHub 연결부터 첫 배포까지

3편은 사이트를 실제로 인터넷에 올리는 단계다. 사이트 코드는 GitHub 저장소에 있고, Cloudflare Pages가 그걸 가져다 빌드해서 배포한다. 한 번 연결해 두면 GitHub에 올리기만 하면 1~2분 뒤 사이트가 바뀐다. 이게 진짜 편하다.사이트 생성기는 파이썬 한 파일Hugo, Next.js 같은 도구도 있지만 나는 python3만으로 도는 생성기를 택했다. 글 원고(JSON) 폴더를 읽어서 홈·카테고리·글 페이지, 사이트맵, RSS를 site/dist 폴더에 만들어 낸다. Cloudflare 빌드 환경에 python3가 기본으로 있어서 따로 설치할 게 없다.빌드 명령: python3 site/build.py빌드 결과 폴더: site/distPages 프로젝트 만들기Compute ..

폴스나인 사이트 제작기 2편 | 가비아 도메인을 Cloudflare로 옮기기 — 네임서버 변경

자! 2편은 도메인이다. fls9.kr은 가비아에서 샀는데, 사이트는 Cloudflare에서 돌릴 거라 도메인 관리(DNS)를 Cloudflare로 넘겨야 했다. 방법은 간단하다. 가비아에 적힌 '네임서버'를 Cloudflare가 주는 주소로 바꾸면 끝. 말은 쉬운데 화면이 좀 헷갈린다.1. Cloudflare에 도메인 추가Cloudflare 대시보드 → Domains → Add a domain에 도메인 입력AI 크롤러 설정 화면이 나오면 Search: Allow는 꼭 유지(검색 노출·애드센스 심사 봇이 읽어야 한다)요금제는 맨 왼쪽 Free. 파란색으로 강조된 Pro는 안 골라도 된다DNS 레코드 확인 화면 → Continue마지막에 나오는 네임서버 두 개(xxx.ns.cloudflare.com)를 메..

폴스나인 사이트 제작기 1편 | 티스토리를 떠나 내 사이트를 만들기로 한 이유

자! 오늘부터 새 연재다. 이름하여 폴스나인 사이트 제작기. 축구 분석 블로그를 티스토리에서 굴리다가, 하루 만에 내 도메인(fls9.kr)으로 독립한 과정을 처음부터 끝까지 적어 본다. 개발 블로그라기보다는 '삽질 일지'에 가깝다. 막혔던 화면, 헤맸던 메뉴까지 솔직하게 다 적을 거다. 레스고~왜 떠났나티스토리는 시작하기엔 정말 편하다. 그런데 글을 매일 자동으로 올리기 시작하니까 벽이 하나씩 보였다.보안문자: 예약 발행을 걸어 둘 때마다 사람 확인 문자가 튀어나온다. 자동화하는 입장에선 이게 제일 큰 벽이었다.디자인 한계: 스킨을 아무리 고쳐도 '티스토리 느낌'이 남는다. 카드형 목록, 읽기 진행 막대 같은 걸 마음대로 넣기 어렵다.하고 싶은 게 많아졌다: 댓글을 내 방식대로, 나중엔 회원·커뮤니티까..