본문 바로가기
마케팅

GitHub.io블로그 만들기.페이지 설정 방법,블로그 구축

by 개발 환경 2025. 2. 16.
반응형

🌐 GitHub.io 블로그 만들기, 쉽고 빠른 가이드

GitHub Pages는 무료로 정적 웹사이트를 호스팅할 수 있는 서비스로, 개발자뿐만 아니라 블로그를 운영하고 싶은 사람들에게도 유용합니다. 이 글에서는 GitHub.io 블로그를 만들고 Jekyll을 활용하여 커스터마이징하는 방법까지 자세히 설명하겠습니다.

1. GitHub.io 블로그란?

GitHub.io 블로그는 GitHub Pages를 활용하여 정적 웹사이트를 손쉽게 구축할 수 있는 서비스입니다. 일반적인 웹 호스팅과는 달리 서버 관리가 필요 없으며, GitHub 저장소를 기반으로 운영되기 때문에 버전 관리와 협업이 용이합니다.

 

개발자뿐만 아니라 개인 블로그, 포트폴리오 사이트, 프로젝트 문서화 등 다양한 용도로 활용할 수 있으며, 간단한 설정만으로 프로그래밍 경험이 없는 사람도 쉽게 사용할 수 있습니다.

 

GitHub 저장소(Repository)를 통해 HTML, CSS, JavaScript 등의 정적 파일을 업로드하고 이를 웹사이트 형태로 배포할 수 있습니다. 또한, Jekyll과 같은 정적 사이트 생성기를 활용하면 마크다운(Markdown) 파일을 이용해 블로그를 자동으로 생성할 수도 있습니다.

 

무료로 제공되며, GitHub 계정만 있으면 누구나 이용할 수 있습니다. 특히 개발자들은 GitHub Pages를 활용하여 프로젝트의 문서를 제공하거나, 개인 포트폴리오를 구축하는 등 여러 가지 목적으로 사용할 수 있습니다.

 

Jekyll을 사용하면 마크다운을 지원하는 블로그 형태의 웹사이트도 쉽게 만들 수 있으며, 다양한 테마를 활용하여 디자인을 자유롭게 변경할 수 있습니다.

 

또한, 맞춤 도메인 연결도 가능하여 개인 브랜딩을 강화하는 데 유용합니다. 이를 통해 "username.github.io" 형태의 기본 도메인을 사용할 수도 있고, 개인 도메인을 설정하여 더욱 전문적인 웹사이트를 운영할 수도 있습니다.

2. GitHub Pages 설정 방법

GitHub Pages를 사용하려면 우선 GitHub 계정이 필요하며, 간단한 설정을 통해 정적 웹사이트를 배포할 수 있습니다.

  1. GitHub 계정에 로그인한 후, 새 저장소(Repository)를 생성합니다.
    • 저장소 이름을 "username.github.io" 형식으로 설정합니다.
    • 저장소는 공개(Public) 저장소로 설정해야 합니다.
  2. Settings → Pages로 이동하여 "Deploy from a branch" 옵션을 선택합니다.
    • "main" 또는 "docs" 브랜치를 선택하고 저장하면 GitHub Pages가 활성화됩니다.
  3. index.html 파일을 업로드하면 기본 웹사이트가 공개됩니다.
    • HTML, CSS, JavaScript 등의 정적 파일을 직접 업로드하면 해당 내용이 웹사이트로 표시됩니다.
    • 또는 README.md 파일을 이용하여 마크다운 방식으로 기본 웹사이트를 설정할 수도 있습니다.
  4. 배포가 완료되면 "https://username.github.io" 주소로 접속할 수 있습니다.
    • GitHub Pages는 무료로 HTTPS 인증서를 제공하므로, 보안성이 뛰어난 웹사이트를 운영할 수 있습니다.
    • 설정 변경 후 웹사이트가 적용되기까지 몇 분 정도 소요될 수 있습니다.

GitHub site
GitHub site

 

 

3. Jekyll을 활용한 블로그 구축

