Özel Yapılmış Statik Site Oluşturucu ile Yığınınızı Basitleştirin

Yayınlanan: 2022-03-10

Kısa özet ↬ Modern geliştirmede, web siteleri geliştirmek için çok sayıda harika araç vardır, ancak bunlar genellikle belirli bir proje için gerekli olandan daha fazladır. Bu makalede, mütevazı bir HTML sayfasının nasıl alınacağını ve içeriğini çerçeveler ve istemci tarafı JavaScript olmadan bir CMS'de düzenlenebilir hale getirmeyi keşfedeceğiz.

Jamstack hareketinin ortaya çıkmasıyla birlikte, statik olarak sunulan siteler yeniden moda oldu. Statik HTML sunan çoğu geliştirici, yerel HTML yazmıyor. Sağlam bir geliştirici deneyimine sahip olmak için genellikle Statik Site Üreticileri (SSG) adı verilen araçlara başvururuz.

Bu araçlar, büyük ölçekli statik siteler yazmayı keyifli hale getiren birçok özellikle birlikte gelir. İster Gatsby'nin veri kaynakları gibi üçüncü taraf API'lere basit kancalar sağlasınlar, isterse 11ty'nin devasa şablon motorları koleksiyonu gibi derinlemesine yapılandırmalar sağlasınlar, statik site oluşturmada herkes için bir şeyler vardır.

Bu araçlar çeşitli kullanım durumları için üretildiğinden, birçok özelliğe sahip olmaları gerekir. Bu özellikler onları güçlü kılar. Ayrıca onları yeni geliştiriciler için oldukça karmaşık ve opak hale getiriyorlar. Bu makalede, SSG'yi temel bileşenlerine indireceğiz ve kendimizinkini oluşturacağız.

Statik Site Oluşturucu Nedir?

Özünde, bir statik site oluşturucu, bir grup dosyayı HTML gibi statik varlıklara dönüştürmek için bir dizi dönüşüm gerçekleştiren bir programdır. Ne tür dosyaları kabul edebileceği, onları nasıl dönüştürdüğü ve ne tür dosyaların ortaya çıktığı SSG'leri farklı kılar.

Erken ve hala popüler bir SSG olan Jekyll, Liquid şablonlarını ve Markdown içerik dosyalarını HTML'ye işlemek için Ruby'yi kullanır.

Gatsby, bileşenleri ve içeriği HTML'ye dönüştürmek için React ve JSX'i kullanır. Ardından bir adım daha ileri gider ve statik olarak sunulabilen tek sayfalık bir uygulama oluşturur.

11ty, HTML'yi Liquid, Handlebars, Nunjucks veya JavaScript şablon değişmezleri gibi şablonlama motorlarından işler.

Bu platformların her biri hayatımızı kolaylaştıracak ek özelliklere sahiptir. Tema sağlarlar, boru hatları oluştururlar, eklenti mimarisi ve daha fazlasını sağlarlar. Her ek özellik ile daha fazla karmaşıklık, daha fazla sihir ve daha fazla bağımlılık gelir. Elbette bunlar önemli özelliklerdir, ancak her projenin bunlara ihtiyacı yoktur.

Bu üç farklı SSG arasında başka bir ortak tema görebiliriz: veri + şablonlar = nihai site. Bu, jeneratör statik sitelerinin temel işlevi gibi görünüyor. Bu, SSG'mizi temel alacağımız işlevselliktir.

Özünde, bir statik site oluşturucu, bir grup dosyayı HTML gibi statik varlıklara dönüştürmek için bir dizi dönüşüm gerçekleştiren bir programdır.
“

Yeni Statik Site Oluşturucumuzun Teknoloji Yığını: Gidonlar, Sanity.io ve Netlify

SSG'mizi oluşturmak için bir şablon motoruna, bir veri kaynağına ve SSG'mizi çalıştırabilecek ve sitemizi oluşturabilecek bir ana bilgisayara ihtiyacımız olacak. Birçok üretici, Markdown'ı veri kaynağı olarak kullanır, ancak bunu bir adım daha ileri götürüp SSG'mizi doğal olarak bir CMS'ye bağlasak ne olur?

Veri Kaynağı: Sanity.io
Veri alma ve şablonlama: Düğüm ve Gidonlar
Ana Bilgisayar ve Dağıtım: Netlify.

Önkoşullar

NodeJS yüklendi
Sanity.io hesabı
Git bilgisi
Temel komut satırı bilgisi
Netlify gibi hizmetlere dağıtım hakkında temel bilgiler.

