[우과 이해] 개발, 단계 및 제품 구성

8067 단어 jamstackhugotutorialnetlify
어서 오세요!
이전의 강좌에서 우리는 우과와 그것의 전형적인 차이를 토론했다.
오늘 우리는 여러 환경의 설정을 관리하는 데 매우 중요한 일을 토론할 것이다.그래, 우리는 이 주제에 직접 들어가서 구조와 틀을 토론하지 않는다!왜?응, 어느 정도 너는 너의 사이트가 만차원 인터넷에서 사용할 수 있기를 바란다.이것은 네가 반드시 그것을 호스트 위에 두어야 한다는 것을 의미한다.위탁 관리 공급자에 따라 당신이 개발한 컴퓨터에 비해 많은 설정이 다를 수 있습니다.
사이트가 이미 크게 발전했을 때, 우리는 최후의 배치를 고려하지 않고, 왜 즉각 위대한 실천을 세우지 않습니까?

배포 환경


짧은 시간 동안 나는 우과에 대해 이야기하는 것을 멈추고 독립된 환경을 가진 개념에 대해 이야기하고 싶다.
전형적인 소프트웨어 개발 작업 흐름은 여러 환경으로 구성되어 소프트웨어 응용 프로그램의 개발 주기를 더욱 원활하고 장애가 없도록 한다.이 모델은 통상적으로 개발, 단계와 생산 환경으로 구성된다.여러 환경은 서로 다른 단계에서 응용 프로그램의 개발자, 예를 들어 개발, 테스트와 발표를 도와야 한다.
서로 다른 항목에 대해 이런 용어들은 서로 다른 일을 의미할 수 있다.취미 사이트에 대해 개발 환경은 개발자 컴퓨터에 위치하고 비교적 큰 프로젝트에 대해 개발 환경은 여러 서버 사이에 분포한다.등단과 생산이 같은 것은 매우 흔한 것으로 주로 실제 사용자 데이터가 존재하는 데 차이가 있다.

우과 환경 설정


우과로 돌아가서 바로 인코딩을 시작합시다!나는 이전 강좌의 hello-world 프로젝트를 계속 공부할 것이다.hugo create site 명령을 사용하여 새 프로젝트를 만들 수 있습니다. 기존 코드를 다시 사용하지 않기 때문입니다.
먼저 layouts/index.html에 다음 내용을 추가합니다(새 프로젝트를 시작한 경우 작성).
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta 
      name="viewport" 
      content="width=device-width, initial-scale=1">
    <title>{{ .Title }}</title>
    <link 
      rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" 
      integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" 
      crossorigin="anonymous">
  </head>
  <body class="d-flex text-center text-white bg-dark" style="font-size: 1.5em;">
    <div class="container w-100 pt-5 mt-5 mx-auto flex-column">
      <h1>Welcome to {{ .Title }}!</h1>
      The website is served at {{ .Site.BaseURL }}
    </div>
  </body>
</html>
만약 네가 모든 {{ ... }}을 보고 막막함을 느낀다면, 그것은 전혀 상관없다.이것은 템플릿 제작이라고 한다.우리는 다음 게시물에서 상세하게 소개할 것이다.이제 가변 HTML 세션으로 간주하는 방법입니다.
Hugo development server(hugo server)를 시작하고 http://localhost:1313으로 이동합니다.다음을 참조하십시오.
config.toml을 열면 My New Hugo Site 부품의 출처를 알 수 있습니다.그리고 baseURL 속성으로 사이트의 도메인 이름을 설정할 수 있습니다.이것은 사람을 곤혹스럽게 할 수도 있다.개발 서버를 사용하면 baseURL 속성이 일부 덮어씁니다.자세한 내용은 here입니다.
구성 파일을 사용하면 개발 단계에서 Hugo 프로젝트를 쉽게 관리할 수 있습니다.

개발, 분할 및 생산


우리들은 진실한 세계의 예를 좀 봅시다.한 사이트에 세 가지 환경이 있다고 가정하면 로컬 기계에서 개발한다.Github 페이지에 저장하기;및 생산, Netlify에서.이 특정 사이트의 설정은 보기에 어떻습니까?

