Hugo ile Çarpıcı Hızlı Statik Site Nasıl Kurulur

Hugo, genellikle arka uç uygulamaları ve hizmetleri geliştirmek için kullanılan yüksek performanslı derlenmiş bir programlama dili olan Go'da (aka Golang) yazılmış bir statik site oluşturucudur (SSG).

Bugün, Hugo çoğu web sitesini saniyeler içinde (sayfa başına <1 ms) oluşturabilmektedir. Bu, Hugo'nun kendisini neden "web siteleri oluşturmak için dünyanın en hızlı çerçevesi" olarak nitelendirdiğini açıklıyor.

Bu makalede, Hugo'nun tarihine, onu bu kadar hızlı yapan şeyin ne olduğuna ve kendi Hugo statik sitenizi oluşturmaya nasıl başlayabileceğinize bir göz atacağız.

Hugo nedir? Ve Neden Popüler?

Steve Francia, Hugo statik site oluşturucuyu ilk olarak 2013'te geliştirdi ve Bjrn Erik Pedersen, 2015'te projenin baş geliştiricisi olarak devraldı. Hugo, kodunun herkes tarafından görüntülenebileceği ve geliştirilebileceği anlamına gelen açık kaynaklı bir projedir.

Statik bir site oluşturucu olarak Hugo, Markdown içerik dosyalarını alır, bunları tema şablonları aracılığıyla çalıştırır ve çevrimiçi olarak kolayca dağıtabileceğiniz HTML dosyalarını dağıtır ve tüm bunları son derece hızlı bir şekilde yapar.

2021'de yüzlerce olmasa da düzinelerce statik jeneratör var. Her statik site oluşturucunun çekiciliği vardır. Jekyll, Ruby geliştiricileri arasında popülerdir ve diğer seçenekler kadar hızlı olmasa da, yaygın olarak benimsenen ilk statik site oluşturuculardan biriydi. Gatsby, işlevsellik açısından dinamik olan statik olarak konuşlandırılabilir siteler geliştirmek için çok uygun olan bir başka popüler SSG'dir.

Peki, bu kadar çok SSG varken Hugo'yu öne çıkaran nedir?

Hugo Hızlıdır

Ham performans açısından, Hugo dünyadaki en iyi statik site oluşturucudur. Jekyll ile karşılaştırıldığında, Hugo'nun Forestry tarafından 35 kat daha hızlı olduğu gösterildi. Benzer şekilde, Hugo 10.000 sayfalık bir siteyi 10 saniyede oluşturabiliyor, bu da Gatsby'nin tamamlaması yarım saatten fazla sürecek bir görev. Hugo, yapım süreleri açısından yalnızca en hızlı SSG olmakla kalmaz, aynı zamanda kurulumu da hızlıdır.

Hugo, Jekyll, Gatsby ve bir paket yöneticisi ile bağımlılık yüklemeyi gerektiren diğer SSG'lerin aksine, bağımsız bir yürütülebilir dosya olarak gönderilir. Bu, yazılım bağımlılıkları konusunda endişelenmenize gerek kalmadan Hugo'yu hemen indirip kullanabileceğiniz anlamına gelir.

Hugo'da Şablon Oluşturmak Kolaydır

SSG dilinde "şablon oluşturma", bir HTML sayfasına dinamik içerik eklemek için yer tutucular ekleme sürecini ifade eder. Bir sayfanın başlığına erişmek için {{ .Title }} değişkenini kullanabilirsiniz. Bu nedenle, bir Hugo HTML şablonunda, {{ .Title }} H1 etiketleriyle şu şekilde sarıldığını görmek yaygındır:

 <h1>{{ .Title }}</h1>

Derleme zamanında, Hugo bir içerik dosyasındaki başlığı otomatik olarak alır ve başlığı iki <h1> etiketi arasına ekler. Hugo'nun çeşitli yerleşik şablonlama değişkenleri vardır ve hatta derleme zamanında verileri işlemek için özel işlevler yazabilirsiniz. Hugo, şablon oluşturmak için Go'nun yerleşik html/template ve text/template kitaplıklarını kullanır. Bu, uygulama şişkinliğini azaltmaya yardımcı olur çünkü Hugo'nun şablonlama için üçüncü taraf kitaplıkları yüklemesine gerek yoktur.

İşte popüler Ananke temasından bir index.html ana sayfa şablonu örneği. Gördüğünüz gibi, bazı ek şablon kodları içeren standart bir HTML dosyasına benziyor:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Hugo Nasıl Kurulur

Hugo, derlenmiş bir yürütülebilir dosya olarak gönderilir; bu, yalnızca başlamak için birçok bağımlılığı indirip yönetmeniz gerekmediği anlamına gelir. macOS, Windows ve Linux için kullanılabilir.

