Tamamen Ücretsiz Portfolyo Sitesi Nasıl Kurulur

You are currently viewing Tamamen Ücretsiz Portfolyo Sitesi Nasıl Kurulur

Merhaba arkadaşlar, hem elim alışsın hem de birilerinin işine yarayacak bir “ilk blog yazısı” olsun diye böyle bir konu aklıma geldi. Yazılımcılar, freelancerlar, müzisyenler, ressamlar, sanatçılar, içerik üreticileri, hizmet sağlayıcılar, pazarlamacılar ve daha niceleri dijital dünyada yer edinmek için basit, temiz ve yaptığı işleri(portfolyo) sergileyebileceği dijital bir ortam arıyor. Hal böyle olunca akla direkt bir web sitesi kurmak ve yapılanları sergilemek geliyor. Basit bir landing page(karşılama sayfası) için bile biraz paraya kıymak gerekebiliyor. Fakat siz o güzel canınızı hiç sıkmayın, ben o işi sizin için hallettim. Tek kuruş ödemeyeceksiniz. Dikkatlice takip edin 🙂

Yapacağınız site böyle olacak: Demo

Peki nasıl çalışıyor? Teknolojik altyapı olarak Javascript frameworku olan Vue’yi kullandım. SPA(single page application) olduğu için sayfalar arası geçişlerde sayfa yenileme ihtiyacı olmayan hızlı bir uygulama oldu.

Özellikleri neler? Örneğin karşılama ekranında göreceğimiz, ne yapabileceğimizi potansiyel müşterilerimize anlatan, kendi kendine yazılıp yazılıp silinen bir yazımız yer alacak. Projedeki tüm veriyi basit bir JSON dosyasına çıkardım böylece tüm içeriği JSON dosyasından kontrol edeceğiz. Logolar, resimler, başlıklar…

“Bunları” yazan kısım sizin belirleyeceğiniz kelimeler arasında dönüşüm sağlayacak

Diğer özellikler şu şekilde:

  • Sunulan hizmetler (slider)
  • Testimonials/Kullanıcı yorumları (slider)
  • Portfolyo (slider)
  • Sağ alt köşede sticky(yapışkan) WhatsApp, Telefon ve e-posta gönder butonları
  • En altta footer(altbilgi) kısmında ise logo, slogan, iletişim bilgileri ve sosyal linkler yer alacak

O zaman başlayalım!

Öncelikle bir Github hesabınız olması gerekiyor. Github hesabınız olduğunu varsayıyor ve devam ediyorum…

Bu adrese giderek sağ üst köşeden “Fork” butonuna tıklayalım.

Forkladığınız anda kodların tamamını kendi Github hesabınıza almış oldunuz. Şimdi sadece size ait. İçerisinde istediğimiz gibi düzenlemeler yapabileceğiz. Kodları düzenlemek için iki seçeneğimiz var; kodları indirip düzenlemek ya da Github üzerinde düzenlemek. Ben basitçe Github üzerinde düzenleyerek devam edeceğim.

src/site.json dosyasını açalım

“Düzenle” butonuna tıklayıp dosya düzenlemeyi aktif hale getirelim.

Burada yer alan tüm bilgiler, baştan sona site içeriğini etkiliyor. Şirketiniz/sizin adınız, slogan, telefon numarası, e-posta adresi, hizmet başlıkları, kullanıcı yorumları gibi alanları bu dosya aracılığıyla düzenleyeceksiniz. Logo ve diğer resimleri nasıl değiştireceğimiz konusuna birazdan değineceğim. Bu dosyayla işimiz bittikten sonra aşağıda yer alan “Commit Changes” butonuna tıklayıp değişiklikleri kaydediyoruz.

Commit Changes

Resim ve logoları ekleme

Bu işlem de biraz önce yaptığımız JSON dosyasını düzenlemek kadar kolay. Önce yüklemek istediğiniz resimlerin boyutunu küçültün. Evet, mümkünse ~150kb boyutunu aşmamalı. Sitenin hızlı açılması açısından çok ama çok önemli. Resimleri nereye ve nasıl yükleyeceğiz?

src/assets/images/ altındaki ilgili klasörlere resimleri upload edeceğiz.

