어떻게verless를 사용하여 사이트를 만듭니까
물론 먼저 install verless 또는 run it with Docker 이 필요합니다.
새로운 프로젝트를 세우다
우선, 우리는 새로운 프로젝트인 커피 블로그를 초기화하여 신속하게 시작할 것이다.verless를 사용하면 다음과 같은 작업을 쉽게 수행할 수 있습니다.
$ verless create project coffee-blog
coffee-blog 이다.개발 및 맞춤형 프로젝트
로컬 개발은 아파치와 같은 제3자 웹 서버를 필요로 하지 않는다. 왜냐하면verless는 이미 내장된 웹 서버를 가지고 있기 때문이다.
정적 사이트 생성기의 단점 중 하나는 프로젝트의 단일 파일을 변경할 때마다 전체 사이트를 다시 구축해야 한다는 것이다.다행히도verless는 웹 사이트에 서비스를 제공할 때 프로젝트의 변경 사항을 관찰할 수 있으며, 파일을 변경할 때마다 자동으로 프로젝트를 재구성합니다.
이것은 우리의 프로젝트에 서비스될 것이다localhost:8080:
$ verless serve -w coffee-blog
-w 또는 --watch 표지는 우리로 하여금 프로젝트의 변화에 세심하게 관심을 가지게 할 것이다.
프로젝트 구성
verless는
verless.yml 라는 최고급 프로필을 만들었습니다.여기서 메타데이터 설정, 내비게이션 항목 정의, 활성화 plugins 및 설정 theme 을 할 수 있습니다.coffee-blog 디렉터리로 전환하고 일부 내용을 넣습니다verless.yml.version: 1
site:
meta:
title: My Coffee Blog
subtitle: About Espresso & Cappuccino
description: I'm Clara and write alot about coffee.
author: Clara Crema
base: http://localhost
nav:
items:
- label: Home
target: http://localhost
plugins:
- atom
theme: default
build:
overwrite: true
컨텐트 만들기
우리의 첫 문장을 만들 때가 되었다!모든 내용은 저희 프로젝트의
content 디렉터리에 태그 파일로 저장됩니다.종료되지 않은 경우 serve + Ctrl 중지를 누릅니다.프로젝트 디렉토리에서 다음 명령을 실행하여 새 파일을 만듭니다.$ verless create file making-barista-quality-espresso.md
C이 생성됩니다.파일 이름은 페이지의 URL을 정의하고 content/making-barista-quality-espresso.md 디렉터리를 기준으로 하기 때문에 content 에서 사용할 수 있습니다.이렇게 간단해.컨텐트 편집
localhost:8080/making-barista-quality-espresso의 장점은 기본 Front Matter를 사용하여 태그 파일을 초기화하는 것입니다.프런트엔드는 메타데이터를 정의할 수 있는 태그 내의 작은 YAML 섹션입니다.---
Title:
Description:
Date: 2020-10-12
---
---
Title: Making Barista-Quality Espresso
Date: 2020-08-14
Description: This is a guide for making italian Espresso.
Tags:
- Espresso
- Coffee
Img: /static/espresso.jpg
Credit: Burst on Pexels
---
Do you enjoy a high-quality italian Espresso as much as I do? Quite
frankly, making Espresso at this level isn't easy - but with the right
tools, patience and practice, you'll be able to make delicious coffee
at home.
...
verless create file 최고급 디렉터리에 복사해서 static 필드의 이미지로 사용한다.그것은 Img 아래에서 제공될 것이다.주제
아마도 저희 프로젝트는
localhost:8080/static/espresso.jpg 디렉터리를 포함하고 있으며, verless는 그 안에 모든 테마를 저장합니다.새 프로젝트를 만들면 themes 테마가 이미 포함되어 있습니다.우리의 커피 블로그에 대해 우리는 사용자 정의
default 주제만 사용할 수 있지만, 우리는 이 강좌를 위해 default 이라는 주제를 만들 것이다.프로젝트 디렉토리에서 다음 명령을 실행하기만 하면 됩니다.$ verless create theme light
light 안에 테마에 필요한 모든 구성 요소를 포함하는 새로운 light 디렉터리를 만들 것입니다. themes 디렉터리와 theme.yml 디렉터리입니다.이러한 기초 지식이 있으면 우리는 템플릿 제작과 조형을 시작할 수 있다.
거푸집
각 주제에는 적어도 두 개의 템플릿이 필요합니다.
templatesassetspage.html 를 편집하고 다음을 작성합니다.<!DOCTYPE html>
<html>
<head>
<title>{{.Page.Title}}</title>
<link rel="stylesheet" href="/assets/style.css" />
</head>
<body>
<h1>{{.Page.Title}}</h1>
<img src="{{.Page.Img}}" />
<p>{{.Page.Description}}</p>
<small>
Posted on {{.Page.Date.Format "Jan 2 2006"}}.
Photo: {{.Page.Credit}}
</small>
<p>{{.Page.Content}}</p>
</body>
</html>
list-page.html 에서 templates/page.html 및 page.html 같은 대상을 사용할 수 있으며, .Page 같은 필드를 가지고 있습니다.이것은verless 테마를 프로젝트에서 다시 사용할 수 있도록 합니다.특정 템플릿에서 사용할 수 있는 필드의 전체 목록을 보려면template reference
다음으로, 우리는 편집할 것이다
.Meta..Title의 모든 디렉터리(예를 들어 templates/list-page.html 디렉터리)에 대해verless는 이 디렉터리의 모든 페이지를 포함하는 개관 페이지를 생성합니다.이것들은 이른바 목록 페이지다.content 에서는 각 페이지의 하이퍼링크를 포함하는 간단한 페이지 제목 목록을 제공하고자 합니다.<!DOCTYPE html>
<html>
<head>
<title>{{.Page.Title}}</title>
<link rel="stylesheet" href="/assets/style.css" />
</head>
<body>
{{range $page := .Pages}}
<div>
<h3>{{$page.Title}}</h3>
<small>
Posted on {{$page.Date.Format "Jan 2 2006"}}
</small>
<p>{{$page.Description}}</p>
<p><a href="{{$page.Href}}">read post</a></p>
</div>
{{end}}
</body>
</html>
blog 에서 사용할 테마를 새 테마로 바꾸어야 합니다.theme: light
서비스 또는 웹 사이트 구축
프로젝트 디렉터리에 있으면 다음 명령을 사용하여 사이트에 서비스를 제공하고 모든 것이 정상인지 확인하십시오.
$ verless serve -w .
배포 가능한 웹 사이트를 얻기 위해 호스트나 클라우드 공급업체에 업로드할 수 있습니다.
list-page.html 프로젝트를 구축할 수 있습니다.$ verless build .
verless.yml 우리의 프로젝트 목록에 들어갈 것입니다. 당신은 그것을 잘 업로드할 것입니다.플러그인
verless는 많은 사람들이 원하는 플러그인을 지원하지만, 모든 항목이 필요한 것은 아닙니다. 따라서verless는 필요한 플러그인을 현시적으로 활성화하기를 바랍니다.아마도
theme: default 의 작은 verless build 부분을 보실 수 있습니다.plugins:
- atom
당신도 볼 수 있습니다 plugin reference.
현재 CSS를 생성하고 웹 사이트를 만들기 위해 자신의 스타일, 설정pre-build hooks을 만들 수 있습니다!
Reference
이 문제에 관하여(어떻게verless를 사용하여 사이트를 만듭니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dominikbraun/how-to-create-your-website-using-verless-511n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