Not : Devam etmek için kodu GitHub'daki bu depoda bulabilirsiniz.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

HTML'de Belge Yapımızı Kurmak

Belge yapımızı başlatmak için düz HTML yazacağız. Henüz işleri karmaşıklaştırmaya gerek yok.

Proje yapımız içerisinde kaynak dosyalarımızın yaşayabileceği bir yer oluşturmamız gerekiyor. Bu durumda, bir src dizini oluşturacağız ve içine index.html koyacağız.

index.html istediğimiz içeriği özetleyeceğiz. Bu nispeten basit bir sayfa hakkında olacak.

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title of the page!</title> </head> <body> <h1>The personal homepage of Bryan Robinson</h1> <p>Some pagraph and rich text content next</p> <h2>Bryan is on the internet</h2> <ul> <li><a href="linkURL">List of links</a></li> </ul> </body> </html>

Bunu basit tutalım. Sayfamız için bir h1 ile başlayacağız. Bunu birkaç paragraf biyografik bilgi ile takip edeceğiz ve daha fazlasını görmek için sayfaya bir bağlantı listesi ekleyeceğiz.

HTML'mizi Veri Kabul Eden Bir Şablona Dönüştürün

Temel yapımızı elde ettikten sonra, bunu bir miktar veri ile birleştirmek için bir süreç kurmamız gerekiyor. Bunu yapmak için Gidon şablon motorunu kullanacağız.

Gidon, özünde HTML benzeri bir dize alır, belgede tanımlanan kurallar aracılığıyla veri ekler ve ardından derlenmiş bir HTML dizesi çıkarır.

Gidonları kullanmak için bir package.json dosyasını başlatmamız ve paketi yüklememiz gerekecek.

Bazı varsayılan içeriğe sahip bir package.json dosyasının yapısını oluşturmak için npm init -y çalıştırın. Buna sahip olduğumuzda, Gidonları kurabiliriz.

 npm install handlebars

Derleme betiğimiz bir Düğüm betiği olacak. Bu, derlemek için yerel olarak kullanacağımız komut dosyasıdır, aynı zamanda dağıtım satıcımız ve ana bilgisayarımızın canlı site için HTML'mizi oluşturmak için kullanacağı komuttur.

Komut dosyamızı başlatmak için bir index.js dosyası oluşturacağız ve en üstte iki paket talep edeceğiz. İlki Gidonlar ve ikincisi, mevcut dosya sistemine erişmek için Düğüm'deki varsayılan bir modüldür.

 const fs = require('fs'); const Handlebars = require('handlebars');

Kaynak dosyamıza erişmek ve bir dağıtım dosyasına yazmak için fs modülünü kullanacağız. Derlememizi başlatmak için, çağrıldığında dosyamızın çalışması için bir main fonksiyon ve verilerimizi ve işaretlememizi birleştirmek için bir buildHTML fonksiyonu oluşturacağız.

 function buildHTML(filename, data) { const source = fs.readFileSync(filename,'utf8').toString(); const template = Handlebars.compile(source); const output = template(data); return output } async function main(src, dist) { const html = buildHTML(src, { "variableData": "This is variable data"}); fs.writeFile(destination, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); } main('./src/index.html', './dist/index.html');

main() işlevi iki argümanı kabul eder: HTML şablonumuza giden yol ve yerleşik dosyamızın yaşamasını istediğimiz yol. Ana fonksiyonumuzda, bir miktar veri ile şablon kaynak yolunda buildHTML çalıştırıyoruz.

Derleme işlevi, kaynak belgeyi bir dizgeye dönüştürür ve bu dizgiyi Gidonlara iletir. Gidon, bu dizeyi kullanarak bir şablon derler. Daha sonra verilerimizi derlenmiş şablona iletiyoruz ve Gidon, herhangi bir değişkeni veya şablon mantığını veri çıktısıyla değiştirerek yeni bir HTML dizesi oluşturuyor.

Bu dizgiyi main işlevimize döndürürüz ve dizin varsa, yeni dosyayı belirttiğimiz konuma yazmak için Node'un dosya sistemi modülü tarafından sağlanan writeFile yöntemini kullanırız.

Bir hatayı önlemek için projenize içinde bir .gitkeep dosyası bulunan bir dist dizini ekleyin. Yerleşik dosyalarımızı taahhüt etmek istemiyoruz (bunu derleme sürecimiz yapacak), ancak betiğimiz için bu dizine sahip olduğumuzdan emin olmak istiyoruz.

