静的サイトジェネレーターは、軽量、高速、スケーラブルな Web サイトの作成を簡素化する強力なツールです。ブログ、ドキュメント、小規模ビジネスサイトのいずれを構築している場合でも、Markdown で記述されたコンテンツを効率的な静的 HTML ファイルに変換します。

このガイドでは、パフォーマンス、シンプルさ、同時実行性で有名なプログラミング言語である Go で 静的サイトジェネレーター (SSG) を作成します。 Markdown ファイルを入力として受け取り、事前定義された HTML テンプレートを使用してそれらを処理し、美しい静的な HTML ページを出力する CLI ツールを構築します。

なぜこれを構築するのか?

静的サイトジェネレーターは、いくつかの実用的な目的に役立ちます。

ドキュメントサイト: 技術ドキュメントの高速読み込みサイトを生成します。
ブログ: Markdown でコンテンツを記述し、簡単にデプロイできます。
プロトタイピング: 小規模なプロジェクトやショーケース用の静的サイトをすばやく起動します。

このプロジェクトに 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/

ログイン後にコピー

✨拡張機能サポートを使用して、Markdown コンテンツを HTML 形式に変換します。

3. フロントマターパーサー

frontmatter パーサーは、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. ファイルウォッチャー

私たちのウォッチャーは content/ ディレクトリの変更を監視し、自動的に再構築をトリガーします。

これは https://github.com/fsnotify/fsnotify を使用して構築されています

internal/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