우수 답변
GitHub 학생 개발자 팩 은 직접 설정 firstnamelastname.me 도메인은 무료입니다. 내 대답의 나머지 부분에서 나는 왜 처음에는 나에게 어려웠는지, 왜 “자신의 웹 사이트를 만드는 것이 당신에게 장벽이되었을 지”에 대해 불평합니다. 나는 학생 청중을위한 짧고 다소 포괄적 인 가이드를 포함합니다. 기술 지식이 거의 또는 전혀 없어서 자신을위한 꽤 공개적인 개인 웹 사이트를 만드는 것입니다 (누군가가 귀하의 이름을 검색 할 때 표시되어야 함).
웹 사이트를 만드는 것이 정말 어려운 이유
웹 사이트의 작동 방식을 알고 싶음 : 고등학교 기술 애호가로서 저는 항상 웹 사이트가 작동하는 방식을 알고 싶었고 웹 사이트를 소유 한 사람들에게 깊은 인상을 받았습니다. 외관상 모든 것이 너무 단순 해 보였지만 “웹 사이트 작동 방식”을 검색하고 더 깊이 파헤칠 때마다 이상한 약어와 복잡한 소리 속으로 길을 잃었습니다. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS-목록은 계속됩니다. 이러한 난해한 개념을 제가 알고있는 컴퓨터에서 눈에 띄는 것들에 매핑하는 작업은 매우 어려웠으며 앉아 있고 통과하는 데 엄청난 동기가 필요한 작업 중 하나였습니다.
웹 사이트의 작동 방식을 파악하기로 결정하는 경우 : 몇몇 까다로운 기술 회사에서 얻을 수있는 질문이 있습니다. Glassdoor 연록-
웹 브라우저에 “google [dot] com”을 입력하면 어떻게됩니까? ( Google 인터뷰 질문 : 입력하면 어떻게 되나요 …)
대학에서 컴퓨터 공학을 공부하는 도중에도 저는 조금 그들이이 모든 것에 대해 얼마나 적게 말했는지 걱정했습니다. 실망스러워서 구글에서 찾을 수있는 대체물은 “웹 사이트를 만드는 방법”이었다. 막대한 마케팅 비용이 투입되면서 도메인, 호스팅, GoDaddy, HostGator, 라우팅, CSS, HTML, Javascript, jQuery, WordPress와 같이 여전히 이해할 수없는 수많은 웹 사이트와 용어를 발견했습니다. , 블로거 등. 지금은 다음과 같이 표시됩니다.
솔직히 말해서이 이름들은 모두 사기처럼 들렸습니다. y, 그리고 그들의 이해력이 제 동기를 넘어 섰습니다. 저는 제 이름 ( debarghyadas.com [자체 프로모션 무시])을 가진 제 웹 사이트를 만들고 싶었습니다. 콘텐츠를 넣는 방법을 배워보세요.
인터넷에서 물건을 사기에는 너무 싸다는 것에 대해 : 웹 사이트를 만들려면 “도메인”, 웹 사이트 이름, “호스팅”을 구입해야합니다. 여기에는 내 웹 사이트의 콘텐츠가 포함 된 “서비스”를 제공합니다. 이 도메인에. 구매. 내가 깊지 않은 검소함을 감안할 때 예쁜 단어는 아닙니다. 프리웨어를 사용하는 학생 인 저는 추상적 인 것을 구입하기 위해 현금을 지불하는 데 너무 열중하지 않았습니다. 바닐라 아이스크림을 곁들인 호화로운 초콜릿 무스 케이크에 4 달러를 불어 넣는 것이 사소한 일이었을 때 Whatsapp에 1 달러를 지불하는 데 몇 년이 걸렸습니다.
자, 더 이상 사기를 할 수 있습니까? “우리는 경쟁을 먹어 치운다”? 좋아요, 게이터.
많은 학생 (및 사람들)에게 돈은 진입에 상당한 장벽입니다. 도메인 (GoDaddy에서)을 구입하는 데 연간 약 10 달러가 들며 HostGator에서 호스팅을 구입하는데도 비슷한 금액이 듭니다. 그리고 그것은 당신이 이해할 수없는 수많은 제품들을 통해 당신의 방식으로 작업하는 것을 포함했습니다. 그것은 당신이 또한 연간 단위로 지불해야한다는 것을 느꼈습니다. 그것은 일회성 구매가 아니 었습니다.
저에게 동기를 부여하기 위해 저렴하지 않기로 결정 : 결국 긴 힘든 과정을 통해 돈을 내고 투자는 내가 필요한 기술을 배우도록 동기를 부여 할 것입니다. 제 말은, 모두가 항상 HTML이 간단하다고 말했죠.하지만 HTML로 만든 사이트도 엉망인 것 같습니다. 많은 혼란이있었습니다.
결국 저는 옳았습니다. 도메인에 대한 투자와 5 년 동안 호스팅을 통해 일이 어떻게 작동하는지 알아 내고 개인 웹 사이트를 만들었고 일부가있을 때마다이를 반복했습니다. 자유 시간.
나만의 웹 사이트를 무료로 만들기위한 포괄적 인 가이드
GitHub 학생 개발자 팩 을 다운로드합니다.예, 여기에는 제가 사용한 적이없는 많은 것들이 포함되어 있지만 직접 광고하지 않는 (그리고 아마도 그래야하는) 것은 귀하의 도메인에서 귀하의 웹 사이트를 무료로 가동하고 운영 할 수있는 모든 도구를 제공한다는 것입니다! 지금 사실이 되기에는 너무 좋은 것 같습니다.
거래 도구 다음은 일반적인 지침입니다. I 개인적으로 시도 해본 적은 없지만 이것이 일을 처리하는 좋은 방법이라고 생각합니다. Student Developer Pack이 무료로 제공하는 다음 유료 서비스를 사용해야하거나 사용해야합니다.
1. Github 비공개 저장소 [선택 사항]
2. Namecheap .me 도메인
3. Namecheap SSL [선택 사항]
4. DigitalOcean 호스팅
또한
1. 부트 스트랩
2. 여러 온라인 자습서 및 도구- JSfiddle 3. 일부 온라인 템플릿 사이트- StartBootstrap , BootstrapZero
말한 도구로 수행 할 작업 이 미니 가이드를 가능한 한 간단하게 유지하려고합니다. . 의미를 알면 큰 용어를 삭제하기 쉽지만 단서가없는 독자에게는 큰 억지력이 될 수 있습니다. 요청하면 더 명확하게 설명하고 확장 할 수 있습니다.
1. 비공개 설정 Github 저장소 [선택 사항]
프로젝트를 위해 많은 코드를 작성하면 잘못 될 수있는 것들이 많습니다.
- 컴퓨터에서 삭제 될 수 있으며 엉망입니다.
- 이전 버전을 백업하지 않고 새 기능을 추가하고 작동 상태로 되돌리려면 파일에 필요한 Ctrl + Z (실행 취소) 수를 잊어 버리십시오.
- 여러 사람이 자신의 컴퓨터에서 개별적으로 작업하도록 할 수 있으며 둘 다 통합하는 방법을 모릅니다. 프로젝트의 버전입니다.
n00b 코더는 Dropbox 를 사용하여 코드 프로젝트를 공유하고 동기화 할 것을 제안 할 수 있습니다. “스스로 작업 중이라면 괜찮은 솔루션 일 수 있습니다. 그러나 “위 목록에서 두 번째 문제에 직면하게 될 것입니다. 여러 사람이 동일한 코드베이스에서 동시에 작업하려고하면 정말 미쳐 버립니다.
Git (예전에는 힙 스터를위한 SVN 및 Mercurial)이 코드를 “버전 화”하는 데 사용됩니다. git은 github가 아닙니다. 즉, 변경할 수 있습니다. 인터넷은 “저장소”(무료)에 영구적으로 저장됩니다. Git은 순전히 명령 줄 유틸리티입니다. 즉, 바탕 화면에서 무서운 검은 색 해커 화면 중 하나를 열고 명령을 입력해야합니다. Github는 git과 통합되어 업스트림으로 푸시 한 저장소를 볼 수 있으며 git 작업을 수행 할 수있는 GUI를 제공합니다 (컴퓨터의 일반 응용 프로그램처럼 동작). 브라우저에서 인터넷의 코드베이스 (저장소)를 탐색하고, 변경하고, 마지막 체크 포인트 (커밋)로 변경 사항을 되 돌리는 등의 작업을 수행 할 수 있습니다.
Github는 항상 공개 된 무료 저장소를 제공했습니다. 이는 누구나 여러분의 코드를보고 사용할 수 있음을 의미합니다 (예, 오픈 소스 라이선스가 있지만 제가 의미하는 바는 알고 있습니다). 본질적으로, 당신이 엄청나게 멋진 것들을 디자인하고 컴퓨터 과학을 재발 명하기 위해 정말 열심히 일한다면, 당신의 친구 사촌은 당신의 코드를 가져다가 자신의 웹 사이트에 사용하십시오. 이제 교육용 팩을 사용하면 5 개의 무료 개인 저장소를 얻을 수 있습니다 (이전에도 Github에서 .edu 학생들에게 해당 서비스를 제공했지만). 온라인 자습서를 살펴보고 웹 사이트 코드를위한 비공개 github 저장소를 설정하는 방법을 알아 봅니다.
2. 무료로 Namecheap .me 도메인
가장 오랫동안 제가 알고있는 유일한 도메인 판매자는 GoDaddy였습니다. 결국 도메인을 구입하기로 결정 했음에도 불구하고 이름은 항상 저에게 그늘진 사람이라고 생각했습니다. 이제 스타트 업 시대에 더 깨끗하고 저렴한 대안 인 Namecheap이 있습니다.Namecheap은 항상 저렴했지만 이제 도메인을 무료로 얻을 수 있습니다! 따라서 아주 일반적인 이름이 도난 당하기 전에 지금 무료로 firstnamelastname.me 도메인을 얻으십시오 (아직 그렇지 않은 경우). 그리고 다시 돌아 가지 마십시오. 90 년대 이메일을 보내고 raj2kul4skul.me 를 구입하세요. 부디. 감명을 줄 유일한 사람은 당신이 없이는 더 나은 친구입니다.
무료라고 언급 했나요?
3 . Namecheap 가져 오기 SSL [선택 사항]
선택 사항이며 아직 내 웹 사이트에 사용할 수 없습니다 (GoDaddy에서 여전히 비용이 들기 때문). SSL (Secure Sockets Layer)은 멋진 것입니다. 이는 기본적으로 웹 콘텐츠가 “안전하게”제공 될 수 있음을 의미합니다. 또한 웹 사이트에 멋진 녹색 자물쇠가 표시되고 http 대신 https 웹 사이트가 있으며 정말 멋지고 진정성있는 느낌 :
너무 기술적이지 말고 알아야 할 것은-이것이 꼭 필요한 것은 아닙니다. 귀하의 개인 웹 사이트에서 “그렇게 엄격한 보안이 필요한 작업을 수행 할 것”이라고 확신합니다. 그러나 “웹에 대해 배우고 있다면, 그럴 수도 있습니다. 결국 무료입니까?
4. Digital Ocean 호스팅.
Namecheap : GoDaddy :: DigitalOcean : HostGator.
Namecheap은 DigitalOcean이 HostGator에 대한 것이므로 GoDaddy에 적합합니다. 대안. 도메인을 구매하면 사용자에게 무엇을 제공 (표시)할까요? 당신의 웹 사이트 맞죠? 그러나 “내 컴퓨터에이 파일을 가져 와서 보여줄 수는 없습니다. 음, 할 수 있습니다. 이것이 방법입니다. DigitalOcean을 사용하면 무료”호스팅 “을받을 수 있습니다. DigitalOcean은 호스팅 인스턴스 하나를”방울 “이라고 부릅니다.
즉, 웹 사이트를 가상 머신 (읽기 : 컴퓨터)에 업로드하고 이름이 저렴한 도메인에 알릴 수 있습니다. 컴퓨터에서 콘텐츠를 제공 할 수 있습니다. 너무 자세하게 설명하지 않고 DigitalOcean이 처리해야하는 중간에 많은 일이 발생합니다. 웹 서버 구성 및 선택과 같은 일- nginx 또는 Apache , 특히 도메인의 요청을 파일 세트로 라우팅합니다.
5. 실제 웹 사이트 만들기
이제 “HTML 작성”부분에 대해 설명합니다. 웹 사이트를 만드는 데는 다양한 난이도가 있습니다. Arial에서 “Hello World”텍스트를 사용하여 Facebook 또는 Google을 만듭니다. 일반적으로 int 데이터가 필요하고 상태를 포함하는 eractive 애플리케이션은 만들기가 어렵습니다.
당신이하게 될 일은 아마도 정적 사이트 (매번 모든 사람에게 제공되는 동일한 텍스트 / 이미지 묶음)를 만드는 것일 것입니다. 이것은 훨씬 더 쉽습니다. 이것에 대한 완전한 튜토리얼을 작성할 수는 없지만 대학생들이 일반적으로하는 일은 다음과 같은 것들을 배우고 사용하는 것입니다-
- HTML -이것은 텍스트 / 링크 / 이미지 / 동영상의 실제 콘텐츠입니다.
- CSS -위의 콘텐츠가 예쁘게 보입니다.
- Javascript (JS) -동적 요소와 예쁜 애니메이션을 허용합니다. 그렇지 않은 이미지를로드하는 버튼을 만들고 싶다고 가정 해 보겠습니다. HTML에서 또는 HTML에 동적으로 콘텐츠를 추가합니다. 그런 다음 JS를 사용합니다. 간략한 역사-JS는 약 10 일 만에 해킹을 당했고 많은 버그가 포함되어 있으며 많이 작성하면 매우 장황하고 다루기 어려울 수 있습니다. 일반적으로 초보자는 jQuery와 같은 라이브러리를 사용하여 덜 장황하고 쉽게 만들 수 있습니다 (처음에는 jQuery가 모든 $ 기호로도 위협적으로 보일 수 있음).
- Bootstrap -Bootstrap은 Twitter에서 만든 프론트 엔드 프레임 워크입니다. 원시 HTML에는 상당히 나쁜 기본 모양이 있습니다. HTML 버튼은 표시 할 수 없으며 CSS를 작성하는 데 시간과 실험이 필요합니다 (내 말은 “실제로”CSS를 “아는”사람은 없습니다). 부트 스트랩에는 일부 파일을 다운로드하고 HTML에 한 줄을 추가하고 일부를 읽는 작업이 포함됩니다. 문서화 및 제공하는 CSS 클래스 추가-그리고 짜잔! 사이트가 자동으로 훨씬 더 예쁘게 보일뿐만 아니라 모바일에서도 호환되도록 만들 수 있습니다 (다시 말하지만 사소한 노력).
6. 웹 사이트를 온라인 상태로 만들기 (배포) 로컬 호스트를 활성화하여 웹 사이트를 로컬로 (자신의 컴퓨터에서) 만들고 테스트 한 후 (로컬 웹 서버-Google IT.정적 사이트에는 필요하지 않을 수 있습니다.) 매우 유용한 Chrome 개발자 도구를 사용하여 CSS를 테스트하고 혼합하고 출력에 만족하면 Digital Ocean으로 이동하여 사이트를 압축 한 다음 사용자에게 보낼 수 있습니다. 섬기는 사람. 모든 것을 제대로했다면 잠시 기다렸다가 firstnamelastname.me 로 이동하면 콘텐츠가 표시됩니다. 그리고 다른 모든 사람들도 할 수 있어야합니다.
7. 멋진 웹 사이트를 검색 가능하게 만들기 (SEO)
마지막 단계는 SEO-검색 엔진 최적화입니다. 최종 목표는 흔하지 않은 이름을 갖고 누군가가 귀하의 이름을 검색 할 때 귀하의 웹 사이트를 최고의 결과로 만드는 것입니다. 시간이 좀 걸릴 수 있지만 지금은 금전적 비용으로 수행 할 수 있습니다. 이 작업을 수행하는 방법은 여러 가지가 있으며 모두 Google에서 사용할 수 있습니다. Facebook과 함께 사용하지 않는 이전 G + 계정을 연결하고 Google 검색에 표시 할 맞춤 메타 데이터를 추가하는 방법이 있습니다. , 등입니다. 궁극적으로 귀하의 이름이 매우 일반적이거나 유감스럽게도 유명한 사람과 동일하지 않은 경우 몇 주 이내에 귀하는 Google에서 몇 안되는 검색 결과 중 하나가 될 것입니다.
알아야 할 기타 사항
예쁜 페이지를 만들기위한 바로 가기 : 웹 사이트에 얼마나 많은 작업을 하려는지에 따라 언제든지 편리한 부트 스트랩 템플릿을 온라인에서 선택하거나 원하는 경우 자신 만의 CSS 클래스를 직접 만들 수 있습니다. 고유 한 모양을 유지하거나 단순하게 유지하고 기본 HTML / CSS (많은 학자들이하는 일)를 사용합니다. 예 : Jon Kleinberg의 홈페이지 .
PHP를 알지 못하는 경우 그리고 다른 멋진 것들 : 당신이 “정적 인 사이트를 디자인하고 있기 때문에, 백엔드 만들기, 많은 페이지 만들기, 데이터베이스 보유와 같은 멋진 것들에 대한 지식이 없습니다. 예, 저는 당신에게 말하고 있습니다. 정당한 이유없이 PHP와 MySQL을 사용하려는 사람들 (필요한 경우에도 PHP를 멀리하십시오). Ruby on Rails (Ruby)에서 Django (Python)에서 Play! (Java 및 Scala) CherryPy (Python) 또는 Flask (Python). 사실, 상상할 수있는 거의 모든 언어에 대한 프레임 워크가 있습니다.- 웹 애플리케이션 프레임 워크를 비교 하되 아직 사용 / 학습하여 지치지 마세요.
웹 사이트에 추가 할 다른 사항 : 개인 웹 사이트에 대해 수행 할 수있는 기타 작업-
- 이미지 압축 이미지를 많이 사용하는 경우 웹 사이트 로드하는 데 시간이 오래 걸립니다.
- Facebook / Quora / Twitter에서 소셜 플러그인 사용
- Google Analytics를 추가하십시오 (실제로 거의 필수 사항 임). Google Analytics를 사용하면 웹 사이트를 방문하는 사람의 수, 출신지 등을 확인할 수 있습니다. 사이트를 업데이트하고 최신 상태로 유지하는 데 좋은 동기 부여가됩니다. 사용하기 매우 쉽습니다. 페이지에 몇 줄의 코드를 복사하여 붙여 넣으면됩니다.
- 스크립트를 최소화하세요. 사이트를 방문하는 모든 사람이 여전히 많은 사이트의 JS 및 CSS를 볼 수 있습니다. 숨기고 싶은 매우 흥미로운 작업을 수행하고 JS / CSS를 축소했습니다. 그렇지 않으면 비공개 저장소를 갖는 목적이 망가집니다. 또한 사이트를 더 빠르게 만듭니다.
- HTML을 암호화 합니다. 다시 말하지만 정말 이 귀하의 웹 사이트를 만든 방법을 사람들에게 알리고 싶지 않다면 HTML을 암호화하는 방법으로 “소스보기”버튼을 클릭해도 웹 페이지에 흥미로운 내용이 표시되지 않습니다.
이 답변을 작성할 때 : 많은 사람들이 자신의 웹 사이트를 만드는 방법에 대해 주변에 묻습니다. 모두를 돕기 위해 짧고 (논쟁의 여지가있는) 이해하기 쉬운 작은 튜토리얼을 작성하는 것이 유용 할 것이라고 생각했습니다. 마음에 두어야 할 쉬운 일 중 하나입니다. 아, 이제 무료라고 말씀 드렸나요?