홈페이지>ASP 소스 코드>기타 카테고리
다운로드

아주 작은 정적

logo.png

유연하고 사용하기 쉬운 작은 정적 웹사이트 생성기입니다. 필수 웹사이트 구조나 블로그별 개념이 없기 때문에 유연합니다. 표준 HTML 사이트로 시작하여 점차적으로tinystatic을 도입할 수 있으므로 사용하기 쉽습니다.

Tinystatic의 개념은 간단합니다. 입력 디렉터리의 모든 파일에서 웹 서버의 공개 디렉터리로 사용할 수 있는 출력 디렉터리에 파일을 만듭니다. tinystatic이 출력 파일을 생성하는 방법은 입력 파일 확장자에 따라 다릅니다. Markdown은 HTML로 변환되는 반면 CSS, JS 및 이미지는 단순히 복사됩니다. 마크다운 및 HTML 파일의 경우 파일 상단에 메타데이터를 지정할 수 있습니다. 이 파일 메타데이터에 템플릿을 지정하고 별도의 디렉터리에 템플릿을 제공하면 Go의 HTML 템플릿 엔진을 활용할 수 있습니다. 다음은 일반적인 블로그 웹사이트의 예이며 빠른 시작 가이드는 아래를 참조하세요.

설치하다

사전 빌드된 바이너리

귀하의 운영 체제에 맞는tinystatic 바이너리를 다운로드하세요:

  • 리눅스
  • macOS

선택적으로 바이너리를 /usr/bin 과 같은 기존 디렉터리에 배치하거나 경로 변수에 바이너리의 상위 디렉터리를 추가하여 셸 경로에 바이너리를 추가합니다.

경로에tinystatic을 추가한 경우 다음을 호출할 수 있어야 합니다. 

tinystatic -help

그렇지 않으면 호출할 때tinystatic 바이너리에 대한 경로를 지정해야 합니다. 

/path/to/tinystatic -help

소스에서 컴파일

사전 빌드된 바이너리를 사용하지 않으려면 Golang 컴파일러를 설치하여 Tinystatic을 컴파일해야 합니다. 그런 다음 다음을 실행하여 Tinystatic을 설치할 수 있습니다. 

go install -u github.com/julvo/tinystatic

또는 저장소를 복제하고 이 저장소의 루트 디렉터리에 go install 또는 go build 실행하면 됩니다.

빠른 시작

이것은 하나의 HTML 페이지로 시작하여tinystatic의 기능을 하나씩 소개하는 작은 블로그를 구축하는 10분 분량의 튜토리얼입니다.

먼저, routes 라는 폴더를 만듭니다. 이 폴더 안에 다음 내용이 포함된 단일 HTML 파일 index.html 을 만듭니다. 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

이제 처음으로 tinystatic 실행할 수 있습니다. 기본적으로 Tinystatic은 routes 디렉터리가 포함된 디렉터리에서 호출될 것으로 예상하지만 -routes 매개변수를 사용하여 이를 변경할 수 있습니다. 명령을 실행한 후 routes 폴더 옆에 폴더 output 나타나는 것을 볼 수 있습니다. 이제 파일 구조는 다음과 같습니다. 

 my-blog/
    routes/
        index.html
    output/
        index.html

이제 출력 디렉터리에서 웹 서버를 실행할 수 있습니다. 예를 들어 Python의 내장 서버를 사용하여 http://localhost:8000 에서 웹 사이트를 열 수 있습니다. 

 cd output
python3 -m http.server

지금까지 Tinystatic이 수행한 작업은 index.html 을 routes 에서 output 으로 복사하는 것뿐이었습니다. 그다지 유용하지는 않지만 잠시 기다려 보세요.

