Cloudflare를 이용해 GitHub Pages를 서브도메인(web.도메인.com)으로 설정 - aquaxysgit/aquaxys.site GitHub Wiki

Cloudflare를 이용해 GitHub Pages를 서브도메인(web.도메인.com)으로 설정

1. GitHub Pages 만들기

1.1 리파지토리 생성

image

이름 입력

public 필수 (나중에 수정 가능)

Add a README file

Create Repository

1.2 Pages 구성

image

Create new file은 폴더를 만들 때 사용

image

"abc/" 입력하면 폴더 생성 가능

text 파일의 경우 "123.txt(html, json..)" 입력 후 텍스트 내용 입력

[Commit changes]

upload files는 파일 올리기 편리

image

파일을 선택하여 drag & drop 하면 파일리스트가 아래 생김

[Commit changes]

Pages 구성을 위한 필수 파일

image

.github/workflows/gh-pages.yml

index.html

privacy.html (Pages를 구성한 이유인 '개인정보처리방침' 페이지)

.github/workflows/gh-pages.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./  # index.html이 위치한 경로

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>aquaxys.site</title>
</head>
<body>
  <h1>aquaxys.site page</h1>
</body>
</html>
privacy.html

image

1.3 Pages 배포(deploy)

image

[Settings] - [Pages] - [Deploy from a branch] - [main▼ | /(root)▼] - [Save]

                 - [Custom domain] - [web.도메인.com] - [Save]

배포한 Pages 주소

image

[Settings] - [GitHub Pages] - [Your site is live at http://xxx.github.io/xxx] - [Visit site]

image

1.4 Cloudflare DNS 레코드 추가

https://dash.cloudflare.com/

image

[DNS] - [레코드] - [레코드 추가] - [유형 : CNAME] - [이름 : web] - [대상 : 깃허브 페이지 주소 : xxx.github.io 까지만 입력]

                                                 ∴ web (원하는 서브도메인 이름 api, sub..)

추가된 모습

image

github pages에서 custom domain 부분 √ DNS check successful

image

서브 도메인 Pages 접속 결과

image

⚠️ **GitHub.com Fallback** ⚠️