Merhaba, Bu yazıda golang ile yazılmış bir static web sitesi oluşturma aracı olan hugo ile basit statik web siteleri oluşturup github üzerinde barındırmayı ve yayınlamayı ele alacağım. Bunun için iki farklı web sitesi hazırlamayı ve hazrılarken işimize yarayacak farklı üçüncü parti web hizmetleri de kullanmayı planlıyorum. Öncelikle hugo kullanımından bahsedip daha sonra basit bir web sitesi oluşturarak devam edeceğim.

Hugo

Hugo, Go ile yazılmış bir static web-site generator'dır. Bu framework özgür olarak kurulup kullanılabilen bir CLI aracı sayesinde terminal komutları ile static bir web sitesini hızlı bir şekilde oluşturabilir. Ayrıca farklı deployment seçeneklerine sahiptir. gohugo.io sitesinde hosting and deployment bölümünde farklı web hosting platformları üzerinde web sitesinin nasıl barındırılabileceği açıklanmadır. Fakat ben bu yazıda github üzerinde barındırıp username.github.io domain inde çalışan bir web sitesi inşa edeceğim.

Framework ü indirmek ve hızlı bir başlangıç için gohugo.io adresine giderek sisteminize kurabilir ve hemen başlayabilirsiniz. Eğer bir GNU dağıtımı kullanıyorsanız muhtemelen paket deponuzda bulunuyorudur. Ubuntu ve debian depolarından

$ sudo apt install hugo

Fedora depolarında

$ sudo dnf install hugo

ile kurulabilir. Kendi web sitesinde homebrew ile hem linux hem mac için kurulum önermekte.Homebrew kurulumu için ;

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

kullanabilirsiniz. Daha sonra brew install hugo komutu ile hugo kurulumunu yapabilirsiniz.

Kurulumdan sonra terminal satırından

$ hugo new site /path/to/your/site

ile yeni bir web sitesi oluşturabilirsiniz. Dosya hiyeararşisi aşagıdaki gibidir. config.toml dosyası web sitesinin konfigurasyonunu yapmamızı sağlayan dosyadır.

Bu haliyle boş bir sayfa açacaktır. Çünkü layout içinde hiçbir dosya bulunmamakta.
Bir veya daha fazla temayı gohugo.io/themes sayfasından seçerek themes dizini içine git ile klonlayabilirsiniz. Yeni bir content oluşturmak için hugo new content/new_article.md kullanılabilir.

$ hugo server

ile local server 1331 portu üzerinde web sitesi çalışmaya başlayacaktır. Eğer deneyiminizi daha ileri taşımak isterseniz yine gohugo.io üzerindeki template tutorial'ından faydalanarak kendi tasarımınızı oluşturabilirsiniz. Fakat ben bu yazıda sadece hazır templateleri kullanarak web sayfaları oluşturacağım.

Statik bir portfolio sayfası oluşturmak

Portfolio sayfaları static sayfalara verilecek en güzel örneklerden biridir. yapılan çalışmaların sergilendiği ve diğer hesapların veya iletişim maillerinin bağlantı olarak verildiği tipte sayfalardır. Bunu oluşturmak için öncelikle themes.gohugo.io sayfasında listelenen portfolio temalarından seçerek git ile klonlamam gerekli. Ben hugo-shell-theme isimli temayı seçiyorum. Oldukça basit yapıda olması tercih sebeplerimden birisi. İlk denemeyi bu temayı kullanarak yapacağım.

$ git init 
$ git submodule add https://github.com/Yukuro/hugo-theme-shell.git themes/hugo-theme-shell
$ hugo server -t hugo-theme-shell -w -D

ile temayı themes dizini içine klonluyorum ve hugo server ı başlatıyorum. Şu anda local server üzeirnde çalışıyor fakat herhangi bir konfigurasyon yapılmamış halde çalışmakta. bunun için temanın github sayfasında verilen config.toml içeriğini kopyalayıp dizindeki config dosyama yapıştırıyorum. Aşağıda bazı bölümlerini değiştirdiğim ve yorum satırlarını sildiğim config dosyası mevcut. shema olarak powershell tercih ettim

Bu haliyle bana aşağıdaki gibi bir çıktı veriyor.

Daha iyi bir kullanım için description kısmında bir markdown dosyası kullanmayı deneyebilirsiniz. Örneğin benim kullandığım portfolio web sitesi noaahhh.github.io adresinde bulabilirsiniz.

Markdown kullanımı için config dosyasındaki description bölümüne content içinde oluşturulan bir description.md verilir.

description = /description.md

Sonra dosya istenildiği doldurulabilir. Eğer kod tarafına giderseniz html tag ları arasında config file içinden parametreleri nasıl aldığını görebilirsiniz.

Aynı şekilde şimdi themes dizini içine hugo-profile temasını git ile klonluyorum. Bu tema config dosya olarak .yaml uzantılı config.yml kullanıyor. Tema dizini içinde bulunan 3 farklı yaml dosyasından biricisini (v1.yml) root dizinme config.yml olarak kopyalıyorum.

$ hugo server -t hugo-profile -w -D --config=config.yaml

ile başlattığımda web sitemiz artık local server üzerinde yeni temayı kullayor.

Bu tema içinde aynı şekilde config dosyası içindeki parametreleri değiştirerek kişisel web sitenizi oluşturabilirsiniz. İleriki bölümlerde bunun daha kullanıcı deneyimine hitab eden bir yöntemine değineceğim.

e-ticaret ve ürün tanıtım sayfaları