routes 에 두 번째 HTML 파일(예: about.html 을 추가해 보겠습니다. 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

tinystatic 다시 실행하고 웹 서버가 계속 실행 중인 상태에서 이제 http://localhost:8000/about 으로 이동할 수 있습니다. Tinystatic이 다음과 같이 단일 index.html 이 포함 about 폴더를 만들었기 때문에 이 경로에 더 이상 .html 없다는 점에 유의하세요. 

 output/
    index.html
    about/
        index.html

현재 페이지에서 마음에 들지 않는 점은 모든 기본 HTML 구조가 중복된다는 것입니다. index.html 및 about.html 에 대해 공유 템플릿을 사용하는 것이 더 좋지 않을까요? 이를 위해 routes 폴더 옆에 templates 라는 폴더를 만들고 그 안에 HTML 파일 default.html 넣습니다. 

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

default.html 의 내용은 다음과 같아야 합니다. 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

또한, routes/index.html 의 내용을 다음과 같이 변경합니다. 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

routes/about.html 의 내용은 다음과 같습니다. 

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

tinystatic 다시 실행하면 출력은 이전 출력과 동일하지만 HTML 뼈대를 단일 위치로 통합했습니다.

방금 본 것처럼 파일 상단의 메타 데이터에 템플릿 이름을 제공하여 콘텐츠를 렌더링할 템플릿을 지정할 수 있습니다. 또한 다른 템플릿(아래 참조)을 포함하고 Go의 템플릿 파이프라인을 사용할 수도 있습니다. 렌더링하는 동안 파일 상단에 정의된 메타 데이터(파일 상단에 정의된 메타 데이터의 맵인 Route.Href , Route.FilePath 및 Route.Meta 필드가 있는 Route 구조체)에 액세스할 수 있습니다. 게다가 모든 경로의 일부(Go를 처음 접하는 사람들을 위한 배열)인 Routes 에 액세스할 수 있습니다. 이에 대해서는 아래에서 더 자세히 알아볼 것입니다.

이 메타데이터를 Go의 템플릿 기본 요소와 함께 사용하여 현재 페이지에 따라 페이지 제목을 변경해 보겠습니다. 이를 위해 routes/about.html 의 메타데이터를 다음으로 변경합니다. 

 ---
template: default.html
title: About
---

마지막으로 templates/default.html 다음으로 변경합니다. 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

웹사이트를 다시 생성한 후 브라우저는 이제 색인 및 정보 페이지에 대해 다른 페이지 제목을 표시해야 합니다.

이제 경로 폴더에 몇 가지 블로그 게시물을 만들어 보겠습니다. 

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

routes/index.html 및 routes/about.html 에서 메타 데이터를 지정한 방법과 유사하게 템플릿을 default.html 로 지정하는 상단의 메타 데이터 섹션과 함께 이러한 .md 파일 내에 일부 마크다운을 배치합니다. first_post.md 의 경우 다음과 같습니다. 

 ---
template : default.html
title : First Post
---

# Here could be some fine content

출력을 재생성하기 위해 다시 tinystatic 실행하면 이제 http://localhost:8000/posts/first_post 및 http://localhost:8000/posts/second_post 방문할 수 있습니다. 마크다운은 HTML로 변환되어 body 라는 템플릿 안에 배치되어 templates/default.html 의 {{template "body" .}} 자리 표시자로 렌더링됩니다. 이것이 수동으로 {{define "body"}} ... {{end}} 호출해야 하는 .html 파일과 어떻게 다른지 확인하세요.

다음으로 앞서 언급한 Routes 슬라이스를 사용하여 게시물 목록을 만들어 보겠습니다. routes/index.html 의 내용을 다음과 같이 변경합니다. 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

재생성한 후에는 인덱스 페이지에 게시물 목록이 표시됩니다. Routes 슬라이스는 사전 정의된 도우미 함수를 사용하여 필터링할 수 있는 모든 경로 목록을 제공합니다.

  • .Routes | filterFilePath "**/posts/*.md" - post라는 폴더에서 .md 로 끝나는 모든 파일을 표시합니다.
  • .Routes | sortAsc "title" 메타 데이터 필드 title 기준으로 경로를 정렬하는 .Routes | sortAsc "title"
  • .Routes | limit 10 처음 10개의 경로만 얻으려면 .Routes | limit 10
  • .Routes | offset 3 처음 세 경로를 건너뛰려면 .Routes | offset 3
  • .Routes | filter "title" "*Post" *Post 패턴과 일치하는 메타데이터 필드 title 기반으로 필터링하려면 .Routes | filter "title" "*Post"
  • .Routes | filterFileName "*.md" - *.md 로 끝나는 모든 파일 가져오기
  • .Routes | filterHref "/*" 모든 최상위 경로를 얻으려면 .Routes | filterHref "/*"
  • .Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 위의 항목 중 일부를 결합하려면 .Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10

다음으로, 다른 페이지와는 다른 게시물 레이아웃을 사용하고 싶습니다. 게시물에는 텍스트 앞에 이미지가 있어야 하며, 이에 따라 게시물 메타데이터에서 이미지 URL을 정의하려고 합니다. 따라서 다음 내용이 포함된 templates/post.html 이라는 두 번째 템플릿을 추가합니다. 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

포스트 메타데이터를 다음과 같이 변경합니다. 

 ---
template: post.html
title: First Post
image: https://some-image.url
---

출력을 재생성하면 게시물 위에 아름다운 이미지가 제공됩니다. 그러나 우리는 템플릿에 HTML 코드가 다시 중복되게 되었습니다. 이를 개선하기 위해 우리는 partials 이라는 routes 와 templates 옆에 또 다른 폴더를 만듭니다. 부분 내부에서 다음을 사용하여 head.html 이라는 파일을 만듭니다. 

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

템플릿의 <head>...</head> 다음과 같이 {{template "head" .}} 로 바꿉니다. 

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

이제 우리는 서로 다른 템플릿 간의 코드 복제를 최소한으로 줄였습니다. 이 partials 디렉토리를 사용하여 탐색 모음이나 바닥글과 같은 모든 종류의 반복 구성 요소를 저장할 수 있습니다.

실제로 이 튜토리얼에서 사용한 폴더 이름을 사용하여 프로젝트를 구성할 필요는 없습니다. 이러한 폴더 이름은 단지 기본값일 뿐이지만 해당 명령줄 인수를 사용하여 변경할 수 있습니다(자세한 내용은 tinystatic -help 참조).

여기에 블로그의 전체 예가 있습니다.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체