WEB1 – 18. 웹호스팅 : github page
Articles,  Blog

WEB1 – 18. 웹호스팅 : github page

It’s not easy to manage a web server by yourself First you need to have a computer, and it must be turned on 24 hours like a fridge since you don’t know when someone tries to connect to it And you have learn about and install a program called web server And then you need to set it up so that it can be connected to the outside through the Internet It’s not easy So, there are companies who do it for you Each computer connected to the Internet is called a “host” And a service that rents out host computers is called “hosting” And web hosting providers refer to companies who rent out web servers professionally So if you want to look for them, search “web hosting” in a search engine Then you can find many companies that rent out web servers for you There are lots of web hosting providers Among them, we are going to use a free and famous service, which is called “Github” GitHub is a vital service that is a household name among programmers Lots of open source softwares around the world are developed using this service We can learn more about what this service does later on, for now, let’s focus on one feature this service provides, which is providing a web server so that we can run a homepage for free! Let’s try it out First, you need to sign up As you see, there are “Sign in” and “Sign up” Click Sign up to register to the service First, finish signing up And once you are done, click sign in to log in to the service Then you will see this page It might look quite complicated since it has a lot of features What we are looking for is… “New repository” button You can find it over here, or find it up there by clicking the “+” button Find it in any way you prefer “Repository” means a location in which something is stored So we can store the source code we have written so far to this GitHub website You might be familiar with services such as Dropbox, Google Drive… iCloud…OneDrive… They store your files, right? That’s what this website basically does The only difference is it’s designed for programmers Alright, now I’m going to click “New repository” On this page titled “Create a new repository,” Specifiy your repository name You can use your project name I’m typing in web1 You can skip the next box Make sure “Public” is checked And check the box next to “Initialize this repository with a README” What this means is… You can just check it You don’t need to understand this for now but make sure it’s checked And then click “Create repository” Then you just requested to create a repository Ta-da! This is it And you can upload the source code you have been working on here Then what’re the benefits? Since your source code is now on the Internet, it is safe even if your computer is broken Let’s upload some files then First, look for this “Upload files” button You can use it to upload your files Click it It says you can drag and drop the files you want to upload here or choose your files I’m going to select “Choose your files” And where is the folder for our project? It’s “web1” for me So if you open the folder, there are files we have been working on You can select multiple files by clicking somewhere in the window and dragging Select the files… And click Open Then the upload starts Once the uploading completes, now we are going to store them Down here, you can write some text to explain what the content is about For example, as this is our first version, I’m typing in “first version” And if you click “Commit changes,” the files are stored now And if you have made a revision to your file, you can upload the updated files again Describe the changes made over here and then click “Commit changes” to store the files So we describe saving changes whenever there is an update as “managing versions” But this is not the main topic of this chapter You can just move on Anyway, now the uploading starts and it will complete soon Done now See? Our files are on the GitHub website And now you can give the address to your friends and they can view your files Let’s click one of these We can see the content of the files right from this window And if you made an edit, you can upload the file Good Next, what we are going to do is… We have uploaded HTML files And generously, GitHub also provides a computer with a web server for free so that we can use these files to run a website To do that, first we need to change some settings Go to “Settings” And scroll down… to find “GitHub Pages” Under “Source” If you click “None,” you will see a dropdown menu It’s okay if you don’t know what they mean for now Select “master branch” And Save And if you wait for a moment you can see this address displayed That means you can use this address for your website If I click it… Ta-da! Now we are seeing the web page we created So now, If you share the address you’ve got from GitHub to your friends and other people they can view your files Let’s click the links They work fine like this But, it’s possible they don’t work when you try to connect through the address If that happens, type in “index.html” directly at the end and it will probably work fine So, now we can make our website available to anyone in the world by using the GitHub service for free, without running a web server and server computer And you don’t need to pay anything no matter how many people visit your website What a great world! So, this is it for web hosting Before we wrap up, let’s sum up what we’ve done in this chapter with a diagram On your computer, there’s index.html And you want to make other people access the file But you can’t – why? There’s no web server installed on your computer Moreover, you haven’t set up your computer so that people can connect to it from outside In other words, you need to learn and install and set things up It’s so complicated So, as it’s difficult to do it by yourself, you looked for a company who could do it for you And we used “GitHub” as our example So if you upload your index.html to GitHub, The file is now on GitHub And if you change your GitHub settings to request, “I’m going to use the repository also as a web server,” GitHub enables the web server and give you an address And if anyone visits this address, they can take the index.html file So you can give the address to your visitor they will type in the address into the address bar and connect to the web server Then the web server reads the index.html file and sends it back to the visitor And the file is displayed on the visitor’s web browser so that they can view the file As I mentioned earlier, Each computer connected to the Internet is called a “host” And the service that provides computers connected to the Internet is called “hosting” service And if the purpose of the hosting service is the web service, then we call it “web hosting” specifically In addition, services designed for those who want to service HTML files only, like us, (you might not be able to understand this) it’s called “static web hosting” There are many free or low-cost “static web hosting” services available If you learn PHP, Python, Ruby on Rails, etc. in the future, you might need “dynamic web hosting” But this is beyond the level you can understand now Anyway, this is how web hosting works If you get a general sense of it, that’s sufficient That’s it for web hosting for now What we’ve just learned about web hosting is quite easy, but there are many hidden principles that explain how the Internet works since these web hosting services do most tasks for us So there are still other things you need to learn but we couldn’t cover in this course But in reality, when you run a web server, mostly you don’t get to run it by yourself since it requires much knowledge and knowhow As you have seen, in most cases, people usually use service providers with experts Lastly, you might want to use a web hosting service in the future, but it’s likely that GitHub Pages might not be a perfect fit for your business or you might want a different service So I’m going to share some search suggestions before we end this video You can of course search “web hosting” but there are many kinds of web hosting So you perhaps wants to limit your search results to those we’ve learned And there are lots of free services or partially paid services where it’s free until you reach a certain usage For this type of service, you can add “static” to get more accurate results And you can also add “free” if you are looking for free services Currently, there are a few services I’d like to recommend Some of them are free, while you can use some others without even signing up And some of them support certain features that let you combine them with other advanced services So these are the services I recommend However, since no one knows what they will be like in the future, what’s more important for you is developing the ability to find what you need through search That’s it!


  • Andrew Lee

    좋은 영상 감사합니다.
    Git에 호스팅 하면 얻게되는 도메인 주소는 제가 원하는데로 바꿀수 없나요??

  • Sanghyeon Lee

    진짜 감사합니다. 전자공학인데 프로젝트하다가 컴공 멘토님이 서버 다루는거 보고 너무 어렵다고 생각했는데 정리가 됐어요. 감사합니다.

  • Karen Kim

    안녕하세요 이 댓글을 보실 수 있으시면 정말 좋을텐데 저는 7:15초까지 하신대로 하고 제 사이트 링크 클릭을 했는데, 처음에 readme 에 적혀있는 web이라고 떴어요. 선생님과 제 코딩들의 이름이 달라서 그런가 싶어서, WEB 설명이 들어가 있는 html 이름을 index.html이라 바꾸고 다시 제 사이트 링크를 클릭을 했더니 error가 떴어요. 그래서 readme를 지워도 보고 다시 넣어도 봤는데도 이젠 아무것도 안뜨고 error만 뜨네욤… 어떻게 하면 좋을까요ㅜㅜㅜㅜㅜ

  • M OO

    궁굼한게 있어요.

    예를들어 index.html에서 메뉴(A) 를 만들고 A를 눌렀을때 a.html로 이동한다고 가정했을 때

    a.html에는 A와 관련된 글의 목록을 표시해주고 싶다면, 일일이 html에 하드코딩하는건 당연히 아니라고 생각해서… 이럴 땐 어떻게 처리를 해야하나요?

  • 미그

    혹시 7:15 이후에 페이지 에러가 뜨시는 분은 참고해 주세요
    Settings 맨 위에 Repository name을 web1에서 web1.html로 변경 뒤 Rename 칸을
    클릭해주시면 정상적으로 작동합니다

  • gyool cheerful

    readme.md파일에 써져 있는 것만 나오게 되고 나머지는 안나오게 되네요..ㅠ.ㅠ 어떻게 해결 할수 있을까요

  • 이기영

    혹시 웹호스팅을 여러곳에서 할수있는건지 궁금합니다 예를들어 깃허브에서부터 아마존까지 한가지웹사이트를 여러웹호스팅할수 있는지 궁금합니다.

  • seungcheol Lee

    영상 잘 봤습니다! 덕분에 처음으로 웹페이지란걸 만들어봤네요ㅎㅎㅎ
    근데 한 가지 에러가 떴어요..
    다른건 다 잘 되는데 제가 만든 페이지에 [사진]이 깨져서 보이네요…ㅜㅜ
    제가 index.html, 1.html, 2.html, 3.html, 4.html 까지 만들었는데 인덱스랑 1.html에 있는 사진은 잘 보이는데 3이랑 4에 있는 사진이 안보여요…
    이럴때에는 어떻게 하죠?ㅠㅠ

  • JH Shin

    지금은 내용이 비어있지만 차근차근 채워나가야지
    기사 시험 끝나고 CSS, JS공부

  • I’m always sleepy

    이고잉님 저 주소로 접속했을 때 index.html 페이지부터 나오는 원리가 궁금해요!ㅠ 만약 첫페이지를 CSS나 Javascript 로 설정하고 싶으면 어떡해야하죠??

  • 두둥탁

    파일들을 한글로 사용해가며 html 파일을 만들었습니다. Github에서 생성된 웹 주소를 클릭하면 web1 – 로만 나타나네요

  • Man Choi

    혹시 나중에 시간이 되시면 'Initialize this repository with a README' 체크를 해야 하는 지 천천히 말씀 부탁드립니다. (3:51) 고맙습니다.

  • 강민영

    5:35 에서 html 파일들 그대로 드래그 했는데 밑에 작업한 내용이 뜨질 않습니다… 혹시 해결방법 있습니까??

  • 김집사

    에러뜨시는분들 코드파일명을 대문자로 1.HTML로되셨으면
    1.html로 바꿔보세요 1.html 2.html 3.html codiing.jpg index.html이렇게요

  • 푸루기와 맨

    fun!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!good job!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!thankyou!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!(venom)

  • 푸루기와 맨

    생활코딩 님 목소리도 좋으시고 잘가르쳐 주어서 얼굴이 궁금해요 목소리도 좋으니까 얼굴이 좋을겄같아요

  • 박지수

    Setting에서 master branch를 누르고 뜨는 링크를 눌렀더니 코드대로 안뜨고 repository name에설정한 글자만 크게나오는데 해결방법 알수있을까요? 동영상 보면서 할땐 됬는데 혼자하니깐 어렵네요

  • 양진우

    전 왜 레포지토리에 들어가면 Please verify your email address 라고 뜰까요..? 빨리 답변 부탁드려요

  • Lee DaWon

    전 1.html부터 3까지 안나타나고 name에적은 이름만 뜨는데 어떡게 해결해야하나요ㅜㅜ 계속 해보는데도 같네요 ㅠㅠ

  • 배성원

    오 깃헙에서 컴파일없이 볼수도 있었군요 아니 컴파일이필요없는 작은소스만 가능한건가

  • 정현민

    좋은 수업 잘 듣고있습니다!
    깃허브에서 XXX.XXX.XX/ 라는 URL로 호스팅을 했을때 웹을 로드하면 index.html이 로드 됩니다
    혹시 웹이 처음 로드 될때 index.html 말고 다른 파일을 로드할 수 있습니까?
    찾아보니까 리다이렉트 기능이있던데 이 방법밖에 없습니까?
    루트 파일을 변경하는 방법을 알고싶습니다

  • 블루스카이

    코드의 초년생입니다. 정해놓은 용어들이 헷갈렸는데, 이해가 쉽게 너무 잘 설명을 해주셨서 감사합니다. 설명만이 아닌 그림과 선생님의 목소리까지 정말 속속 귀에 들어오네요. 매번 동영상 볼때마다 느끼지만, 강의들이 철학적인 느낌이 들어요 ㅎㅎ 너무 좋아요

Leave a Reply

Your email address will not be published. Required fields are marked *