🚀 자동배포 세팅 가이드 (GitHub + Netlify)

KSmate 안전보건팀 · 초보자용 클릭 단위 안내 · 목표: ZIP·파일교체 없이 데이터만 고치면 홈페이지 자동 갱신
이 문서의 목표
지금은 데이터를 고치면 events.json·accidents.json 같은 파일을 직접 교체해야 합니다.
이 설정을 한 번만 해두면, 앞으로는 GitHub에서 파일만 고치면 홈페이지가 자동으로 바뀝니다(ZIP·업로드 불필요).
참고 — KSmate 기업 홈페이지(ksmatefm.com)는 이미 Netlify + Gabia로 운영 중입니다. 같은 Netlify 계정을 쓸 수 있는지 확인 필요(담당자/관리자 계정 문의). 계정이 이미 있으면 2단계부터 시작하면 됩니다.

준비물 (무료)

항목용도비용
GitHub 계정사이트 파일 보관·수정무료
Netlify 계정자동 배포(인터넷 공개)무료
배포판 폴더현재 ZIP을 푼 사이트 파일 전체-

1단계 · GitHub 저장소 만들기

  1. github.com 접속 → Sign up으로 계정 생성(이메일·비밀번호). 이미 있으면 Sign in.
  2. 오른쪽 위 + → New repository 클릭.
  3. Repository name에 ksmate-safety 입력 → Private(비공개) 선택 권장 → Create repository.
  4. 다음 화면에서 uploading an existing file 링크 클릭.
  5. 현재 배포판 ZIP을 푼 폴더의 파일을 전부 선택해 끌어다 놓기(drag & drop). 폴더째가 아니라 안의 파일·폴더 전체를 올려야 index.html이 최상단에 옵니다.
  6. 아래 Commit changes 클릭 → 업로드 완료.

2단계 · Netlify에 연결해 자동배포

  1. netlify.com 접속 → Sign up → GitHub로 로그인(Sign up with GitHub) 선택 → 권한 허용.
  2. 상단 Add new site → Import an existing project 클릭.
  3. Deploy with GitHub → 방금 만든 ksmate-safety 저장소 선택.
  4. 설정은 그대로 두고(빌드 명령 불필요, 정적 사이트) Deploy site 클릭.
  5. 1~2분 뒤 랜덤이름.netlify.app 주소가 생성됨 → 클릭하면 사이트가 열립니다. 배포 끝.
  6. 주소 이름 바꾸기: Site configuration → Change site name → 예: ksmate-safety.

3단계 · 이후 업무 방식 (핵심)

[지금까지] 데이터 수정 → 파일 내려받기 → 사이트에 파일 교체(수동) [이제부터] 데이터 수정 → GitHub에서 파일 교체 → Netlify가 자동으로 홈페이지 갱신
  1. 관리자 화면(예: accident-admin.html)에서 입력 → 내려받기로 accidents.json 받기.
  2. GitHub 저장소 → data 폴더 → 해당 .json 클릭 → 연필(✏️) Edit 또는 Upload files로 새 파일 덮어쓰기.
  3. Commit changes 클릭 → 수 초~1분 내 홈페이지 자동 반영. ZIP·수동 업로드 없음.

4단계 · 회사 도메인 연결 (선택)

  1. Netlify Domain settings → Add a domain에 원하는 주소 입력.
  2. 안내되는 DNS 값(CNAME 등)을 Gabia 도메인 관리에 입력. 확인 필요: 도메인·DNS는 기업 홈페이지와 동일 관리자가 담당 → 담당자 협의 필요.

체크리스트

확인항목
□기존 KSmate Netlify 계정 사용 가능 여부 확인(중복 계정 방지)
□저장소 Private로 생성(사고·교육 데이터 비공개)
□index.html이 저장소 최상단에 위치(폴더 안 파일 전체 업로드)
□배포 후 data/*.json 수정 → 자동 반영 1회 테스트
□관리자 화면(admin·accident·ra·training) 접근 제한 검토(2단계에서 로그인 추가 가능)

주의사항