Jamstack : 오늘 더 빠르고 효율적인 웹 사이트를 빌드

Sep 12, 2025

어떻게

(이미지 크레딧 : 미래 / 조셉 포드)

Jamstack은 서버가 필요로하는 최소한의로드로 웹 사이트를 만들고 제공하는 방법입니다. 빌드 프로세스, JavaScript, API 및 Markup에서 사용되는 기술에서 이름을 얻습니다. 페이지는 미리 마크 업 언어로 작성되며 사용자가 요청할 때 정적 HTML 파일로 사용됩니다. 사이트를 구축하고 이러한 기술을 함께 가져 오려면 올바른 도구가 필요합니다. 체크 아웃했는지 확인하십시오 최고의 코드 편집자 당신을위한 최상의 개발 환경을 결정하는 데 도움이되는 게시물.

전통적으로 사용자가 웹 페이지를 클릭하면 일련의 작업이 수행됩니다. 사용자 브라우저는 요청을 웹 사이트의 서버로 보냅니다. 백엔드 코드를 통해 실행되고 올바른 페이지를 생성하고 데이터가 브라우저로 다시 보내고 웹 페이지로 렌더링됩니다. 잘못 될 수있는 꽤 많이, 그리고 그대로 지나면, 그것은 사용자가 번개 빠른 디지털 세계에서 이제 살고있는 번개가있는 것보다 약간 더 느립니다.

그러나 JAMstack을 사용하면보다 효율적인 사이트가 더 빠르고 잘못 될 수 없음을 의미합니다. 이 튜토리얼에서는 JAMSTACK에서 블로그 웹 사이트를 설정하여 개념을 소개하는 방법을 보여줍니다. 사용 된 도구는 휴고 정적 사이트 생성기로서, 넷플리즈 빌드 도구와 github. 파일을 무료로 호스팅하는 것입니다.

사이트 경험을 더욱 향상시키기 위해 완벽한 것을 선택하십시오. 웹 호스팅 서비스, 최고 웹 사이트 빌더 ...에

01. 필요한 도구를 다운로드하십시오

사본을 다운로드하십시오 빅토르 위고 - 이것은 여러 스타터 키트 중 하나입니다. 또한 당신이 가진지 확인하십시오 마디 개발 환경에 설치되었습니다.

https://github.com/netlify-templates/victor-hugo

02. 작업 디렉토리를 만들고 Hugo를 설치하십시오

디렉토리를 만들고 이름을 지정하십시오 Jamstack. ...에 이것은 우리가 개발 기계에서 일하는 곳입니다. Hugo 용 다운로드 한 파일을이 디렉토리에 추출하고 명령 프롬프트에서 열 수 있습니다. 모든 종속성을 설치하려면 JAMSTACK 폴더에 명령 프롬프트 또는 터미널을 열고 실행하십시오. NPM 설치

npm install

03. 서버를 시작합니다

종속성이 완료되면 NPM 시작을 실행하십시오. 개발 서버는 이제 로컬 호스트에서 기본적으로 액세스 할 수있는 Victor Hugo의 로컬 복사본을 실행 중이며 모든 것이 성공하면 환영 화면을 표시해야합니다. 일단 테스트 한 후에 누르십시오 Ctrl. + 씨 서버를 중지합니다.

04. 페이지와 게시물을 추가합니다

디렉토리를 사이트 폴더로 변경 한 다음 Hugo New. 명령, A를 추가하십시오 Page-one.md. 그리고 A. Postoone.md. ...에 Windows에서 작업하는 개발자는 hugo.exe 파일을 다운로드하고 작업을 수행 할 경로를 추가해야하지만 문서를 쉽게하기 쉽습니다. 휴고 웹 사이트.

 Hugo New PageOne.md.
Hugo New Post / Postoone.md

05. 페이지와 게시물에 내용을 추가하십시오