Bu sayfayı yönetmek için bir CMS oluşturmadan önce, çalıştığını doğrulayalım. Test etmek için HTML belgemizi, içine az önce aktardığımız verileri kullanacak şekilde değiştireceğiz. variableData içeriğini dahil etmek için Gidon değişken sözdizimini kullanacağız.

 <h1>{{ variableData }}</h1>

Artık HTML'mizin bir değişkeni olduğuna göre, düğüm betiğimizi çalıştırmaya hazırız.

 node index.js

Komut dosyası bittiğinde, /dist/index.html adresinde bir dosyamız olmalıdır. Bunu bir tarayıcıda açarsak, işaretlememizin işlendiğini ve aynı zamanda “Bu değişken veri” dizemizi de görürüz.

Bir CMS'ye Bağlanma

Verileri bir şablonla bir araya getirme yöntemimiz var, şimdi verilerimiz için bir kaynağa ihtiyacımız var. Bu yöntem, API'si olan herhangi bir veri kaynağıyla çalışacaktır. Bu demo için Sanity.io'yu kullanacağız.

Sanity, içeriği yapılandırılmış veri olarak ele alan, API öncelikli bir veri kaynağıdır. Hem editörler hem de geliştiriciler için verileri yönetmeyi ve eklemeyi daha kolay hale getirmek için açık kaynaklı bir içerik yönetim sistemine sahiptirler. CMS, genellikle "Başsız" CMS olarak adlandırılan şeydir. Verilerinizin sunumunuza sıkı sıkıya bağlı olduğu geleneksel bir yönetim sistemi yerine, başsız bir CMS, herhangi bir ön uç veya hizmet (ve muhtemelen aynı anda birçok kişi) tarafından tüketilebilecek bir veri katmanı oluşturur.

Sanity ücretli bir hizmettir, ancak ücretsiz ve böyle bir site için ihtiyacımız olan tüm özelliklere sahip “Standart” bir planları vardır.

Akıl Sağlığını Ayarlamak

Yeni bir Sanity projesini başlatmanın ve çalıştırmanın en hızlı yolu Sanity CLI'yi kullanmaktır. Bunu global olarak kurarak başlayacağız.

 npm install -g @sanity/cli

CLI, yönetme, dağıtma ve oluşturma için bir grup yardımcıya erişmemizi sağlar. İşleri başlatmak için sanity init çalıştıracağız. Bu, Studio'muzu (Sanity'nin açık kaynaklı CMS dediği şey) önyüklemeye yardımcı olacak bir anket aracılığıyla bize yol gösterecek.

 Select a Project to Use: Create new project HTML CMS Use the default dataset configuration? Y // this creates a "Production" dataset Project output path: studio // or whatever directory you'd like this to live in Select project template Clean project with no predefined schemas

Bu adım, Sanity hesabınızda yeni bir proje ve veri kümesi oluşturacak, Studio'nun yerel bir sürümünü oluşturacak ve verileri ve CMS'yi sizin için birbirine bağlayacaktır. Varsayılan olarak, studio dizini projemizin kökünde oluşturulacaktır. Daha büyük ölçekli projelerde, bunu ayrı bir havuz olarak kurmak isteyebilirsiniz. Bu proje için, bunu birbirine bağlı tutmak güzel.

Studio'muzu yerel olarak çalıştırmak için dizini studio dizinine değiştireceğiz ve sanity start . Bu, Studio'yu localhost:3333 çalıştıracaktır. Giriş yaptığınızda, "Boş şema"nız olduğunu bildiren bir ekranla karşılaşacaksınız. Bununla, verilerimizin nasıl yapılandırılacağı ve düzenleneceği olan şemamızı eklemenin zamanı geldi.

Akıl Sağlığı Şeması Oluşturma

Sanity Studio'da belgeler ve alanlar oluşturma yönteminiz, schemas/schema.js dosyası içinde şemalar oluşturmaktır.

Sitemiz için "Hakkında Ayrıntılar" adında bir şema türü oluşturacağız. Şemamız HTML'mizden akacaktır. Genel olarak, web sayfamızın çoğunu tek bir zengin metin alanı yapabiliriz, ancak içeriğimizi ayrılmış bir şekilde yapılandırmak en iyi uygulamadır. Bu, gelecekte bu verileri nasıl kullanmak isteyebileceğimiz konusunda daha fazla esneklik sağlar.