Hugo'yu macOS ve Linux'a Nasıl Kurulur

macOS ve Linux için önerilen yükleme yöntemi, uygulamaları yüklemek ve güncellemek için bir paket yöneticisi olan Homebrew gerektirir. Henüz Homebrew kurulu değilse, Terminal'de aşağıdaki komutu çalıştırarak kurabilirsiniz:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew kurulduktan sonra Hugo'yu kurmak için aşağıdaki komutu çalıştırın:

 brew install hugo

Windows'ta Hugo Nasıl Kurulur

Windows kullanıcıları için Hugo, Chocolatey veya Scoop paket yöneticileri kullanılarak kurulabilir. Chocolatey ve Scoop'u yükleme talimatları Homebrew'dan biraz daha karmaşık olduğundan, buradaki ve buradaki resmi belge sayfalarına başvurmanızı öneririz.

Chocolatey veya Scoop'u kurduktan sonra, aşağıdaki komutlardan birini kullanarak Hugo'yu kurabilirsiniz (paket yöneticinize bağlı olarak):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Hugo'nun Doğru Kurulduğunu Doğrulama

Hugo'nun doğru şekilde yüklendiğini doğrulamak için aşağıdaki komutu çalıştırın:

 hugo version

Bu Terminal komutu, Hugo'nun şu anda kurulu olan sürümüyle ilgili bilgileri şu şekilde vermelidir:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugo Komutları ve Yapılandırma

Hugo ile statik bir site oluşturmaya başlamadan önce, çeşitli CLI komutlarını ve yapılandırma dosyası parametrelerini tanıyalım.

Hugo CLI Komutları

• hugo check - çeşitli doğrulama kontrollerini çalıştırır
• hugo config - bir Hugo sitesi için yapılandırmayı görüntüler
• hugo convert – içeriği farklı biçimlere dönüştürür
• hugo deploy - sitenizi bir bulut sağlayıcısına dağıtır
• hugo env - Hugo sürümünü ve ortam bilgilerini görüntüler
• hugo gen - çeşitli jeneratörlere erişim sağlar
• hugo help - bir komutla ilgili bilgileri görüntüler
• hugo import - başka bir konumdan bir siteyi içe aktarmanıza olanak tanır
• hugo list - çeşitli içerik türlerinin bir listesini görüntüler
• hugo mod - çeşitli modül yardımcılarına erişim sağlar
• hugo new - siteniz için yeni içerik oluşturmanıza olanak tanır
• hugo server - yerel bir geliştirme sunucusu başlatır
• hugo version – mevcut Hugo versiyonunu görüntüler

Hugo CLI'de ayrıca bazı komutlar için ek seçenekler belirtmek için çeşitli bayraklar bulunur. Hugo bayraklarının tam listesini görüntülemek için (birçoğu vardır), mevcut tüm bayrakların bir listesini görüntülemek için hugo help komutunu kullanmanızı öneririz.

Hugo Yapılandırma Dosyası

Hugo'nun yapılandırma dosyası üç biçimi destekler: YAML, TOML ve JSON. Benzer şekilde, Hugo yapılandırma dosyası config.yml , config.toml veya config.json şeklindedir ve onu bir Hugo projesinin kök dizininde bulabilirsiniz.

YAML biçimindeki tipik bir Hugo yapılandırma dosyası şöyle görünür:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

Daha önce WordPress veya başka bir CMS kullandıysanız, yapılandırma seçeneklerinden bazıları size tanıdık gelebilir. Örneğin, kinsta-static-site sitenin temasının adıdır, Kinsta Static Site SEO meta başlığıdır ve paginate (sayfa başına gönderi sayısı) 5 .

Hugo, resmi Hugo belgelerinde keşfedebileceğiniz düzinelerce yapılandırma seçeneğine sahiptir. Bir Hugo sitesi geliştirirken herhangi bir genel yapılandırma değişikliği yapmanız gerekiyorsa, bu yapılandırma dosyasını düzenlemeniz gerekebilir.

Hugo Sitesi Nasıl Oluşturulur

Hugo CLI'yi nasıl kuracağımızı ve kullanacağımızı ve Hugo yapılandırma dosyasının temellerini öğrendiğimize göre, şimdi yeni bir Hugo sitesi oluşturalım.

Bir Hugo sitesi oluşturmak için aşağıdaki komutu kullanın (isterseniz my-hugo-sitemi başka bir şeyle değiştirmekten çekinmeyin):

 hugo new site my-hugo-site

Ardından, site klasörüne gidin ve aşağıdaki dosya ve klasörleri görmelisiniz: config.toml dosyası, arketipler klasörü, içerik klasörü, düzenler klasörü, temalar klasörü, veri klasörü ve statik klasör. Bu dosya ve klasörlerin her birinin ne olduğunu hızlıca gözden geçirelim.

