GitHub Üzerinde Ücretsiz Blog Sitesi Yayınlamak

Seveni sevmeyeni olsa da, bir yazılım geliştiricisi olarak GitHub'ı çok seviyorum. Kod denemelerimi, büyük/küçük projelerimi GitHub'da tutmaktan da hoşlanıyorum. Kişisel blog denemelerim geçmişte Blogger'da, Wordpress'de, Medium'da olsa da hiçbiri GitHub'da olması kadar memnuniyet duyurmadı bana. Tam da olması gereken yerde hissettiriyor. Bunu engelleyemiyorum. 🤭 Bu fikir üzerine araştırmaya başlayınca GitHub Pages tarafından desteklenen Jekyll projesini GitHub repo'mda host edebileceğimi öğrenince başladım çalışmaya. Sonunda, ziyaret etmiş olduğunuz sayfanın da içinde bulunduğu blog sitemi yayına aldım. Sizin de böyle bir blog veya bir web sitesi yayınlama isteğiniz varsa, yardımcı olabileceğimi düşünerek bu yazıyı yazdım. Bu yazı sonunda öğrendiklerinizi sadece blog hazırlamak için değil, aklınızdaki veya işinizdeki bütün site ihtiyaçlarınız için kullanabilirsiniz. Statik verileri dinamik bir şekilde bütün dünya ile paylaşmış olacaksınız.

Bu yazıdakileri uyguladığınız zaman, GitHub repository'nizdeki Jekyll projenizi bilgisayarınızda çalıştıracaksınız ve yeni yazınızı yazıp commit ve push edeceksiniz. Birkaç dakika sonra (GitHub'da derlenme süresi kadar) yeni yazınızın kullaniciadi.github.io/repoadi/ adresinde yayınlanmış olduğunu göreceksiniz. Çok da lafı uzatmadan hadi size de bir GitHub blog yapalım.

GitHub Pages

GitHub Pages, Projelerinizin tanıtımını yapabileceğiniz statik web sayfaları için kuruldu. Oluşturduğunuz projeyi, hazır Jekyll temalarını indirip düzenleyerek tanıtabilirsiniz. Biz bu statik yapıyı dinamikleştirecek projeyi oluşturacağız.

Jekyll

Jekyll, markdown (.md) dosyaları ile yazdığınız yazıları html sayfalarına generate ederek yayınlamanızı sağlıyor. Jekyll, Ruby ile yazılmış bir sistemdir. Bu yüzden bilgisayarımıza Ruby'yi kurmamız gerekmektedir.

Jekyll ve GitHub Pages ile tanıştığınızı düşünerek devam ediyorum. Adım adım ilerleyeceğiz.

1. Adım: Temanızı Seçin

Tamamı ücretsiz olan temaları http://jekyllthemes.org/ sitesinden, hem ücretli hem ücretsiz temaları https://jekyllthemes.io/ sitesinden (ücretlileri de bayağı para) inceleyerek hoşunuza giden bir temayı bulun (bunların haricinde de vardır sanırım). Örneğin ben aşağıdaki temayı seçtim.

2. Adım: Temayı Fork'layın ve İsimlendirin

Bu temalar genellikle GitHub'da bir repository'de bulunuyor. Beğendiğiniz temanın sayfasındaki "Get Beautiful on GitHub" butonuna tıklayarak bu temanın repository'sine gidin. Repository sayfasının sağ üst köşesindeki Fork butonu ile bu repository'yi kendi hesabınızın altına kopyalayın. Ayarlar sekmesinde repository'nizin ismini değiştirin. Bu isim bloğunuzun uzantısı olacaktır. Bu ismi config.yml dosyasındaki baseUrl'e atayın. Örneğin; kullaniciadi.github.io/repoadi/

3. Adım: GitHub Pages'i Aktifleştirin

İsmini değiştirdiğiniz repository'nin ayarlar sekmesine gelerek GitHub Pages bölümündeki Source'u, master branch'ınız olarak ayarlayın. Bu işlem ile GitHub'a "bu repository'yi GitHub Pages aracılığı ile yayınlamak istiyorum." demiş bulunuyorsunuz. Branch'ı seçince zaten GitHub size projeyi yayınladığınız URL'i veriyor. kullaniciadi.github.io/repoadi/

4. Adım: Repository'i İndirin

Fork'ladığınız bu projeyi bilgisayarınıza indirmek için repository'nizin anasayfasındaki Clone or Download > Open in Desktop bağlantısı ile bilgisayarınıza klonlayın. Bilgisayarınızda GitHub Desktop'ın kurulu olduğunu varsayıyorum.

5. Adım: "Merhaba Ruby", Korkmayın! Sadece kuracağız.

