Bana göre Hugo’nun güncel hızlı başlangıç sayfası fena sayılmaz. Adı üstünde, sizi hızlıca bilgilendiriyor ancak fazla detaya inmiyor. Hugo kullanarak sıfırdan bir site yapacaksanız maalesef yeterli değil.

Bu yüzden baştan sonra her adımı içeren bu kılavuzu yararlı bulacağınızı umuyorum.

Ben zaten olayı biliyorum diyenler için: kaynak kodu ve demo

Ön Hazırlık ve Notlar

  • Kullanacağınız Hugo versiyonu 0.58.3 veya üstü olmalı.
  • Temel HTML, CSS ve Hugo template bilgisi güzel olacaktır ama şart değildir.
  • Dosya yolu bilgisi Linux/Mac formatındadır (/), Windows kullanıyorsanız (\) biçiminde değiştirin.
  • Hugo sunucuyu yeniden başlat dediğimde kastettiğim Control-C ile sonlandırıp hugo server ile yeniden çalışırmaktır.
  • “templates” ve “layouts” kelimelerini genelde aynı anlamda kullanacağım.
  • Hugo kurulumu çok kolay olduğu için bu kılavuzda yer vermedim.

Site Oluşturma

Site iskeletini oluşturarak başlıyoruz:

hugo new site hugo-blog
cd hugo-blog

Dizinin dosya ağacı şu şekilde olacak:

├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Kılavuzda data veya themes dizinlerini şimdilik kullanmayacağız. Silebilirsiniz.

Şu an hugo server, komutu şu çıktıyı verecek:

Building sites … WARN 2019/09/11 23:57:44 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/09/11 23:57:44 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/09/11 23:57:44 found no layout file for "HTML" for "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN
+------------------+----+
  Pages            |  3
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 18 ms
Watching for changes in /home/zwbetz/tmp/tmp-site/{archetypes,content,data,layouts,static}
Watching for config changes in /home/zwbetz/tmp/tmp-site/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Hata mesajları sizi korkutmasın, bize nerede hata olduğunu söyleyecekler. Çalışma sonunda hatalar kaybolacak!

Ana sayfa Düzeni

Anasayfa düzeni en önemli kısımlardan birisi. Yeni bir index dosyasını layouts/index.html biçiminde açın ve alttaki içeriği girin.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
    <title>{{ .Title }}</title>
  </head>
  <body>
    <div class="container">
      <main id="main">
        <div id="home-jumbotron" class="jumbotron text-center">
          <h1>{{ .Title }}</h1>
          <p class="font-125">{{ .Site.Params.homeText | markdownify }}</p>
        </div>
      </main>
    </div>
  </body>
</html>

Şimdi config.toml dosyasını açın ve title kısmını değiştirip ilk param’ı ekleyin:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Hugo Blog"

[params]
  homeText = "İlk hugo web siteni yaptın, tebrikler :)"

hugo server ile sunucuyu çalıştırın. Found no layout for “home” uyarısı gitmiş olacaktır. Ardından http://localhost:1313/ adresini tarayıcıda açıp ilk hugo sitenize bakın.

Index içerisinde config dosyasında girdiğimiz.Title ve .Site.Params.homeText bilgilerinin nasıl çağrıldığını fark ettiniz mi? Bu yapıyı Hugo’nun bir çok bölümünde kullanacağız.

Ayrıca bilgileri markdownify fonksiyonu ile çektik. Markdown işleme aracı bu işi bizim için hallediyor.

Static Dizini

Hugo kullanırken CSS ve JS dosyalarını yerelde depolamayı uygun görüyorum. Şimdi bu adresten çekeceğiniz dosyayı aynı isimle static/css/bootstrap.min.css olarak kaydedin.

Alttaki kodu

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">

şununla değiştirin:

{{ $css := "css/bootstrap.min.css" | absURL }}
<link rel="stylesheet" href="{{ $css }}">

static dizininde yapacağınız değişimler web sitenizin kök dizinine aynen yansıyacaktır:

Yani

static/css/bootstrap.min.css

şöyle yansıyacak:

site-adresi/css/bootstrap.min.css