Hugo'nun config.toml Dosyası

Yukarıda vurguladığımız gibi, Hugo'nun birincil yapılandırma dosyası siteniz için genel ayarları içerir.

Hugo'nun Arketipler Klasörü

Arketipler klasörü, Markdown'da biçimlendirilmiş içerik şablonlarını sakladığınız yerdir. Arketipler, sitenizde birden çok içerik biçimi varsa özellikle yararlıdır. Hugo arketipleri ile sitenizdeki her içerik türü için bir şablon oluşturabilirsiniz. Bu, oluşturulan Markdown dosyalarını gerekli tüm yapılandırma ayarlarıyla önceden doldurmanıza olanak tanır.

Örneğin, podcast bölümlerinizi görüntülemek için bir podcast içerik türünüz varsa, archetypes/podcast.md aşağıdaki içeriklerle yeni bir arketip oluşturabilirsiniz:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Bu podcast arketipiyle, yeni bir gönderi oluşturmak için aşağıdaki komutu kullanabilirsiniz:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Şimdi, yeni oluşturulan gönderiyi açarsanız şunu görmelisiniz:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Arketipler olmadan, oluşturduğunuz her yeni gönderi için ön madde parametrelerini manuel olarak belirtmeniz gerekir. Arketipler ilk başta karmaşık ve gereksiz görünse de, uzun vadede size çok zaman kazandırabilir.

Hugo'nun İçerik Klasörü

İçerik klasörü, asıl gönderi içeriğinizin gittiği yerdir. Hugo, hem Markdown hem de HTML formatlarını destekler; Markdown, kullanım kolaylığı nedeniyle daha popüler bir seçenektir. Gönderiler için genel depolama alanı olmanın yanı sıra, gönderi içeriğini daha fazla düzenlemek için içerik klasörünü kullanabilirsiniz.

Hugo, içerik klasöründeki her üst düzey dizini bir içerik bölümü olarak ele alır. Hugo'daki içerik bölümleri, WordPress'teki özel gönderi türlerine benzer. Örneğin, sitenizde gönderiler, sayfalar ve podcast'ler varsa, içerik klasörünüzde bu farklı gönderi türleri için içerik dosyalarının bulunacağı gönderiler , sayfalar ve podcast dizinleri bulunur.

Hugo'nun Düzenler Klasörü

Düzenler klasörü, sitenizin yapısını tanımlayan HTML dosyalarını içerir. Bazı durumlarda, projenin kök dizininde olması gerekmediğinden ve bunun yerine bir tema klasöründe bulunabileceğinden, yerleşimler klasörü olmayan bir Hugo sitesi görebilirsiniz.

Şablonlama için PHP kullanan WordPress temalarına benzer şekilde, Hugo şablonları, Golang'ın yerleşik html/template ve text/template kitaplıkları tarafından desteklenen ek dinamik şablonlamaya sahip temel HTML'den oluşur. Sitenizin HTML işaretlemesini oluşturmak için gereken çeşitli HTML şablon dosyaları, düzenler klasöründedir.

Hugo'nun Temalar Klasörü

Şablon dosyalarını ve varlıkları depolamanın daha bağımsız bir yolunu tercih eden siteler için Hugo, bir temalar klasörünü destekler. Hugo temaları, bir tema dizininde depolanmaları ve bir temanın çalışması için gerekli tüm şablonları içermeleri bakımından WordPress temalarına benzer.

Bazı Hugo kullanıcıları, temayla ilgili dosyaları projenin kök dizininde tutmayı tercih ederken, bu dosyaların temalar klasörü içinde saklanması, daha kolay yönetim ve paylaşıma olanak tanır.

Hugo Veri Klasörü

Hugo'nun veri klasörü, sitenizin sayfalarını oluşturmak için gerekli olan ek verileri (JSON, YAML veya TOML biçiminde) depolayabileceğiniz yerdir. Veri dosyaları, doğrudan bir içerik veya şablon dosyasında saklanması zahmetli olabilecek daha büyük veri kümeleri için faydalıdır.

Örneğin, 1960'dan 2020'ye kadar olan USD enflasyon oranlarının bir listesini oluşturmak isterseniz, verileri temsil etmek yaklaşık 80 satır (her yıl için bir satır) alacaktır. Bu verileri doğrudan bir içerik veya şablon dosyasına koymak yerine, onu veri klasöründe oluşturabilir ve gerekli bilgilerle doldurabilirsiniz.

Hugo Statik Klasör

Hugo'nun statik klasörü, herhangi bir ek işlem gerektirmeyen statik varlıkları sakladığınız yerdir. Statik klasör genellikle Hugo kullanıcılarının resimleri, yazı tiplerini, DNS doğrulama dosyalarını ve daha fazlasını depoladığı yerdir. Bir Hugo sitesi oluşturulduğunda ve kolay dağıtım için bir klasöre kaydedildiğinde, statik klasördeki tüm dosyalar olduğu gibi kopyalanır.