Web sayfamız için aşağıdakileri içeren bir veri seti istiyoruz:

Başlık
Ad Soyad
Biyografi (zengin metin düzenleme ile)
Bir ada ve URL'ye sahip web sitelerinin listesi.

Bunu şemamızda tanımlamak için belgemiz için bir nesne oluşturuyoruz ve alanlarını tanımlıyoruz. Alan type birlikte içeriğimizin açıklamalı bir listesi:

Başlık — dize
Tam Ad — dize
Biyografi — “bloklar” dizisi
Web sitesi listesi — ad ve URL dize alanları olan nesneler dizisi.

 types: schemaTypes.concat([ /* Your types here! */ { title: "About Details", name: "about", type: "document", fields: [ { name: 'title', type: 'string' }, { name: 'fullName', title: 'Full Name', type: 'string' }, { name: 'bio', title: 'Biography', name: 'content', type: 'array', of: [ { type: 'block' } ] }, { name: 'externalLinks', title: 'Social media and external links', type: 'array', of: [ { type: 'object', fields: [ { name: 'text', title: 'Link text', type: 'string' }, { name: 'href', title: 'Link url', type: 'string' } ] } ] } ] } ])

Bunu şema türlerinize ekleyin, kaydedin ve Studio'nuz yeniden derleyecek ve size ilk belgelerinizi sunacaktır. Buradan yeni bir belge oluşturup bilgileri doldurarak içeriğimizi CMS'ye ekleyeceğiz.

İçeriğinizi Yeniden Kullanılabilir Bir Şekilde Yapılandırma

Bu noktada, neden bir "tam adımız" ve bir "unvanımız" olduğunu merak ediyor olabilirsiniz. Bunun nedeni, içeriğimizin çok amaçlı olma potansiyeline sahip olmasını istememizdir. Adı sadece başlığa eklemek yerine bir ad alanı ekleyerek bu verileri daha fazla kullanırız. Daha sonra bu CMS'deki bilgileri bir özgeçmiş sayfasına veya PDF'ye güç sağlamak için de kullanabiliriz. Biyografi alanı, diğer sistemlerde veya web sitelerinde programlı olarak kullanılabilir. Bu, bu belirli sitenin doğrudan kullanım durumu tarafından dikte edilmek yerine, bu içeriğin çoğu için tek bir gerçek kaynağına sahip olmamızı sağlar.

Verilerimizi Projemize Çekmek

Artık verilerimizi bir API aracılığıyla kullanıma sunduğumuza göre, şimdi onu projemize çekelim.

Sanity JavaScript istemcisini kurun ve yapılandırın

İlk olarak, Node.js'deki verilere erişmemiz gerekiyor. Bu bağlantıyı kurmak için Sanity JavaScript istemcisini kullanabiliriz.

 npm install @sanity/client

Bu, JavaScript SDK'sını getirecek ve kuracaktır. Buradan, daha önce kurduğumuz projeden veri alacak şekilde yapılandırmamız gerekiyor. Bunu yapmak için /utils/SanityClient.js içinde bir yardımcı program komut dosyası oluşturacağız. SDK'ya proje kimliğimizi ve veri kümesi adımızı sağlıyoruz ve bunu ana betiğimizde kullanmaya hazırız.

 const sanityClient = require('@sanity/client'); const client = sanityClient({ projectId: '4fs6x5jg', dataset: 'production', useCdn: true }) module.exports = client;

GROQ ile Verilerimizi Getirmek

index.js dosyamıza geri dönersek, verilerimizi almak için yeni bir fonksiyon yaratacağız. Bunu yapmak için Sanity'nin yerel sorgu dili olan açık kaynaklı GROQ'u kullanacağız.

Sorguyu bir değişkende oluşturacağız ve ardından sorguya dayalı olarak verileri getirmek için yapılandırdığımız istemciyi kullanacağız. Bu durumda, about adlı bir özelliğe sahip bir nesne oluşturuyoruz. Bu nesnede, belirli belgemiz için verileri döndürmek istiyoruz. Bunu yapmak için, belgemizi oluşturduğumuzda otomatik olarak oluşturulan _id belgesini temel alarak sorgularız.

