정적 사이트 생성기는 가볍고 빠르며 확장 가능한 웹사이트 생성을 단순화하는 강력한 도구입니다. 블로그, 문서 또는 소규모 비즈니스 사이트를 구축하는 경우 Markdown으로 작성된 콘텐츠를 효율적이고 정적 HTML 파일로 변환합니다.

이 가이드에서는 성능, 단순성 및 동시성으로 유명한 프로그래밍 언어인 Go에서 정적 사이트 생성기(SSG)를 만들어 보겠습니다. Markdown 파일을 입력으로 사용하고, 사전 정의된 HTML 템플릿을 사용하여 처리하고, 아름답고 정적인 HTML 페이지를 출력하는 CLI 도구를 구축하겠습니다.

왜 이것을 구축해야 할까요?

정적 사이트 생성기는 여러 가지 실용적인 용도로 사용될 수 있습니다.

문서 사이트: 기술 문서를 빠르게 로드하는 사이트를 생성합니다.
블로그: 마크다운으로 콘텐츠를 작성하고 손쉽게 배포하세요.
프로토타이핑: 소규모 프로젝트나 쇼케이스를 위한 정적 사이트를 빠르게 가동하세요.

이 프로젝트에 Go를 사용하는 이유는 무엇인가요?

속도: Go는 기본 기계 코드로 컴파일하여 이와 같은 도구를 엄청나게 빠르게 만듭니다.
동시성: Go를 사용하면 여러 파일을 동시에 쉽게 처리할 수 있습니다.
단순성: Go의 구문은 최소화되어 있으며 CLI 도구 구축도 간단합니다.

이 프로젝트를 만들면서 정말 즐거운 시간을 보냈습니다 :)

프로젝트 설정

코드를 살펴보기 전에 프로젝트 구조를 간략히 살펴보겠습니다.

static-site-generator/
├── cmd/
│   └── ssg/
│       └── main.go           # Entry point
├── internal/
│   ├── generator/
│   │   └── html.go          # HTML generation logic
│   ├── parser/
│   │   ├── frontmatter.go   # YAML frontmatter parsing
│   │   └── markdown.go      # Markdown processing
│   └── watcher/
│       └── watcher.go       # File change detection
├── templates/
│   └── default.html         # HTML template
├── content/                 # Markdown files
└── output/

로그인 후 복사

처음부터 빌드하려면 이 명령을 실행하여 프로젝트의 Go 모듈을 초기화하세요

go mod init

로그인 후 복사

주요 기능:

마크다운을 HTML로 변환 ?
메타데이터 구문 분석을 위한 YAML 머리말
맞춤형 출력을 위한 HTML 템플릿
감시자로 실시간 파일 변경 감지 ?

프로젝트 구축

1. 리포지토리 복제

시작하기 전에 저장소를 로컬 시스템에 복제하세요.

git clone https://github.com/Tabintel/static-site-generator.git
cd static-site-generator

로그인 후 복사

타빈텔 / 정적 사이트 생성기

정적 사이트 생성기

Go로 작성된 빠르고 간단한 정적 사이트 생성기

GitHub에서 보기

이렇게 하면 SSG를 빌드하고 실행하는 데 필요한 모든 시작 파일과 프로젝트 구조가 제공됩니다.

2. 마크다운 파서

Markdown 파서는 .md 파일을 HTML 콘텐츠로 변환하는 작업을 처리합니다. 자동 제목 ID와 같은 확장 기능도 사용할 수 있습니다.

internal/parser/markdown.go

static-site-generator/
├── cmd/
│   └── ssg/
│       └── main.go           # Entry point
├── internal/
│   ├── generator/
│   │   └── html.go          # HTML generation logic
│   ├── parser/
│   │   ├── frontmatter.go   # YAML frontmatter parsing
│   │   └── markdown.go      # Markdown processing
│   └── watcher/
│       └── watcher.go       # File change detection
├── templates/
│   └── default.html         # HTML template
├── content/                 # Markdown files
└── output/

로그인 후 복사

✨확장된 기능 지원을 통해 마크다운 콘텐츠를 HTML 형식으로 변환합니다.

3. 머리말 파서

머리말 파서는 Markdown 파일에서 제목, 날짜, 태그, 설명과 같은 메타데이터를 추출합니다.

internal/parser/frontmatter.go

go mod init

로그인 후 복사

? Markdown 파일의 콘텐츠와 함께 메타데이터를 추출하고 반환합니다.

4. HTML 생성기

HTML 생성기는 Go의 html/template 패키지를 사용하여 템플릿을 기반으로 정적 HTML 페이지를 생성합니다.