좋아, 유일한 방법은 이런 사이트를 만드는 거야!이것은 웹 사이트를 어떻게 Netlify나 Github 페이지에 배치하는지에 관한 강좌가 아닙니다. 제가 급하게 몇 가지 절차를 완성한 것을 용서해 주십시오.내가 여기서 지적하고자 하는 것은 Hugo를 사용하여 상자를 열면 사용할 수 있는 도구로 설정을 관리하는 것이 얼마나 쉬운가이다.
우선 개발 설정을 살펴보자.톰:
baseURL = "/"
languageCode = "en-us"
title = "Development Environment"
쉬웠어
계속 무대에 오르다.GitHub 저장소를 만들고 learn-hugo으로 이름을 지정합니다.너는 마음대로 그것을 불러도 된다.나의 GitHub 계정 이름은 aakatev이기 때문에 나의 등단 사이트의 주소는 https://aakatev.github.io/learn-hugo/이다.일반적인 모델은 https://<username>.github.io/<repo-name>/이다.GitHub Pages는 docs 디렉토리의 파일을 제공하기 때문에 이를 고려해야 합니다.
이 모든 것을 고려하면, 이것은 나의 설정 단계이다.톰:
baseURL = "https://aakatev.github.io/learn-hugo/"
languageCode = "en-us"
title = "Staging Environment"
publishDir = "docs"
우리의 무대 버전을 배치하기 위해서 사이트는 반드시 현지에서 구축하고 GitHub에서 전송해야 한다.
그 전까지는 기본 프로필을 사용해 왔습니다.우과는 약 config.toml을 알고 있다.그러나 이제 명칭이 달라져서 Hugo가 어떤 구성을 사용하는지 알려주기 위해 --config 로고를 제공해야 합니다.
hugo --config config-stage.toml
이 사이트가 repo로 전송되면 자동으로 GitHub 페이지에 배치됩니다.

마지막으로 우리의 생산 환경.Netlify는 기본적으로 정적 웹 사이트에 CI/CD를 제공합니다.기존 GitHub 저장소를 연결하고 최소 구성을 제공합니다.

Netlify에서 생성한 기본 응용 프로그램 이름은 매우 무작위입니다.너는 언제든지 그것을 변경할 수 있지만, 나의 경우, 나는 원래의 상태를 유지하기로 결정했다. -dazzling-curran-c212c7.사이트 도메인 이름은 <netlify-app-name>.netlify.app으로 파생할 수 있으며, 다음은 config-prod.toml:
baseURL = "https://dazzling-curran-c212c7.netlify.app/"
languageCode = "en-us"
title = "Production Environment"
publishDir = "public"
배포가 완료되면 운영 버전은 다음과 같습니다.

모으다


마찬가지로 이 예는 실제 강좌가 아니라 설명을 위한 것이다.즉, 만약 당신이 정말로 스스로 시험해 보고 싶다면, 완전한 코드는 나의 GitHub에 있다.
내가 널 보내기 전에 마지막 일이 있어.이 프로젝트에서 프로필을 사용했지만 Hugo는 개발자가 디렉터리별로 프로필을 분리할 수 있도록 합니다.
예를 들어, 구성 디렉토리에는 다음과 같은 레이아웃이 있을 수 있습니다.
├── config
│   ├── _default
│   │   ├── config.toml
│   ├── production
│   │   ├── config.toml
│   │   └── extra.toml
│   └── staging
│       ├── config.toml
│       └── extra.toml
참고, _default 하위 디렉토리입니다.우과에게서 이것은 매우 특별한 이름이다. 말하지 않아도 알 수 있다.--configDir 플래그가 제공되지 않으면 이 디렉토리가 사용됩니다.
오늘은 여기까지!네가 새로운 것을 배울 수 있기를 바란다.다음에 우리는 우과의 배치와 틀을 토론할 것이다.
기대해주세요!
매핑 유형(mapping type)이 Elasticsearch에서 제거됨
es 인덱스 및 맵핑 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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