Resimleri upload ettikten sonra yukarıda yaptığımız gibi “Commit Changes” diyerek kaydediyoruz. Şimdi, src/site.json dosyasını tekrar açalım;

"hizmet": {
        "baslik": "SUNDUĞUMUZ HİZMETLER",
        "altbaslik": "İşte sunduğumuz hizmetlerden birkaçı!",
        "slidelar": [
            {
                "img": "hizmetler/cekim.webp",
                "aciklama_alanini_sakla": false,
                "title": "Fotoğraf Çekimi",
                "explanation": "İstediğiniz zaman ve yerde çekim yapalım"
            },
            {
                "img": "hizmetler/cekim2.webp",
                "aciklama_alanini_sakla": false,
                "title": "Düğün Fotoğraflama",
                "explanation": "Düğünlerinize geliyoruz..."
            }
        ]
    },

Slidelar altından bir bloğu(süslü parantezle başlayıp biten kısım) kopyalayıp virgül koyalım ve hemen altına yapıştıralım. Yüklediğimiz resmin yolunu(path) img keyi karşısına yazalım. Virgüllere dikkat edelim ve en sona eklediğimiz bloğun sonunda virgül olmamasına dikkat edelim. Maalesef JSON dosyalarının böyle katı kuralları var ve uymazsak çalışmıyor. Aynı şekilde logoyu ve diğer resimleri değiştirmek istediğimiz zaman bu JSON dosyasını açıp ilgili kısımda yolunu vermemiz yeterli.

Bir istisnai durum var: src/images/portfolio altına attığımız resimlerin yolunu yazmamıza gerek yok, çünkü onlara bir açıklama eklemiyoruz. Yani bir resmi direkt portfolio altına atarsanız kendisi çalışacaktır. Zaten siteyi kurduktan sonra büyük ihtimalle sadece portfolyo ekliyor olacağız.

Sıra geldi siteyi ayağa kaldırmaya

Statik uygulamaları ücretsiz host eden birçok site var. Buna Github’ın “Github Pages” uygulaması da dahil. Ama biz bugün Render’i kullanacağız. Şimdi işin mantığından ve ne yapacağımızdan kısaca bahsetmek istiyorum. Github’daki kodlarımızı Render üzerinde deploy edeceğiz, yani çalıştıracağız. Daha sonraları Github kodlarımız üzerinde bir değişiklik yaptığımız zaman Render 5 dakika içerisinde yeni kodları alıp deploy edecek. İşin güzel yanı bu işlemin otomatik olması 🙂 Hadi başlayalım.

Bunun için öncelikle bir Render hesabına ihtiyacımız var. Hesap açtıktan sonra Dashboard kısmından New Static Site butonuna tıklıyoruz. Burada Connect Your Github yazan butona tıklıyoruz ve Authorize Render diyerek Github hesabımızla ilişkilendiriyoruz. Daha sonra gelen Github ekranında;

Only select repositories diyerek ilgili kodlarımızı seçiyoruz ve Install butonuna tıklayarak devam ediyoruz. Bizi Render’a yönlendirecek. Gelen ekrandan New Static Site diyoruz ve biraz önce bağladığımız repository’imizi görüyoruz. Tıklayıp devam edelim.

Formu bu şekilde doldurup Create Static Site butonuna tıklayalım. Name kısmına istediğiniz adı verebilirsiniz. Buraya vereceğiniz ad subdomain olarak kullanılacak. Örneğin; “deneme” yazarsanız siteniz “deneme.onrender.com” üzerine deploy edilecektir. Bu aşamadan sonra Render, projenizi deploy etmeye başlayacak. Bir kaç dakika içinde sitenize erişebiliyor olacaksınız.

Tebrikler! Sonunda tamamen ücretsiz, sınırsız ve sizi tanıtacak bir portfolyo siteniz oldu 🙂

Dilerseniz kendi domaininizi buraya yönlendirme yaparak da kullanabilirsiniz. Daha profesyonel görünmesi açısından iyi bir seçenek olabilir. Yorum yapmayı ve arkadaşlarınızla paylaşmayı unutmayın!

Bir cevap yazın