Bu yeni CSS koduyla, yeni bir değişken ve yolunu atadık ve absURL ile ilişkilendirdi ki bu da bir absolute URL yaratmış oldu.

Hugo sunucu halen çalışır durumda. Kontrol edip sorunsuz çalıştığını görebilirsiniz.

Tekil Sayfa Düzeni

İlk yazımızı yayımlamadan önce, tekil sayfa düzenine ihtiyacımız var. Şimdi layouts/_default dizininde single.html dosyasını açın ve alttaki içeriği girin:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {{ $css := "css/bootstrap.min.css" | absURL }}
    <link rel="stylesheet" href="{{ $css }}">
    <title>{{ .Title }}</title>
  </head>
  <body>
    <div class="container">
      <main id="main">
        <h1>{{ .Title }}</h1>
        {{ .Content }}
      </main>
    </div>
  </body>
</html>

İlk Yazıyı Oluşturma

Varsayılan archetypes/default.md dosyasını düzenleyeceğiz. Şimdilik draft: false durumunda tutacağız ve ileride kullanacağımız tags: [] kısmını ekleyeceğiz. Front matter için en kullanışlı olan ögeler bunlardır. Örnek aşağıda:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
tags: []
draft: false
---

Varsayılan olarak, yayımladığınız her bir yazı için permalink /blog/:filename: şeklinde işleniyor. Bu değeri config.toml içerisinde değiştirelim:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Hugo Blog"

[permalinks]
  blog = "/:filename/"

[params]
  homeText = "İlk hugo web siteni yaptın, tebrikler :)"

Harika oldu! Artık ilk yazımızı oluşturabiliriz. Ctrl+C ile hugo sunucuyu durdurun ve alttaki komutu yürütün:

hugo new blog/nazim-hikmet-davet.md

Şimdi oluşturduğumuz content/blog/nazim-hikmet-davet.md dosyasını açın ve içerisine tags: ["şiir", "yaşam"]etiketini girin. ileride çok işimize yarayacak.

Dosyanın içeriğine Nazım Hikmet’in ünlü davet şiirini giriyorum. date kısmı farklı olabilir ancak kalan kısımlar sizinkiyle aynı olmalı.

---
title: "Nazım Hikmet - Davet"
date: 2021-04-04T22:14:57-06:00
tags: ["şiir", "yaşam"]
draft: false
---

Dörtnala gelip Uzak Asya'dan
Akdeniz'e bir kısrak başı gibi uzanan
  bu memleket, bizim.

Bilekler kan içinde, dişler kenetli, ayaklar çıplak
ve ipek bir halıya benziyen toprak,
  bu cehennem, bu cennet bizim.

Kapansın el kapıları, bir daha açılmasın,
yok edin insanın insana kulluğunu,
  bu dâvet bizim....

Yaşamak bir ağaç gibi tek ve hür
ve bir orman gibi kardeşçesine,
  bu hasret bizim...

Hugo sunucuyu yeniden başlatın vehttp://localhost:1313/nazim-hikmet-davet/ adresinden ilk yazınızın nasıl göründüğüne bakın.

Baseof Düzeni

Ana sayfamız ve tekil sayfa düzenlerimiz bir çok kodu tekrar ediyor. Tekrarlanan kodları paylaşmanın bir yolu olsaydı ve her düzende yalnızca benzersiz koda sahip olsaydık güzel olmaz mıydı? Bu yapı Hugo sisteminde baseof düzeni olarak biliniyor.

Şu dosyayı oluşturun: layouts/_default/baseof.html ve alttaki içeriği girin:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {{ $css := "css/bootstrap.min.css" | absURL }}
    <link rel="stylesheet" href="{{ $css }}">
    <title>{{ .Title }}</title>
  </head>
  <body>
    <div class="container">
      <main id="main">
       {{ block "main" . }}{{ end }}
      </main>
    </div>
  </body>
</html>

İçerikteki en önemli kısım {{ block "main" . }}{{ end }} özetle “diğer layout tanımlarındaki özgün kodlar buraya gelecek” anlamını taşıyor. Main’den sonra gelen (.) noktaya dikkat edin. Hugo içinde çok önemli bir belirteçtir.

Şimdi layouts içindeki diğer yapıları güncelleyelim. Ana sayfa için layouts/index.html şöyle görünmeli:

{{ define "main" }}

<div id="home-jumbotron" class="jumbotron text-center">
  <h1>{{ .Site.Title }}</h1>
  <p class="font-125">{{ .Site.Params.homeText | markdownify }}</p>
</div>

{{ end }}

velayouts/_default/single.html da bu şekilde:

{{ define "main" }}

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

{{ end }}

{{ define "main" }} ile başlayıp{{ end }} ile biten kısımlar tamamen özgün kodlar içerecek. Söylemeliyim ki, oldukça temiz iş çıkardık :)

Kısmi Parçalar (Partials)

Hugo içinde küçük ama bir o kadar kullanışlı bölüme sıra geldi.

Kısmi parçalar; şablonu temiz tutmak için, ekonomik olarak kullanılabilen içeriğe duyarlı bileşenlerdir. Tekrarlanan kod bloklarını dışarıda bırakmak için kullanışlıdır.

Kodunuzu düzenli ve okunması kolay tutmak için de kullanışlıdır. Şimdi standart html etiketi olan <head> için kod oluşturalım.

Partials dizini altında dosyayı açın: layouts/partials/head.html ve alttaki kodu girin:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {{ $css := "css/bootstrap.min.css" | absURL }}
  <link rel="stylesheet" href="{{ $css }}">
  <title>{{ .Title }}</title>
</head>

ve bu dosyayılayouts/_default/baseof.html içerisinde referans gösterin:

<!doctype html>
<html lang="en">
  {{ partial "head.html" . }}
  <body>
    <div class="container">
      <main id="main">
       {{ block "main" . }}{{ end }}
      </main>
    </div>
  </body>
</html>

Artık head.html kısmi dosyası içindeki kodlar baseof içinden çağrılacak ve çalışacak.

Liste Sayfa Düzeni

Şimdi sayfamızda oluşturacağımız yazıların blog sayfasında nasıl listelendiğine bakacağız. Bir kaç yazı daha eklemek iyi olacak. Sunucuyu durdurun ve önceki gibi yazı eklemeye devam edin.

hugo new blog/yercekimli-karanfil-edip-cansever.md

Oluşturduğumuz dosyaya şiir ve zaman etiketlerini girin.

---
title: "Yerçekimli Karanfil - Edip Cansever"
date: 2021-04-04T23:24:54-06:00
tags: ["şiir", "zaman"]
draft: false
---

Biliyor musun az az yaşıyorsun içimde 
Oysaki seninle güzel olmak var 
Örneğin rakı içiyoruz, içimize bir karanfil düşüyor gibi 
Bir ağaç işliyor tıkır tıkır yanımızda 
Midemdi aklımdı şu kadarcık kalıyor. 

Sen karanfile eğilimlisin, alıp sana veriyorum işte 
Sen de bir başkasına veriyorsun daha güzel 
O başkası yok mu bir yanındakine veriyor 
Derken karanfil elden ele. 

Görüyorsun ya bir sevdayı büyütüyoruz seninle 
Sana değiniyorum, sana ısınıyorum, bu o değil 
Bak nasıl, beyaza keser gibisine yedi renk 
Birleşiyoruz sessizce.

Son bir şiir daha girelim:

hugo new blog/istanbulu-dinliyorum-orhan-veli.md

Bu kez şiir ve şehir etiketlerini kullandık.

---
title: "İstanbul'u Dinliyorum - Orhan Veli Kanık"
date: 2019-01-13T20:28:42-06:00
tags: ["şiir", "şehir"]
draft: false
---

İstanbul'u dinliyorum, gözlerim kapalı
Önce hafiften bir rüzgar esiyor;
Yavaş yavaş sallanıyor
Yapraklar, ağaçlarda;
Uzaklarda, çok uzaklarda,
Sucuların hiç durmayan çıngırakları
İstanbul'u dinliyorum, gözlerim kapalı.

İstanbul'u dinliyorum, gözlerim kapalı;
Kuşlar geçiyor, derken;
Yükseklerden, sürü sürü, çığlık çığlık.
Ağlar çekiliyor dalyanlarda;
Bir kadının suya değiyor ayakları;
İstanbul'u dinliyorum, gözlerim kapalı.