Belgenin _id bulmak için, Studio'da belgeye gideriz ve onu URL'den kopyalar veya belgedeki tüm verileri görüntülemek için "İncele" moduna geçeriz. Inspect'e girmek için sağ üstteki "kabob" menüsünü tıklayın veya Ctrl + Alt + I kısayolunu kullanın. Bu görünüm, _id de dahil olmak üzere bu belgedeki tüm verileri listeleyecektir. Sanity bir dizi belge nesnesi döndürür, bu nedenle basitlik adına 0th girişi döndüreceğiz.

Daha sonra sorguyu Sanity istemcimizin fetch yöntemine iletiyoruz ve belgemizdeki tüm verilerin bir JSON nesnesini döndürecek. Bu demoda, tüm verileri döndürmek çok da önemli değil. Daha büyük uygulamalar için GROQ, yalnızca istediğiniz açık alanları döndürmek için isteğe bağlı bir "yansıtma" sağlar.

 const client = require('./utils/SanityClient') // at the top of the file // ... async function getSanityData() { const query = `{ "about": *[_id == 'YOUR-ID-HERE'][0] }` let data = await client.fetch(query); }

Zengin Metin Alanını HTML'ye Dönüştürme

Verileri döndürmeden önce zengin metin alanımızda bir dönüşüm yapmamız gerekiyor. Birçok CMS, HTML'yi doğrudan döndüren zengin metin düzenleyicileri kullanırken, Sanity, Taşınabilir Metin adı verilen açık kaynaklı bir özellik kullanır. Taşınabilir Metin, zengin metin stili ve bağlantılar, dipnotlar ve diğer açıklamalar gibi özelliklerle ilgili tüm verileri içeren bir dizi nesneyi (zengin metni paragrafların ve diğer medya bloklarının bir listesi olarak düşünün) döndürür. Bu, metninizin, sesli yardımcılar ve yerel uygulamalar gibi HTML'yi desteklemeyen sistemlerde taşınmasına ve kullanılmasına olanak tanır.

Kullanım durumumuz için, nesneyi HTML'ye dönüştürmemiz gerektiği anlamına gelir. Taşınabilir metni çeşitli kullanımlara dönüştürmek için kullanılabilecek NPM modülleri vardır. Bizim durumumuzda blok-içerik-html adlı bir paket kullanacağız.

 npm install @sanity/block-content-to-html

Bu paket, zengin metin düzenleyicisinden tüm varsayılan işaretlemeyi oluşturacaktır. Kullanım durumunuz için ihtiyacınız olan işaretlemeye uyması için her stil türü geçersiz kılınabilir. Bu durumda, işi bizim için paketin yapmasına izin vereceğiz.

 const blocksToHtml = require('@sanity/block-content-to-html'); // Added to the top async function getSanityData() { const query = `{ "about": *[_type == 'about'][0] }` let data = await client.fetch(query); data.about.content = blocksToHtml({ blocks: data.about.content }) return await data }

Sanity.io İçeriğini Gidonlarda Kullanma

Artık veriler onu kullanabileceğimiz bir şekle sahip olduğuna göre, bunu data argümanı olarak buildHTML fonksiyonumuza ileteceğiz.

 async function main(src, dist) { const data = await getSanityData(); const html = buildHTML(src, data) fs.writeFile(dist, html, function (err) { if (err) return console.log(err); console.log('index.html created'); }); }

Artık yeni verileri kullanmak için HTML'mizi değiştirebiliriz. Verilerimizin çoğunu çekmek için şablonumuzda daha fazla değişken çağrı kullanacağız.

Zengin metin content değişkenimizi oluşturmak için değişkenimize fazladan bir parantez katmanı eklememiz gerekecek. Bu, Gidonlara HTML'yi bir dize olarak görüntülemek yerine HTML'yi oluşturmasını söyleyecektir.

externalLinks dizimiz için, Studio'ya eklediğimiz tüm bağlantıları görüntülemek için Handlebars'ın yerleşik döngü işlevini kullanmamız gerekecek.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ about.title }}</title> </head> <body> <h1>The personal homepage of {{ about.fullName }}</h1> {{{ about.content }}} <h2>Bryan is on the internet</h2> <ul> {{#each about.externalLinks }} <li><a href="{{ this.href }}">{{ this.text }}</a></li> {{/each}} </ul> </body> </html>

Dağıtımı Ayarlama

Bunu canlı yayınlayalım. Bu işi yapmak için iki bileşene ihtiyacımız var. İlk olarak, dosyalarımızı bizim için oluşturacak statik bir ana bilgisayar istiyoruz. Ardından, CMS'mizde içerik değiştirildiğinde sitemizin yeni bir yapısını tetiklememiz gerekiyor.

Netlify için Dağıtım

Barındırma için Netlify kullanacağız. Netlify, statik bir site ana bilgisayarıdır. Statik varlıklara hizmet eder, ancak sitemizin sorunsuz çalışmasını sağlayacak ek özelliklere sahiptir. Düğüm komut dosyamızı çalıştırabilen yerleşik bir dağıtım altyapısına, yapıları tetiklemek için web kancalarına ve HTML sayfamızın hızlı bir şekilde sunulmasını sağlamak için küresel olarak dağıtılmış bir CDN'ye sahiptirler.

Netlify, GitHub'daki depomuzu izleyebilir ve kontrol panellerine ekleyebileceğimiz bir komuta dayalı bir yapı oluşturabilir.

Öncelikle bu kodu GitHub'a göndermemiz gerekecek. Ardından Netlify Dashboard'da yeni depoyu Netlify'daki yeni bir siteye bağlamamız gerekiyor.

Bu bağlandıktan sonra, Netlify'a projemizi nasıl oluşturacağımızı söylememiz gerekiyor. Kontrol panelinde, Ayarlar > Oluştur ve Dağıt > Yapı Ayarları'na gideceğiz. Bu alanda “Build komutumuzu” “node index.js” ve “Publish directory”mizi “./dist” olarak değiştirmemiz gerekiyor.

Netlify sitemizi kurduğunda komutumuzu çalıştıracak ve daha sonra listelediğimiz klasörü içerik açısından kontrol edecek ve içindeki içeriği yayınlayacaktır.

Webhook Ayarlama

Ayrıca birisi içeriği güncellediğinde Netlify'a yeni bir sürüm yayınlamasını söylememiz gerekiyor. Bunu yapmak için, sitenin yeniden inşa edilmesi gerektiğini Netlify'a bildirmek için bir Web kancası kuracağız. Web kancası, Origin hizmetinde (bu durumda Netlify) bir eylem oluşturmak için farklı bir hizmet (Sanity gibi) tarafından programlı olarak erişilebilen bir URL'dir.

Netlify panomuzda Ayarlar > Oluştur ve Dağıt > Kancalar oluştur bölümünde belirli bir "Yapı kancası" kurabiliriz. Bir kanca ekleyin, bir ad verin ve kaydedin. Bu, Netlify'da bir yapıyı uzaktan tetiklemek için kullanılabilecek bir URL sağlayacaktır.

Ardından, değişiklikleri yayınladığınızda Sanity'ye bu URL'ye bir istekte bulunmasını söylememiz gerekiyor.

Bunu başarmak için Sanity CLI'yi kullanabiliriz. /studio dizinimizin içinde, bağlanmak için sanity hook create çalıştırabiliriz. Komut, bir ad, bir veri kümesi ve bir URL isteyecektir. Ad, istediğiniz gibi olabilir, veri kümesi ürünümüz için üretilmiş olmalıdır ve URL, production sağladığı URL olmalıdır.

Artık Studio'da ne zaman içerik yayınlasak, web sitemiz otomatik olarak güncellenecek. Çerçeve gerekli değil.

Kod bu GitHub deposunda bulunabilir →

Sonraki adımlar

Bu, kendi takımlarınızı oluşturduğunuzda neler yapabileceğinizin çok küçük bir örneğidir. Çoğu proje için daha tam özellikli SSG'ler ihtiyacınız olan şey olsa da, kendi mini SSG'nizi oluşturmak, seçtiğiniz jeneratörde neler olduğu hakkında daha fazla bilgi edinmenize yardımcı olabilir.

Bu site yalnızca bir sayfa yayınlıyor, ancak derleme komut dosyamızda biraz fazladan varsa, daha fazla sayfa yayınlamasını sağlayabilirdik. Hatta bir blog yazısı yayınlayabilir.
Depoda “Geliştirici deneyimi” biraz eksik. Nodemon gibi bir paket uygulayarak veya BrowserSync gibi bir şeyle "sıcak yeniden yükleme" ekleyerek Node komut dosyamızı herhangi bir dosya kaydında çalıştırabiliriz.
Sanity'de yaşayan veriler birden fazla siteye ve hizmete güç sağlayabilir. Bunu kullanan ve web sayfası yerine PDF yayınlayan bir özgeçmiş sitesi oluşturabilirsiniz.
CSS ekleyebilir ve bunun gerçek bir site gibi görünmesini sağlayabilirsiniz.