Hugo Ne Yav?

Hugo (bir diğer adı ile gohugo) Go dili ile geliştirilmiş, açık ve özgür kaynaklı statik bir site üreticisidir.

WordPress blog sitelerini göz önüne alacak olursak, WordPress’in altyapısı olan PHP ile çalıştığını, çalışmak zorunda olduğunu göreceksiniz. Bu bağlamda WordPress sitesini çalıştırmak için PHP çalıştırmak -çalıştıracak bir yer bulmak- zorundasınız. Hugo’nun en büyük artısı herhangi bir “arka-çalıştırıcı” back-end diline ihtiyacı olmaması. Hugo ile oluşturduğunuz siteleri herhangi bir yerde hostlayabilirsiniz.

Ne demek herhangi bir yer?

Paylaşımlı hostingden Github pages’e kadar html js yayınlamanıza izin veren herhangi bir yerde hugo sitesini çalıştırabilirsiniz. Tek gereklilik tarayıcının hugo sitesinin kaynak kodlarına erişmesi.

Hugo sadece statik siteler üretebilir!

Bu, Hugo ile kendinize ait api kodlamadığınız ve front-end'e el atmadığınız süre boyuncaforum, e-alışveriş gibi interaktif siteler üretemeyeceğiniz anlamına geliyor. Hugo sadece görünen kısmı oluşturur.

Format biçemi

Hugo yazıları işlemek için MarkDown biçimini kullanır (tıpkı github’ın yaptığı gibi).

Şuan bu yazıyı html olarak görsenizde, bu yazıyı .md olarak hazırlayıp Hugo’nun işlemesi için Hugo’ya teslim ediyorum. Böylece WordPress veya Ghost’daki Text Editor‘e ihtiyaç olmuyor.

Nereye yahu, daha Hugo kuracaktık?

Hugo’yu Gnu/Linux paket yöneticinizden ya da Releaselerden indirebilirsiniz.

Hızlıcana sitemizi kuralım

1

hugo new site merhabaHugo && cd merhabaHugo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

6 directories, 2 files

Buna benzer bir config.toml dosyası oluşmuş olmalı;

1
2
3

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

Bu ayarları kendinize göre özelleştirdikten sonra temamızı kuralım

Tema kurulumu

1

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Ardından config.toml dosyamıza gelip theme anahtarını ekliyelim

1

theme = "PaperMod"

Önizleme

En temel düzenlemeleri yaptığımıza göre artık hugo sitemizi “geliştirici” modunda başlatabiliriz

1

hugo server -D

Hugo server varsayılan olarak 1313 portunu kullanır. Port başka bir program tarafından kullanılıyor ise rastgele bir port ile yayın yapacaktır.

Tema Ayarları

Tıpkı hugo’nun config’i olduğu gibi her temanın da bir configi bulunmakta. PaperMod’un exampleSite config’ine buradan erişip, kendinize uyarlayabilirsiniz.

Yazı yazalım!

1

hugo new posts/merhaba.md

Komutu ile hugo’ya yeni bir static sayfa oluşturacağımızı söyledik. Oluşan merhaba.md dosyası content/posts konumunda olacaktır.

1
2
3
4
5

---
title: "Merhaba"
date: 2021-06-16T14:05:07+03:00
draft: true
---

darft: true durumu, yazının tamamlanmadığı anlamına gelir ve hugo siteyi static hale getirdiği zaman yazı sitede gözükmez.

1
2
3
4
5
6
7

---
title: "Merhaba"
date: 2021-06-16T14:05:07+03:00
draft: false
---
# Merhaba Dünya!
![bu yazıya ait ekran görüntüsü](https://cdn.codeksion.net/hedehodo123.png)

merhaba.md dosyamı yukarıdaki gibi düzenleyerek kayıt ediyorum.

İlk yazımı da bu şekilde paylaşmış olduk.

Statik Statik Statik!

Hugo sitemizi hızlıca kurduğumuza göre haydi bunu bağımsız hale getirelim.

config.toml dosyamı açıp baseURL anahtarını / olarak değiştiriyorum.

1

hugo

Herhangi bir hata dönmediyse hugo sitemizi derlemiş ve public klasörü oluşturulmuş olmalı. Artık hugo server -D yazmaya gerek kalmadan sitemiz erişebilir durumda.

(root page’i public yapmak gerekebilir)

public resources config.toml themes data static archetypes content layouts

Statik Statik NGINX

Sitemiz artık tamamen statik ama tarayıcı kaynak dosyalarına erişemediği için düzgün görüntülenmiyor olabilir. Örnek NGINX configi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

server
{
    listen 443;
    server_name blog.codeksion.net;
    index index.html index.htm default.html;
    root /www/wwwroot/merhabaHugo/public;
    error_page 404 /404.html;

    location ~ \.well-known{
        allow all;
    }
}

Temalar

Tıpkı WordPress, Ghost’da olduğu gibi Hugo’da da insanlar tarafından başka insanların kullanması için üretilmiş ücretli-ücretsiz temalar var.

Bu temaların bir kısmına buradan erişebilir, bu sitenin temasını PaperMod‘dan edinebilirsiniz.

Yazar Yorumu

Hugo ile site oluşturuken çok eğlendim, aldığım hatalar neticesinde de bir o kadar öfkelendim. Hugo oldukça kullanışlı bir program olmasına rağmen öğrenmek & tecrübe etmek adına harcayabileceğiniz 2 saatiniz yoksa başka blog teknolojilerine yönelmenizi tavsiye ederim. Static bir site olduğu için içerisinde online düzenleyicisi yok. Yazı yazmak için her defasında hostingi ziyaret etmek durumuna sebep olabilir. Markdown editor olarak kullandığım program ile hugo’nun resource algısı farklı olduğu için yine nginx ile hostlanan bir “cdn” subdomaini açmak zorunda kaldım. SEO ayarları için kullanacağınız temanın dökümanlarına bakmayı unutmayın.