İstanbul'u dinliyorum, gözlerim kapalı;
Serin serin Kapalıçarşı
Cıvıl cıvıl Mahmutpaşa
Güvercin dolu avlular
Çekiç sesleri geliyor doklardan
Güzelim bahar rüzgarında ter kokuları;
İstanbul'u dinliyorum, gözlerim kapalı.

İstanbul'u dinliyorum, gözlerim kapalı;
Başımda eski alemlerin sarhoşluğu
Loş kayıkhaneleriyle bir yalı;
Dinmiş lodosların uğultusu içinde
İstanbul'u dinliyorum, gözlerim kapalı.

İstanbul'u dinliyorum, gözlerim kapalı;
Bir yosma geçiyor kaldırımdan;
Küfürler, şarkılar, türküler, laf atmalar.
Birşey düşüyor elinden yere;
Bir gül olmalı;
İstanbul'u dinliyorum, gözlerim kapalı.

İstanbul'u dinliyorum, gözlerim kapalı;
Bir kuş çırpınıyor eteklerinde;
Alnın sıcak mı, değil mi, biliyorum;
Dudakların ıslak mı, değil mi, biliyorum;
Beyaz bir ay doğuyor fıstıkların arkasından
Kalbinin vuruşundan anlıyorum;
İstanbul'u dinliyorum.

3 adet yazı ekledik. Şimdi list düzeni için layouts/_default/list.html dosyasını açın ve alttaki içeriği girin:

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ range .Pages.ByPublishDate.Reverse }}
<p>
  <a class="font-125" href="{{ .RelPermalink }}">{{ .Title }}</a>
</p>
{{ end }}

{{ end }}

Çalışmayıhttp://localhost:1313/blog/ adresinden test edin.

Menü

Ziyaretçilerinizin sayfaları görmesi için bir navigasyon menüsü yapmak gerekiyor.

Açacağımız dosya layouts/partials/nav.html:

<div id="nav-border" class="container">
  <nav id="nav" class="nav justify-content-center">
  {{ range .Site.Menus.main }}
    {{ $icon := printf "<i data-feather=\"%s\"></i>" .Pre }}
    {{ $text := print $icon " " .Name | safeHTML }}
    <a class="nav-link" href="{{ .URL }}">{{ $text }}</a>
  {{ end }}
  </nav>
</div>

Yukarıdaki kod, yapılandırma dosyasında belirtilen menü verilerindeki simge adını, bağlantı metnini, URL’yi alır ve ardından her biri için bir menü bağlantı ögesi oluşturur.

Dosyayalayouts/_default/baseof.htmliçerisinde referans vermeyi unutmayın:

<!doctype html>
<html lang="en">
  {{ partial "head.html" . }}
  <body>
    {{ partial "nav.html" . }}
    <div class="container">
      <main id="main">
       {{ block "main" . }}{{ end }}
      </main>
    </div>
  </body>
</html>

Oluşturmak istediğimiz menüleri config.toml dosyasına girelim:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Hugo Blog"

[permalinks]
  blog = "/:filename/"

# feathericons.com sitesinden ikonlar kullanıyoruz
# pre değeri ikon isimlerini temsil ediyor
[menu]
  [[menu.main]]
    name = "Anasayfa"
    pre = "home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "Blog"
    pre = "edit"
    url = "/blog/"
    weight = 2
  [[menu.main]]
    name = "Etiketler"
    pre = "tag"
    url = "/tags/"
    weight = 3

[params]
  homeText = "İlk hugo web siteni yaptın, tebrikler :)"

Her menüye bir ikon atadık. Burada pre değeri ikon adını temsil ediyor. Dilerseniz feather icons sitesine bakıp farklı ikonlar seçebilirsiniz. Tek yapmanız gereken pre değerine karşılık ikon adını yazmak.

İkonlar bir javascript dosyasından çağrılıyor, bu dosyayı indirip static/js/feather.min.js biçiminde kaydedin . Bu dosyaya referans vereceğimiz için kendisine bir partial oluşturmamız yerinde olur.

Şimdi layouts/partials/script.html dosyasını oluşturun ve içeriği girin:

{{ $js := "js/feather.min.js" | absURL }}
<script src="{{ $js }}"></script>
<script>
  feather.replace()
</script>

ve her zamanki yolla layouts/_default/baseof.html içinde referans verin:

<!doctype html>
<html lang="en">
  {{ partial "head.html" . }}
  <body>
    {{ partial "nav.html" . }}
    <div class="container">
      <main id="main">
       {{ block "main" . }}{{ end }}
      </main>
    </div>
    {{ partial "script.html" . }}
  </body>
</html>

Blog Yazı Listesi Başlığı

Normalde http://localhost:1313/blog/ yapısı Hugo içinde Blogs şeklinde çıktı veriyor. Bu İngilizcedeki çoğul yapıdan kaynaklanıyor. Örneğin menüde Blog yerine Günlük ögesi oluştursanız sayfanızda Günlüks şeklinde çıkıyor ki hiç hoş durmuyor. Buna küçük bir ayar yaparak engel olabiliriz.

Şu dosyayı açın content/blog/_index.md:

---
title: Blog
---

Dosyanın başındaki alt çizgi _index.md önemli bir diğer tanımdır. Detaylarını page bundle docs adresinden öğrenebilirsiniz.

Tarih ve Etiketler

Şimdi yazılarımıza tarih ve etiket ekleme zamanı. Bu bilgilerin hem blog liste sayfasında hem de her bir yazı başlığından sonra çıkmasını istiyoruz. Tarih ve Etiketler kısmi dosyasını açın.

layouts/partials/date-and-tags.html:

{{ $dateTime := .PublishDate.Format "2006-01-02" }}
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
<i data-feather="calendar"></i> <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
{{ with .Params.tags }}
  <br>
  <i data-feather="tag"></i>
  {{ range . }}
  {{ $href := print (absURL "tags/") (urlize .) }}
  <a class="btn btn-sm btn-outline-dark tag-btn" href="{{ $href }}">{{ . }}</a>
  {{ end }}
{{ end }}

Alttaki değeri config.toml dosyasına girin:

[taxonomies]
  tag = "tags"

date-and-tags.html config dosyasından değerleri çekecektir ancak Hugo tarih konusunda türkçe desteği sunmadığı için, varsayılan olarak belirlenen Jan 2, 2006 biçimini değiştirmeliyiz. Bu yüzden config.toml içinde dateFormat param değeri oluşturun ve alttaki değeri girin:

[params]
  dateFormat = "01.02.2021"
  homeText = "İlk hugo web siteni yaptın, tebrikler :)"

Bu tarih biçiminin çıktısı gün.ay.yıl şeklinde olacak. Şu an hugo’da kullanılabilecek en uygunu bu.

Şimdi güncelleme için layouts/_default/single.html dosyasında kısmi dosyaya referans verin:

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ partial "date-and-tags.html" . }}
<br><br>
{{ .Content }}

{{ end }}

Aynı biçimde layouts/_default/list.html dosyasında da referans verin:

{{ define "main" }}

<h1>{{ .Title }}</h1>
{{ range .Pages.ByPublishDate.Reverse }}
<p>
  <a class="font-125" href="{{ .RelPermalink }}">{{ .Title }}</a>
  <br>
  {{ partial "date-and-tags.html" . }}
</p>
{{ end }}

{{ end }}

Etiketler Sayfa Düzeni

Etiketlerin listelendiği http://localhost:1313/tags/ sayfada birkaç düzenleme yapacağız. Normalde tarih gösteriyor, biz her etiket sonrasında kaç kez kullanıldığını göstereceğiz. Etiketler alfabetik sırayla listelenecekler.

Şu dosyayı açın : layouts/_default/terms.html

{{ define "main" }}

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

{{ range .Data.Terms.Alphabetical }}
<p>
  <a class="btn btn-outline-dark font-125" href="{{ .Page.Permalink }}">
    <span class="badge badge-dark">{{ .Count }}</span> {{ .Page.Title }}
  </a>
</p>
{{ end }}

{{ end }}

Stil Ayarları

Kendimize özel bir kaç stili layouts/partials/style.html dosyasına ekleyelim:

<style>
.container {
  max-width: {{ .Site.Params.containerMaxWidth | default "700px" | safeCSS }};
}
#nav a {
  font-weight: bold;
  color: inherit;
}
#nav-border {
  border-bottom: 1px solid #212529;
}
#main {
  margin-top: 1em;
  margin-bottom: 4em;
}
#home-jumbotron {
  background-color: inherit;
}
.font-125 {
  font-size: 125%;
}
.tag-btn {
  margin-bottom: 0.3em;
}
img {
  max-width: 100%;
}
</style>

ve layouts/partials/head.html içinde referans verelim:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {{ $css := "css/bootstrap.min.css" | absURL }}
  <link rel="stylesheet" href="{{ $css }}">
  <title>{{ .Title }}</title>
  {{ partial "style.html" . }}
</head>

Sayfa Başlıkları Ayarlama

Sayfanızı ziyaret ettiğinizde <title> elementi sayfa başlığını getiriyor. Yapacağımız ayarla, ana sayfa için sadece sayfa başlığı ve alt sayfalar için ana sayfa başlığı + alt sayfa başlığı gösterilmesini sağlayacağız.

Ayrıca {{ hugo.Generator }} belirteçi ile sitemizin yapıldığı hugo versiyonunu html dosyası içinde göstereceğiz.

Güncellenmiş layouts/partials/head.html dosyası şu şekilde olmalıdır:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {{ hugo.Generator }}
  {{ $css := "css/bootstrap.min.css" | absURL }}
  <link rel="stylesheet" href="{{ $css }}">
  {{ $title := print .Title " | " .Site.Title }}
  {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
  <title>{{ $title }}</title>
  {{ partial "style.html" . }}
</head>

Sonuç

Hugo sunucuyu durdurun ve sadece hugo komutunu çalıştırın. Bu komut public klasörü içinde sitemizin çalışma dosyalarını oluşturacak. Site ağacımız şöyle olmalıdır:

├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── blog
│       ├── nazim-hikmet-davet.md
│       ├── _index.md
│       ├── yercekimli-karanfil-edip-cansever.md
│       └── istanbulu-dinliyorum-orhan-veli.md
├── layouts
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   ├── single.html
│   │   └── terms.html
│   ├── index.html
│   └── partials
│       ├── date-and-tags.html
│       ├── head.html
│       ├── nav.html
│       ├── script.html
│       └── style.html
├── public
│   ├── blog
│   │   ├── index.html
│   │   └── index.xml
│   ├── css
│   │   └── bootstrap.min.css
│   ├── favicon.ico
│   ├── nazim-hikmet-davet
│   │   └── index.html
│   ├── index.html
│   ├── index.xml
│   ├── js
│   │   └── feather.min.js
│   ├── sitemap.xml
│   ├── tags
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── yasam
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   ├── siir
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   ├── zaman
│   │   │   ├── index.html
│   │   │   └── index.xml
│   │   └── sehir
│   │       ├── index.html
│   │       └── index.xml
│   ├── yercekimli-karanfil-edip-cansever
│   │   └── index.html
│   └── istanbulu-dinliyorum-orhan-veli
│       └── index.html
├── resources
│   └── _gen
│       ├── assets
│       └── images
└── static
    ├── css
    │   └── bootstrap.min.css
    └── js
        └── feather.min.js

İlk hugo web siteni yaptın, tebrikler :) Oluşturduğumuz sitenin kaynak kodlarına buradan erişebilirsiniz.

Kılavuz umarım yardımcı olmuştur. Hugo ile daha bir çok şey yapılabiliyor ve hepsini tek bir kılavuza sığdırmak gerçekten imkansız. Sırada ne var derseniz, tavsiyem Hugo dökümanlarını dikkatlice okumanızdır. Web sitenizi ücretsiz biçimde host etmek için hosting ve yükleme sayfasına da bir göz atın, barındırma için ücret ödemeyin.

ÖNEMLİ: Bu dökümanın İngilizce orijinali Zachary Wade Betz tarafından harika bir şekilde hazırlamış. Ben sadece elimden geldiğince çevirisini yaptım. Onun sayesinde Hugo sayfa yapısını anlayıp çözmüştüm. Dilerseniz orijinal metine bu adresten ulaşabilirsiniz.