DetayHost– Kişisel Web Sitesi / Blog Scripti
SEO Yönetimi • Profesyonel Blog Editörü • Proje Yönetimi • Admin Paneli
Kendi kişisel web sitem ve blog altyapım için geliştirdiğim sistemi Turkhacks üyeleriyle paylaşmak istedim.
Sistem özellikle kişisel marka, yazılımcı portföyü, blog ve proje tanıtımı amacıyla hazırlanmıştır.
SEO Yönetimi • Profesyonel Blog Editörü • Proje Yönetimi • Admin Paneli
Kendi kişisel web sitem ve blog altyapım için geliştirdiğim sistemi Turkhacks üyeleriyle paylaşmak istedim.
Sistem özellikle kişisel marka, yazılımcı portföyü, blog ve proje tanıtımı amacıyla hazırlanmıştır.
Demo
Site Demo:
https://blog.cox.com.tr/
Admin Paneli:
https://blog.cox.com.tr/admin/
Kullanıcı Adı:
Kod:
Şifre:
Kod:
ahmetxx123
İçeriği görüntülemek için Giriş yapın veya Kayıt olun.
Not: Demo admin bilgileri yalnızca sistemi incelemek içindir. Demo üzerinde yapılan değişiklikler zaman zaman sıfırlanabilir.
Sistem Nedir?
Bu script klasik tek sayfalık kişisel site mantığında değildir.
Kişisel web sitesi, blog sistemi, proje portföyü ve SEO yönetimini tek panel altında toplamak amacıyla geliştirdim.
Özellikle;
- Yazılımcılar
- Freelancer çalışanlar
- Girişimciler
- Kişisel marka oluşturmak isteyenler
- Blog yazmak isteyenler
- Projelerini sergilemek isteyenler
- Google üzerinde kendi ismiyle görünür olmak isteyenler
için kullanılabilecek bir altyapıdır.
SEO Sistemi
Sistemi geliştirirken en çok önem verdiğim alanlardan biri SEO oldu.
SEO ayarlarını kod içerisinden değiştirmek yerine mümkün olduğunca admin paneli üzerinden yönetilebilir hale getirdim.
Her sayfanın SEO ayarları birbirinden bağımsız olarak düzenlenebilir.
Örneğin;
- Ana Sayfa
- Hakkımda
- Projeler
- Blog
- İletişim
sayfalarının ayrı ayrı SEO bilgileri tanımlanabilir.
Admin panelinden yönetilebilen başlıca SEO alanları:
- SEO Title
- Meta Description
- Canonical URL
- Robots Ayarları
- Open Graph Başlığı
- Open Graph Açıklaması
- Open Graph Görseli
- Schema Türü
- Google Search Console doğrulama kodu
- Bing Webmaster doğrulama kodu
Bu sayede her sayfa için farklı başlık ve açıklama kullanılabiliyor.
Örneğin blog sayfası ile projeler sayfasının title ve description alanlarının aynı olması gerekmiyor.
Blog Yazılarında Özel SEO
Sadece genel site SEO ayarı bulunmuyor.
Her blog yazısının kendi SEO ayarları da mevcut.
Bir blog yazısı oluştururken;
- SEO Başlığı
- Meta Açıklaması
- Odak Anahtar Kelime
- Slug
- Robots
- Open Graph Başlığı
- Open Graph Açıklaması
- Open Graph Görseli
ayrı olarak belirlenebilir.
Ayrıca yazı ekranında temel SEO kontrolleri bulunuyor.
Başlık uzunluğu, açıklama uzunluğu, anahtar kelime kullanımı ve içerik yapısı gibi alanlar kontrol edilebiliyor.
Google arama sonuçlarında başlık ve açıklamanın yaklaşık nasıl görüneceğini görebileceğiniz bir önizleme alanı da bulunuyor.
WordPress Benzeri Blog Editörü
Blog bölümünü klasik textarea ile bırakmak istemedim.
Daha profesyonel bir içerik oluşturma deneyimi için gelişmiş bir WYSIWYG editör sistemi kullandım.
Editör içerisinde;
- Başlık stilleri
- Paragraf biçimlendirme
- Kalın / italik / altı çizili
- Metin renkleri
- Arka plan renkleri
- Madde işaretleri
- Numaralı listeler
- Alıntı
- Kod blokları
- Tablo oluşturma
- Link ekleme
- Görsel ekleme
- Medya ekleme
- HTML kaynak kodu görüntüleme
- Arama / değiştirme
- Tam ekran editör
- İçerik önizleme
gibi özellikler bulunmaktadır.
Yani basit PHP blog scriptlerindeki editörlerden ziyade WordPress tarafında kullanılan editör mantığına yakın bir kullanım hedefledim.
Otomatik Taslak Sistemi
Blog yazarken yanlışlıkla sayfayı kapatma veya yenileme durumlarında bütün yazının gitmesini istemediğim için tarayıcı tarafında taslak kayıt sistemi ekledim.
Yazı hazırlanırken içerik otomatik olarak taslak şeklinde saklanabiliyor.
Bu özellikle uzun blog yazıları hazırlarken kullanışlı oluyor.
Ücretsiz Görsel Arama
Editör tarafında içerik hazırlarken görsel bulmayı kolaylaştırmak amacıyla ücretsiz görsel arama bölümü de ekledim.
Openverse tabanlı görsel arama kullanılabiliyor.
Böylece admin panelinden çıkmadan içerikle ilgili görseller aranabiliyor.
Önemli:
Her görselin lisans koşulları aynı olmayabileceği için kullanılacak görselin lisans bilgisinin kullanıcı tarafından kontrol edilmesi gerekir.
Proje Yönetimi
Kişisel portföy sitesi olduğu için projeler için ayrı bir sistem bulunuyor.
Projelerinizi admin panelinden ekleyebilirsiniz.
Projeler;
- Proje adı
- Açıklama
- Proje görselleri
- Proje türü
- Proje bağlantıları
- SEO bilgileri
ile yayınlanabilir.
Bu alan özellikle GitHub projeleri, açık kaynak projeler, müşteriye özel geliştirilen sistemler veya kişisel çalışmalar için kullanılabilir.
Profil ve Banner Yönetimi
Ana sayfadaki profil fotoğrafı ve büyük hero/banner görselini dosya içerisinden manuel değiştirmek gerekmiyor.
Admin panelinden;
- Profil Fotoğrafı
- Ana Sayfa Banner Görseli
yüklenebilir ve daha sonra değiştirilebilir.
JPG, PNG ve WEBP görseller kullanılabilir.
SEO Dostu URL Yapısı
Sistemde URL yapısını mümkün olduğunca temiz tutmaya çalıştım.
Örnek:
Kod:
/hakkimda
/projeler
/blog
/iletisim
/blog/ornek-yazi
/projeler/ornek-projeşeklinde kullanılabilir.
PHP dosya isimlerinin URL içerisinde görünmemesi amaçlanmıştır.
Örneğin;
Kod:
blog.php?id=25yerine;
Kod:
/blog/yazi-basligimantığı kullanılmaktadır.
Bu hem kullanıcı açısından daha temiz hem de SEO açısından daha doğru bir yapı sağlar.
Domain / Subdomain Desteği
Kurulum sistemini sadece ana domaine bağımlı yapmadım.
Aynı script;
Kod:
siteadi.comüzerinde çalışabileceği gibi;
Kod:
blog.siteadi.comgibi bir subdomain üzerinde de kurulabilir.
Kurulum sırasında bulunduğu domain yapısı otomatik algılanır.
Yani scripti başka bir domaine taşıdığınızda bütün URL'leri tek tek değiştirmek zorunda kalmamanız amaçlandı.
Admin Paneli
Admin panelinden temel olarak;
- Blog yazıları
- Projeler
- Site ayarları
- SEO ayarları
- Sayfa SEO ayarları
- Profil görseli
- Banner görseli
- Blog SEO ayarları
- Site doğrulama kodları
yönetilebilmektedir.
Yani mümkün olduğunca dosyalara girip PHP kodu değiştirmeden sitenin yönetilebilmesini hedefledim.
Kurulum
Kurulum oldukça basittir.
1. ZIP içerisindeki dosyaları hosting hesabınıza yükleyin.
2. Dosyaları sitenizin veya subdomaininizin Document Root klasörüne çıkartın.
Ana domain kullanıyorsanız genellikle;
Kod:
public_html/Subdomain kullanıyorsanız hosting panelinizde subdomain için tanımlanan Document Root klasörünü kullanmanız gerekir.
3. Tarayıcıdan;
Kod:
siteadresiniz.com/install.phpadresine giriş yapın.
4. Veritabanı bilgilerinizi girin.
Genel olarak gerekli bilgiler;
- MySQL Sunucusu
- Veritabanı Adı
- Veritabanı Kullanıcısı
- Veritabanı Şifresi
- Admin E-Posta
- Admin Şifresi
şeklindedir.
5. Kurulum tamamlandıktan sonra admin paneline giriş yapabilirsiniz.
.htaccess Hakkında
Temiz URL sisteminin çalışabilmesi için .htaccess dosyasının sunucuya yüklendiğinden emin olun.
cPanel kullanıyorsanız Dosya Yöneticisi içerisinden;
Ayarlar → Gizli Dosyaları Göster (dotfiles)
seçeneğini aktif edebilirsiniz.
Çünkü .htaccess nokta ile başladığı için bazı hosting panellerinde varsayılan olarak gizli görünür.
Apache veya LiteSpeed kullanan standart hostinglerin büyük bölümünde çalışması amaçlanmıştır.
Sunucu Gereksinimleri
Genel olarak standart PHP/MySQL hosting yeterlidir.
Önerilen;
- PHP 8.x
- MySQL / MariaDB
- PDO MySQL
- Apache veya LiteSpeed
- mod_rewrite
- Dosya yükleme izni
Tasarım Mantığı
Tasarım tarafında özellikle hazır yapay zeka landing page görüntüsünden uzak durmaya çalıştım.
Klasik;
“3 tane gradient kutu + devasa slogan + gereksiz animasyon”
mantığında bir site yapmak yerine kişisel CV / portföy sitesi gibi görünmesine önem verdim.
Sol tarafta sabit profil ve navigasyon alanı, sağ tarafta ise içerik yapısı bulunmaktadır.
Mobil cihazlarda da responsive çalışacak şekilde düzenlenmiştir.
Kimler Kullanabilir?
- Yazılımcılar
- Grafikerler
- SEO uzmanları
- Freelancerlar
- Öğretmenler
- Girişimciler
- Ajans sahipleri
- Kişisel marka oluşturmak isteyenler
- Portföy sitesi isteyenler
kendi bilgilerine göre düzenleyerek kullanabilir.
Demo Site
https://blog.cox.com.tr/
Admin Demo
https://blog.cox.com.tr/admin/
Kullanıcı: [email protected]
Şifre: ahmetxx123
Scripti öncelikle kendi kişisel kullanımım için geliştirdim.
Eksik veya geliştirilebilecek gördüğünüz alanlar varsa konu altında yazabilirsiniz.
Geliştirme / Düzenleme: DetayHost
Turkhacks üyelerine iyi kullanımlar.
