Engin Kaya

Giriş

Merhaba,

Bu yazıda Hugo ile websitesi kurup bunu Github ile yayına alma tecrübemi paylaşacağım. Siteyi kurarken yer yer takıldığım noktalarda bulduğum çözümleri de içeren sıfırdan bir kurulum rehberi olacağını düşünüyorum. Kendim bu siteyi oluştururken yaptığım araştırmalarda pek Türkçe içeriğe rastlamadım, bu konuda da yardımcı bir kaynak olabileceğini umuyorum.

Önbilgi olarak söyleyeyim, biraz da olsa HTML, CSS, JavaScript ve git ile deneyimim olmuştu fakat ben de bunlarda uzman olmadığım için bu kısımları da adım adım aktarabileceğimi düşünüyorum. Öyleyse başlayalım…

Neden Hugo

Sizi bilmiyorum ama bana zaman zaman “21. yy.‘dayız ve internette kesinlikle var olmam lazım” hissi geliyor. Bu hissin verdiği gazla daha önce wordpress ve blogspot ile blog açmayı, üniversetenin sağladığı kişisel alanıma websitemi kurmayı ve bunu geliştirmeyi bir kaç kez denedim. Fakat hepsi bir kaç yazı veya bir kaç ay sonra son buldu. Geri dönüp baktığımda hepsinin inanılmaz kötü tasarımlara sahip olduğunu farkettim (belki de bu yüzden bırakmıştım). Bu kez farklı platformların ve şablonların da çıkmasıyla daha kaliteli bir yapı ile yeniden denemek istedim.

Hugo, Go dili ile yazılmış bir statik site oluşturucu framework olarak geçiyor. Ben de go dilini hiç bilmediğim için Hugo’dan önce daha rahat anlayıp müdahale edebileceğimi düşündüğüm Bootstrap ve html5up ile farklı alternatifler denedim fakat Hugo’daki harika temaları ve kolay post oluşturma özelliklerini görünce bu işi çözmeye karar verdim. Zaten go dilini de bilmeyi gerektirmiyormuş.

Windows’ta Hugo Kurulumu

Benim işletim sistemim Windows10 olduğu için kurulumu bunun üzerinden gösterebileceğim, diğer işletim sistemleri için şuraya bakabilirsiniz.

Öncelikle C:\ dizinine Hugo diye bir klasör oluşturup bunun içerisine de iki adet klasör oluşturuyoruz: sitelerimizi barındıracağımız C:\Hugo\Sites ve executable dosyaları barındıracak C:\Hugo\bin klasörü. Daha sonra Hugo Releases sayfasına gidip size uygun olan .zip dosyasını indirmeniz gerekiyor. Örneğin benim için bu hugo_0.54.0_Windows-64bit.zip idi. Bu .zip dosyasında hugo.exe, license.md ve readme.md adlı üç dosya var ve bunları C:\Hugo\bin klasörüne çıkartıyoruz.

Şimdi Hugo’yu Windows PATH’e eklememiz gerekiyor. Bunun için windows tuşuna basıp Environment variables diye aratarak System Properties’e girip Environment variables‘a tıklıyoruz. Burada User variables altında Path‘e çift tıklayıp düzenlemek için açıyoruz ve sağ taraftan New’e tıklayarak dosyaları çıkarttığımız klasörü gösteriyoruz yani C:\Hugo\bin. Kaydederek çıktıktan sonra bilgisayarı yeniden başlatmaya gerek olmadan komut satırından Hugo’yu çağırabileceğiz. Bunu doğrulamak için komut satırını açıp hugo help yazabilirsiniz. Eğer her şey yolunda gitmişse aşağıdaki gibi bir cevap görememiz gerekiyor.

Her şey yolundaysa ilk sitemizi oluşturabiliriz. Bunun için komut satırına cd C:\Hugo\Sites yazarak Sites klasörüne gidiyoruz ve burada hugo new site newSite komutu ile newSite dosya adıyla ilk sitemizi oluşturuyoruz.

Tema Seçimi ve Kurulumu

Hugo altyapımızı kurduğumuza göre şimdi şu linkten güzel bir tema seçip yükleyelim. Ben denemek için Goa isimli temayı seçiyorum ve bunu yükleyeceğim. Eğer bilgisayarınızda git kurulu değilse kurmanın için tam zamanı. Şu adres‘ten indirip, next next şeklinde kurulumu tamamlayabilirsiniz. Sonrasında komut satırını açıyoruz ve cd C:\Hugo\Sites\newSite\themes yazarak themes klasörüne gidiyoruz. Buraya seçtiğimiz temayı klonlayacağız. Bunun için komut satırına git clone <seçilen temanın linki>.git yazıyoruz (benim için = https://github.com/shenoybr/hugo-goa). İşlem bitince C:\Hugo\Sites\newSite\themes\hugo-goa\exampleSite altındaki config.toml adlı dosyayı C:\Hugo\Sites\newSite dosyasının içindeki config.toml ile değiştiriyoruz (İsterseniz content, data, layouts ve static kalsörlerini komple kopyalayarak aynı siteyi oluşturabilirsiniz -ben ilk başta öyle yaptım ama zorunlu değil-). Temel olarak config.toml içerisinde konfigürasyon dosyalarını tutar ve bunları da kendi isteğinize göre güncelleyebilirsiniz.

Şimdi artık temel olarak sitemizi de oluşturup hazır etmiş bulunmaktayız. Bunu test etmek için komut satırına cd C:\Hugo\Sites\newSite yazarak sitemizin bulunduğu ana klasöre dönelim ve burada hugo server komutu ile yerel sunucumuzu çalıştıralım. Artık tarayıcınızdan http://localhost:1313/ adresine giderek websitenizin çalıştığını görebilirsiniz. Eğer her şey yolundaysa komut satırında Ctrl + C ile sunucuyu kapatabilirsiniz. Sırada oluşturduğumuz siteyi github’a yükleyip uzak sunucuda barındırmak var.

Sitenin Github’a yüklenmesi

Yerelde çalışan websitemizi github’a ücretsiz olarak yükleyerek herkese erişilebilir yapacağız. Bunun için öncelikte tabii ki github hesabınızın olması gerekiyor (olduğunuzu var sayıyorum). Github üzerinde, eğer < kullanıcıAdınız >.github.io isimli bir repo oluşturursanız, < kullanıcıAdınız >.github.io uzantılı websitenizi doğrudan host ediyor.

Github pages doğrudan Hugo’yu desteklemiyor bu yüzden iki adet github reposu oluşturmamız gerekiyor. Bunlarda birini < kullanıcıAdınız >.github.io ismi ile açmak zorundasınız, bu sayede github otomatik olarak sizin için websitenizi oluşturmuş olacak. Bu repo içerisinde HTML dosyalarını tutacağız. Diğer reponun adı çok önemli olmamakla beraber hugo_site olarak açabilirsiniz, bu repo da Hugo için gerekli dosyaları barındıracak.

İlk olarak Hugo için gerekli dosyaların barındırılacağı klasörümüzü senkronize edeceğiz ve < kullanıcıAdınız >.github.io klasörünü submodule olarak tanımlayacağız. Bunun için komut satırında C:\Hugo\Sites\newSite dosya yolundayken aşağıdaki komutları sırasıyla girmeniz gerekmektedir.

git init
git remote add origin git@github.com:< kullanıcıAdınız >/hugo_site.git
git add .
git commit -m "Hugo site icin ilk commit."
git submodule add git@github.com:< kullanıcıAdınız >/< kullanıcıAdınız >.github.io.git
git add .
git commit -m "Olusturulan HTML icin ilk commit."
git push -u origin master

Ben bu aşamada ‘Permission Denied (publickey)’ hatası aldım, eğer siz de alırsanız çözümü hemen burada.

Şu anda gerekli dosyaları github’da bulunan hugo_site adlı repoya yolladık. Sırada HTML dosyalarını oluşturup bunları da uzak repoya yollamak var. İlk olarak config.toml‘yi bir text editor ile açıp içerisinden iki şeyi değiştirmemiz gerekiyor:

baseURL = “https://< kullanıcıAdınız >.github.io/”
publishDir = “< kullanıcıAdınız >.github.io”

config.toml‘yi kaydedip çıktıktan sonra Hugo ile HTML dosyalarını oluşturmak için komut satırına hugo yazmanız yeterli.

Ve bu komut ile Hugo sitemizin bulunduğu ana klasörün içerinde < kullanıcıAdınız >.github.io isimli içerisinde HTML ve CSS’lerin bulunduğu bir klasör oluşturdu. Github artık bunları yorumlayıp sitemizi oluşturabilir. Şimdi son olarak oluşturulan bu dosyaları da github üzerinde yarattığımız < kullanıcıAdınız >.github.io isimli repoya aktarmamız gerekiyor. Bu dosya yolunu gösterme işlemini yukarıda yaptık ama kontrol etmekte fayda var, bunun için komut satırındancd < kullanıcıAdınız >.github.io ile < kullanıcıAdınız >.github.io klasörüne klasörüne geçelim ve git remote -v komutun yazalım.

> origin git@github.com:< kullanıcıAdınız >/< kullanıcıAdınız >.github.io.git (fetch)
> origin git@github.com:< kullanıcıAdınız >/< kullanıcıAdınız >.github.io.git (push)

Yukarıdakilerin cevap olarak geldiğinden emin olduktan sonra artık dosyalarımızı yollayabiliriz. Aşağıdaki komutları girelim ve işlem tamamlansın

git add .
git commit -m “Iste ilk Hugo sitem hazir!”
git push origin master

Artık Hugo ile oluşturulmuş ve < kullanıcıAdınız >.github.io adresinde bulunan siteniz hazır! Şimdi config.toml‘yi kendinize göre düzenleyebilirsiniz. Düzenledikten sonra yapmanız gereken hugo komutu ile siteyi yeniden oluşturup bunu github’da bulunan < kullanıcıAdınız >.github.io klasörünüze atmak.

Ek bilgiler

Temel olarak sitemizi oluşturduktan sonra pexels, unsplash ve coverr gibi kaynaklardan ücretsiz olarak görseller indirip kendinize göre sitenizi özelleştirebilirsiniz.
Eğer VSCode kullanıyorsanız Hugo’yu kullanmanızı kolaylaştıracak eklentiler var şu linkten inceleyebilirsiniz. Ben Hugofy ve Hugo Language and Syntax Support’u hemen yükledim.

Herhangi bir sorunuz olursa veya yazı içerisinde düzeltilmesi gereken yer görürseniz bana ulaşabilirsiniz.

Engin