Go で静的サイト ジェネレーターを作成する方法

静的サイト ジェネレーターは、軽量、高速、スケーラブルな 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) 


<hr>
<h2>
  
  
  使用法
</h2>

<p>アプリを実行する前に、.md を使用してマークダウン ファイルを作成し、コンテンツ ディレクトリに保存します</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429587675397.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create a Static Site Generator with Go"></p>

<p>次にジェネレーターを実行します。<br>
</p>
<pre class="brush:php;toolbar:false">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 ファイルに変換し、出力ディレクトリに保存します

ご覧のとおり、視覚的に魅力的なものにするために書式設定が追加されています :)

変化に注意してください

ウォッチャーを有効にする:

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 := 


<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429587820788.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create a Static Site Generator with Go"></p>

<hr>

<p>以上です!</p>

<p>この SSG は、マークダウンをクリーンな HTML に変換し、変更を監視し、コンテンツを整理した状態に保ちます。これを使って何かを構築する場合は、コメントを入力してください - あなたが何を作成するか楽しみにしています!</p>

<blockquote>
<p>これは役に立ちましたか?もっと Go チュートリアルをサポートするためにコーヒーを買ってきてください! ☕</p>
</blockquote>

<p>コーディングを楽しんでください! ?</p><div>
  <div>
    <h2>
      <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429587555316.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create a Static Site Generator with Go">
      
        タビンテル
       / 
        静的サイトジェネレーター
      
    </h2>
    <h3>
      
    </h3>
  </div>
  <div>
    
<div>
<div>
<h1>静的サイトジェネレーター

</h1>
</div>

<p dir="auto">Go で書かれた高速かつシンプルな静的サイト ジェネレーター。</p>

</div>
<br>
<br>
  </div>
<br>
  <div>GitHub で表示</div>
<br>
</div>
<br>



          

            
        

以上がGo で静的サイト ジェネレーターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。