Bir önceki yazımızda Hugo uygulamasını Windows 10 bilgisayarımıza yüklemiştik. Şimdi ilk sitemizi yapacağız.
Klavyeden Windows+R tuşlarına basıp çıkan kutuya cmd yazıp klavyeden Enter tuşuna basarak komut satırını çalıştırın.
Konsol penceresini açmış olduk. Şimdi Hugo dizini altına gitmemiz gerek. Bunun için konsol satırına aşağıdaki komutu yazın.
cd C:\Hugo
Artık ilk sitemizi yapmaya hazırız. Bunun için konsol satırına aşağıdaki komutu yazın ve Enter tuşuna basın.
hugo new site test
- content klasörü yazılarınızın bulunacağı klasördür.
- themes klasörü temanızı kopyalayacağınız klasördür.
- config.toml dosyası siteniz ile ilgili yapacağınız ayarları içeren dosyadır.
Geri kalan klasör ve dosyalar ile işiniz olmayacak.
Şimdi sitemizi yaptık fakat Hugo’da varsayılan olarak herhangi bir tema yüklü gelmiyor. Bunun için şu adrese giderek Hugo için oluşturulmuş yüzlerce ücretsiz tema arasından seçim yapıp kullanabiliriz. Bu örnekte Zzo temasını seçtim.
Herhangi bir temanın sayfasına girdiğinizde sizi Download, Demo ve Homepage butonları karşılıyor. Temayı indirip kullanmak için Download butonunu kullanmalısınız. Örnek bir demosunu görmek için Demo butonunu kullanabilirsiniz. Tema sayfalarının alt taraflarında ise tema ile ilgili dokümantasyon, yükleme yönergeleri vs. bulunmaktadır. Biz şimdi Download butonuna tıklayarak indirme sayfasına gidelim.
Temanın github sayfasına ulaştık. Temayı indirmek için sağ tarafta bulunan yeşil Clone or download butonuna tıklayın. Açılan küçük pencereden Download ZIP linkine tıklayın ve temanın zipli dosyasını bilgisayarınıza indirin.
İndirme tamamlandıktan sonra zipli dosyanın içerisindeki tema klasörünü C://Hugo/test/themes klasörünün altına kopyalayın. Klasörün içini değil, kendisini kopyalamanız gerekmektedir. hugo-theme-zzo-master olan tema klasörünün adını kolaylık olması için zzo olarak değiştirin.
Bu aşamada tema klasörümüzün içerisine girerek ExampleSite adında bir klasör olduğunu görebilirsiniz. Burası temamıza özel yazıların, ayarların, fotoğrafların olduğu dataları içermektedir. Klasörün içerisindeki tüm dosya ve klasörleri seçerek kopyalayın.
test klasörüne geri dönün ve az önce kopyaladığımız dosyaları buraya yapıştırın.
Son olarak config klasörünün altındaki _default klasörünün altındaki tüm dosyaları seçerek ana test klasörüne kopyalayın. Hedefte zaten “config.toml” adında bir dosyası var uyarısına Hedefteki dosyayı değiştir seçeneğini seçip kopyalama işlemini bitirin.
Artık sitemizi çalıştırabiliriz. Bunun için cmd komut satırına geri dönüp aşağıdaki komutu yazmanız yeterli.
hugo server
hugo server komutu sitemizi lokal bilgisayarımızda çalıştırabilmemizi ve yaptıklarımızın sonucunu görebilmemizi sağlar. Bir nevi bilgisayarımızı geçici olarak sunucuya dönüştürür. Artık tarayıcınızın adres satırına localhost:1313 yazıp Enter tuşuna basarsanız yapmış olduğunuz Hugo sitenizi görebilirsiniz. Unutmayın, şu aşamada siteniz sizin bilgisayarınızda çalışmaktadır. Başkaları henüz sitenizi göremiyorlar. İleride o da olacak.
Bu temada ihtiyacımız olmadı ama siz başka tema kullanırsanız dikkat etmeniz gereken bir tane detay var. Sitenizin ana dizininde bulunan config.toml dosyasında yer alan theme = “tema adı” satırında tırnak içerisinde yazan tema adınızın, tema klasör adı ile birebir aynı olması gerekmekte. Hatırlarsanız zipli tema klasörünü kopyaladıktan sonra adını zzo olarak değiştirmiştik. Bunu yapmasaydık sitemizi açtığımızda boş bir sayfa görecektik.
Artık sizin de bir siteniz var. Tüm bu aşamaları biliyor olsanız 2 dakikadan kısa sürede Hugo sitenizi bilgisayarınızda çalıştırmanız mümkün. Bundan sonra sitenizin içeriğini düzenleme aşamaları. content klasörünün altına girip tüm sayfaları düzenleyebilirsiniz. Hugo sayfaları markdown dilini desteklemektedir. Bunun için herhangi bir online markdown editor kullanarak normal ofis programı kullanır gibi sayfalarınızı güncelleyebilirsiniz. Online markdown editor olarak şu uygulamayı önerebilirim.
config.toml sayfasından siteniz ile ilgili tüm ayarları değiştirebilirsiniz (disqus hesabınızı veya google analytics hesabınızı buradan girebilirsiniz örneğin. Veya temanız destekliyor ise sosyal medya hesaplarınızı buradan ekleyebilirsiniz). İngilizceniz varsa temanın kendi sayfasından dokümantasyonu okursanız tema ile ilgili tüm bilgilere ulaşabilirsiniz.
Son olarak Hugo sayfalarınızda yaptığınız değişiklikler tarayıcınızda gerçek zamanlı olarak gösterilmektedir. Yani sitenizin bir sayfasını güncellediniz diyelim, localhost sayfasını yenilemeden yaptığınız değişikliği görebilirsiniz. hugo server komutunu kapatmak isterseniz cmd komut satırında *ctrl+c tuşlarına aynı anda basabilirsiniz. Bunu yaparsanız hugo server yazarak çalıştırdığınız server durdurulur.