internal/generator/html.go

git clone https://github.com/Tabintel/static-site-generator.git
cd static-site-generator

로그인 후 복사

? 템플릿과 구문 분석된 Markdown 콘텐츠에서 HTML 파일을 생성합니다.

5. 파일 감시자

감시자는 콘텐츠/디렉토리의 변경 사항을 모니터링하고 자동으로 재구축을 시작합니다.

https://github.com/fsnotify/fsnotify를 사용하여 빌드되었습니다

내부/watcher/watcher.go

package parser

import (
    "github.com/gomarkdown/markdown"
    "github.com/gomarkdown/markdown/parser"
)

type MarkdownContent struct {
    Content    string
    Title      string
    Date       string
    Tags       []string
    HTMLOutput string
}

func ParseMarkdown(content []byte) *MarkdownContent {
    extensions := parser.CommonExtensions | parser.AutoHeadingIDs
    parser := parser.NewWithExtensions(extensions)
    html := markdown.ToHTML(content, parser, nil)

    return &MarkdownContent{
        Content:    string(content),
        HTMLOutput: string(html),
    }
}

로그인 후 복사

? 파일 변경 사항을 감지하고 정적 파일 재생성을 자동화합니다.

6. 주요 응용 프로그램

진입점은 모든 구성요소를 하나로 연결하고 사용자 정의를 위한 CLI 옵션을 제공합니다.

cmd/ssg/main.go

package parser

import (
    "bytes"
    "gopkg.in/yaml.v2"
)

type Frontmatter struct {
    Title       string   `yaml:"title"`
    Date        string   `yaml:"date"`
    Tags        []string `yaml:"tags"`
    Description string   `yaml:"description"`
}

func ParseFrontmatter(content []byte) (*Frontmatter, []byte, error) {
    parts := bytes.Split(content, []byte("---"))
    if len(parts) < 3 {
        return nil, content, nil
    }

    var meta Frontmatter
    err := yaml.Unmarshal(parts[1], &meta)
    if err != nil {
        return nil, content, err
    }

    return &meta, bytes.Join(parts[2:], []byte("---")), nil
}

로그인 후 복사

용법

앱을 실행하기 전, .md를 사용하여 마크다운 파일을 생성하고 콘텐츠 디렉터리에 저장하세요

How to Create a Static Site Generator with Go

그런 다음 생성기를 실행합니다.

package generator

import (
    "html/template"
    "os"
    "path/filepath"
)

type Generator struct {
    TemplateDir string
    OutputDir   string
}

func NewGenerator(templateDir, outputDir string) *Generator {
    return &Generator{
        TemplateDir: templateDir,
        OutputDir:   outputDir,
    }
}

func (g *Generator) Generate(data interface{}, outputFile string) error {
    if err := os.MkdirAll(g.OutputDir, 0755); err != nil {
        return err
    }

    tmpl, err := template.ParseFiles(filepath.Join(g.TemplateDir, "default.html"))
    if err != nil {
        return err
    }

    out, err := os.Create(filepath.Join(g.OutputDir, outputFile))
    if err != nil {
        return err
    }
    defer out.Close()

    return tmpl.Execute(out, data)
}

로그인 후 복사

마크다운 파일을 HTML 파일로 변환하여 출력 디렉터리에 저장합니다

보시다시피 서식을 추가하여 시각적으로 매력적으로 만들어줍니다 :)

How to Create a Static Site Generator with Go

변화를 관찰하세요

감시자 활성화:

package watcher

import (
    "fmt"
    "github.com/fsnotify/fsnotify"
    "log"
    "os"
    "path/filepath"
)

type ProcessFn func() error

func Watch(dir string, process ProcessFn) error {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        return err
    }
    defer watcher.Close()

    done := make(chan bool)
    go func() {
        for {
            select {
            case event, ok := <-watcher.Events:
                if !ok {
                    return
                }
                if event.Op&fsnotify.Write == fsnotify.Write {
                    fmt.Printf("Modified file: %s\n", event.Name)
                    if err := process(); err != nil {
                        log.Printf("Error processing: %v\n", err)
                    }
                }
            case err, ok := <-watcher.Errors:
                if !ok {
                    return
                }
                log.Printf("Error: %v\n", err)
            }
        }
    }()

    err = filepath.Walk(dir, func(path string, info os.FileInfo, err error) error {
        if err != nil {
            return err
        }
        if info.IsDir() {
            return watcher.Add(path)
        }
        return nil
    })
    if err != nil {
        return err
    }

    <-done
    return nil
}

로그인 후 복사

How to Create a Static Site Generator with Go