JavaScript veya CSS dosyalarından neden bahsetmediğimizi merak ediyorsanız, bunun nedeni, site geliştirme sırasında genellikle boru hatları aracılığıyla dinamik olarak işlenmeleridir. Hugo'da JavaScript ve CSS dosyaları, ek işleme gerektirdikleri için genellikle tema klasöründe depolanır.

Hugo Sitesine Tema Nasıl Eklenir

Hazır bir tema indirip yüklemek, Hugo'yu kullanmaya başlamanın harika bir yoludur. Hugo temaları tüm şekil ve boyutlarda gelir ve birçoğu resmi Hugo tema deposunda ücretsiz olarak mevcuttur. Hadi devam edelim ve popüler Hyde temasını Hugo sitemize yükleyelim.

İlk önce, projenizin Terminal'deki tema klasörüne gidin:

 cd <hugo-project-directory>/themes/

Ardından, Hyde temasını projenizin temalar dizinine klonlamak için Git'i kullanın.

 git clone https://github.com/spf13/hyde.git

Ardından, Hyde temasını etkinleştirmek için config.toml dosyanıza aşağıdaki satırı ekleyin:

 theme = "hyde"

Bu noktada Hyde teması kurulur ve yapılandırılır. Sonraki adım, siteyi web tarayıcınızda görüntülemek için Hugo'nun yerleşik geliştirme web sunucusunu başlatmaktır.

Hugo Sitesi Nasıl Önizlenir

Hugo, geliştirme amacıyla entegre bir web sunucusuyla birlikte gelir; bu, sitenizi yalnızca yerel olarak görüntülemek için Nginx veya Apache gibi bir üçüncü taraf web sunucusu yüklemeniz gerekmediği anlamına gelir.

Hugo'nun web sunucusunu başlatmak için projenizin kök dizininde aşağıdaki komutu çalıştırın:

 hugo server -D

Hugo daha sonra sitenizin sayfalarını oluşturacak ve bunları http://localhost:1313/ kullanıma sunacaktır:

URL'yi web tarayıcınızda ziyaret ederseniz, Hyde temalı Hugo sitenizi görmelisiniz:

Varsayılan olarak, Hugo'nun yerel geliştirme sunucusu değişiklikleri izleyecek ve siteyi otomatik olarak yeniden oluşturacaktır. Hugo'nun oluşturma hızı çok hızlı olduğundan, sitenizdeki güncellemeler neredeyse gerçek zamanlı olarak görülebilir - statik site oluşturucu dünyasında nadir görülen bir şey. Bunu göstermek için Hugo'daki ilk gönderimizi oluşturalım.

Hugo Sitesine Nasıl İçerik Eklenir?

Bir Hugo sitesine içerik eklemek, WordPress veya Ghost gibi tam teşekküllü bir CMS'den çok farklıdır. Hugo ile içeriğinizi yönetmek için yerleşik bir CMS katmanı yoktur. Bunun yerine, işleri uygun gördüğünüz şekilde yönetmeniz ve organize etmeniz beklenir.

Diğer bir deyişle, Hugo'da içerik yönetimi yapmanın açıkça "doğru" bir yolu yoktur. Bu bölümde içerik ekleme ve yönetmenin bir yöntemini paylaşacağız, ancak Hugo'yu daha yakından tanıdıkça bazı şeyleri değiştirmekten çekinmeyin.

Hugo'daki İçerik Bölümleri

Hugo'da emrinizde olan ilk içerik düzenleme aracı içerik bölümüdür. Hugo'daki bir içerik bölümü, WordPress'teki bir gönderi türüne benzer - onu yalnızca içerik filtresi olarak kullanmakla kalmaz, aynı zamanda özel temalar oluştururken tanımlayıcı olarak da kullanabilirsiniz.

Örneğin, bir blog içeriği bölümü klasörünüz varsa, bunu tüm blog gönderilerinizi depolamak ve yalnızca blog gönderileri için geçerli olan belirli bir sayfa şablonu oluşturmak için kullanabilirsiniz.

Hugo'da Gönderiler Nasıl Eklenir?

Bunu göz önünde bulundurarak blog gönderileri için bir içerik bölümü oluşturalım ve birkaç parça içerik ekleyelim. Projenizin içerik klasöründe gönderiler adında yeni bir klasör oluşturun – bu içerik bölümüdür.

Bir 2021 klasörü oluşturarak gönderiler klasörü içinde başka bir organizasyon katmanı oluşturalım. Bu noktada, içerik dizininiz şöyle görünmelidir:

Şimdi ilk yazımızı oluşturalım. Daha önce tartıştığımız gibi, Hugo içerik için hem Markdown hem de HTML dosyalarını destekler. Genel olarak, yazması, biçimlendirmesi ve okuması daha kolay olduğu için Markdown dosyalarına bağlı kalmak daha iyidir.

content/posts/2021 klasöründe .md (Markdown dosya uzantısı) ile biten yeni bir dosya oluşturun. Dosyayı istediğiniz gibi adlandırabilirsiniz, ancak bir Hugo içerik dosyasını adlandırmak için önerilen sözdizimi YYYY-AA-GG-a-sample-post.md şeklindedir .

Bir içerik dosyasını manuel olarak oluşturmaya ek olarak, aşağıdaki komutla yeni bir gönderi oluşturmak için Hugo CLI'yi de kullanabilirsiniz (komutu proje dizininizden çalıştırdığınızdan emin olun):

 hugo new posts/2021/2021-08-30-a-sample-post.md

İçerik klasörünün yukarıdaki yoldan nasıl eksik olduğuna dikkat edin. Bunun nedeni, Hugo'nun tüm içerik dosyalarının varsayılan olarak içerik klasörüne gideceğini varsaymasıdır.

Yeni oluşturulan içerik dosyasını açarsanız, belgenin üst kısmında şuna benzeyen birkaç satırlık meta veri görmelisiniz:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

YAML'de biçimlendirilen bu meta veriye "ön madde" adı verilir. Otomatik oluşturulan ön madde, Hugo CLI kullanmanın önemli bir avantajıdır. Ön konu, bir gönderi için benzersiz verilerin (gönderi adı, veriler, taslak durumu, etiketler, kategoriler, vb.) depolandığı yerdir. Ön madde için varsayılan format, arketipler kullanılarak bölüm bazında yapılandırılabilir.

Şimdi yazıya biraz metin ekleyelim. Bir gönderi yazarken, içeriğinizin her zaman aşağıdaki gibi ön konunun altında olduğundan emin olun:

İçerik dosyasını kaydettikten sonra, Hugo'nun sitenizi Terminal'de yeniden oluşturduğunu görmelisiniz. Aşağıdaki ekran görüntüsünde Hugo'nun tüm siteyi 22 ms'de yeniden oluşturduğunu görebilirsiniz!

Hugo sitenizi web tarayıcınızda ziyaret ederseniz, yeni gönderiyi görmelisiniz.

Hugo'da Sayfa Nasıl Eklenir?

Hugo sitemize bir gönderi eklediğimize göre artık bir sayfa ekleyelim. WordPress dahil çoğu içerik yönetim sistemi, gönderiler ve sayfalar arasında ayrım yapar. Tipik olarak, bir gönderi tarihli bir içerik parçasıdır, bir sayfa ise her zaman yeşil veya statik içerikten oluşur.

Bir sayfa oluşturmak için öncelikle bir sayfa içeriği bölümüne ihtiyacımız var. Bunu yapmak için Hugo'nun içerik klasöründe sayfalar adında bir klasör oluşturun. Ardından, sitenize yeni bir “Hakkında” sayfası eklemek için aşağıdaki komutu kullanın:

 hugo new pages/about.md

Sayfalar için adlandırma kuralının gönderilerden nasıl farklı olduğuna dikkat edin. Gönderilerden farklı olarak, sayfalar belirli bir tarihe bağlı değildir, bu nedenle dosya adına oluşturma tarihini eklemek gereksizdir.

Şimdi “Hakkında” sayfasına biraz metin ekleyelim:

Bu noktada, web tarayıcınızda Hakkında sayfasını görmelisiniz:

Artık iki içerik bölümümüz var - yazılar ve sayfalar - başlık ve açıklamayı düzenleme, Kenar çubuğu menüsüne Hakkında sayfasını ekleme, kalıcı bağlantıların biçimini değiştirme ve kaldırma gibi sitede birkaç özelleştirmeyi nasıl yapacağımızı inceleyelim. gönderi beslemesinden sayfalar.

Site Başlığı ve Açıklaması Nasıl Değiştirilir

Site başlığını ve açıklamasını değiştirmenin tam yöntemi, site yapılandırmanıza ve/veya etkin temanıza bağlıdır. Hyde teması durumunda, site başlığı ve açıklaması Hugo yapılandırma dosyasında ( config.toml ) değiştirilebilir.

Kenar çubuğunu oluşturan aşağıdaki tema kodu nedeniyle bunu biliyoruz:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

Odaklanılacak iki kısım şunlardır:

 {{ .Site.Title }}

