안녕하세요.
링크트리 페이지 코딩으로 만들기 3탄입니다.
1탄과 2탄은 아래 링크를 참고해주세요.
2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1)
인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1)
안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인
bebutae.tistory.com
2022.08.11 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2)
인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2)
안녕하세요. 링크트리 페이지 코딩으로 만들기 2탄입니다. 우리는 HTML과 CSS로 코딩한 페이지를 깃허브 저장소에 올리고, Netlify를 깃허브 저장소에 연동시켜 웹페이지를 배포할 예정입니다. 1탄
bebutae.tistory.com
1탄과 2탄에서는 웹페이지를 코딩하고, 깃허브에 저장했습니다.
3탄에서는 저장된 웹사이트를 배포해서 다른 사람들이 접속 가능하도록 만들어보겠습니다.
우선은 Netlify에 회원가입을 해야합니다.
Netlify: Develop & deploy the best web experiences in record time
A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!
www.netlify.com
위 링크에 접속해서 [Sign Up] 버튼을 눌러 깃허브 계정을 통해 회원가입 해주세요.
우리는 깃허브에 코드를 저장해두었으니 [Import from Git]을 클릭해줍니다.
우리의 [Git provider]는 [GitHub]이니 그걸 눌러주세요.
그럼 다음으로 저장소 권한을 부여해야하는데, [All repositories]를 선택 하시면 됩니다.
그 다음으로는 불러오길 원하는 저장소를 골라야 합니다.
만약 원하는 저장소 이름이 없으면 하단에서 위 이미지와 같이 [Configure the Netlify app on GutHub]를 눌러주세요.
Only select repositories에서 [Select repositories]를 클릭해서 원하는 저장소를 골라줍니다.
우리가 원하는 저장소를 골라 [Deploy] 버튼을 눌러줍니다.
그럼 잠시 후 웹사이트 주소가 뜹니다.
[Domain settings]를 클릭합니다.
[Options]를 클릭한 뒤 [Edit site name]을 클릭해주세요.
웹사이트 주소로 사용하고 싶은 이름을 적어줍니다.
저는 puppysclimbinglistoflink.netlify.app으로 설정해주었습니다.
여기서 netlify.app 부분은 바꿀 수 없습니다.
결국 우리 웹사이트의 주소는 XXXXX.netlify.app이 됩니다.
다른 웹사이트를 더 배포하고 싶으신가요?
Netlify에 로그인 후 [Add new site]를 눌러서 [Import an existing project]를 눌러줍니다.
다음은 최초 배포시와 똑같이 해주시면 됩니다.
제가 만든 웹사이트의 링크는 아래에서 확인 가능합니다.
고생하셨습니다.
'코딩 > 웹 프로그래밍' 카테고리의 다른 글
| 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) (0) | 2022.08.11 |
|---|---|
| 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) (0) | 2022.08.01 |
| Vue - Vue가 뭔가요?, Vue 설치하기 (0) | 2021.12.31 |
| HTML[2] - 주요 태그 배우기 (0) | 2021.08.21 |
| HTML[1] - HTML이란? (0) | 2021.07.25 |
