Penjana tapak statik ialah alatan berkuasa yang memudahkan penciptaan tapak web yang ringan, pantas dan berskala. Sama ada anda membina blog, dokumentasi atau tapak perniagaan kecil, mereka mengubah kandungan yang ditulis dalam Markdown menjadi fail HTML statik yang cekap.

Dalam panduan ini, kami akan mencipta Penjana Tapak Statik (SSG) dalam Go, bahasa pengaturcaraan yang terkenal dengan prestasi, kesederhanaan dan keselarasannya. Kami akan membina alat CLI yang mengambil fail Markdown sebagai input, memprosesnya menggunakan templat HTML yang dipratentukan dan menghasilkan halaman HTML statik yang cantik.

Mengapa Membina Ini?

Penjana tapak statik boleh digunakan untuk beberapa tujuan praktikal:

• Tapak Dokumentasi: Jana tapak pemuatan pantas untuk dokumentasi teknikal.
• Blog: Tulis kandungan anda dalam Markdown dan gunakannya dengan mudah.
• Prototaip: Putar tapak statik dengan pantas untuk projek kecil atau pameran.

Mengapa menggunakan Go untuk projek ini?

• Kelajuan: Pergi kompilasi ke kod mesin asli, menjadikan alat seperti ini sangat pantas.
• Concurrency: Go memudahkan untuk memproses berbilang fail serentak.
• Kesederhanaan: Sintaks Go adalah minimum dan membina alatan CLI adalah mudah.

Saya seronok membina projek ini :)

Persediaan Projek

Sebelum menyelami kod, mari kita gariskan struktur projek:

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/

Jika anda ingin membina dari awal, jalankan arahan ini untuk memulakan modul Go untuk projek

go mod init

Ciri Utama:

• Tukar Markdown kepada HTML ?

• YAML frontmatter untuk penghuraian metadata

• Templat HTML untuk output boleh disesuaikan

• Pengesanan perubahan fail masa nyata dengan pemerhati ?

Membina Projek

1. Klon Repositori

Sebelum memulakan, klon repositori ke mesin tempatan anda:

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

Ini akan memberi anda semua fail permulaan dan struktur projek yang diperlukan untuk membina dan menjalankan SSG.

2. Penghurai Markdown

Penghurai Markdown mengendalikan penukaran fail .md kepada kandungan HTML. Ia juga mendayakan ciri lanjutan seperti ID pengepala automatik.

dalaman/penghuraikan/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/

✨Menukar kandungan Markdown ke dalam format HTML dengan sokongan ciri lanjutan.

3. Penghurai Frontmatter

Penghurai frontmatter mengekstrak metadata seperti tajuk, tarikh, teg dan penerangan daripada fail Markdown.

dalaman/penghuraikan/frontmatter.go

go mod init

? Mengekstrak dan mengembalikan metadata bersama-sama dengan kandungan fail Markdown.

4. Penjana HTML

Penjana HTML menggunakan pakej html/templat Go untuk membuat halaman HTML statik berdasarkan templat.

dalaman/generator/html.go

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

? Menjana fail HTML daripada templat dan menghuraikan kandungan Markdown.

5. Pemerhati Fail

Pemerhati kami memantau kandungan/ direktori untuk perubahan dan mencetuskan pembinaan semula secara automatik.

Ini dibina menggunakan https://github.com/fsnotify/fsnotify

dalaman/pemerhati/pemerhati.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),
    }
}

? Mengesan perubahan fail dan mengautomasikan penjanaan semula fail statik.

6. Aplikasi Utama

Titik masuk menghubungkan semua komponen bersama-sama dan menyediakan pilihan CLI untuk penyesuaian.

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
}

Penggunaan

Sebelum anda menjalankan apl itu, cipta fail penurunan nilai menggunakan .md dan simpan dalam direktori kandungan

Kemudian jalankan penjana:

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)
}

Ia menukarkan fail markdown kepada fail HTML dan menyimpannya dalam direktori output

Seperti yang anda lihat, ia menambahkan pemformatan untuk menjadikannya menarik secara visual :)

Perhatikan Perubahan

Dayakan pemerhati:

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
}

Dan itu sahaja!

SSG ini menukar penurunan nilai kepada HTML yang bersih, melihat perubahan dan memastikan kandungan anda teratur. Lepaskan ulasan jika anda membina sesuatu dengannya - Saya ingin melihat apa yang anda buat!

Temui ini membantu? Anda boleh membelikan saya kopi untuk menyokong lebih banyak tutorial Go! ☕

Selamat pengekodan! ?

Atas ialah kandungan terperinci Cara Membuat Penjana Tapak Statik dengan Go. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!