072DATA

나만의 추억 앨범 - 배포, Github, Github Pages 사용하기 본문

Anything/Git, Github

나만의 추억 앨범 - 배포, Github, Github Pages 사용하기

0720 2024. 7. 24. 12:39

안녕

 

오늘은 배포와 Github, Github Pages 에 대해서

 

공부한 내용을 기록하고 정리해 보도록 하겠습니다.

 

 

 

나만의 추억 앨범 관련 링크들

 

1편

https://0723-0725.tistory.com/25

 

나만의 추억 앨범 만들기 - 페이지 디자인편(Bootstrap, HTML, CSS)

안녕저는 이제 추억 앨범을 만들어 볼건데 오늘은 디자인 위주로 작성해 보겠습니다. 사실 이미 진행한 프로젝트이지만 제대로 기록하기 위해 블로그에 남겨볼까 합니다.    먼저 보면 좋

0723-0725.tistory.com

 

2편

https://0723-0725.tistory.com/26

 

나만의 추억 앨범 만들기 - 자바스크립트 적용( JQuery, Fetch )

안녕   이번에는 이전에 추억 앨범 페이지에 동적인 요소들을 추가하기 위해 javascript를 적용할 것이고 JQuery를 사용하여 javaScript를 더욱 간편하게 사용해 보도록 하겠습니다.     JQuery는 HT

0723-0725.tistory.com

 

3편

https://0723-0725.tistory.com/27

 

나만의 추억 앨범 만들기 - 데이터베이스 활용( Firestore Database )

안녕 안녕하세욥 오늘은 데이터베이스를 활용해서 저장된 데이터를 토대로 새로운 카드들을 렌더링 하겠습니닷 이전 글도 보시는 걸 추천하며 시작해보도록 하겠습니다.  파이어 베이스 사

0723-0725.tistory.com

 


 

배포란?

 

 

 

배포는 소트프웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을

 

실제 사용자들에게 제공하는 과정을 말합니다.

 

쉽게 말하면 만들어 놓은 작업 물을 외부에 공개하는 일입니다.

 

 

 

URL이란?

 

 

 

"Uniform Resourse Locator" 의 약자로 인터넷에서 특정 리소스의 위치를 나타내는 주소입니다.

 

간단히 말해 웹 페이지나 파일의 고유한 주소로 생각할 수 있습니다.

 

 

*URL의 일반적인 형식

프로토콜://도메인/경로

 

 

 

프로토콜(protocol) : 웹 브라우저와 웹 서버 간의 통신 방식을 지정합니다. 가장 일반적으로

사용되는 프로토콜은 "http://"와  "https://"입니다.

 

도메인(domain) : 인터넷 상에서 고유한 식별자로 사용되는 웹 사이트의 주소입니다. 도메인은

일반적으로 사이트의 이름과 최상위 도메인(Top-Level Domain, 예: com, org)으로 구성됩니다.

 

경로(path) : 웹 사이트 내에서 특정 페이지나 파일의 위치를 지정합니다. 경로는 슬래시("/")로

구분된 디렉토리 경로와 파일명으로 구성됩니다.

 

ex) https://spartacodingclub.kr/catalog

예를 들어, https://spartacodingclub.kr/catalog 라는 URL은 HTTPS 프로토콜을 사용하며,
spartacodingclub.kr 이라는 도메인에 위치한 catalog라는 경로에 있는 페이지를 나타냅니다.

 

 

 

URL을 사용하여 웹 브라우저에서 웹 페이지에 접속하거나, 웹 서버에서 파일을 다운로드하거나, 웹 사이트 간에

정보를 전달할 수 있습니다. URL은 웹의 기본적인 동작과 정보의 위치를 식별하는 데 중요한 역할을 합니다.

 

 

Github 

 

깃허브는 코드 버전 관리를 통해 협업을 지원하는 플랫폼입니다.

개발자들은 이슈 트래킹, 코드 리뷰, 문서화, 그리고

*GitHub Pages를 통한 웹 호스팅 기능을 활용할 수 있습니다.

이를 통해 프로젝트의 효율적인 개발 및 관리를 도와줍니다.

 

간단히 요약하자면, 인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳입니다.

 

깃허브의 주요 기능

 

코드 관리 : 깃허브는 코드의 버전 관리를 할 수 있습니다.

 

협업 : 여러 개발자가 한 프로젝트에 참여할 수 있습니다.

 

문서화: 프로젝트의 문서를 쉽게 작성하고 유지할 수 있는 기능을 제공합니다.

 

*웹 호스팅: 깃허브 페이지(GitHub Pages)를 사용해 정적 웹사이트를 호스팅할 수 있습니다.

이는 프로젝트 문서화, 포트폴리오, 블로그 등을 손쉽게 배포할 수 있는 기능입니다.

 

 

 

 

Github 회원가입

 

Github 링크

https://github.com/

 

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com


 

 

 

 

 

 

 

Github 메인 페이지이며 우측 상단에 Sign up을 눌러서 회원가입 합니다.

 

 

 

 

 

Email과 패스워드, 닉네임을 입력하고 Continue를 눌러줍니다

 

 

 

 

 

보안 절차에 따라서 해당 퀴즈를 풀어주고 나서 제출해줍니다.

 

 

 

 

 

 

입력된 아이디로 온 보안코드를 입력합니다.

 

 

 

로그인 후 메인페이지로 들어가지면서 회원가입이 완료됩니다. 


 

 

 

Github Pages 사용해보기

 

 

깃허브 페이지(GitHub Pages)를 사용해 정적 웹사이트를 호스팅할 수 있습니다.

이는 프로젝트 문서화, 포트폴리오, 블로그 등을 손쉽게 배포할 수 있는 기능입니다.

 

이제 제가 만들었던 페이지를 직접 배포해 보겠습니다.

 

 

 

Repositroy New

 

 

 

 

메뉴바에서 Repository  선택 후 New 버튼을 눌러줍니다.


 

Repository Name

 

 

 

레파지토리 이름을 작성하고 생성해줍니다.


 

uploading an existing file

 

uploading an existing file 을 클릭 해줍니다.

 


Commit changes

 

 

파일을 선택하고 Commit changes를 눌러줍니다


Settings

 

 

생성된 Repository에서  setting으로 들어가줍니다.


 

Pages

 

 

 

메뉴에서 Pages로 들어가 None을 main으로 바꿔준 뒤 save하고 기다려줍니다.


visit site

 

 

 

 

visit site 버튼을 클릭하여 페이지를 들어가줍니다.


 

 

 

제가 만들었던 페이지를 이제 누구든지 볼 수 있는 페이지로 만들었습니다.


 

마무리

 

배포와 인터넷 통신에 대해 알아보았고

 

프로토콜에 대해서 많이 궁금했는데 오늘 내용은 기똥찼다

 

또 드디어 Github Pages를 사용하여 아주 간단하고 쉽게

 

페이지를 배포해보았고  아마 아주 쓰임새가 많을 것으로 보인다.

 

앞으로가 기대되며 하루하루 얻어가는 것들이 많은 것 같다

 

다 내껄로 만들어버리자.

 

 

'Anything > Git, Github' 카테고리의 다른 글

많이 사용하는 Git 명령어 1  (0) 2024.07.15
기본적인 Git 명령어 6가지  (0) 2024.07.15