Jekyll은 GitHub Pages에서 기본적으로 지원하는 정적 사이트 생성기로, 블로그를 쉽게 만들고 관리할 수 있도록 도와줍니다. 마크다운(Markdown) 파일을 HTML로 변환하여 블로그 형식으로 정리해주는 역할을 합니다.

Jekyll 설치 및 초기화

Jekyll을 사용하려면 Ruby가 설치된 환경이 필요하며, 다음 명령어를 사용하여 Jekyll을 설치할 수 있습니다.

bash
복사편집
gem install jekyll bundler

이후, 터미널에서 아래 명령어를 실행하여 Jekyll 프로젝트를 생성합니다.

bash
복사편집
jekyll new myblog

프로젝트 폴더로 이동한 후 Jekyll을 실행하면 로컬 환경에서 블로그를 미리 볼 수 있습니다.

bash
복사편집
cd myblog bundle exec jekyll serve

이제 http://localhost:4000 주소로 접속하면 Jekyll 블로그를 확인할 수 있습니다.

Jekyll 테마 적용 및 커스텀

Jekyll은 다양한 무료 테마를 지원하며, 원하는 테마를 선택하여 적용할 수 있습니다.

  1. Jekyll 테마 찾기
    • Jekyll Themes 또는 GitHub에서 다양한 오픈소스 테마를 찾아볼 수 있습니다.
  2. 테마 적용하기
    • _config.yml 파일을 수정하여 테마를 변경할 수 있습니다.
    • 또는 원하는 테마의 저장소를 포크(Fork)한 후 GitHub Pages에 배포할 수도 있습니다.

4. 테마 및 디자인 변경하기

Jekyll 테마를 활용하면 블로그의 디자인을 쉽게 변경할 수 있으며, 직접 HTML 및 CSS를 수정하여 더욱 세부적으로 커스터마이징할 수도 있습니다.

  • _config.yml 파일을 수정하여 블로그의 기본 설정을 변경할 수 있습니다.
  • CSS와 HTML 파일을 직접 수정하면 원하는 스타일로 디자인을 변경할 수 있습니다.
  • 블로그에 Google Analytics, 댓글 시스템 등을 추가하여 기능을 확장할 수도 있습니다.
  • 최신 디자인을 유지하려면 테마 업데이트를 정기적으로 확인하는 것이 좋습니다.

5. 사용자 도메인 연결 방법

GitHub Pages는 기본적으로 username.github.io 형식의 도메인을 제공하지만, 개인 도메인을 연결하여 더욱 전문적인 웹사이트를 운영할 수도 있습니다.

  1. 도메인 등록 업체에서 CNAME 설정을 해야 합니다.
    • 네임서버에서 CNAME 레코드를 설정하여 username.github.io로 연결합니다.
  2. GitHub 저장소 루트에 CNAME 파일을 생성하고 도메인을 입력합니다.
    • 파일 내용에 개인 도메인을 입력한 후 저장하면 적용됩니다.
  3. DNS 설정에서 "A Record"와 "CNAME Record"를 추가해야 합니다.
    • A 레코드에는 GitHub의 IP 주소를 입력합니다.
    • CNAME 레코드는 username.github.io를 가리키도록 설정합니다.
  4. 변경 사항이 반영되기까지 최대 24시간이 걸릴 수 있습니다.
    • 도메인 연결 후 일정 시간이 지나야 정상적으로 적용됩니다.
  5. SSL 인증서는 GitHub Pages에서 자동으로 제공됩니다.
    • 보안 강화를 위해 HTTPS 설정을 활성화하는 것이 좋습니다.

6. 자주 묻는 질문 (FAQ)

Q: GitHub Pages는 무료인가요?
A: 네, GitHub Pages는 무료로 사용할 수 있으며, 공개 저장소를 통해 무제한으로 웹사이트를 호스팅할 수 있습니다.

Q: 개인 도메인을 연결할 수 있나요?
A: 네, CNAME 및 A 레코드 설정을 통해 개인 도메인을 연결할 수 있습니다.

Q: GitHub Pages에서 동적인 기능을 사용할 수 있나요?
A: 아니요, GitHub Pages는 정적 사이트만 호스팅할 수 있으며, PHP 또는 데이터베이스와 같은 서버 기능은 지원하지 않습니다.

반응형