- html 파일을 올리는 방법을 써보려합니다.
- 저는 다른 블로그의 연동방법을 따라하다가 Import from Github 버튼을 누른 후에 Cloning이 뜨면서 시간이 지나도 작동이 안 되는 문제로 인해 저같은 문제를 가진 분들이 많을 것 같아 이 게시글을 써봤습니다.
- 연동→ html파일 올리기 → github에 push 하는 것까지 해보겠습니다.
1. 리플렛(Replit) 접속
회원가입 및 로그인을 진행해주세요
2. [Replit] Account 로 이동
- 왼쪽 상단에 닉네임을 클릭후 Account로 이동합니다.
3. [Replit] Connected services 에 GitHub 계정 연동
- 아래로 내리다보면 Connected services란을 볼 수 있어요
- 저는 이미 연결되어 있어서 Disconnect로 나와있는 걸 볼 수 있네요 !
- 확인이 되었다면 Github로 넘어갑니다
4. [Github] Repository 생성
- Repositoty 생성합니다. 저는 html 이라는 이름의 생성할 거예요
- 무조건 Public 을 체크!
- Add a README file 을 클릭 ( 여기서 오류가 났었던 건데요 만약에 파일을 체크해주지 않으면 Import from Github버튼을 누른 후에 Cloning이 뜨면서 시간이 지나도 작동이 안 되는 문제를 가져갈 수 있어요.)
5. [Replit] Create 생성 및 깃허브 파일 연동시키기
- Replit 사이트 왼쪽 상단에 Create를 눌러줍니다.
- 그리고 생성되는 오른쪽 상단 Import from GitHub 클릭 !
- 우리가 만들었던 Html repository 기억나시죠 ? 이 녀석 눌러주고 Import from GitHub까지 눌러줍니다.
- 위와같이 <클론중 .. !> 거의 다 왔네용 이제 이렇게까지 하면 깃허브를 리플렛에 연동시키는 것까지 한 겁니다.
- 저희는 작성한 파일을 도중에 연결하는 것이 아니라 아무것도 없는 빈 파일에서 html파일을 생성한 후 ! 그 파일에 코드를 입력하여 연동해줄 것 입니다.
- 저 같은 경우는 작성된 html파일이 있었는데 그 파일을 깃허브에 올리고 싶어서 새로운 html파일 (내가 원하는 name명을 가진 파일이겠쬬? ) 을 생성해서 올리는 것이였습니다.
6. [Replit] 파일 셋팅하기
- 로딩이 끝난 직후에는 상단처럼 나올건데요! 저희는 그럼 빨간색 네모부분의 설정을 하러 갈 겁니다.
- Html,Css,Js 까지 정하는건 괜찮았죠
- configure the run button에서 난관에 봉착했어요 여기서 뭘 해야하는지 모르겠더라구요
- Run 버튼을 구성하려면.replit 파일을 만들어줘야합니다.
💡 온라인 컴파일러 Replit사이트는 linux기반으로 실행파일과 결과물을 관리할 수 있습니다. 우리는 이 linux기반에 파일에 걸맞는 환경을 만들어줘야하는데요. 그러기위해선 처음 .replit파일을 만들어줘야 합니다.
💡 Repl에 대한 자세한 설명이 더 필요하신 분들은 링크 클릭!
- 입력 후 Done 을 누르면 아래와 같은 셋팅까지 완료됩니다.
7. [Replit] index.html 파일을 만들어 실행창 확인하기
- 여기서 우리는 index.html파일을 꼭 만들어줘야 정상작동합니다.
- index.html파일이 주 메인 화면이라고 생각해야하고 다른 파일을 만들었을 때 화면에 뜨지 않기 때문이죠.
- 파일 열기 추가
- index.html 이름으로 생성해줍니다.
- 그리고 아래 코드를 복사해서 붙여넣어줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>All About Me</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>- 붙여 넣은 후 Run 을 눌러 정상작동하는지 확인합니다.
- 아무런 동작이 없으면 정상작동하는 것과 같아요 그래도 뭔지 모르겠다 ?! 하면 바로 안에 hello 입력하고 Run을 클릭하여 hello가 잘 뜨는지 확인해요.
- 정상작동 중인 화면이 되었네요
- index 파일에서 진행하고 싶은 사항들을 진행하면 됩니다.
- 절대 index파일은 지우시면 안됩니다. (만약 지우게 되면 error가 시작됩니다ㅜㅜ)
7-1. [번외] index 파일이 아닌 다른 파일로 실행하고 싶어요
- 저같은 경우 다른 이름을 가진 파일로 여러파일을 생성하거나 혹은 폴더를 만들어 폴더 안에 넣고 관리하고 싶었는데요
- 만약 이 사항이 필요없다면 commit하는 과정 8.로 넘어가시면 됩니다.
💭 새로운 파일을 만들어서 동작시켰는데 결과가 화면에 나오지 않아요
- index파일이 아닌 새로운 파일을 생성해서 동작시켰는데 화면에 나오지 않아요! 라는 에러가 있습니다.
- Replit 환경 안에서는 오직 index.html에서만 화면에 동작시켜줘요 그렇기 때문에 href를 이용해 링크를 새로 여는 방법으로 보셔야 합니다.
- 일단 어떻게 안되는지 아래 사진을 보시죠 !
- 이 경우 index.html 파일로 돌아가 아래의 코드와 같이
href=”파일경로”를 입력해주고 Run 클릭
<a href="test.html">test file click!</a>
- 출력 결과
- 클릭해줍니다
- 그럼 이렇게 내가 원하는 출력값을 얻을 수 있습니다 .
💭 새로만든 파일을 ‘폴더’안에 넣고 싶어요
- 만약 위와같은 상황 중 폴더를 만들어 안에서 관리하고 싶다 ! 면 위와 동일하게 진행해주시되 마지막 href 코드만 바꿔서 작성해주시면 됩니다.
- 만약 a 폴더 안에 b폴더 안에 존재하는 test/html의 경우에는 href="/b/test.html"로 지정해주어야 합니다
- 따라서 저는 b폴더를 만든다고 하면 아래와 같은코드가 되겠죠?
<a href="/b/test.html">test file click!</a>8. [Replit] 깃허브에 Commit & push 하기
- 왼쪽 가지처럼 생긴 아이콘을 클릭하고 commit & push 를 눌러줍니다.
- 저는 지금 처음이니까 comment 에 first commit 이라고 이름을 붙여서 올려보겠습니다.
- 짠! 다 올라갔습니다 ㅎㅎㅎ
이렇게 Replit을 이용해서 깃허브에 올리는 법을 알아봤는데요
사실 코딩테스트용으로 사용하려고 만든거였는데 다른 과제를 하다보니 html을 사용해서 올려야하다보니까 이렇게 머나먼 길을 떠나게 되었네요
깃허브 너무 어렵지만 또 이렇게 알고나니 재밌네요 수고했다 내자신 ☺️
📚 출처
-
Replit site : html 관련문서
- 오리지날 초이 : 온라인 컴파일러 사용법
- Replit site : index.html 문서 외에 출력이 안되는 해결법
- 개발자의 개발 블로그 : a 태그 사용법과 href의 상대 경로 지정하기