Ve…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Gidon {{ }} , Hugo'nun şablon oluşturma motorunun bir parçasıdır ve oluşturulan sayfalarda dinamik olarak oluşturulan verilere izin verir. Örnek olarak, {{ .Site.Title }} , Hugo'ya config.toml dosyasını kontrol etmesi ve Başlık anahtarına eşlenen değeri getirmesi talimatını verir.

Hugo'nun varsayılan yapılandırması site başlığı olarak Yeni Hugo Sitem'i kullandığından, kenar çubuğu bunu gösterir. config.toml'deki site başlığını başka bir şeyle değiştirirsek, değişiklik ön uca da yansıyacaktır.

Devam edelim ve config.toml'deki başlık parametresini Yeni Hugo Sitem'den Kinsta'nın Hugo Sitesi olarak değiştirelim.

Site açıklamasına geçtiğinizde Hugo'nun şablonlama motorunun koşullu mantığı desteklediğini görebilirsiniz. Düz İngilizce'ye çevrilmiş olan aşağıdaki kod, Hugo'ya config.toml dosyasındaki açıklama anahtarına bir Params değerinin atanıp atanmadığını kontrol etmesi talimatını verir. Değilse, bunun yerine kullanılacak varsayılan bir dize var.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

config.toml dosyasında yapılandırılmış bir açıklamamız olmadığından, Hugo varsayılan olarak "Hugo için @mdo tarafından yapılmış zarif bir açık kaynak ve mobil öncelikli tema. Aslen Jekyll için yapılmış."

Şimdi config.toml dosyamızı şuradan güncelleyelim:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

İle:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

Beklendiği gibi, değişiklikler artık ön uçta da görülebilir:

Yayın Akışından Sayfalar Nasıl Kaldırılır

Çoğu blogda, ana sayfadaki gönderi akışının yalnızca gönderileri görüntülemesi yaygındır. Varsayılan olarak, Hyde teması gönderi akışındaki tüm içerik dosyalarını içerir. Bu davranışı değiştirmek için, ana sayfayı oluşturan index.html şablonundaki range işlevini düzenlemeniz gerekir.

Hugo'nun range işlevi, tanımlanmış bir dizi öğe üzerinde yinelenir ve ardından verilerle bir şeyler yapar. Varsayılan olarak, Hyde temasının index.html şablonu .Site.RegularPages üzerinde değişir ve HTML'yi oluşturmadan önce kalıcı bağlantı, gönderi başlığı ve gönderi özeti gibi verileri filtreler.

.Site.RegularPages , hem gönderiler hem de sayfalar dahil olmak üzere Hugo'daki tüm normal sayfaları içerdiğinden, "Hakkında" sayfası oluşturulur. range öğelerini .Site.RegularPages "Section" "posts" olarak değiştirerek, Hugo'ya yalnızca gönderiler bölümündeki normal sayfalar - daha önce oluşturduğumuz gönderiler klasöründeki içerik dosyaları - filtrelemesi talimatını verebiliriz.

Şimdi şablonu bundan düzenleyerek bu değişikliği yapalım:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Buna:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Bu değişikliği yaptıktan sonra, ana sayfada yalnızca şuna benzer gönderiler görüntülenecektir:

Hugo'da Partials Nasıl Kullanılır

Hugo'nun en güçlü şablon oluşturma özelliklerinden biri kısmilerdir – başka bir HTML şablonuna gömülü HTML şablonları. Kısmi bölümler, her dosyadaki kodu yönetmeden farklı şablon dosyalarında kodun yeniden kullanılmasına izin verir.

Örneğin, daha sonra bir temanın baseof.html şablon dosyası içinde çağrılan ayrı kısmi dosyalarında farklı sayfa bölümleri (üstbilgi, altbilgi vb.) görmek yaygındır.

Ananke temasındaki baseof.html dosyasında, 18. Satırda kısmi bir örneğini görebilirsiniz – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

Bu durumda, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} Hugo'ya Satır 18'in içeriğini /layouts/ partials klasöründeki site-style.html ile değiştirmesini söyler. /partials/site-style.html dosyasına gidersek , aşağıdaki kodu görürüz:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

Bu kodu ayrı bir dosyaya yükleyerek, baseof.html şablon dosyası düzenli ve okunması kolay kalabilir. Kısmi parçalar, özellikle temel projeler için gerekli olmasa da, daha karmaşık işlevselliğe sahip daha büyük projeler için kullanışlıdır.

Hugo'da Kısa Kodlar Nasıl Kullanılır?

Hugo kısa kodları, çeşitli sayfalarda kodun yeniden kullanılmasına izin vermeleri bakımından kısmi kodlara benzer. Kısa kodlar, /layouts/shortcodes klasöründe bulunan HTML dosyalarıdır. Temel fark, kısmi kodların HTML şablonlarına, kısa kodların ise Markdown içerik sayfalarına uygulanmasıdır.

