[우과 알기] 정적 사이트 시작

4671 단어 hugowebdevtutorialbeginners
나는 우과에 관한 많은 게시물을 발표했다.그들이 얻은 의견과 회답은 내가 받은 것이 가장 적다dev.to.이 사실을 감안하면, 나는 왜 시리즈 전체를'세계에서 가장 빠른 사이트 건설 구조'에 쓰기로 결정했는지 모르겠다.
이 시리즈의 격식은 초보자들에게 우호적일 것이다.모든 문장은 하나의 단일한 기능이나 기능의 어떤 서브집합을 포함한다.독자가 HTML과 CSS에 익숙하다고 가정하십시오.이전의 JavaScript 경험은 분명 유익한 것이지만, 이것은 딱딱한 요구가 아니다.

정적 및 동적 사이트


왜 우과를 써야 합니까?이 문제는'정적 사이트 생성기를 왜 사용하는가'라고 다시 설명할 수 있다.이 문제에 대답하기 위해서 우리는 정태와 동적 사이트 간의 차이를 이해해야 한다.
사용자 HTML, JavaScript 또는 CSS를 보내기 전에 처리해야 하는 모든 사이트는 동적입니다.예를 들어 서버가 HTML을 구성하거나 데이터베이스 요청을 보냅니다.정적 사이트 세계에서 처리는 사전에 이루어진 것이다.브라우저는 서버에 탑재된 것과 완전히 같은 형식으로 사이트를 수신합니다.정적 사이트를 사용하는 몇 가지 장점은 복잡성을 낮추고 안전성을 높이며 버전 제어가 쉽고 배치가 빠르다는 것이다.

모든 사이트가 반드시 동적이어야 하는 것은 아니다.블로그, 문서, 신문 사이트, 사진과 동영상 갤러리, 서류 가방, 회사 사이트는 본질적으로 정적이다.웹 사이트를 배치하기 전에 게시물, 사진, 동영상을 데이터베이스나 저장 서버에 저장하지 않고 내용을 HTML에 주입할 수 있다.이 프로세스를 사전 렌더링이라고 합니다.처리된 HTML은 모든 파일 서버 또는 CDN(Content Design Network)에 저장할 수 있습니다.

우과와 라이벌


우과는 유일한 정적 사이트 생성기가 아니다.모두가 알고 있는 많은 대체 방안이 있다.개츠비, 다음, 제킬.두 번째는 React 위에서 구축된 것으로 개발자에게 자바스크립트 생태계를 가진 장점을 제공한다.단점은 복잡성이다.Jekyll은 Ruby로 작성되었고 JavaScript 경쟁사들만큼 복잡하지 않다.그것은 이미 한동안 존재해 왔고, 인터넷에는 매우 좋은 입문 자원이 많다.
HTML을 미리 보여주는 것은 정적 사이트 생성기의 주요 목적 중의 하나이다.이것이 바로 우과가 진정으로 빛나는 곳이다.속도가 엄청 빨라요!개발과 생산의 구축 시간은 몇 초를 넘지 않는다.속도와 단순성은 우과를 정적 사이트 구축의 절호의 선택으로 만들었다.

설치


우과는 바둑으로 쓰여 2진법으로 발송된다.다음은 가장 유행하는 패키지 관리자를 사용하여 설치하는 명령입니다.
자제
brew install hugo
초콜릿 맛
choco install hugo -confirm
알맞다
sudo apt-get install hugo
Hugo official docs에서 바이너리 파일을 가져오는 다른 방법, 즉 원본 코드에서 구축하는 것을 포함한다.

우과 세상 안녕.


드디어 우리의 첫 번째 사이트를 만들 때가 왔다!
터미널 열기 및 실행:
hugo new site hello-world
Congratulations! Your new Hugo site is created와 유사한 내용을 보실 수 있습니다.테마를 만들고 내용을 만드는 방법을 알려주는 메시지도 볼 수 있습니다.우리는 이 모든 건의를 뛰어넘고 생성된 프로젝트 구조에 중점을 둘 것이다.hello-world 폴더의 모양은 다음과 같습니다.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
이것은 전형적인 우과 프로젝트의 틀이다.앞으로의 글에서 우리는 각 부분을 더욱 상세하게 소개할 것이다.이제 우리는 계속 전진하고 발전하기 시작합시다.
터미널로 돌아가서 실행:
hugo server -p 3000
포트 3000 에서 개발 서버를 시작합니다.p 플래그를 제공하지 않으면 서버가 포트1313에서 시작됩니다.터미널에서 경고를 볼 수 있습니다.잠시 그것들을 소홀히 하는 것은 안전하다.
서버가 실행 중입니다.그러나 http://localhost:3000 에서 브라우저를 열면 공백 페이지를 제외하고는 아무것도 볼 수 없습니다.
당황하지 마!Hugo는 당신의 프로젝트에 대해 어떠한 가설도 하지 않는 틀입니다.그래서 너는 상자 안에서 아무것도 얻을 수 없다.
다음을 포함하여 layouts/index.html 에 새 파일을 만듭니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ .Title }}</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h3>Hello World</h3>
  </body>
</html>
서버는 새로 만든 파일을 자동으로 선택해야 합니다.브라우저로 다시 이동합니다.다음 페이지가 표시됩니다.

지금 이대로!다음에 우리는 우과 프로젝트의 구조로 돌아가 모든 생성된 목록을 토론할 것이다.이 시리즈에서는 템플릿, 컨텐츠 관리 및 기타 다양한 주제를 소개합니다.기대해주세요!
Power of Cryptography POJ2109
leetcode Populating Next Right Pointers in Each Node(*)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage