Herkese selamlar.

Öncelikle neden Hugo'yu kullandım. Aslında yeni bir şey öğrenmek için 👨‍💻 Bilgi paylaşımı yapacağım zamanlar genellikle Medium ve özellikle İngilizce yazmaya çalıştığım blogları da Devto üzerinden paylaşıyordum artık hem burada hem de o taraflarda paylaşmaya çalışacağım. Özellikle Devto üzerinden geri bildirim alabilirsiniz. Medium paralı malum :) aylık belirli sayıda okuma hakkı veriyor. Başka tarayıcılarda okuyabiliyorsunuz ama yazara bir soru soracağınız zaman üye girişi yapmak gerekiyor.

                            I ❤️ Open Source :) 

Bu yazımda Hugo ile seçtiğim bir tema üzerinde düzenlemeler yapıp sonrada Github Page üzerinden siteyi yayıya almayı anlatmaya çalışacağım. Detaylara girmeden kullandığım kaynakları referans göstererek hızlıca anlatmaya çalışacağım. İlk olarak makinenize göre Hugo'yu kurmanız gerekecek. Ben Windows 64 bit üzerinde binary dosyadan kurulum yaptım. Bunu detaylı anlatmaya gerek görmüyorum. Paylaşacağım linkteki videodan hızlıca Windows üzerinde kurulumu yapabilirsiniz: Install Hugo on Windows

Burada benim not olarak paylaşmak istediğim bir nokta ise seçeceğiniz bazı temalar HugoExtend ile derleniyor. İlgili HugoExtend ve diğer sürümleri Github'daki release kısmında bulabilirsiniz: Hugo Relase

Hugo Go dilinde yazılmış, açık kaynak statik site üreticilerinden birisidir. Bir çok ücretsiz tema bulunduyor. Buradan herhangi bir temayı seçip kullanabilirsiniz. Temalar md formatında dosyaların derlenmesine imkan sağlıyor.

Kurulumu yapıktan sonra seçtiğiniz temayı Github üzerinden klonlamanız gerekiyor Hugo Temalar. Daha sonra terminalden Hugo komutları ile derleyebiliyorsunuz. Ancak ilk olarak bir config dosyası oluşturmanız gerekmektedir. Temaların example kısımlarında demoları için uygun config dosyası bulunmaktadır (config.toml). Bu dosyayı ana dizine taşıyıp düzenleyebilirsiniz ya da kendiniz ana dizinde yeni bir conf dosyası oluşturmanız gerekiyor:

  hugo server -D

komutu ile temayı ayağa kaldırabilirsiniz. Daha sonra kendinize göre config dosyasını düzenleyebilirsiniz.

Adım Adım Siteyi Hazır Hale Getirme Adımları

Bu adımları genel olarak kullandığım kaynaktakiler ile aynı olacak şekilde anlatmaya çalışacağım. Bu kaynaktan da detaylı inceleyebilirsiniz: Hugo Github Page

• Seçtiğiniz bir dizinde Hugo komutu ile siteyi oluşturma adımı:

  hugo new site HugoSite
  cd HugoSite
  

• Temanın Klonlanması

  git init
  git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
  cp themes/hello-friend-ng/exampleSite/config.toml .
  hugo server -D
  

  temada büyük değişiklikler yapmayacaksanız, temadaki güncellemelerden faydalanmak için submodule olarak eklemeniz tavsiye ediliyor. Yukarıda da bahsettiğim gibi config dosyası exampleSite dan ana dizine kopyalanır.

• Github'a Deploy Aşaması

Github diğer statik site üreticileri gibi Hugo'yu doğrudan desteklemiyor(Bk. Jeklly). Bunun için bir işlem yapmak gerekiyor. (Not: Netlify üzerinden de deploy edebilirsiniz). Github'da iki tane repo açmanız gerekiyor. Birisi github-username.github.io şeklinde isimlendirmeniz gerekiyor (özel bir isimlendirme). Daha sonra kodları asıl barındıracak repoyu oluşturmanız gerekiyor. Hugo yeni siteyi oluşturduğunuz dizinin ismi ile isimlendirebilirsiniz.

Bu iki repoyu oluşturduktan sonra github-username.github.io reposu diğer repoya submodule olarak eklenir.

git remote add origin git@github.com:<github_username>/HugoSite.git
git add .
git commit -m "Hugo teması oluşturuluyor"
git submodule add git@github.com:<github_username>/<github_username>.github.io.git
git add .
git commit -m "Html dosyaları oluşturuluyor."
git push -u origin master

Daha sonra config dosyasında baseURL değeri Github Page değeri ile değiştirilir.

baseURL = "https://<github_username>.github.io/"
publishDir = "<github_username>.github.io"

Daha sonra hugo komutu ile html dosyaları derlenerek submodule' daki dizine generate edilir. Bu işlemden sonra generate edilen değişiklik Github Page uzak reposuna push'lanır.

cd <github_username>.github.io
git add .
git commit -m "Site çalışır hale getirildi!"
git push origin master

Bu işlemler başarılı bir şekilde tamamlandı ise Github Page otomatik deploy ediliyor (yaklaşık 10 sn içerisinde). Doğru bir şekilde çalıştığını sitenizden kontrol edebilirsiniz: github_username.github.io

Yeni Post Oluşturma

  hugo new /post/new-post.md

komutu ile content dizini altında post dizini oluşturulup, bu dizin altında new-post.md dosyası bir template olarak oluşturulur:

title: "Hugo Kullanarak Github Page'de Web Sitesi Oluşturma"
date: 2020-07-24T13:48:17+03:00
draft: true
toc: false
images:
tags:

Templatede genel olarak bu bilgiler oluşturulmaktadır. İlgili kısımlar düzenlenir. Bu template kısmından sonra md formatında yazınızı yazabilirsiniz.

Not: Blogun localde çalıştığını görebilirsiniz ancak host ettikten sonra sitede görebilmek için draft kısmını false yapmanız gerekmektedir.

Umarım faydalı bir içerik olmuştur. Eksik ya da yanlış olan kısımlar var ise lütfen anasayfadaki herhangi bir ileşim kanalından iletebilirsiniz. Ayrıca takıldığınız bir nokta olduğunda da iletişime geçmeyi unutmayınız 😊