Hugo'da kısa kodlar, her sayfa için kod değişikliklerini yönetmeden sitenizdeki sayfalarda kullanabileceğiniz işlevsellik modülleri geliştirmenize olanak tanır.

Bir blog çalıştırırsanız, mevcut yıla ilişkin yıl referanslarını güncellemek için gönderilerinizin gövde içeriğini gözden geçirmeniz gerekebilir. Sitenizde kaç gönderi olduğuna bağlı olarak bu görev uzun zaman alabilir!

İçerik dosyalarınızda bir Hugo kısa kodu kullanarak, bir daha yıl referanslarını güncelleme konusunda endişelenmenize gerek kalmayacak!

Aşağıdaki içeriklerle /layouts/shortcodes/current_year.html içinde bir kısa kod oluşturarak başlayalım:

 {{ now.Format "2006" }}

Kısa kodlar, bu sözdizimi ile gönderilere gömülebilir – {{< shortcode_name >}} . Bizim durumumuzda, current_year.html kısa kodunu {{< shortcode_name >}} ile şöyle çağırabiliriz:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Gönderiyi web tarayıcısında görüntülerseniz, gönderinin ilk satırında geçerli yılı şu şekilde görmelisiniz:

Hugo'da Bir Gönderiye Nasıl Resim Eklenir?

WordPress ve diğer tam teşekküllü içerik yönetim sistemlerinden farklı olarak Hugo, görüntüleri yönetmek için bir sürükle ve bırak sistemi içermez. Böylece bir görüntü yönetim sistemi tasarlamak son kullanıcıya yüklenmiş olur.

Hugo'nun görüntüleri yönetmek için standart bir yolu olmamasına rağmen, popüler bir yöntem, görüntüleri /static klasöründe depolamaya ve bunları bir kısa kod kullanarak gönderilerde ve sayfalarda referans vermeye dayanır. Hugo'da temel görüntü organizasyonunu nasıl yapabileceğinizi inceleyelim.

Yapmamız gereken ilk şey, resim kitaplığımız için bir organizasyon yapısı oluşturmak. Bu karmaşık görünse de, gereken tek şey /static klasörü içinde birkaç ek dizin oluşturmaktır.

/static içinde bir yükleme klasörü oluşturarak başlayalım. Yüklemeler klasöründe, 2021'de yüklenen tüm resimleri tutmak için 2021 adlı bir klasör oluşturun.

Ardından 2021 klasörüne iki resim ( blue1.jpg ve blue2.jpg ) ekleyelim.

HTML'de resimler <img> etiketi kullanılarak görüntülenir. Örneğin, blue1.jpg öğesini görüntülemek için aşağıdaki HTML'yi kullanabiliriz:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Bu HTML'yi doğrudan Markdown içerik dosyasına eklemek mümkün olsa da, yüklemeler klasöründeki herhangi bir resmi görüntülemek için kullanabileceğiniz bir kısa kod oluşturmak daha iyidir. Bu şekilde, img etiketini güncellemeniz gerekirse, img etiketinin her bir örneğini düzenlemeden kısa kod şablonunu düzenleyebilirsiniz.

Kısa kod şablonunu oluşturmak için /layouts/shortcodes/img.html adresinde aşağıdaki içerikle yeni bir dosya oluşturun:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Ardından, aşağıdaki kısa kodu bir blog gönderisine ekleyin:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

Kısa kod şablonunda, {{ .Get "src" }} ve {{ .Get "alt" }} , Hugo'ya bir kısa kod çağırırken src< ve alt< parametrelerinin içeriğini getirmesini söyler.

Şimdi, blog gönderisini yeniden yüklerseniz, resmi şöyle görmelisiniz:

Hugo Sitesi Nasıl Dağıtılır

Bu gönderiye kadar Hugo'nun nasıl kurulacağını, site oluşturmayı, tema eklemeyi, yapılandırma dosyalarında temel düzenlemeler yapmayı ve sitenizin işlevselliğini kısmi ve kısa kodlarla genişletmeyi öğrendiniz. Bu noktada, çevrimiçi olarak dağıtılmaya hazır, işlevsel bir siteniz olmalıdır.

Hugo statik bir site oluşturucu olduğundan, oluşturduğu HTML, CSS ve JS'yi bir web sunucusuyla herhangi bir yere dağıtabilirsiniz. Statik sitelere hizmet vermek için teknik gereksinimler çok düşük olduğundan, bunları Netlify, Vercel, Cloudflare Pages ve daha fazlası gibi çok çeşitli sağlayıcılarda ücretsiz olarak barındırabilirsiniz.