테스트 목적을 위해 일부 콘텐츠를 새 게시물 및 페이지에 추가해야합니다 (미디어 - 중량 콘텐츠가 있으십니까? 클라우드 스토리지 짐마자 파일 브라우저에서 프로젝트의 디렉토리를 열고 JAMSTACK / 사이트 / 콘텐츠로 이동하십시오. 이 폴더 내에서 파일 Page-one.md. 이제 존재해야합니다. 또한 폴더라는 폴더가 있습니다 게시하다 이를 포함하는 postoone.md. 이 두 파일을 모두 열고 아래의 마크 다운에서 일부 콘텐츠를 추가하십시오. (또는 경우에 따라 +++ 이상)

 # lorem ipsum dolor 앉아 amet.
## consectetur adipiscing * elit *
SED는 EIUSMOD를 임시하는 것입니다
et dolore magna aliqua.

06. 테마를 하위 모듈로 추가하십시오

이전 파일에 입력 된 텍스트는 테마없이 볼 수 없습니다. 예를 들어, Ananke 테마가 사용됩니다. 현재의 내용을 삭제하십시오 사이트 / 레이아웃 폴더, 비어있게 남습니다. 호출 된 사이트 폴더에서 새 디렉토리를 만듭니다 테마 그런 다음 이로 변경하고 다음 코드를 실행하여 테마를 Git Submodule로 가져옵니다. 참고 : 정상 복제는 NetLify와 호환되지 않습니다.

 Mkdir 테마
CD 테마
Git Submodule https : // github를 추가합니다
COM / & lt; themeCreator & gt; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme.
ananke.git 테마 / ananke

07. 테마를 구성하고 서버를 실행하십시오

내용을 복사하십시오 사이트 / 테마 / Gohugo-theme ananke / experceite / config.toml 사이트 폴더의 하나를 통해 페이지 상단에서 기본 URL을 ' / ' 라인을 삭제하십시오 themesdir = '../ ..' ...에 구성 파일을 저장하고 터미널을 열고 실행하십시오. npm 시작 명령. 웹 사이트의 이름을 변경할 수도 있습니다 (원하는 경우) 표제 값.

 CD 사이트
NPM 시작

08. 브라우저에서 테스트하십시오

열다 http : // localhost : 3000 / Page-One / 페이지의 마크 다운을 완전히 스타일로 된 페이지로 렌더링하는 테마를 보려면 홈페이지를 열면 첫 번째 게시물이 표시됩니다. 즉, 정적 사이트 생성기가 이제 작동 함을 의미합니다.

09. 메뉴 구성

웹 사이트를 볼 때 이전에 이루어진 페이지가 탐색에 표시되지 않는 것이 눈에 띄는 것입니다. 콘텐츠로 돌아가서 페이지를 렌더링 할 메뉴를 언급하기 위해 앞처 구성에 선을 추가하십시오.

 Toml.
+++
메뉴 = "Main"
+++
yaml.
---
메뉴 : "Main"
---

10. 파일을 GitHub로 밀어 넣습니다

그런 다음 원 클릭하여 사용자를 클릭하여 응답하도록 동그라미를 움직입니다. 이제 정적 사이트가 실행되고 실행 중이며 개발 서버에서 액세스 할 수 있어야합니다. 첫 번째 단계는 코드를 GitHub로 밀어 넣는 것입니다. gitHub에 새 저장소를 만드고 명령 줄을 사용하여 프로젝트 폴더 또는 github 데스크탑 응용 프로그램에서 코드를 누르십시오.

 Git Remote add origint https://github.com/[githubusername]/jamstackTutorial.git.
Git Push -u Origin Master

11. NetLify에 연결하십시오

NetLify는 모든 것을 함께 가져오고 사이트를 짓고 임시 도메인에서 제공합니다. 계정을 만들어서 시작하십시오 넷플리즈 GitHub 계정과 연결하십시오. 일단 모든 것이 설정되면 클릭하십시오 Git의 새로운 사이트 ...에

12. GitHub에 연결하십시오

지속적인 배포의 경우를 클릭하십시오 github. 그런 다음 자습서에서 이전에 이루어진 Repo를 선택하십시오. NetLify는 프로젝트의 최상의 빌드 옵션을 자동으로 감지해야합니다. 그것은 읽어야합니다 npm 실행 빌드 ...에 모두가 잘되면 배포를 클릭하십시오.

13. NetLify Link에서 사이트를 작성하고 봅니다

사이트가 빌드되면 메시지가 표시됩니다. 배포 ...에 NetLify에서는 웹 사이트가 의미가 없을 수있는 임시 도메인 이름을주었습니다. 사이트 설정을 클릭하여 단순히 변경할 수 있습니다. 이름을 변경 한 다음 링크를 클릭하여 JAMstack을 통해로드 된 사이트를 볼 수 있습니다.

14. 테스트 배포를 변경하십시오

웹 사이트는 이제 JAMstack을 통해로드됩니다. 그것은 빨리 번개이며, GitHub에 대한 커밋이 이루어질 때 자동으로 업데이트됩니다. 이를 테스트하려면 현지 개발 환경으로 돌아가서 실행하십시오. Hugo new page-three.md. 사이트 디렉토리에서. 그런 다음 생성 된 파일을 열고 일부 콘텐츠를 추가하고 저장을 클릭하고 파일을 Repo로 커밋하십시오. 순간 내에 업데이트가 NetLify 링크에서 작동하는지 확인합니다.

15. 정적 사이트에 CMS를 추가하십시오

일반 마크 업으로 작업하고 명령 줄을 사용하여 페이지를 만드는 것은 대부분의 클라이언트와 잘 어울리지 않습니다. 웹 사이트를 더 친숙하게하려면 콘텐츠 관리 시스템을 설치하십시오. 임업 현재 설정에 적합합니다. 웹 사이트로 이동하여 GitHub을 사용하여 계정을 만드십시오.

16. 임업 구성

새 사이트 추가를 클릭 한 다음 Hugo를 정적 사이트 생성기로 선택하고 공급자로 Git을 선택하고 다음 양식의 정보를 입력하십시오. 제출을 클릭하면 새 CMS가로드되고 콘텐츠가 변경 될 준비가됩니다. 이제 페이지는 단순히 사이드 바, 게시물뿐만 아니라 다른 옵션의 거대한 배열을 편집 할 수 있습니다.

웹 디자인에 대해 더 자세히 알고 싶습니까? 그때 Net에 가입하십시오 웹 디자이너 및 개발자를위한 세계 최고의 잡지.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — GenerateJS에서 더 나은 JavaScript를 구축하는 방법을 배우십시오 (이미지 크레디트 : 미래 / 레미 샤프 / 필 Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, Unsplash)

PenerateJS에서 JavaScript SuperStars의 라인업으로 4 월 2020 일에 가입하십시오. 지금 예약하십시오 generateConf.com.

자세히보기 :

8 HTML 태그를 사용해야합니다 (및 피하기 위해 5)
최고의 JavaScript API의 25 개
View Source에서 JavaScript 코드를 숨기는 방법

Jamstack : 오늘 더 빠르고 효율적인 웹 사이트를 빌드

01. 필요한 도구를 다운로드하십시오

02. 작업 디렉토리를 만들고 Hugo를 설치하십시오

03. 서버를 시작합니다

04. 페이지와 게시물을 추가합니다

05. 페이지와 게시물에 내용을 추가하십시오

06. 테마를 하위 모듈로 추가하십시오

07. 테마를 구성하고 서버를 실행하십시오

08. 브라우저에서 테스트하십시오

09. 메뉴 구성

10. 파일을 GitHub로 밀어 넣습니다

11. NetLify에 연결하십시오

12. GitHub에 연결하십시오

13. NetLify Link에서 사이트를 작성하고 봅니다

14. 테스트 배포를 변경하십시오

15. 정적 사이트에 CMS를 추가하십시오

16. 임업 구성

어떻게 - 가장 인기있는 기사

머리를 그리는 방법 : 완전한 가이드

오래된 학교 Anaglyph 효과를 만듭니다

사람을 그리는 방법

혼합 미디어 기술로 유령 텍스처를 생성

Marvel과 완벽한 프로토 타입 및 핸드 오프 디자인

새로운 Node.js 8

오일에서 습식 습식 페인트

사실적인 하늘을 렌더링하는 방법

카테고리