Bu bölümde Hero temasını deneyeceğim. Hero, tanıdık tipte bir firma tanıtım sayfası ve temiz bir arayüze sahip. Bu sebeple bu temayı seçtim. Hugo ile yeni bir web sitesi oluşturuyorum. Daha sonra bu temayı git ile theme dizini içine klonluyorum. Tema içinde example-site isimli bir dizin bulunmakta. Bu dizin önceden ayarlanmış bir toml dosyası ile hazır bir web sitesini içinde barındırıyor. Bu dizin içindekileri ana dizinime kopyalıyorum. Sonra bir editör ile config dosyamı açarak themesDir parametresini siliyorum. daha sonra hugo server ı çalıştırıp localhost 1313 portundan web sitemi izleyebilirim.

Aşağıda yapılan terminal işlemlerini listeleyen bir görsel ekledim. Kontrol edebilirsiniz.

Bu şekilde ürün tanıtımı yapmak için veya bir şirket portfolio'su için websiteleri oluşturabilirsiniz.

Github Page

Hugo ile oluşturulanbir we sitesini host etmek için birden fazla seçenek mevcuttur. Hosting&Deployment linkinden host ve deployment seçeneklerini görebilirsiniz. github, gitlab, netlify firebase gibi servislerle web sitemizi host edebiliriz. Github seçeneğinde username.github.io domain i üzerinden oluşturduğumuz sayfaya erişim sağlayabilirsiniz. Bu uygulamada github üzerinde çalışacağım.

Şimdiye kadar hazırladığımız web sitellerinden portfolio sitemizi kendi github domainimiz üzerinden yayınlayabiliriz. Bunun için portfolio web sitemizin bulunduğu dizine giderek bu dizin içinde hugo komutu ile web sitemizi oluşturuyoruz. Dizin içinde public dosyası oluşacaktır ve bu dizin içinde yayınlanacak olan html kullanan web sitemiz bulunur. Bu dizin içindeki git repo muza gönderirsek burada Pages kullanarak web sitemizi yayınlayabiliriz. Github sayfasına giderek username.github.io isminde bir repo açıyoruz.

Yukarıdaki diagrama göre oluşan public dizini ilgili git repomuza bağlıyoruz.

myHugoSite $ cd public
public/ $ git init 
public/ $ git remote add origin https://github.com/username/username.github.io.git
public/ $ git remote set-url origin http://<public-access-key>@github.com/username/username.github.io

Son değişikliklerden sonra git repomuzla bağlantı kurmak için github->settings->developer Settings->Personal Access Key yolunu izleyerek bir key oluşturmalısınız ve bu key i son komuttaki ilgili bölüme yapıştırarak repo muzun bağlantısını yapmalıyız.

public/ $ git add .
public/ $ git commit -m "initial commit"
public/ $ git push origin main

ile repomuza gönderiyoruz. Daha sonra repo daki setting-> Pages bölümünden yayınlanmasını bekleyebiliriz. İlgili url den sitemiz yayınlanacaktır.

Github için farklı bir mimari

Eğer web sitemizi repo ile aynı isimde bir subdomain üzerinden yayınlamak istiyorsak yeni bir repo açarak public içindeki dosyaları bu repo ya gönderip yayınlayabiliriz. Aşağıdaki diagramı incelersek local sistemizde bir web sitesi oluşturup bu siteyide github üzerinde tutabiliriz. "themes" dizini içine submodule başka bir git reposundan link oluşturabiliriz. Yayınlanacak dosyalarımızı yayınlanacak subdomain isimini kullanan yeni bir repo ya göndererek Github Pages ile yayınlayabiliriz.

mySite/ $ git submodule add http://github.com/Yukuro/hugo-theme-shell.git themes/hugo-theme-shell

ile submodule oluşturabiliriz.

mySite/ $ hugo -d ../myPortfolio

gibi bir komutla hugo web sitemizle aynı dizinde olan myPortfolio isminde bir dizinde html dosyalarını oluşturabiliriz. Sonra bu dizini github reposuna bağlayarak repo ile aynı isimde bir subdomain üzeriden web sitemizi yayınlayabiliriz.

Hugo ve Forestry.io

Forestry.io github üzerindeki web sitemizdeki içerikleri grafik arayüz kullanarak yönetmeyi kolaylaşlaştıran bir web servisidir. Bu servis hugo, jeykll gibi frameworkler ile çalışan bir CMS aracıdır. Kişisel bloglardaki içerik girişi kolay bir şekilde yapılabilir. Sayfasından daha detaylı olarak bilgi edinebilrisiniz.

Basit bir kullanıma sahiptir. Sadece servise kaydolup daha sonra "My Sites" bölümünde add site ile yeni bir kayıt oluşturup "static site generator" olarak Hugo seçmeliyiz. Ve sonra git provider seçerek forestry.io servisi ile repomuzu bağlıyoruz.

Sonrasında blog içindeki post'larmızı seçeceğimiz doküman tiplerinde hazırlayabiliriz.

Bunun dışında da Hugo ile çalışan birçok CMS uygulması mevcuttur. Cloudcannon, strapi.io, netlifyCMS bunlara örnek olarak verilebilir. Bunlar host ve deployment arasında içeriklerimizi düzenlemek için kullanabileceğimiz sistemlerlerdir.

Diagramdaki döngü, CMS hizmetini ifade etmektedir. CMS hizmetleri ile deployment öncesi içerik oluşturma ve düzenleme gibi işlemler yapılabilir. AWS, Netlify gibi hizmetler ile bağlanarak git sağlayıcısı ve deploymet hizmeti arasında içerik düzenleme işlemi yapılabilir. Ve bu sırada git sağlayısında tutulan web sitesi ile senkronizasyon sağlar.