Önceden, sitemizde yapılan değişiklikleri gerçek zamanlı olarak önizlemek için yerel bir geliştirme sunucusunu başlatmak için hugo server -D kullanıyorduk. Siteyi tam olarak oluşturmak için projemizin kök dizininde bulunan hugo komutunu kullanabiliriz. Site oluşturma işlemi tamamlandıktan sonra proje dizininizde yeni bir ortak klasör görmelisiniz. Bu klasörün içinde, Amazon S3 gibi bir sunucuya veya bulut depolama hizmetine yüklenmesi gereken tüm dosyaları bulacaksınız.

Sitenizi yerel olarak oluşturmak ve onu Amazon S3'e veya Nginx çalıştıran bir sunucuya manuel olarak yüklemek, statik olarak oluşturulmuş bir siteyi dağıtmanın bir yoludur. Ancak, her değişiklik yaptığınızda yeni dosyaları manuel olarak yüklemenizi gerektirdiği için en verimli yöntem değildir.

Bunun yerine, Hugo proje klasörünüzü bir GitHub deposuna bağlamak ve GitHub deposunu Netlify gibi otomatik bir dağıtım hizmetine bağlamak daha iyi bir seçenektir. Bu kurulumla sitenizi düzenleyebilir, değişiklikleri GitHub'a aktarabilir ve herhangi bir manuel müdahale olmadan Netlify'da yeni bir derleme ve dağıtımı tetikleyebilirsiniz. Şimdi tüm bunları nasıl yapacağımıza geçelim!

Hugo Projenizi GitHub'a Nasıl Yüklersiniz?

Öncelikle projeniz için bir GitHub deposu oluşturmanız gerekecek. Bunu yapmak için bir GitHub hesabı oluşturun (henüz yoksa) ve resmi GitHub masaüstü uygulamasını indirin. GitHub uygulamasını yükledikten sonra, menü çubuğunda Dosya'yı tıklayın ve Yeni Depo'yu seçin. Depoya seçtiğiniz bir ad verin, diğer seçenekleri şimdilik varsayılan durumlarında bırakın ve Depo Oluştur öğesine tıklayın.

Varsayılan olarak (macOS'ta), GitHub uygulaması /Users/username/Documents/GitHub içinde yeni havuzlar oluşturur. Depomuza my-hugo-site adını verdiğimizden, /Users/brianli/Documents/GitHub/my-hugo-site bulunabilir.

Ardından, orijinal proje klasörünüzdeki tüm dosyaları yeni GitHub depo klasörüne taşıyın. Ortak klasörü sildiğinizden emin olun çünkü o klasörü GitHub'a yüklememiz gerekmiyor.

GitHub uygulamasına geri dönerseniz, artık değiştirilen dosyaların bir listesini görmelisiniz. Depoyu GitHub'a yüklemek için bir özet ekleyin, Ana öğeye taahhüt et'e tıklayın ve sağ üst köşedeki Depoyu Yayınla'ya tıklayın.

Varsayılan olarak, "Bu kodu gizli tut" seçeneği işaretlidir. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Hugo çok hızlı bir statik site oluşturucu olduğundan, temel bir site için dağıtım yalnızca birkaç saniye sürer. Dağıtım bittiğinde, Netlify kontrol panelinde bir hazırlama URL'si görebileceksiniz. Dağıtılan siteyi görüntülemek için URL'ye tıklayın.

İşte Netlify'daki Hugo sitemiz. Gördüğünüz gibi, yerel ortamımızdaki siteyle aynı:

Bu noktada, Netlify tarafından barındırılan siteniz için özel bir etki alanı ve SSL sertifikası ayarlayabilirsiniz. Bunu yapmak için resmi Netlify belgelerine başvurmanızı öneririz.

Netlify'ı GitHub'a bağladığımız için, Hugo projesi GitHub deposuna yapılan yeni bir taahhüt, Netlify'da otomatik olarak yeni bir dağıtımı tetikleyecektir!

Özet

Hugo, dünyadaki en popüler statik site oluşturuculardan biridir ve bunun iyi bir nedeni vardır. Yalnızca süper hızlı oluşturma işlemine sahip olmakla kalmaz, aynı zamanda kısmi ve kısa kodları destekleyen güçlü şablon oluşturma yetenekleriyle birlikte gelir.

Bu öğreticide Hugo'yu nasıl yapılandıracağınızı, yeni bir proje oluşturacağınızı, içerik dosyaları ekleyeceğinizi, tema dosyalarını nasıl düzenleyeceğinizi ve bitmiş bir statik siteyi nasıl dağıtacağınızı öğrendiniz. Hugo ve özel işlevler, ön madde ve CSS/JS derleme paketleri gibi daha gelişmiş özellikleri hakkında daha fazla bilgi edinmek için resmi Hugo belgelerini incelemenizi öneririz.

Hugo ve diğer statik site oluşturucular hakkında düşünceleriniz nelerdir? Lütfen aşağıdaki yorumlarda bize bildirin!