Artık, GitHub'da yayınlayacağımız bloğumuzun kodları bilgisayarımızda var. Jekyll, Ruby ile yazılmış bir platformdur. Bu yüzden bilgisayarımıza Ruby'yi kurmamız gerekmektedir. https://rubyinstaller.org/ adresinden Ruby'yi bilgisayarınıza kurabilirsiniz. Kurduktan sonra Command Prompt'a ruby --version yazarak kontrol edebilirsiniz. Ruby’yi kurduktan sonra RubyGems‘i kurmamız gerekiyor.

6. Adım: Visual Studio Code ile Başlayın

Ruby'yi de bilgisayarımıza kurduktan sonra Visual Studio Code aracılığı ile projemizi çalıştıralım. VS Code'da repository'nizi açın. Ruby eklentisini kurun.

7. Adım: Projenizi Derleyin ve Çalıştırın

Proje'de config.yml dosyasını açın ve baseurl isimli değişkenin değerini repository adınızı vererek değiştirin (baseurl: "/blog"). Visual Studio Code terminalini açın ve "ls" komutunu çalıştırın. Projenin ana dizininde olduğunuzdan eminseniz bundle exec jekyll serve komutunu çalıştırın. Bütün aşamaları tamamladıysanız, kullaniciadi.github.io/repoadi/ adresinden local bilgisayarınızda çalışan projenize tarayıcınızdan erişebilirsiniz.

Yeni bir yazı yayınlayalım!

Jekyll mantığında admin paneli sadece local bilgisayarınızda açılmaktadır. Yani http://127.0.0.1:4000/admin adresine erişebilirsiniz, ancak https://oguzhankircali.github.io/admin adresine erişemezsiniz. http://127.0.0.1:4000/admin adresine gidin ve açılan admin panelini inceleyin.

Admin paneli açılmadı değil mi? Çünkü admin plugin'ini kurmadık. Gemfile dosyasında jekyll_plugins diye bir bölüm var. Yeni bir satıra gelecek şekilde - jekyll-admin plugin'ini ekleyin.

Daha sonra bundle exec jekyll serve komutunu tekrar çalıştırın. Sorun yoksa http://127.0.0.1:4000/admin adresine giderek admin paneline giriş yapabilirsiniz. Herhangi bir kullanıcı adı veya şifre istemez. Çünkü sadece local'de çalışan bir paneldir bu. Biraz inceleyin. Örneğin index.html sayfasında Ruby kodları göreceksiniz. Bazı sayfalar tamamen markdown (.md) ile yazılmış durumdadır. Posts bölümünde de yayınlanan sayfaları göreceksiniz. Yeni bir test postu ekleyin ve sitedeki değişikliği görün.

Path'i boş bırakırsanız kendisi SEO'ya uygun bir şekilde oluşturacaktır. Ayrıca post'u kaydet dediğinizde, Visual Studio Code'da düzenlediğiniz markdown dosyasının HTML dosyasına çevrilmesi ile ilgili mesajları göreceksiniz. Bu nedenle 3-5 saniye sonra değişikliği görürsünüz.

Yeni eklediğim sayfayı incelemek için URL'e gittiğimde aaaa? 😮

Sebebi, sadece bir markdown dosyasına gitmişim gibi algılıyor. Post düzenleme ekranına ihtiyacımız olan metadata bilgilerini eklememiz gerekmektedir. Bu sorunlar olmasın diye diğer yazıları düzenleme ekranını açarak kopya çekeceğim.

Kullanılan metadata bilgilerini yeni yazıma da ekliyorum. 3-5 saniye sonra sayfayı yenilediğinizde herşeyin olması gerektiği gibi olduğunu göreceksiniz.

http://kullaniciadi.github.io/repoadi çalışmayacaktır kullaniciadi.github.io/repoadi/ çalışacaktır. Sonundaki slash karakterini unutmayın.*

Gemfile'ı gördünüz zaten. Plugin'leri kurmak için kullanabilirsiniz. Bir de config.yml dosyası var. Bu dosyada bir sürü değişken ismi var. Bunları kendinize göre güncelleyin. Ben kendi config.yml dosyamı sizinle paylaşıyorum. Bunu da örnek alabilirsiniz kendinize göre güncelleyebilirsiniz.

Proje dizininde alt tire ile başlayan klasörlerde herhangi bir işlem yapmayın. O klasörler Jekyll tarafından üretilmektedir.

Visual Studio Code veya GitHub Desktop üzerinden projede yaptığınız değişikliği commit + push ederseniz GitHub linki üzerinde yayınlanacaktır. Bundan sonrası sizin merakınız ve isteğinizle şekillenecektir. Detay sayfalar, yeni pluginler ve özellikler ile ilgili çalışmak isterseniz Jekyll Resmi Dokümanı'nı inceleyebilirsiniz.

Şu ana kadar yapmaya çalıştığımız işlemlerle ilgili sorun yaşarsanız, lütfen iletişim kurmakta çekinmeyin. Elimden geldiğince yardımcı olurum. Umarım faydalı olmuştur. Görüşmek üzere.