DESIGN | DEVELOPMENT

Halbuki içeriğinizi yazarken dikkat etmeniz ve göz önünde bulundurmanız gereken bazı pratikler vardır ki geri dönüşlerini nispeten daha hızlı alırsınız.

Bu yazıda belirttiğim başlangıç seviyesi bilgilerle Google'da üst sıralara çıkmak artık daha kolay olacaktır.

Genel Bakış ve Metodoloji

Nihai olarak tüm bu karmaşık modellemeler ve algoritmalar talep edenin, yani aramayı yapanın, ne ölçüde ve-de nerede aramasına cevap bulduğuyla ilgilidir.

O halde Google sıralamanızı etkileyecek başat etkenin içeriğin kendisi olduğunu unutmayalım. Eğer içeriğiniz iyiyse günün sonunda kazanan taraftasınızdır.

İyi bir içerik nasıl yazılır bu konunun kapsamı dahilinde değildir. Bu yazının içeriği daha çok güvenilir kaynaklardan elde ettiğimiz bilgilerdir.

Kimdir bu kaynaklar: Google çalışanlarından gelen veya resmi olarak duyurulanlar.Bunun haricinde bağımsız olarak bir çok kişi ve kuruluş Google sıralamalarını kapsamlı şekilde inceleyerek bilgiler paylaşmaktadır. Bunlar da değerli ve önemli bilgilerdir. Yer yer bu kaynaklardan da paylaşımlar olacaktır.

Makalenin son kısmı olan referanslar bölümünden ilgili kaynaklara ulaşabilirsiniz. Dilerim ki burada bahsedeceğim bilgi ve pratikler yeni başlayan sizler için Google'da üst sıralara çıkma konusunda yardımcı olur.

Google Sıralamanıza Olumlu Etki Sağlaycak Sayfa-İçi Faktörler Nelerdir?

1 - Alan Adında Anahtar Kelime Kullanımı

A - Tam Örtüşme

Eğer anahtar kelimeniz alan adıyla "tam olarak" örtüşüyorsa ve de yapılan arama Google tarafından "Ticari sorgu" statüsünde tanımlanan bir aramaysa güçlü bir sıralama bonusu almanız kaçınılmaz. Bu uygulama markaların kendi marka değerlerini ön plana çıkartmaları için yapılan bir uygulamaydı, ancak sıkça suistimal edildiğinden bunun ağırlığının ciddi şekilde azaldığından bahsedebiliriz. ^[1] ^[2]

B - Kısmi Örtüşme

Hedef kelime veya söz öbeği alan adında geçtiği durum için de sıralama bonusu kazanırsınız.

Bu tam olarak örtüşme durumundan ciddi şekilde daha az etki etmesine karşın, URL'nin son kısımlarında kullanımından da fazla etkiye sahiptir. ^[1]

2 - URL'de Anahtar Kelime Kullanımı

Anahtar kelimenizi URL içerisinde geçirmek o sayfanın ve anahtar kelimenin ilişkisi açısından önemli bir gösterendir. ^[3]

Doğru URL yapısı için doğru hiyerarşik yapı kurulmalıdır. Bunun için de anahtar kelimelerimizi ve ürün/hizmetlerizi önceden doğru şekilde kategorize etmeliyiz.

Aşağıdaki örnekler URL hiyerarşi ve anahtar kelimeler arasındaki bağlantıyı göstermektedir.

Ek olarak anahtar kelimemizi URL'nin başlangıç tarafında kullandığımız takdirde bunun pozitif etki yaratma ihtimali de muhtemel. ^[4]

3 - Title Etiketinde Anahtar Kelime Kullanımı

Cihazın pixel sayısına göre Google sıralamasında gözükecek karakter sayısı sınırı söz konusu.

Yaklaşık 50-60 karaktere denk geliyor bu sınır.

Bu sınırı geçmemek lazım. Resmi olarak belirtilmese de anahtar kelime öbeğini başlangıçta kullanmanın bu etkiyi arttıracağından bahsediliyor.

Kesin olarak bildiğimiz şey ise title veya meta title etiketinde anahtar kelime kullanmanın sıralamaya etkisi olduğu. ^[5]

4 - Başlıklarda Anahtar Kelime Kullanımı

Başlık etiketleri olan H1, H2, H3 .... H6'yı yalnızca font büyüklüğü açısından kullanmak ciddi bir eksikliktir. Başlıklar yazının içeriğinin hiyerarşik yapısını da anlatır.

Ayrıca bazı screen readerlar sayfanın sadece belirli başlıklarını tararlar.

Bu da bazı kullanıcıların sayfanızdan kaçmasına sebep olup kaçış oranını (Bounce Rate) yükseltebilir.

Başlıklarda anahtar kelime öbeklerini kullanmak büyük ölçüde bir etki yaratıyor.

Başlığın semantik değeri düştükçe bu etkinin ağırlığı da düşüyor diyebiliriz.

Bu durumda en büyük etkiyi H1 etiketli başlık yaparken, en az etkiyi de H6 etiketli başlık yapacaktır. ^[6]

5 - Biçimlendirilmiş Yazıların Etkisi

Bold, italik, altı çizili veya büyük fontlarla biçimlendirilmiş yazıların ağırlığı da düz yazıya göre daha fazla. Ancak bu ağırlık başlıklar kadar da fazla değil. ^[7] ^[8]

6 - İçeriğin Yeni veya Eski oluşu

Google arama sonuçlarını verirken içeriğin yeni veya eski oluşu yapılan sorguya göre değişmektedir.
Önce eski içerikten başlayalım: Google'ın patentinde belirttiği üzere bazı dokümanların daha eski oluşu, yenisine göre bir tercih sebebi olabilir.

Bu sadece eski dokümanın yalnızca eski olmasından ötürü kazanabileceği bir etkiden bahsediyoruz. ^[9]
Yeni içerikte ise şöyle bir kullanım var: "fresh content when query deserves freshness".

Taze içerik gerektiren sorgularda yeni içerik önem kazanıyor. Haber değeri taşıyan konular bunlardan biridir diyebiliriz.

7 - Fotoğrafların ALT Özelliğinde Anahtar Kelime Kullanımı

Fotoğraflarda ALT özelliği ekran okuyucusu kullananlar ve fotoğrafın gösterilemediği durumlar için kullanılan bir özellik.

SEO açısından ise arama motoruna bu fotoğrafın ne anlama geldiğini söyler ve fotoğraf aramaları için alaka kurulmasına sebep olur.

Açık olmakta fayda var, ALT etiketlerini boş bırakmak veya göz ardı etmek bir eksikliktir diyebiliriz.

Google Sıralamanızı Olumsuz Etkileyebilecek Durumlar

1 - Kırık Site içi Linkler

Kırık site içi linkler hem Googlebot'un hem de kullanıcıların dolaşımını engellediğinden internet kullanımını sekteye uğratan bir durumdur. Genel olarak düşük kaliteli sitelerde sıkça görülür. Sitenizi düzenli aralıklarla tarayıp kırık linkleri düzeltmek önemlidir.

2 - Kopya İçerik

Açık konuşalım, Google özgün değer taşıyan içeriği seviyor. İyi ki de seviyor ve insanlar bu durum sayesinde fazla sayıda kaynağa erişme imkanına sahip oluyor.

Eğer sitenizde kopyalanmış içerikten bahsediyorsak bunun olumsuz ve ciddi etkisi olacağından şüphe etmeyin. Kopyalanmış içerik herhangi bir telif sorunu yaratmasa dahi Google sıralamanızı olumsuz etkileyecek bir davranıştır. (canonical URL'in belirtildiği durumlar hariç)

Yazıyla ilgili sorularınızı çekinmeden sorabilirsiniz. Ayrıca kendimizi daha ileriye taşımak adına geri dönüş ve eleştirilerinize talibiz.

Anlatım, biçim, üslup, içerik vb. gibi konulardaki tüm dönüşleriniz beni mutlu edecektir.

Referanslar:

Patent EP 1661018 A2: Internet domain keyword optimization.
US 8046350 B1: Systems and methods for detecting commercial queries.
US8489560 B1:System and method for facilitating the management of keyword/universal resource locator (URL) data.
Matt Cutts: INTERVIEW WITH GOOGLE’S MATT CUTTS AT PUBCON.
US 20070022110 A1: Method for processing information, apparatus therefor and program therefor.
PennState Accessibility.
Matt Cutts: Is there a difference between the "strong" and "b" tags in terms of SEO?
Patent US 8818982 B1: Deriving and using document and site quality signals from search query streams.
Patent US 8549014 B2: Document scoring based on document content update.
Matt Cutts: Matt Cutts discusses the alt attribute.
Google’s Quality Rating Guide Leaked Again; Here Is Version Five.
Methods and Apparatus for Assessing Web Page Decay.
Google Resmi - Aramanızı eşleştirme

Son

Ücretsiz Ghost Blog Açma Rehberi [2020]

Can Burak Sofyalioglu — Sun, 02 Aug 2020 19:09:27 GMT

Bu yazıda Google Cloud Platofrm hesabı kullanarak ücretsiz olarak Ghost blog nasıl açılır onu yazacağım. Google'ın yeni kullanıcılara verdiği 300$'lık Cloud kredisini kullanarak bir seneye yakın ücret ödemeden Ghost blog kullanmaya başlayacağız.

Google'ın bu 300$'lık kredisini kullanmak için daha önceden Google Cloud Platform (GCP) üyeliği açılmamış bir Gmail hesabına ihtiyacımız var.

Eğer bugüne kadar GCP kullanmadıysanız halihazırdaki hesabınızla devam edebilirsiniz. Aksi takdirde yeni bir Google hesabı açmanız gerekecek.

Ghost blogunuzu 3 aşamada aktif ve çalışır hale getireceğiz.

3 Adımda Ghost Blog Kurulumu

1 - Google Cloud Hesabı ile Bitnami Ghost Paketini Yüklemek

1) Şu linkteki sağ tarafta bulunan "Get started for free" butonuna tıklayarak Google Cloud Platformu için bir hesap oluşturmanız gerekli.

Buradaki işlemler sıradan kayıt işlemleri olduğu için detayına girmiyorum.

Üyeliğinizi tamamlamadan bir sonraki adıma geçmeyin lütfen.

2) Üyeliğinizi tamamladınız ve artık Home ekranındasınız. Sol taraftaki hamburger menü butonuna (3'lü yatay çizgi) tıklayarak GCP menüsünü açın ve Marketplace menüsüne tıklayın.

3) Burada GCP altyapısını kullanarak size hizmet verebilen platform ve uygulamaların listesiyle karşılaşacaksınız. Yukarıdaki arama kutucuğuna Ghost yazın ve Ghost Certified by Bitnami seçeneğini seçin.

4) Açılan ekranda Bitnami'nin GCP için hazırladığı ve entegre edilmiş uygulamalar yığını hakkında bilgiler göreceksiniz.

Aylık yaklaşık olarak 15$' a karşılık gelen bir maliyet ile Ghost bloğumuzu açacağız. Bu maliyetin ilk senesi bize Google tarafından hediye edilmiş olacak.

Açılan ekrandaki "Launch" butonuna tıklayarak yükleme işlemini başlatın. Bu işlem (deployment) bir kaç dakika sürebilir.

5) Yükleme işlemi bittikten sonra karşınıza şuna benzer bir ekran gelmesi lazım. Sağ tarafta Ghost bloğunuzun IP adreslerini ve ilk giriş için kullanacağınız kullanıcı adı ve parolasını bulacaksınız.

6) IP Adresleri arasından Admin URL'e tıklayın. Ardından açılan üye giriş paneline ise Admin user ve Admin password bilgilerinizi girin. Artık Ghost bloğunuzu aktif etmiş bulunmaktasınız. Admin şifresini ve bilgilerini değiştirmeyi de unutmayın.

Ardından ister bir önceki ekranda bulunan Site address'e isterseniz de yeni açılan Ghost admin panelinin sol üstünde bulunan "View Site" butonuna tıklayarak Ghost bloğunuzun ana sayfasını görebilirsiniz.

Bloğumuz aktif oldu ve çalışıyor. Şu an için sadece belirtilen IP adresinden erişim sağlanabiliyor. Bir sonraki bölümde kendi alan adımızı nasıl bu belirtilen IP adresine yönlendireceğimizi anlatacağım.

Ghost admin paneli giriş

Ghost blog başarıyla kuruldu.

2 - Özel Alan Adınızı (Domain'inizi) GCP'ye Yönlendirme

1) Tekrardan GCP ana sayfanıza dönün ve sol üstteki menüleri seçeceğimiz ekranı açan hamburger butonuna tıklayınız.

Açılan menülerden sırasıyla NETWORKING —> VPC network —> External IP addresses 'i takip ederek External IP addresses'a tıklayın.

2) Açılan ekranda "RESERVE STATIC ADDRESS" seçeneğini tıklayarak Google'dan bize statik bir IP adresi tahsis etmesini isteyeceğiz. Statik IP adresimize bir isim verip daha önceden yüklemesini yaptığımız Ghost için ayrılan kaynağa atama (attached to ...) yapacağız.

Böylelikle Ghost bloğumuzun IP adresi sabit kalmış olacağından özel alan adımızı bu IP adresine rahatlıkla yönlendirebileceğiz.

Bu işlemi bitirdikten sonra statik IP adresimizi bir yere not edelim ya da yazılı olduğu ekranı kapatmayalım. Bir sonraki adımda bu statik IP adresini kullanacağız.

3) Alan adımızı satın aldığımız firmanın sitesine gidip alan adımızın DNS ayarlarını yönetebileceğimiz sayfayı seçelim.

Eğer alan adınızı GoDaddy'den almışsanız GoDaddy'e gidin lütfen. Ben alan adımı Wix üzerinden almıştım o yüzden Wix üzerinden bir gösterim yapacağım.

Daha önce bu alan adımı Wix üzerinden kullanıyordum. Wix apex-domain ile alan adını kullanmaya izin vermediği için, yani yalnızca www ile başlayan şekilde kullanıma izin verdiği için yönlendirmesini yapacağım ana alan adım da www ile başlayan alan adım olacak.

Yani bu işlemin ardından www.canburaks.com alan adını Ghost bloğun olduğu IP adresine yönlendireceğim. (Diğer seçenek ise başında www olmayan seçenek)

Aşağıda görüleceği üzere, alan adı sağlayıcınızın DNS ayarları kısmına gidip bir A Kaydı ve bir CNAME kaydı oluşturmanız gerekecek.

A kaydınızın Host kısmı apex domaininiz olacak şekilde (yani canburaks.com ya da izin vermiyorsa @.canburaks.com ya da @canburaks.com gibi seçenekleri deneyebilirsiniz) girin. Değer (Value) kısmına da bir önceki adımda kaydettiğimiz statik IP adresini girmelisiniz.

CNAME kaydınızın Host kısmını www ile başlayan alan adınız, Değer kısmını da www'suz alan adınız olacak şekilde girin ve ayarlarınızı kaydedin. DNS ayarlarınızın yayılması 48 saati bulabilir dense de yarım saate hızlı bir şekilde yayılması muhtemel.

Sadece başka bir browser ile denemenizi ya da ön belleği boşalttıktan sonra tekrar kontrol etmenizi tavsiye edebilirim.

Bir sonraki adıma geçmek için DNS yayılmasını beklememize gerek yok. Şimdi gerekli bir kaç ayarı yapıp ayrıca HTTPS bağlatısını zorunlu kılacağız ki bloğumuz her daim güvenli bir bağlantı üzerinden çalışsın.

3 - Ghost Blog ve Gelişmiş Ayarlar

1) Tekrar GCP ana sayfamıza dönelim. Sol tarafta Resources (Kaynaklar) başlığı altındaki Compute Engine seçeneğine tıklayın. Daha sonra açılan sayfadaki ghost-bloğun olduğu makineyi seçin.

2) Yeni açılan sayfadaki SSH butonu olması lazım. Bu buton bize Ghost blogun yüklü olduğu ve onu çalıştıran makineye uzaktan bağlanabilmemizi sağlayacak buton. SSH tuşuna basın ve yeni açılacak pencerenin yüklenmesini bekleyin.

Şekildeki ekranla karşılaştığınızda Ghost'un olduğu bilgisayara uzaktan erişim sağlamış bulunmaktasınız demektir.

Sonraki adımlarda bu kabuk (shell) üzerinden işleteceğimiz bir kaç komut olacak.

3) Bu adımda alan adımızı Ghost'a tanıtacağız. Daha önceden www ile başlayan alan adımı kullanacağımı belirtmiştim. SSH ile bağlandığımız ekranda aşağıdaki komutu ve kullanmak istediğiniz alan adını giriniz.

sudo /opt/bitnami/apps/ghost/bnconfig --machine_hostname www.cbsofyalioglu.com

4) Daha sonra bu ayar ekranını bir başka isim altında kaydedeceğiz ki, yeniden başlatıldığında ayarlarımız değişmesin.

sudo mv /opt/bitnami/apps/ghost/bnconfig /opt/bitnami/apps/ghost/bnconfig.back

5) Aşağıdaki komutu girdikten sonra açılan ekrandaki "url" kısmının karşısındaki adreste bazı değişiklikler yapacağız. Öncelikle http olan adresi https yapacağız ki güvenli bağlantı üzerinden blogumuzu işletelim. Ardından da gene adres kısmında olan 80'i kaldıracağız.

Daha sonra CTRL+X'e basarak ardından da Y'ye basarak değişiklikleri kaydedin.

Son "url" değerinin aşağıdaki fotoğraftaki gibi olmasına dikkat ediniz.

sudo nano /opt/bitnami/apps/ghost/htdocs/config.production.json

6) Tekrardan SSH ile bağlantı ekranına döndüğümüze göre, şimdi otomatik olarak yüklü gelen Bitnami bannerını kaldıracağız. Aşağıdaki komutları sırasıyla girip Bitnami bannerını kaldırın.

sudo /opt/bitnami/bnhelper-tool

Daha sonra →Remove the Bitnami Banner'ı seçip enter →Daha sonra ESC ve QUIT + ENTER

7) Şimdi ise Bitnami tarafından diğer alan adı ayarlarının yapımını sağlayacağız. Aşağıdaki komutu girdikten sonra Set up Let's Encrypt seçeneğini seçin ve karşınıza çıkan sorulara cevap vererek SSL sertifikanızı onaylatın. Bu adımların sırasında hangi alan adını hangi şekliyle kullanacağınız da dahil olmak üzere önemli seçenekleri dolduracaksınız. Tüm bunları tamamlayın.

8) Tüm bu işlemleri yaptıktan sonra aşağıdaki komut ile Apache serverınızı, MySQL veritabanınızı ve Ghost blogunuzu yeniden başlatacaksınız.

sudo /opt/bitnami/ctlscript.sh restart

9) Blogunuz artık kullanıma hazır. Son bir meta etiketi eklemesi yapılmasını gerekli görüyorum. Bu meta etiketi http bağlantıları https'e zorunlu olarak yükseltmeye yarayacak. Ghost admin panelinizi açın ve sol alt taraftaki Code Injection kısmına tıklayın.

Site Header kısmına şu aşağıdaki kodu ekleyin:

Bir sene boyunca ücret ödemeden kullanabileceğiniz Ghost blogunuz artık hazır. Güle güle kullanmanızı dilerim.

Blog Açmak İsteyenlere Öneriler: En İyi Blog Siteleri

Can Burak Sofyalioglu — Thu, 23 Jul 2020 05:40:16 GMT

Günlük tutmak, kişisel fikirlerimizi ve kültürel birikimimizi paylaşmak, yazma yeteneğimizi geliştirmek, ürün veya hizmetlerimizi satmak gibi bir çok sebeple her gün sayısız blog yazısı yazılıyor. Siz de ister işletmeniz ister kendiniz için bir tane blog oluşturma fikrine sahipseniz bu yazı size göre.

Yazının başında blog açmak isteyenlere öneriler ve dikkat edilmesi gereken konu başlıklarına dikkat çekeceğim. Devamında ise en iyi blog siteleri ve platformlarının detaylı incelemesini bulacaksınız.

Ayrıca fotoğraf ve illüstrasyon sanatçıları için ayrıca listeye alınan ve dijital ürünlerini satabilecekleri ve foto-blog'larını oluşturabilecekleri bir kaç platform da mevcut.

Ne Tür Blog Platformları İncelenecek?

Blog oluşturmak için aslında elimizde yüzlerce site var. Bunların bir kısmının tasarımları 90'ları hatırlatırken bir kısmı da güncel tasarım trendlerini takip eder nitelikte. Bu yazıya popüler blog oluşturma platformlarından, az bilinen mikro blog sitelerinden, ve ücretsiz blog sitelerinden bahsedeceğim.

Ayrıca belirtmekte fayda var API üzerinden erişebileceğiniz CMS servisleri bu yazının konusu değildir.

“There is no rule on how to write. Sometimes it comes easily and perfectly: sometimes it’s like drilling rock and then blasting it out with charges.” ~ Ernest Hemingway

Blog Açmak İsteyenlere Öneriler

Blog Yazmanın Faydaları Nelerdir?

En başta kendi alanınızdaki bilginizi gösterebileceğiniz bir alan olduğundan internet üzerindeki otoritenizi inşa etmenize yarayacaktır.
İyi planlanmış ve arama motoru optimizasyonu yapılmış iyi bir blog yazısı web sitenize trafik çekecek ve sitenizin otoritesini (SEO bağlamında) arttıracaktır.
Ayrıca artan trafiğinizi potansiyel müşterilerinize dönüştürme şansınızı arttıracaktır. Örneğin: HubSpot'un araştırmasına göre pazarlamacıların % 60'ı en yüksek kaliteli potansiyel satış kaynağı olarak Inbound Marketing'i (SEO ve blog içeriği vb.) gösteriyor. (1)

İyi Bir Blog Sitesinde Aranması Gerekenler

Bir blog oluşturma sitesini incelerken dikkat edilecek bazı hususlar var. Genel hatlarıyla değinelim.

A) Estetik Unsurlar: Kişiselleştirebilme ve Hazır Şablonların Çeşitliliği

Size sunacağı görsel özelleştirme imkanları en önemli başlıklardan biri. Kabul edelim, estetik bir web sitesi içeriğin okunmasına ciddi katkı sağlıyor. Tam tersi de geçerli: kötü tasarlanmış bir blog içeriği ne kadar iyi olursa olsun daha az okunacaktır.

Burada sadece renklerin ve fotoğrafların bir aradalığı ile ortaya çıkan şeyden bahsetmiyorum. Sitenin işleyişi hakkında ne ölçüde söz alabildiğimizden de bahsediyorum aynı zamanda.

Kişiselleştirebilme esnekliği: Hazır tasarımların genel internet alışkanlıklarımıza ne kadar uyum sağlayabildiği, sıfırdan bir tasarım yapmanıza izin verip vermemesi önemli bir estetik özellik olarak değer platforma değer katacaktır.
Hazır şablonların sayısı: Sıfırdan bir tasarım yapmaktansa, hazır olanı değiştirmek hem daha kolaydır, hem de ne istediğinizi bilmediğiniz durumlarda çok işlevseldir.
Şablonların ücreti: İncelemede göreceğiniz üzere kimi platformlar sizlere şablonlarını ücretsiz olarak sunuyorlar. Shopify ve WebFlow gibi kimi platformlar da kullanıcılarının tasarladığı şablonları diğer kullanıcılara ücretli olarak satma yöntemini seçiyor. Satış geliri de platform ve tasarımcı arasında pay ediliyor.

Eğer kafanızda görsel açıdan zengin bir blog oluşturmak varsa, mesela bir foto-blog veya işlerinizi de koyabileceğiniz bir portfolyo sitesi ise aklınızdaki, bahsettiğim görsel özelleştirmeler daha da önem kazanacaktır.

B) SEO Araçları

Her gün milyonlarca blog yazısı yayımlanıyor. Bu kadar yazı arasında eğer ki niyetimiz içeriğimizin okunması ve daha fazla kişiye ulaşması ise başta SEO araçları olmak üzere makalelerimizi dolaşıma sokacak sosyal medya entegrasyonları ve webhook'lar önem kazanacaklardır.

Bir blog sitesinden SEO bağlamında beklenilen bazı özellikler var. Otomatik olarak size anahtar kelimenizi sorup ona göre bir plan hazırlarsa ne ala. (ileride bu uygulamayı yapan siteden bahsedeceğim).

Ancak biz gene de beklentimizi düşük tutarak anahtar kelime ve blog yazısına göre optimizasyonu kendimiz yapacağız. Bunlara ek olarak:

OpenGraph ve TwitterCard meta etiketlerini otomatik eklemesi ve değiştirmeye izin vermesi.
Özel meta etiketleri eklenmesine izin verip vermemesi. Örneğin bazı sayfalarınızın Google tarafından indekslenmesini istemiyor olabilirsiniz. Bu durumda robots meta etiketi kullanmanız gerekebilir.
Schema.org Google, Microsoft, Yahoo ve Yandex tarafından kurulmuş olan ve açık bir topluluk tarafından geliştirilen bir oluşumdur. Arama motorlarının içeriğinizi doğru şekilde anlayabilmesi için gerekli olan "yapılandırılmış (structured) data" üzerine çalışır. Blog platfomumuzun Schema.org uyumlu zengin data formatlarını destekleyip desteklemediğine bakılmalıdır. (JSON-LD veya RDF formatlarından herhangi biri)
Platformun AMP formatını desteklemesi: AMP, Google'ın çıkardığı bir kütüphanedir. Çok fazla kısıtlamalara sahip bu HTML kütüphanesi mobil cihazlarda çok hızlı yüklenme vaad ediyor. Google'ın da uzun süredir web sitelerinin hızlarının sıralamaya olan etkisindeki ağırlığını arttırdığını biliyoruz. AMP kullanmak başlı başına sıralamaya etki etmese de dolaylı olarak etki ettiği çok açık. Bu yüzden AMP desteği de önemli bir faktör.

Ek olarak blog yazınızı yazarken dikkat edebileceğiniz bir diğer blog yazım Giriş Seviyesinde Sayfa-içi SEO İyileştirmelerine göz atabilirsiniz.

C) İçerik Editörü ve İnteraktif Araçlar

Benim en çok sorun yaşadığım alanlardan birisi içerik editörü. Sadece bunun için çok defa platform değiştirdim.

Yazılarımızı yazarken sürekli olarak bu editörde çalışacağımız için editörümüzün yetenekleri bir çok şeyi etkileyecektir.

Bir blog oluşturma platformundaki içerik editöründe şu özellikler aranabilir:

Ghost Blog Editörü

Markdown formatında yazı yazmak isteyenler için Markdown desteği
Otomatik kaydetme özelliğinin olup olmaması (Bir çoğunda mevcut)
HTML Kodu ekleyebilme
Dış sitelere link verirken 'rel="nofollow"' etiketine izin vermesi. (2)
Önceden tanımlanmış HTML elemanları olan widget'lar örneğin hem yazma hızımıza katkı sağlayacak hem de görsel açıdan içeriğimizi zenginleştirecektir. Örneğin: tablo oluşuturucu, carousel, veya linkler için önizlenimli gösterim.

D) Pazarlama Araçları

Bizim bloğumuzun öylece birileri tarafından keşdfedilmesini beklemek çok gerçekçi olmayacaktır. Haliyle seçeceğimiz platformun bize pazarlama açısından ne gibi araçlar sunduğu da önemli olacaktır.

Blogunuzun gerçek takipçisini, yeni yazılarınızdan haberdar olmak isteyen ve eposta bülteninize abone olan kişi sayısından kabaca anlayabilirsiniz.

Evet, eposta ile pazarlama hala dijital pazarlama açısından önemli bir yer teşkil ediyor ve mail listenizin çokluğu pazarlama gücünüz açısından önemli bir indikatör.

En azından şu hizmetlere bakabiliriz:

Dahili analitik uygulaması
Üçüncü taraf entegrasyonlarının çeşitliliği.(MailChimp, HotJar gibi)
Üye kaydı yapabilmesi (Haberdar olmak isteyenler ve eposta bülteni için)
Epost bülteni tasarımı ve gönderilmesi.
Aylık eposta gönderim limitleri.

En İyi Blog Siteleri

1) Ghost

Ghost: Turn your audience into a business

The world’s most popular modern publishing platform for creating a new media platform. Used by Apple, SkyNews, Buffer, OpenAI, and thousands more.

Albert Henk van Urkalberthenk.comGhost

Yazılımcıları gözdesi olan Ghost platformu hem açık kaynak bir program hem de bir vakıf tarafından yönetiliyor. GitHub'daki yıldızlarından ne kadar popüler olduğunu görebilirsiniz.

Yazarlar ve yazılımcılar arasında çok popüler olan bu platformun en göze çarpan özelliği içerik editörü. Bir çok platform için hazır embed tuşuna sahip bu editör ayrıca markdown formatında da çalışabiliyor.

Tüm bunlar arasında benim favorim ise bookmark aracına sahip olması. İstediğiniz takdirde linklerinizi ön gösterimli olarak da paylaşabiliyorsunuz.

Ghost Editör: Öngösterimli Linkler (Bookmark Card)

Çok çeşitli üçüncü taraf entegrasyonları ile blogunuzun kapasitesini fazlaca genişletebiliyorsunuz.

Eğer programlamaya uzak biriyseniz özelleştirme imkanlarını kısıtlı bulacaksınız. Bu durumda hazır temalara güvenebilirsiniz. İnternette 40 - 50 kadar ücretsiz Ghost teması mevcut. Premium temalar ise 49$ - 89$ arasında değişiyor.

Gelelim fiyat kısmına: Ghost' blog kullanmanın maliyeti 29$, tabi eğer Ghost.org'da barındırırsanız. Ancak açık kaynak olmasından dolayı blogunuzu alıp istediğiniz gibi özelleştirebiliyorsunuz ve istediğiniz yerde host edebilirsiniz. Daha ucuz alternatifler bulmak pek ala mümkün. Ayrıca biraz uğraşmayı göze alırsanız, Google Cloud Platform üzerinde ücretsiz olarak Ghost blog açmak isimli yazıma bakabilirsiniz.

2) SquareSpace

Link:SquareSpace

New York merkezli Square Space'in yazlnızca en iyi blog oluşturma sitelerinden değil aynı zamanda en iyi web sitesi açma platformlarından biri olduğunu rahatça söyleyebiliriz.

Daha önce Keanu Reeves'i reklamlarında oynatmışlardı. Onu da burada paylaşmak istedim, sonuçta blog benim.

Keanu Reeves'li SquareSpace Reklamı

En iyi blog siteleri arasında her zaman olan SquareSpace genel olarak hemen hemen her başlık altında iyi diyebileceğimiz bir performans gösteriyor.

Tüm diğer özellikleri bir yana, bu listedeki en ileri seviye içerik editörüne sahip.

İnteraktif içeriğin git gide önem kazandığını biliyoruz.

Blog yazısına carousel galeriler, grid bölmeler, data tabloları ve takvim gibi bir çok eleman ekleyebilmenin yazılarımıza katacağı zenginliği önemsiyorum.

Genel olarak bu tip blog açma sitelerinde kullanıcıya ücretsiz bir plan da sunulur. Yalnızca alt alan adı kullanımı (isminiz.squarespace.com gibi) veya reklam içerir.

Bu platformun dezavatajlarından biri de ücretsiz planın olmaması ve yalnızca 14 günlük bir deneme sürümüne izin vermesi.

14 günlük deneme sürüm sonrası en az $12'lık bir paket ile blogunuza veya web sitenize devam edebiliyorsunuz.

Belirtmekte fayda var arada sırada web sitesinde sayfaların yüklenmemesi gibi durumlarla karşılaşıyorum, belki de kişiseldir.

Ayrıca tasarım konusunda yalnızca size sunulan şablonları özelleştirmekle yetinebilirsiniz.

Toplam 70'den fazla hazır web sitesi şablonuna sahip yeterli gibi gözüküyor ancak gene de daha fazla olabilirdi.

3) HashNode

Hashnode: A one-stop platform to start blogging as a developer.

Blogging as a developer, done right! Hashnode is a one-stop platform to start blogging as a developer on your own domain for free and still benefit from the community in terms of discoverability.

CommunityExploreDiscussSearchSee more blogsDevblog: How to Launch Your Own Developer Blog on Your Own Domain in MinutesStart a blog for FREE 🎉Sign upLoginAboutCareersLogosPrivacyTerms

Özel alan adınızı da kullanabileceğiniz en iyi ücretsiz blog açma sitesi HashNode olabilir.

HashNode aslında yazılımcıların yazıların paylaştığı ve birbirini takip ettiği mecralardan biri.

Görsel olarak çok fazla özelleştirme imkanı vermese de ücretsiz sunduğu özellikler ile bu listeye girmeye hak kazandı.

Markdown editörlü bu sitede yalnızca yazılarınızı paylaşabilir ve bir kaç da sayfa oluşturabilirsiniz (hakkımda, iletişim gibi).

Diğer ücretsiz blog sitelerinden HashNode'u ayıran şey kendi özel alan adınızı da ücretsiz olarak bağlamanıza izin veriyor oluşu.

4) WebFlow

Responsive web design tool, CMS, and hosting platform | Webflow

Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business.

Webflow logo

İyi bir tasarım sizin için en önemli değişken ise WebFlow tam size göre bir platform. Dokümantasyonunu ve eğitim videolarını incelediğinizde dahi tasarımcıların elinden çıktığına kanaat getireceksiniz.

WebFlow tüm listedeki kişiselleştirebilme konusunda en fazla esnekliği gösteren web sitesi oluşturma platformu.

WebFlow ile yapabileceklerinizin sınırı ancak sizin yaratıcılığınız ile sınırlı. UItra-gelişmiş web editörü ve animasyon editörü ile benzersiz tasarımlar yapmak isteyen kişiler için en uygun blog oluşturma sitesidir diyebiliriz.

Ayrıca dahili Lottie animasyon deteğine sahip olduğunu da belitrtmek lazım.

Webflow fiyatlandırmayı 2 genel kategori üzerinden yapıyor. $12'lık paket ile kendi alan adınızı bağlayabilirsiniz. Bir diğer kategori ise "Account Plan" adı altında sunulan ve daha çok freelancer, geliştiriciler ve ajanslar için uygun olan kategori. Bu kategori daha çok aynı anda kaç proje barındırabileceğiniz ve yatığınız projelerin kodlarını dışarı çıkartmak için geçerli.

5) Wix

Free Website Builder | Create a Free Website | Wix.com

Create a free website with Wix.com. Choose a stunning template and customize anything with the Wix website builder—no coding skills needed. Create yours today!

wix.com

En iyi blog siteleri arasında kesinlikle olması gereken bir diğer site Wix. Geçmiş yıllardaki olumsuz yorumları bir yana bırakıp tekrardan incelediğimizde Wix kullanıcılarını dinleyen, isteklerine cevap veren bir platforma dönüştü.

Blog oluşturma siteleri arasında fiyat-performans konusunda bir numara olduğunu belirtelim.

Ayda 26 TL'ye premium pakete sahip olabilirsiniz, hatta indirim zamanları 13 TL'ye düşen fiyatları ile en yakın rakiplerinin fersah fersah önünde avantaj sağlıyor.

Ayrıca 500'den fazla hazır şablona sahip ve bunları ücretsiz kullanabiliyorsunuz.

Yapay zeka destekli editörünün yanında normal editör ve EditorX dahil 3 editöre sahip.

6) Visual Society

Sell Your Photos | Create Your Shop | Visual Society

Make a beautiful photography storefront in seconds. Beautiful gallery layouts with powerful tools for selling photos and prints. Get started for FREE!

Visual SocietyVisual Society

Visual Society kendi blogunuzu da oluşturmanıza izin veren ve fotoğrafçıların kendi fotoğraflarını satabilecekleri bir e-ticaret sitesi.

Dijital ürün satış alanının sadece fotoğraf satış kısmıyla uzmanlaşmış niş bir site var karşımızda.

Özellikle fotoğraf sanatçılarına önerebileceğimiz bu web sitesinin blog editörü ise sıradan normal bir editör.

7) Format

Create your own professional photography website

Build an online photography website that showcases your work the way you want with Format. Start your free trial today. No credit card and no strings.

Build a Website using Format

Fotoğraf veya illüstrasyon sanatçılarının portfolyolarını koyup, satış yapabilecekleri bir diğer platform is Format. Sizi yönlendiren bir onboarding ekranının ardından plan seçimi yapıyorsunuz.

İçerik editörü Visual Society'e kıyasla daha gelişmiş olmasına rağmen hala vasat seviyede. Foto-blog olarak kullanıldığında muhtemelen yazılı kısımlara daha az ihtiyaç duyulacağı göz önünde bulundurulmalı.

Yıllık ödendiği takdirde 12$'dan başlayan planlara sahip olan Format'ın ücretsiz planı bulunmuyor.

Minimal Blog Siteleri

Eğer tasarım ve özelleştirme gibi özellikler aramıyor, yalnızca yazılarınızı yazabileceğiniz bir platform arıyorsanız aşağıdaki minimal blog siteleri sizin için uygun olabilir. Çoğunluğu ücretsiz olarak alt alan adı ile kullanıma izin veriyor.

Eğer kendi alan adınızı da kullanmak isterseniz aylık 5$ -9$ civarı değişen fiyat uygulamalarına sahipler.

En iyi minimal blog siteleri listesi:

Focused, beautiful & free blogging – Proseful

Proseful is a simple blogging platform, designed to help you stay focused and showcase your content in style.

Proseful

Minimal Blog Sitesi Proseful

Collected Notes.

The simplest, and most powerful note-taking blogging platform.

Minimal Blog Sitesi Collected Notes

Imprint

Publishing for the rest of us

Imprint

Blog yazısı paylaşım platformu Imprint

Notepin

Extremely simple note taking + blogging | By @okozzie_

Notepin

Bir diğer mini-blog sitesi Notepin

Not:

Ek olarak bu siteleri incelerken nesnelliği kaybetmemek adına uyguladığım testler hemen hemen tümünde aynı olacak şekilde yapıldı.
Kabaca bahsetmek gerekirse: Nofollow özelliği anchor (link) etiketine eklenen bir özellik olup, linkjuice denilen, sitenizin otoritesini bir yabancı siteye geçmesine engel olan bir özelliktir. Böylece dış siteye link verirken, Google'a "Benim bu siteyle pek alakam yok" yok diyebilmiş olursunuz. SEO açısından önem teşkil eden bir durumdur.

En iyi blog sitelerini incelediğim bu yazı umarım bir blog sitesi açmak isteyen sizlere yararlı olur ve doğru platformu seçmeniz konusunda bilgilendirici olmuştur.

Proje Yönetimi İçin Mutlaka Denemeniz Gereken 10+ Uygulama

Can Burak Sofyalioglu — Wed, 22 Jul 2020 22:13:32 GMT

Proje yönetimi için olmazsa olmaz araçları, iş takip programlarını ve benzer amaçlarla kullanılabilecek ortak çalışmaya izin veren web uygulamalarını bu yazıda bulacaksınız.

Bu yazıda paylaşılan programların çoğu kişisel projeler için makul seviyede ücretsiz planlar içeriyor. Uygulama yelpazesini biraz geniş tuttum.

Aralarında uzun yıllardır bu piyasada olan, Basecamp ve Trello gibi devler ve daha henüz piyasaya girmiş Raya gibi tümleşik uygulamalar var.

Replace all over the place with ONE place.

Basecamp is the calm, organized, all-in-one way to work remote.

Basecamp

Proje araçları denildiğinde akla ilk gelen bir kaç firmadan biri genellikle Basecamp olur.

Şirket 1999'da kurulmuş olsa da 2004'den sonra daha çok bu alana yönelmiş.

Basecamp klasik proje yönetim anlayışının yanında ekip içi iletişim özelliği de sunuyor.

Kişisel kullanım için 3 proje ve 20 kişiye kadar ortak çalışma imkanını ücretsiz veriyor.

Eğer iş planı'na geçmek isterseniz 100$'lık paket tek seçenek.

Ek olarak belirtmekte fayda var, iş planında kullanıcı başına bir ödeme istenmiyor.

Trello

Infinitely flexible. Incredibly easy to use. Great mobile apps. It’s free. Trello keeps track of everything, from the big picture to the minute details.

Trello

Listenin en başına en popüler uygulamalardan biri olan Trello ile başlayalım. Atlassian firması tarafından 2017'de $417M'a satın alınan Trello ücretsiz servisleriyle göz dolduran ve proje yönetimi konusunda en çok kullanılan uygulamalardan.

Panolar ve kanban boardlar üzerinden işleyen bir mekanizmaya ve kullanıcı dostu bir arayüze sahip Trello.

Online olarak kullanabileceğiniz gibi masaüstü ve mobil uygulamarı da mevcut ancak GNU/Linux için resmi bir uygulaması henüz bulunmamakta.

Manage your team’s work, projects, & tasks online · Asana

Work anytime, anywhere with Asana. Keep remote and distributed teams, and your entire organization, focused on their goals, projects, and tasks with Asana.

AsanaAsana

Asana

San Fransisco menşeili Asana'nın kurucuları Facebook'un da kurucuları arasında olan Dustin Moskovitz ve mühendis Justin Rosenstein.

Daha çok ekipler için koordine organizasyon ve iş takibi uygulaması olarak (SaaS - Software as a Service) hizmet veriyor.

Listeler, Kanban panolar, takvim düzenleme ve görev atama gibi özelliklerini ön plana çıkartıyor.

Mobil uygulamaları olmasına rağmen masaüstü uygulaması bulunmamakta.

Online Gantt Chart Software | TeamGantt

TeamGantt’s online gantt chart software can help plan your projects in minutes. Try our intuitive Gantt chart maker and start managing your projects for free today.

TeamGantt

TeamGantt bir web uygulaması olup gant çizelgeleri hizmeti verir.

Gant çizelgeleri kaynakların etkili biçimde dağıtılması ve verimliliğin arttırılması konusunda muazzam işler çıkartırlar.

ClickUp™ | One app to replace them all

ClickUp is a project management platform with rich customization tailored to each individual project and team.

ClickUp

ClickUp All-in-One diyebileceğimiz bir araçlar bütünü.

To-Do listeler, hesap tabloları, proje yönetim araçları, gant çizelgeler, ve hatırlatıcılar gibi çok fazla araç içeren bir platform.

Mobil uygulaması da mevcut olan platform bu sayede senkronize bir planlama sunuyor.

Limitsiz paketi şu an için 35 TL civarlarında gözüküyor ve bu paket sınırsız entegrasyon, sınırsız bulut depolama, gösterge paneli (dashboard), ziyaretçi izinleri gibi ekstra özellikler sağlıyor.

Ücretsiz paketinde ise sadece 100 MB depolama imkanı var. Kullanım amacına göre değişse de yeterli diyebiliriz..

Zenkit | Online Project Management

The project management tool that grows with you. Zenkit gives you the flexibility to create custom workflows, and the freedom to organize your data the way you want.

Matthew HughesZenkit

Zenkit

Zenkit bir diğer All-in-One platformlardan.

Yenice duyurduğu To-Do uygulamasının yanında kanban board, kontrol listeleri (checklists), akıl haritaları (mind map), görev atama, takvim düzenleme, ve ortak çalışma gibi bir çok gereksinilen uygulamayı içeriyor.

Ayrıca içerdiği bir çok hazır şablon ile de sizi en baştan tasarım yapma zahmetinden kurtarıyor.

Ora - Task management done right!

With kanban, time tracking, reports and team chat - ora.pm is your team’s command center!

Paul H.Ora - Task management done right!

Ora

Proje yönetim araçlarımızın bir diğeri olan Ora. To-Do listeleri, zaman çizelgesi zamanlayıcılar, kanban gibi bir çok özelliği olan bu uygulama takımı, ücretsiz paket dahilinde 3 kullanıcıya kadar izin veriyor.

ZenHub - Agile Project Management for GitHub

ZenHub is agile project management within GitHub. Add powerful tracking, planning and reporting features to GitHub!

Jessica JenningsProgram ManagerZenHub

ZenHub

Agile proje yönetim aracı olarak öne çıkan ZenHub, ürününüz için yol haritası hazırlamaya, takım içindeki kişilere takımın çalışma planından ayrı olarak özelleştirme yapabilmesine, veri görselleştirmeye ve finansal tahminlerle darboğazların öngörülmesine olanak tanıyor.

GitHub'a entegre çalıştığını ve daha çok dijital ürünler için uygun olduğunu söylemekte yarar var.

Üye olurken ücretsiz paket seçiminde gözüken 14 günlük deneme süresi verilen ekstra özellik içindir.

Kişisel, öğrenci veya akademik amaçlı projeler ücretsizdir.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It’s the all-in-one workspace for you and your team

Notion

Daha beta sürümündeyken bile adından sıkça söz ettirmişti Notion.

Evernote'a alternatif olarak piyasaya girmiş, sunduğu özellikler ile bugün web sitesi bile yapabileceğiniz bir uygulamaya dönüştü.

Zengin resmi ve topluluk şablonları ile çok fazla alanda iddialı olan Notion, kesinlikle denenmesi gereken proje yönetim programlardan biri.

Blog yazıları yazabileceğiniz, To-Do listeler yapıp, database'ler oluşturabileceğiniz, tasarım sistemleri kurup, müşteri portföyü yönetebileceğiniz bu platformu denemekten çekinmeyin. Notion ile nasıl ücretsiz web sitesi yapabileceğinize buradaki yazıdan bakabilirsiniz.

Tarayıcı eklentisi olan web clipper ile internette beğendiğiniz yazı ve kaynakları da kaydedebilirsiniz.

Şu an için resmi GNU/Linux uygulaması olmasa da macOS ve Windows'unuza kurabileceğiniz cep telefonlarınıza yükleyebileceğiniz resmi uygulamaları mevcut.

Raya - All-in-one Minimalistic Workspace

Distraction free productivity tool that hates notifications

All-in-one Minimalistic Workspace

Raya

Raya daha çok yeni çıkmış bir web uygulaması.

Raya'yı diğer proje yönetim uygulamalrından ayıran en önemli özelliği bir tümleşik uygulama olması.

Uygulamalar arası geçişlerde kaybettiğimiz zamanı göz önünde bulunduran ve buna bir çözüm getirmeye çalışan Raya, tek uygulmada birden çok hizmeti sunmayı vaad ediyor.

Eposta istemcisi, şirket wikisi, kanban paneller, görev yönetimi gibi çok fazla hizmet sunuyor. Özellikle minimal tasarımı çok başarılı.

Normal fiyatı 19$ gibi gözüküyor ancak COVID-19 süresince ücretsiz durumda.

Ayrıca bölgesel fiyat poltikasını da değerlendirdiklerini ve Türkiye için ayrı bir fiyat araştırması yaptıklarını belirttiler.

Portabella

End-to-end encrypted issue tracking, file sharing and kanban boards

Portabella Take a look at the 12 largest breaches from 2019

Portabella

Proje araçlarının arasında güvenliğe verdiği önemle ön plana çıkıyor Portabella. Sınırsız kişisel projeler için her zaman ücretsiz olmayı vaad ediyor. Ayrıca kişisel planlar dahilinde üç kişiye kadar da ortak çalışma imkanı veriyor. İş yerleri veya fazla kişinin katılabileceği projeler için kişi başı 9.99$'lık paket mevcut ve her kişiye 10 GB'lık şifreli depolama alanı sunuyor.

Proje yaparken veya yönetirken işinize yarayabilecek uygulamaları yazdığım bu yazıya dair eklemek istediğiniz veya ister içerik ister biçimsel olarak yapmak istediğiniz eleştiriniz varsa lütfen çekinmeden yazın.

Notion ile Ücretsiz Web Sitesi Nasıl Yapılır [2020]

Can Burak Sofyalioglu — Wed, 22 Jul 2020 21:49:46 GMT

Çok amaçlı üretkenlik uygulaması Notion ile ücretsiz bir web sitesi nasıl yapılır bu yazıda göstermeye çalışacağım.

Notion Nedir?

Notion sağladığı zengin bileşenler ve hayli özelleştirilebilir yapısı ile çok fazla amaç için kullanılabilen bir platform. Notion en genel hatlarıyla şu amaçlar için kullanılabiliyor:

Not Uygulaması
Blog Uygulaması
Bilgi Platformu (Wiki)
Proje Yönetim Aracı (Kanban, Checkbox, To-Do List vs.)
Database oluşturma (Henüz resmi bir API'si yok)
Ortak Çalışma Alanı
Markdown Editör
HTML ve PDF dışa çıkartıcı

2016'da San Fransisco merkezli kurulan ve 2020 yılında 2 milyar dolar değerleme alan bir şirket aynı zamanda.
Yanlış hatırlamıyorsam bir Evernote alternatifi olarak beta sürümünü görmüştüm ilk defa. Hiç bir zaman Evernote'a ısınamamış biri olarak ilgimi çekmişti ancak resmi bir Linux versiyonunun olmayışı biraz uzak kalmama sebep olmuştu.

Bugünse hala resmi bir API'a sahip olmayışları ve yol planlarında resmi API için öncelik barındırmamaları hala canımı sıksa da, bu benim gibi kullanıcılar için bir problem.

Çok spesifik ihtiyaçlarınız yoksa bir çok uygulamanızı bırakıp Notion'a geçmemeniz için hiç bir sepep yok.

Bu blog yazısında Stephen Ou'nun bir yan projesi olan FruitionSite sitesinde yayınladığı yöntemi uygulayarak Notion ile nasıl bir web sayfası yapılır onu göstermeye çalışacağım.

Notion Ücretli mi ?

Notion kişisel kullanımlar için ücretsizdir. Ancak sadece 5MB'a kadar depolama imkanı sunuyor. Bir süre yazılarınız sorun çıkarmayacak olsa da fotoğraf depolamanız sorun yaratabilir.

Notion yapılan web sayfası örnekleri nelerdir?

Aşağıdaki görsellerde Notion ile yapılan web sayfası örneklerinden bir kaç tanesini bulabilirsiniz.

Ayrıca bu yazıda gösterilecek olan yöntemle yapılmış sitelerin listesine de buradan ulaşabilirsiniz:

Fruition Showcase

Notion İle Ücretsiz Web Sayfası Oluşturalım

Ben daha öncede GoDaddy'den aldığım no-kod.com alan adını bu örnek gösterim için kullanacağım.

Herhangi bir alan adı sağlayıcısından almış olduğunuz alan adıyla da pek tabi bu işlemi gerçekleştirebilirsiniz.

Tutarlı olmak ve örnek verirken kolaylık olması maksadıyla kendi kullanacağım alan adını tüm örneklerde kullanacağım.

Notion ile Web Sayfası Yapmak için Gerekenler

Notion ile ücretsiz web sayfası oluşturmak için gereken iki önemli husus var. Bunlar:

Bir Notion hesabımızın olması.
Bir alan adına sahip olmamız (Örneğin: http://no-kod.com/. Herhangi bir alan adı sağlayıcısından ücretli olarak temin edebilirsiniz: GoDaddy gibi)

Şu ana kadar zaten Notion hesabına sahip olduğunuzu ve de web sayfası olarak kullanmak istediğiniz alan adını almış olduğunuzu varsayıyorum.

Bundan sonraki kısımda bir CloudFlare hesabı açıp, alan adınıza gelen trafiği Notion sayfanıza yönlendireceğiz.

Adım Adım Notion ile Web Sayfamızı oluşturuyoruz

1. Buradaki adresten ücretsiz bir CloudFlare üyeliği açıp. Eposta onayı için gelen maili onaylayın.

2. "Add A Site" butonuna tıklayarak kullanmak istediğiniz alan adınızı başında herhangi bir protokol ve alt alan adı olmadan girin. Örneğin: no-kod.com. Eğer www.no-kod.com ya da blog.no-kod.com gibi bir alt alan adını kullanacak da olsam gene de kök alan adını yani apex domain'im olan no-kod.com 'u girecektim.

3. Daha sonra "Free" seçeği ile ücretsiz planı seçiyoruz.

4. Bize alan adı sağlayıcımızla ilgili bilgileri gösterdikten sonra "Continue" ile devam ediyoruz.5. CloudFlare'in ad sunucularının olduğu ekrana geldik. Buradaki 2 adet ad sunucusunu (name servers) kendi alan adı sağlayıcımızın DNS ayarlarına gireceğiz. Böylece CloudFlare alan adımızla ilgili tek yetkili konumuna gelecek.

5.Alan adı sağlayıcımızda oturum açıp, kullanacağımız alan adının DNS ayarları sayfasına gidiyoruz. Benim örneğimi referans alırsak, GoDaddy'de oturum açıp, alan adlarım arasından no-kod.com' u bulup "Yönet" seçeneğine tıklıyorum.

cloudflare ns ayarları

6.Alan adı sağlayıcımızda oturum açıp, kullanacağımız alan adının DNS ayarları sayfasına gidiyoruz. Benim örneğimi referans alırsak, GoDaddy'de oturum açıp, alan adlarım arasından no-kod.com' u bulup "Yönet" seçeneğine tıklıyorum.

GoDaddy DNS ayarlarını bul

7. Açılan sayfada alt kısımlarda Ad Sunucuları başlığında "Değiştir" butonuna tıklayarak, beşinci Adımda karşımıza çıkan CloudFlare Ad Sunucularını (NS) buraya girip kaydediyoruz. Kaydetmenin ardından artık CloudFlare alan adımız üzerinde tam yetkiye sahip oluyor.

8. Şimdi tekrardan CloudFlare'deki hesabımıza geri dönüyoruz. "Done, check nameservers" butonuna tıklıyoruz.9. Sonraki ekranda SSL/TLS modu olarak Flexible'ı seçiyoruz.

9. Sonraki ekranda SSL/TLS modu olarak Flexible'ı seçiyoruz.

10. Always Use HTTPS seçeneğine tıklayarak aktif ediyor, Auto Minify seçeneklerinin hepsini seçiyor ve Brotli sıkıştırmasını da aktif ederek "Done" butonuna tıklıyoruz.

11. Ardından CloudFlare'in onay vermesini bekliyoruz. Eğer aşağıdaki ekran sizde çıkmadıysa, sayfayı yenileyebilirsiniz.

12. İşlemlerin başarılı olduğuna dair ekranı gördüyseniz, yukarıdaki mavi kutulardan "Workers" seçeneğini seçebilirsiniz. Yeni açılan sayfada, sağ taraftaki "Manage Workers" seçeneğine tıklayarak alan adına gelen trafiği, notion sayfamıza yönlendirecek worker'ımızı ayarlayacağız.

CloudFlare işçi ekranı

13. Sonraki ekranda çıkan herhangi bir alt alan adını seçebilirsiniz. Neyi seçitiğinizin çok da bir önemi yok. Global olarak benzersiz olması yeterli. Daha sonra "Set up" ve ardından "Confirm" seçenekleri ile işçimizi yaratıyoruz.

14. Sonraki ekranda tekrardan Free seçeneğini seçerek ücretsiz plan dahilinde kalıyoruz. Burada seçtiğimiz ücretsiz hesap için günlük bir limit uygulanıyor. Eğer siteniz fazla trafik çekecek ise daha sonra bir üst paketi seçebilirsiniz.

15. Eğer başka bir ekrandaysanız tekrardan mavi kutucuklar arasından Workers'a tıklayarak ilgili sayfaya geçiniz. Buradaki "Create a Worker" butonuna tıklayarak işçimizin görevlerini tanımlayacağız.

16. Bundan önce yapmamız gereken bir şey daha var. O da Notion'da oluşturduğumuz sayfaya giderek, bu sayfayı herkesin erişimine açık hale getirmek. Kullanacağımız sayfayı seçtikten sonra sağ üst köşedeki "Share" linkine tıklayarak ardından da "Share to the web" seçeneğini aktif hale getirip, "Copy Link" butonuna tıklıyor ve Notion sayfamızın global adresini kopyalıyoruz. Artık sayfamız herkesin erişimine açık hale gelmiş bulunmakta.

17. Aşağıdaki linke tıklayarak çıkan sayfadaki form kısmına kutucukların birincisine kullanacağınız alan adını girin. Örneğin: no-kod.com. İkincisine ise bir önceki adımda kopyaladığımız, Notion sayfamızın web adresini giriyoruz. Ardından "COPY THE CODE" seçeneği ile üretilen kodu kopyalıyoruz. Eğer birden çok sayfa Notion sayfasını kullanmak isterseniz, "ADD A PRETTY LINK" seçeneği ile yapabilirsiniz.

Form linki

18. Tekrar CloudFlare sayfasına geri dönelim. Burada karşımıza çıkan ekranda, sol taraftaki (Script yazan panel) tüm kodu silerek, az önce üretilen kodu buraya yapıştırıyoruz. "Save and Deploy" butonuna tıklıyoruz.

19. Şimdi sayfanın üst kısmında yer alan alan adımıza tıklayalım. Ardından, mavi kutucuklardan "Workers" butonuna tıklayarak İşçilerimizle alakalı sayfaya geçelim.

20. Buradaki "Add Route" butonuna tıklıyoruz. Burada kullanacağımız alan adını, /* ekiyle giriyoruz. Örneğin: no-kod.com/* ya da alt alan adı kullanacaksak blog.no-kod.com/* . (Sondaki yıldız * işaretini unutmayın. Yıldız wildcard olup oraya gelebilecek her ihtimalin kabul edilmesini sağlar)Son olarak daha önce aktif ettiğimiz workerımızı da seçtikten sonra kaydet tuşuna basarak işlermlerimizi bitiriyoruz.

Route ayarlarını yap

Artık alan adımıza giderek Notion ile oluşturduğumuz sayfayı web sayfası olarak kullanabiliriz. Artık sitenizi kullanmaya başlayabilirsiniz..

BONUS: Ücretli ve Ücretsiz Notion Şablonları

Notion templates - Find the perfect template

All the Notion templates that you’re looking for are here. Save hours of work by finding the perfect template for your project.

Notion Templates

Django and Modern JS Libraries - Svelte

Can Burak Sofyalioglu — Wed, 22 Jul 2020 21:47:22 GMT

In the previous part, we built a Django backend and GraphQL API. In this part, we will integrate the Django project with Svelte.

Thus, it's necessary to follow Django and Modern JS Frameworks - Backend.

What is Svelte and How it differs from React?

I like Python and its ecosystem. I also like Just-In-Time compilers and language supersets like Cython, which really boosts Python performance. When I learned that JavaScript is an interpreted language, I tried to look Cython equivalent of it. Because of different browser compilers, I couldn’t find what I want and it made a disappointment. Maybe it is the reason I feel the excitement when I give Svelte a chance.

If you didn't try Svelte before, you may give it a chance. Svelte's interactive API and tutorials are also worth to praise. Being familiar with Svelte API and Tutorials is definitely recommended.

Svelte tutorial

Introduction / Basics

When I’m talking about Svelte, I’m strictly speaking about Svelte 3. It is another JavaScript library written by Rich Harris. What makes Svelte special is:

It is truly a reactive library and it doesn’t use virtual DOM like React. Therefore, there are no VDOM diff calculations.
It has a compiler and when you build your application it produces optimized JavaScript code. In the end, Svelte code almost disappears and you have vanilla JavaScript.
You can write HTML, CSS, and JavaScript in a single file component and there will be no global CSS pollution.

Yes, React was revolutionary. However, how many times we have to deal with virtual DOM synchronization problems or the extra burden for even very small operations are the other side of the medallion.

Svelte Configuration with Webpack from Scratch

Step - 1: Configuring the development environment

(Note: if you already installed the node, you can skip this part)

We will use Node backend for the development environment.

Therefore, we need to install Node and Node package manager npm.

To prevent potential dependency problems, we will create a clean node environment.

I will use NVM which is a Node version manager, and it allows us to create isolated Node environments.

In your terminal, run the code below.

Setup Node Environment with NVM

In your terminal, run the code below.

# install node version manager
wget -qO-  | bash
# check installation
command -v nvm
# should prints nvm, if it doesn't, restart your terminal

# install node
# node" is an alias for the latest version
# use the installed version
nvm use node
nvm install node

Now we can create a frontend directory in the Django project. Go to the root directory of the project. 'backend/'

In your terminal copy and paste the code.

# create frontend directory
mkdir FRONTEND
cd FRONTEND

# now your terminal directory should be
# backend/FRONTEND 
# create a node project
npm init
# you may fill the rest

Now we can install front-end and development libraries.

# install svelte and other libs 
npm install --save-dev svelte serve cross-env  graphql-svelte

# install webpack and related libs
npm install --save-dev webpack webpack-cli webpack-dev-server

# install webpack loaders and plugins 
npm install --save-dev style-loader css-loader svelte-loader mini-css-extract-plugin

npm install --save node-fetch svelte-routing

Update package.json scripts part as below. Your file should look like this and ignore the versions.

{
  "name": "django-svelte-template",
  "description": "Django Svelte template. ",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "webpack-dev-server --content-base ../templates"
  },
  "devDependencies": {
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "graphql-svelte": "^1.1.9",
    "mini-css-extract-plugin": "^0.9.0",
    "serve": "^11.3.1",
    "style-loader": "^1.2.1",
    "svelte": "^3.22.3",
    "svelte-loader": "^2.13.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "node-fetch": "^2.6.0",
    "svelte-routing": "^1.4.2"
  }
}

Let’s create application necessary files and folders for Svelte. In the root directory of the project 'backend/’ , open your terminal.

# create HTML file of the project
cd templates
touch index.html

# change directory to backend/FRONTEND
cd ../FRONTEND
mkdir src
touch index.js
touch webpack.config.js

# change directory to backend/FRONTEND/src
cd src
touch App.svelte
touch MovieList.svelte
touch MoviePage.svelte
touch api.js

Step 2 - Webpack configuration

What is webpack ?

Webpack is a module bundler and a task runner.

We will bundle all our JavaScript applications including CSS styling into two JavaScript files, if you prefer you can output only one file.

Because of the rich plugins, you can also do many things with Webpack like compressing with different algorithms, eliminate unused CSS code, extracting your CSS to different files, uploading your bundle to cloud providers like S3, etc…

I made two different Webpack settings in one file.

One is for a development environment, and the other one is for a production environment.

Also, note that we do not optimize these configurations.

Copy/Paste the following code into the webpack.config.js file.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const isEnvProduction = mode === 'production';

const productionSettings = {
	mode,
	entry: {
		bundle: ['./index.js']
	},
	resolve: {
		alias: {
			svelte: path.resolve('node_modules', 'svelte')
		},
		extensions: ['.mjs', '.js', '.svelte'],
		mainFields: ['svelte', 'browser', 'module', 'main']
	},
	output: {
        path: path.resolve(__dirname, '../static'),
		filename: 'js/[name].js',
		chunkFilename: 'js/[name].[id].js'
	},
    optimization: {
		minimize: true,
		runtimeChunk: false,
	  },
	module: {
		rules: [
			{
				test: /\\.svelte$/,
				use: {
					loader: 'svelte-loader',
					options: {
						emitCss: true,
						hotReload: true
					}
				}
			},
			{
				test: /\\.css$/,
				use: [
					/**
					 * MiniCssExtractPlugin doesn't support HMR.
					 * For developing, use 'style-loader' instead.
					 * */
					MiniCssExtractPlugin.loader,
					'css-loader'
				]
			}
		]
	},
	devtool: false,
	plugins: [
		new MiniCssExtractPlugin({filename: '[name].css'})
	],
};

const devSettings = {
	mode,
	entry: {
		bundle: ['./index.js']
	},
	resolve: {
		alias: {
			svelte: path.resolve('node_modules', 'svelte')
		},
		extensions: ['.mjs', '.js', '.svelte'],
		mainFields: ['svelte', 'browser', 'module', 'main']
	},
	output: {
		publicPath: "/",
		filename: 'static/js/bundle.js',
		chunkFilename: 'static/js/[name].chunk.js',
	},
	devtool: 'source-map',
	devServer: {
		historyApiFallback: true,
		stats: 'minimal',
	  },
	module: {
		rules: [
			{
				test: /\\.svelte$/,
				use: {
					loader: 'svelte-loader',
					options: {
						emitCss: true,
						hotReload: true
					}
				}
			},
			{
				test: /\\.css$/,
				use: [
					/**
					 * MiniCssExtractPlugin doesn't support HMR.
					 * For developing, use 'style-loader' instead.
					 * */
					'style-loader',
					'css-loader'
				]
			}
		]
	},
	mode,
	plugins: [
	],
}

module.exports = isEnvProduction ? productionSettings : devSettings;

Step 3 - Create a Single-Page-App witth Svelte

First, fill the 'backend/FRONTEND/index.js’.

import App from './src/App.svelte';

const app = new App({
	target: document.body,
});

window.app = app;

export default app;

Next, fill the ‘App.svelte’ file with proper logic.





  
    Home

Before routing pages, I will first write the client-side queries. Please open api.js and copy/paste the code below.

import { GraphQLProvider, reportCacheErrors } from "graphql-svelte";

const client = GraphQLProvider({
    url: '',
    headers: () => ({
        "content-type": "application/json",
        Accept: 'application/json'
    })
})

client.graphql.on('cache', reportCacheErrors)
  
// our first query will requests all movies
// with only given fields
// note the usage of string literals (`)
export const MOVIE_LIST_QUERY = `
    query movieList{
        movieList{
            name, posterUrl, slug
        }
    }
`// Note the usage of argument.
// the exclamation mark makes the slug argument as required
// without it , argument will be optional
export const MOVIE_QUERY = `
    query movie($slug:String!){
        movie(slug:$slug){
            id, name, year, summary, posterUrl, slug
        }
    }
`// This is generic query function
// We will use this with one of the above queries and
// variables if needed
export async function get(query, variables = null) {
    const response =  await client.get({ query , variables })
    console.log("response", response);
    return response
}

Now, route pages: MovieList.svelte will be shown on the homepage as we defined in the above. If the user clicks any movie card, then MoviePage.svelte file will be rendered.

Fill the MovieList.svelte.



    {#await movielist}
        loading

	
    {:then response}
        {#if response.data.movieList.length > 0}
            {#each response.data.movieList as movie}
                {movie.name}
            {/each}
        {/if}

    
    {:catch error}
        Something went wrong: {error.message}
    {/await}

Also, fill MoviePage.svelte according to this.


    {#await moviedata}
        Movie {slug} is loading

    {:then moviedata}
        {#if moviedata.data}
            {moviedata.data.movie.name}
{moviedata.data.movie.summary}
        {/if}

    
    {:catch error}
        Something went wrong: {error.message}
    {/await}

Start the Svelte App in Development Environment

In the development environment, we will run two different servers.

When our Svelte app is running, it requests data from the Django server.

After the response comes, the Webpack Development server renders the page with proper data. This is only for the development stage.

When we finish the front-end development, we will build and bundle a client-side app.

After then we will start the Django server, and it will be the only server we will use in the production environment, as I promise before.

Execute the below command and make the Django server ready for front-end requests.

# execute it on the root folder of Django 'backend/'
python manage.py runserver

Open another terminal and change the directory to the ‘backend/FRONTEND’

# On another terminal
npm run start

When Svelte app successfully compiled, open your browser ‘localhost:8080/’.

You should see similar screen like the image below.

MovieList.svelte will render the screen

MoviePage.svelte screen will render this if the user clicks any movie card

What will be happened at the moment?

At this moment, “/“ root page will be rendered. Because of our routing configurations, MovieList.svelte file will be rendered first. If the user clicks any film card, then the MoviePage.svelte file will be rendered regarding its slug value.

We succesfully integrated Django and Svelte. Now make the production build.

Django and Svelte Integration in Production Environment

Now you can stop webpack server while keeping the Django server alive.

In the backend/FRONTEND/ directory, execute the command below.

npm run build

This will build and bundle all your Svelte app in bundle.js file. When bundling process is over, go to the URL of Django server in your browser. --> “127.0.0.1:8000/”

You should see the same screens above. Also note the static folder which has new files coming from webpack bundling.

FINISHED

canburaks/django-and-modern-js-libraries

Tutorial series of Django and modern JS libraries. - canburaks/django-and-modern-js-libraries

canburaksGitHub

The code repository

Django and Modern JS Libraries - React

Can Burak Sofyalioglu — Wed, 22 Jul 2020 21:39:06 GMT

In the previous part, we built a Django backend and GraphQL API that is responsible for the communication of the Django project and react app. In this part of the tutorial, we will create a single page application with React from scratch.

We will bundle our application with webpack and we will not use create-react-app boilerplate

Create React App from Scratch

Step - 1: Configuring development environment

(Note: if you already installed the node, you can skip this part)

We will use Node backend for the development environment.

Therefore we need to install Node and Node package manager npm. In order to prevent possible dependency problems, we will create a clean node environment.

I will use NVM which is a Node version manager and it allows us to create isolated Node environments.

In your terminal, run the code below.

# install node version manager 
wget -qO-  | bash

# check installation
command -v nvm
# should prints nvm, if it doesn"t
# you can restart your terminal

# install node
# node" is an alias for the latest version
nvm install node
# use the installed version
nvm use node
# prints Now using node v..

Now we can create a frontend directory in the Django project.

Go to the root directory of the project. 'backend/'

In your terminal copy and paste the code.

# create frontend directory
mkdir FRONTEND
cd FRONTEND

#in backend/FRONTEND create a Node project 
npm init
# you may fill the rest

Now we can install Javascript dependencies such as React and API related to other libraries.

# add core react library
npm install react react-dom react-router-dom

# add graphql client-side framework of Apollo and parser 
npm install apollo-boost @apollo/react-hooks graphql graphql-tag

# -- DEVELOPMENT PACKAGES---
# add babel transpiler
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

# add webpack bundler
npm install --save-dev webpack webpack-cli webpack-dev-server

# add webpack loaders and plugins
npm install --save-dev babel-loader css-loader style-loader html-webpack-plugin  mini-css-extract-plugin postcss-loader postcss-preset-env

If everything goes well, we can create necessary files.

# create source folder for client side code
mkdir src
# our react app's root file
touch index.js

#create webpack config file
touch webpack.config.js

# get into src folder
cd src

# create HTML entrypoint for React development
touch index.html

# our app file and styling
touch App.js

// Screens
touch MovieList.js
touch MoviePage.js

# for styling
touch App.css

All npm packages contain a file that holds metadata about the app. This file is a package.json file.

You should update the package.json file.

Edit the scripts section and add Babel presets and postcss configurations.

{
        
  "scripts": {
  "start": "webpack-dev-server --open --hot --mode development",
  "build": "webpack --mode production"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
      ]
   },
  "postcss": {
    "plugins": { "postcss-preset-env": {} }
   },
   

   
}

Step 2 - Webpack configuration and index.html file

What is webpack ?

Webpack is a module bundler and a task runner.

We will bundle all our JavaScript applications including CSS styling into two JavaScript files, if you prefer you can output only one file.

I made two different Webpack settings in one file.

One is for the development environment, and the other one is for a production environment.

Also, note that we do not optimize these configurations.

Copy/Paste the following code into webpack.config.js file.

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

// checks if it is production bundling or development bundling 
const isEnvProduction = process.argv.includes("production")

// our JS root file
const entrypoint = './index.js'

const productionSettings = {
	mode: "production",
	entry: entrypoint,
	output: {
        // output directory will be the root directory of django
        path: path.resolve(__dirname, '../'),
        // this is the bundled code we wrote
        filename: 'static/js/[name].js',
        // this is the bundled library code
	    chunkFilename: 'static/js/[name].chunk.js'
	},
    optimization: {
		minimize: true,
		splitChunks: {
		  chunks: 'all',
		  name: true,
		},
		runtimeChunk: false,
	  },
	devServer: {
		historyApiFallback: true,
		stats: 'normal',
      },

	module: {
		rules: [
            {
                loader: 'babel-loader',
                test: /\\.js$|jsx/,
                exclude: /node_modules/},
			{
				test: /\\\\.css$/i,
				use: [
				  // IMPORTANT => don't forget `injectType`  option  
				  // in some cases some styles can be missing due to 
				  // inline styling. 
				  { loader: 'style-loader', options: { injectType: 'styleTag' } },
				  "css-loader"
				],
			},
		]
	},
	plugins: [
		new HtmlWebPackPlugin({
		    
			// ENTRYPOINT - this is where webpack read our app for bundling
			template: "./src/index.html",
			
			// OUTPUT FILE
			// this is emitted bundle html file
			// ----------------------------------
			// django will use this as template after bundling
			// -----------------------------------
      filename:"./templates/index.html"
		}),
	]
};

const devSettings = {
	mode: "development",
    entry: entrypoint,
	output: {
		path: path.resolve(__dirname, './build'),
		publicPath: "/",
		filename: 'static/js/bundle.js',
		chunkFilename: 'static/js/[name].chunk.js',
	},
	devtool: 'inline',
	devServer: {
		historyApiFallback: true,
		contentBase: './dist',
		stats: 'minimal',
	  },
	module: {
		rules: [
            {
                loader: 'babel-loader',
                test: /\\.js$|jsx/,
                exclude: /node_modules/},
			{
				test: /\\.css$/i,
				use: [
					//{loader: MiniCssExtractPlugin.loader, options: {
					//	  //your styles extracted in a file for production builds.
					//	  //hmr: isEnvDevelopment,
					//	},
					//  },
				  // IMPORTANT => don't forget `injectType`  option  
				  { loader: 'style-loader', options: { injectType: 'styleTag' } },
                  "postcss-loader"
                  //"css-loader"
				  //{ loader: 'sass-loader' },
				],
			},
		]
	},
	plugins: [
		new HtmlWebPackPlugin({
			template: "./src/index.html",
		})
	]
};

module.exports = isEnvProduction ? productionSettings : devSettings;

When we are developing frontend, our React app renders all our JavaScript code to this HTML file in the src folder.

Also, when we build our code for production (bundling), Webpack will use this HTML as a template.

It is important to say that Django will not use this HTML file. This is the HTML entry point of webpack. Django will use the output of the webpack bundle.

Update your index.html file.



  
    
    
    
    
    Django React Integration

Step - 3 Create the React app

The index file is the root file of our app, meaning that all our codes will be connected to this root file.

The other tutorials or each boilerplate use this file for only render function of ReactDOM and leave it small and clear.

Writing this index file as it is is a totally a choice.

What we will do is as follows: We will create an Init component that will initialize the API framework (Apollo) and routing library (react-router-dom).

We will wrap our App.js file with the API framework so that all our components will be in the context of API.

The Apollo Provider expects an Apollo client.

The Apollo client has the information of the requested address, which is the address of our Django server.

After then we will wrap our App file again with the router component, namely Browser Router. This makes our app a single-page-application.

Thus, we make routing without rendering all the pages when the URL of the address bar changes.

At the end of the file, you will see the render function of ReactDOM which accepts our root component, which is the Init component in our case, and the DOM element that our app will be rendered in there.

Update your index.js file as follows.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { BrowserRouter } from "react-router-dom"

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
/*
    our frontend api client will make request to 
    the adress we define in the first part.
*/
const apiclient = new ApolloClient({
    uri: '',
  });

const Init = () => (
    
        
            
        
    
)

ReactDOM.render( , document.getElementById('root'))

Now, we are ready to create our simple movie app.

Our app has two different screens:

The main page which lists all movies in the database with less information
The movie page will show a specific movie page with more information.

Now update your App.js file.

import React from "react";
import { Route, Switch, Link } from "react-router-dom"

// UI Screens we will define later
import MoviePage from "./MoviePage.js" //New
import MoviePage from "./MoviePage.js" //New

import "./App.css"

const App = () => {
    return (
        
            
                
                
                {// colon before slug means it is a dynamic value
                // that makes slug parameter anything
                // like: /movie/the-lighthouse-2019   or /movie/anything
                // as long as slug matches with database.
                }
                
            
        )
}
export default App

Let me explain what that code means

When a user first opens our page, the switch component from react-router-dom will look at the URL. Then try to match the path of route components with this URL, if any, then the matched component in the route will be rendered.

Step - 4 Create page components and styling

The MovieList component will be shown on the landing page. Copy/Paste to "MovieList.js" file.

import React from "react";
import gql from "graphql-tag";

// our first query will requests all movies
// with only given fields
// note the usage of gql with 'jsvascript string literal'
export const MOVIE_LIST_QUERY = gql`
    query movieList{
        movieList{
            name, posterUrl, slug
        }
    }
`
const MovieList = (props) => {
    const { loading, error, data } = useQuery(MOVIE_LIST_QUERY);
    
    // when query starts, loading will be true until the response come.
    // At this time this will be rendered on screen
    if (loading) return Loading
    
    // if response fail, this will be rendered
    if (error) return Unexpected Error: {error.message}//if query succeed, data will be available and render the data
    return(
        
            {data && data.movieList &&
                data.movieList.map(movie => (
                    
                        
                        {movie.name}
                        
                    ))
            }
        )
}

export default MovieList

MoviePage component will show more details than the list view but only information about a specific movie.

Copy and paste the code MoviePage.js file.

import React from "react";
import gql from "graphql-tag";

// Note the usage of argument.
// the exclamation mark makes the slug argument as required
// without it , argument will be optional
export const MOVIE_QUERY = gql`
    query movie($slug:String!){
        movie(slug:$slug){
            id, name, year, summary, posterUrl, slug
        }
    }
`const MoviePage = (props) => {
    // uncomment to see which props are passed from router
    //console.log(props)

    // due to we make slug parameter dynamic in route component,
    // urlParameters will look like this { slug: 'slug-of-the-selected-movie' }
    const urlParameters = props.match.params

    const { loading, error, data } = useQuery(MOVIE_QUERY, { 
        variables:{slug:urlParameters.slug}
    });

    if (loading) return Loading
if (error) return Unexpected Error: {error.message}
  
    return (
        
        Main Page
            {data && data.movie && 
                
                    
                    
                        {data.movie.name}
                        Year: {data.movie.year}
                        

                        {data.movie.summary}
                    
                }
        )
}

export default MoviePage

Add some styling: update App.css.

html, body {
    width:100vw;
    overflow-x: hidden;
    height:auto;
    min-height: 100vh;
    margin:0;
}

.App {
    position: absolute;
    left:0;
    right:0;
    display: flex;
    min-width: 100%;
    min-height: 100vh;
    flex-direction: column;
    background-color: #181818;
    /*font-family: "Open Sans", sans-serif;*/
    font-size: 16px;
    font-family: sans-serif;
}

/* MAIN PAGE */
.main-page {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 40vh;
    background-color: #3f3e3e;
    margin:10vh 5vw;
    border-radius: 6px;
}

/* MOVIE CARD */
.movie-card {
    position: relative;
    width:168px;
    height:auto;
    background: #f1f1f1;
    border-radius: 6px;
    margin:16px;
    box-shadow: 0 12px 12px -4px rgba(0,0,0, 0.4);
}
.movie-card:hover {
    box-shadow: 0 12px 18px 4px rgba(0,0,0, 0.8);

}
.movie-card-image {
    width:168px;
    height:264px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.movie-card-name {
    text-align: center;
    margin: 0;
    padding: 8px;
    font-weight: bold;
}
.movie-card-link {
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
}

/* MOVIE PAGE */
.back-button {
    position: absolute;
    left:10px;
    top:10px;
    width:120px;
    padding: 8px 16px;
    text-align: center;
    background: #f1f1f1;
    color:black;
    font-weight: bold;
    cursor:pointer;
}

.movie-page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 80vh;
    margin:10vh 10vw;
    border-radius: 6px;
}

.movie-page-box {
    position: relative;
    display: flex;
    height:352px;
    background-color: #f1f1f1;
}
.movie-page-image {
    width:280px;
    height:352px;
}
.movie-page-info {
    position: relative;
    display: flex;
    flex-direction: column;
    height:352px;
    width: auto;
    max-width: 400px;
    padding: 16px 32px;
}

Finally, Start Django-React App

Development Environment

In the development environment, we will run two different servers.

One is the Django server for backend, and the other one is the Webpack server for frontend development.

In the production environment, We will only run one Django server as I promise.

Go to the root folder of the Django project. 'backend/'.

Execute the below command and make the Django server ready for frontend requests.

python manage.py runserver

Open another terminal and go to FRONTEND directory. ‘backend/FRONTEND’

npm run start

You will see those screens.

Django and React Successfully Integrated

We created a simple single-page-application. Now, the last part of this tutorial will be made this app works seamlessly with our Django project.

Now you can stop the webpack server with the corresponding terminal screen.

The Final Part - Production Build of Django and React

Now, We can build our app for the production environment. Go to the FRONTEND directory and execute the build command.

npm run build

When the build process is done, there will be two Javascript files in the backend/static folder:

main.js
vendors~main.chunk.js

Also, check the backend/templates folder and you will see other index.html files.

This is the HTML file that Django will use.

I made this graphic in order to show webpack bundling process and how our app will use output files.

FINISH

canburaks/django-and-modern-js-libraries

Tutorial series of Django and modern JS libraries. - canburaks/django-and-modern-js-libraries

canburaksGitHub

The code repo

Django and Modern JS Libraries - Backend

Can Burak Sofyalioglu — Wed, 22 Jul 2020 21:37:20 GMT

Preliminary Information About the Tutorial?

What is this tutorial about?

Django and Modern JS Libraries will be a tutorial series that integrates Django and contemporary frontend solutions such as React and Svelte. Another framework/library integrations are also planning in the future.

The Project Description

We will set up one Django server and make two simple single-page applications. Each of them will use different Javascript libraries and both of them will communicate with the Django server.
React application will be written from scratch with webpack in the second part. Also, note that create-react-app will not be used.
The latest and third part of this tutorial will be Svelte integration.

There are 2 projects and 3 articles in this series:

Django server and GraphQL API setup
React application setup with webpack and integrating it with our back-end.
Svelte application setup with webpack and integrating it with our back-end.

What are the requirements to follow?

Basic level of knowledge about Python and Django framework
Basic level of Javascript and React is a must.

Motivation

Python is my first programming language. When we were making a movie recommendation engine, we must integrate it with Facebook’s React library because we want it to be a single page application.

My level of knowledge about Javascript was at the introduction level. Proficient in an unfamiliar programming language takes some time.

Also, I like the Python ecosystem because of the excellent data science libraries, and giving up from Python was never a choice.

To sum up, it really took some time to integrate Django and React. When I recently published my development blog, I edited and update old articles.

During this time, another front-end library was released, and it excited me a lot: Svelte. I also added an integration article with Svelte and Django. I hope that this article series will help newcomers a bit to solve their problems.

General Information

What is a Single Page Application?

In classic web pages, all HTML, CSS, and JS code are arranged and transferred by the server in a render-ready form. When a browser receives the code, it immediately renders elements on a screen. If a user clicks a link, then the browser makes another request to the server. The server will make all the logical operations and respond with another render-ready code.

In modern client-side apps, some logical operations are handled by Javascript code which is executed in the browser of users. Because of this, servers send all the website code in the first request. Thus, browsers need extra time for the first contentful painting.

Except for the first loading, client-side apps works faster and feels more native because some actions are done immediately on the browser and I/O operations can be done via asynchronous behavior of Javascript.

Therefore, users still see your app rather than a blank white page.

Browsers are amazing and capable of many impressive things.

Because of this capability, handling resource-heavy operations in the user’s browser can be a suitable alternative.

Otherwise, those operations make our server busy and can increase the bill.

Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. ~ Tim Berners-Lee

Setting up the Django Back-end

Step-1: Create a Django project from scratch

Let’s create a virtual environment fora clean setup.

This virtual environment will be an active environment for all three articles.

python3 -m venv tutorial-env

# activate
source ./tutorial-env/bin/activate

Install Django and dependencies

# install our dependencies
pip install ipython django django_extensions django-cors-headers "graphene-django>=2.0"

#create a django project
django-admin startproject djangoproject

# change directory
cd djangoproject

# create templates directory
mkdir templates

# create static folder
mkdir static

# create utils folder for initial data
mkdir utils

Step - 2: Configuring and running

Update your ****'djangoproject/djangoproject/settings.py’ file. Extra settings are labeled as ’New …’.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    "django_extensions",# New! (useful extension)
    'graphene_django',  # New! (for graphql communication)
    'corsheaders',      # New! (for cors request in dev env)
]

# New (for improved interactive shell)
SHELL_PLUS = "ipython"

# New (it allows webpack development server to make cross origin request)
CORS_ORIGIN_WHITELIST = (
    '',
)

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware', # New Add this
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': (os.path.join(BASE_DIR, 'templates'),), # New
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

#New 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Before starting our project, we should first make database migration. After, we will run our server and will see that is working.

# create migration for django-orm
python manage.py migrate

Now, if everything goes well, Django server will start. You can open your browser and check the address 127.0.0.1:8000 You will see a screen like that:

Step-3: Creating a movie app

We will create a movie model with basic fields that a movie should have.

Before that, we should give some information about the field choices.

Why there is a URL field for poster rather than image field?

Because serving static files in production is not recommended, we use only the URL field. Fetching the image from remote and then saving it to our production storage is a topic of another post.

Because of this, we will save only the poster’s URL, not the poster’s itself as an image file. Also, sending static files like images is not a good approach.

We will send the exact URL of an image to the user. Then, the user’s browser fetches the image from this.

What is a slug and why it should be unique?

Let me explain with an example: I published the original article on cbsofyalioglu[com]/post/django-and-modern-js-libraries-backend

The last part of the URL, django-and-modern-js-libraries-backend, is the slug of the post and also it is an identifier that makes the URL distinctive from other post pages.

In the GraphQL part of the tutorial, you will see that we will use this slug as a query parameter meaning that we will do database queries according to slug. Therefore, it should be unique.

We can also choose another identifier as the URL identifier, but it’s clear that the URL will not be a human-readable address.

Search engine indexing and ranking is a vital part of any website targeting new users. Readable URL addresses’ are good for users themselves and also suggested by search engine guides. Also, Google webmaster guidelines recommend using clean and concise URL structures.

Let’s make our model and define its properties and methods. In the next step, we will populate our database with initial records. Therefore, I added a class method responsible for the database population.

Let’s create a Django app. This app will include our model. The database tables will be done according to this. Also, API requests will be based on this.

# create new Django app
python manage.py startapp items

Update settings .py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    "django_extensions",
    'graphene_django', 
    'corsheaders',
    "items"             # New! (make our app will active)
]

Open ’djangoproject/items/models.py’ file and copy the below code.

# items.models

from django.db import models

class  Movie(models.Model):

	id  = models.IntegerField(primary_key=True)
	name = models.CharField(max_length=100)
	year = models.IntegerField(null=True)
	summary = models.TextField(max_length=5000,null=True)
	poster_url = models.URLField(blank=True, null=True)
	slug = models.SlugField(max_length=50, null=True,blank  =True, unique=True)
	# order items in descending order
	class  Meta:
		ordering = ["-year"]

	# the method which defines string output of class
	def  __str__(self):
		return  self.name

	# the method which loads initial data
	@classmethod
	def  import_records(cls, record_list):
		for record in record_list:
			# create record if id is not exist
			if  not  cls.objects.filter(id=record.get("id")).exists():
				new_movie =  cls.objects.create(**record)
			else:
				print(f"Id:{record.get('id')} is already exist.")
		print("Import operation done successfully")

# make database migrations
python manage.py makemigrations
python manage.py migrate

Step-4: Populating database with initial data

There is no movie record currently in our database. We will provide a small initial data to create some movie records. All the data is provided by the community built The Movie Database. We will use those records in our app.

First, create an "initial_data.py" file in "djangoproject/utils" folder. After, you can copy and paste the below data to this new file.

initial_data = [{
    'id': 503919,
    'name': 'The Lighthouse',
    'year': 2019,
    'summary': 'The hypnotic and hallucinatory tale of two lighthouse keepers on a remote and mysterious New England island in the 1890s.',
    'slug': 'the-lighthouse-2019',
    'poster_url': ''
    },{
    'id': 475557,
    'name': 'Joker',
    'year': 2019,
    'summary': 'During the 1980s, a failed stand-up comedian is driven insane and turns to a life of crime and chaos in Gotham City while becoming an infamous psychopathic crime figure.',
    'slug': 'joker-2019',
    'poster_url': ''
    },{
    'id': 530385,
    'name': 'Midsommar',
    'year': 2019,
    'summary': "A couple travels to Sweden to visit a rural hometown's fabled mid-summer festival. What begins as an idyllic retreat quickly devolves into an increasingly violent and bizarre competition at the hands of a pagan cult.",
    'slug': 'midsommar-2019',
    'poster_url': ''
  },{
    'id': 531428,
    'name': 'Portrait of a Lady on Fire',
    'year': 2019,
    'summary': 'On an isolated island in Bretagne at the end of the eighteenth century, a female painter is obliged to paint a wedding portrait of a young woman.',
    'slug': 'portrait-of-a-lady-on-fire-2019',
    'poster_url': ''
  }]

Now, we will import and create new records at the database level. Normally we should have open Django shell. However, shell_plus command which is provided by django_extensions is more functional, so we will use this. It automatically imports all apps we created.

# open interactive shell
python manage.py shell_plus

# let's check database and verify it's empty
Movie.objects.all()
# prints: 

# import the records which we took it from github repo
from utils.initial_data import initial_data

# create records in the database
Movie.import_records(initial_data)

# prints 'Import operation done successfully'

# query database and verify it is not empty
Movie.objects.all()

Our model and database are ready. You can close the shell with quit command.

The next section will be creating a GraphQL API.

Setting up GraphQL API

In this section, we will make our app’s API part with Graphene which is a GraphQL framework implementation of Python.

What we do in this section is:

Creating another Django app: We will put all API configurations in there.
Creating an API Schema that has three parts: API-model, Resolvers, and Queries.
Creating a URL endpoint: The client-side application will request all information to this URL address.

Step 1 - Creating another Django app for API configurations

Actually, there is not any obligation to make another app because this app will not create or update any database table. However, to put all API-related configurations in one place, I chose this way.

Let’s create the second backend app. The name of the app should not have to be ‘gql’, but if you set another name, you should also change the name of the schema in settings .py later.

Open your terminal at the root level of your project.

# create app with the name gql
python manage.py startapp gql

# change directory
cd gql

# create schema.py file
touch schema.py

Step 2 - Creating an API Schema: API-model, Queries and Resolvers

API-schema will have three parts considering the scope of the article. Those are as follows:

API-Model-Type: A class that is a mapped version of the movie model. You can send responses based on this if the response is not a primitive type.
Queries: The client-side app will use these queries for distinct requests.
Resolvers: Those are response functions of fields. When the client-side request matched with a query, the resolvers come into play and make all the logical parts, then send information back to the client.

A ) API-Model-Type and Resolvers

A class which is a mapped version of an existing Django model. It is the intermediary layer between the Django model (or database) and API response. The fields of ModelType will be the same fields of the corresponding model. We can also create custom fields that do not belong to the corresponding model.

You can check other scalar types from the Graphene Python documentation…

We will step by step write the schema .py file. You can copy and paste it.

You can check other scalar types from the Graphene Python documentations…

We will step by step write the schema .py file. You can copy and paste it.

import graphene
from items.models import Movie
from graphene_django.types import DjangoObjectType

# api-movie-model
class MovieType(DjangoObjectType):
    id = graphene.Int()
    name = graphene.String()
    year = graphene.Int()
    summary = graphene.String()
    poster_url = graphene.String()
    slug = graphene.String()
    
    # define which model will be the base
    class Meta:
        model = Movie
        
    # 'self' corresponds to the item of Django model 
    # like The Lighthouse or Joker
    def resolve_id(self, info):
        return self.id
    
    def resolve_name(self, info):
        return self.name

    def resolve_year(self, info):
        return self.year

    def resolve_summary(self, info):
        return self.summary

    def resolve_poster_url(self, info):
        return self.poster_url

    def resolve_slug(self, info):
        return self.slug

Let me explain the above code.

The 'MovieType’ class is a mapped version of Movie model. You may notice that all the fields are the same. We defined the base model in class Meta, so the movie model will be the base model.

It is important to say that resolver names are written in snake case like ‘resolve_poster_url’. However, when we write client-side queries, those will be pascal case such as ‘posterUrl’. You see that later.

B ) Queries and Resolvers

The client-side app will use these queries for distinct requests. We will also write client-side queries on its part. A client-side query should match with the server-side query. Therefore, this part also defines the allowable requests of the frontend part.

For the sake of simplicity, we will define only two queries.

The movie_list query (resolve_movie_list) returns to all the movies in the database
The movie query (resolve_movie) returns only specific movie if the parameter (slug) is matched.

Let add this code below MovieType class.

class Query(graphene.ObjectType):
    movie_list = graphene.List(MovieType)
    movie = graphene.Field(MovieType, slug=graphene.String())

    def resolve_movie_list(self, info, *_):
        # for large lists only query what you need
        return Movie.objects.all().only("name", "poster_url", "slug")
    
    def resolve_movie(self, info, slug):
        movie_queryset = Movie.objects.filter(slug=slug)
        if movie_queryset.exists():
            return movie_queryset.first()

schema = graphene.Schema(query=Query)

In the last row, you will see a schema object. This is the root node of the API. We should tell the Django server to use this as our API schema. To do so, update the settings. py.

# djangoproject/djangoproject/settings.py

# New - Add this part
GRAPHENE= {'SCHEMA': 'gql.schema.schema'}

# MIDDLEWARE = [..]

Step 3 - Create URL endpoints

In REST API, we define different URL Endpoints for different requests. One of the good part of GraphQL is that we will only define one endpoint. All the requests will be done through that.

Copy the below code and paste it to djangoproject/djangoproject/urls .py file.

from django.contrib import admin
from django.urls import path
from graphene_django.views import GraphQLView
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),

    # apiclient on client-side will request this adress later
    path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),

    
    # index.html file will be our root template. When a user opens our webste,
    # this file will be sent by server at first. After then, api requests
    # will directed above address.

    # (it points to ~/Blog/djr/templates/index.html)
    # (currently there is no file, webpack production bundle will come here )
    path("", TemplateView.as_view(template_name="index.html")),
    ]

You noticed that we set graphiql=True. This is GraphQL interactive panel. We can make a query like a client app through this panel. You will also see the details of all queries.

Now, please run the server in the root folder : ‘djangoproject/’

python [manage.py]() runserver

Open 127.0.0.1:8000/graphql address from your browser. We will query the movie with specific identifier (slug). On the left panel, paste this and press the Execute Query button.

Please note that, we request fields with pascalCase. (posterUrl)

query {

	movie(slug:"the-lighthouse-2019"){

		id, name, posterUrl

	}

}

and the response will be in JSON format like this:

{

"data": {

	"movie": {

		"id": 503919,

		"name": "The Lighthouse",

		"posterUrl": ""

		}

	}

}

Our API is ready to respond to the requests. This part of the tutorial is finished.

Now, we will make two different client-side apps. Please choose one of them to continue.

Django and Modern JS Libraries - React

React part of Django and Modern JS Frameworks tutorial series. We will integrate them from scratch.

Can Burak Sofyalioglucbsofyalioglu

Django and Modern JS Libraries - Svelte

Svelte part of Django and Modern JS Frameworks tutorial series. In this post you will integrate Django and Svelte framework.

Can Burak Sofyalioglucbsofyalioglu

Kendi Web Sitenizi Hızlıca Kurabileceğiniz Platformlar

Can Burak Sofyalioglu — Sat, 11 Jul 2020 06:09:00 GMT

Web sitesi kurma aşamasının önemli adımlarından biri bu web sitenin hangi platform üzerinde kurulacağıdır. Eğer doğru seçim için yeterince düşünülmezse, daha sonra çıkacak problemlerin çözümü için çok daha fazla zaman harcanabilir.

Web sitenizi kurabileceğiniz platformlar

Artık bir çok platform konuya çok uzak insanlara bile kolay arayüzleri sunarak insanların kendi kişisel sitelerini oluşturmalarına izin vermekte.

Maliyetinden, web geliştirme konusundaki bilginize, ne ölçüde özelleştirme yapacağınıza, e-ticaret hizmetlerini kullanıp ürün satıp satmayacağınıza kadar bir çok değişken platform seçiminde önemli rol oynamakta.

Create a website for free. Introducing Tilda Publishing website builder

Create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day. No knowledge of coding required.

1 - Tilda

Tilda hazır web blokları ve şablonlarıyla ön plana çıkan bir platform. Yalnızca bireysel kullanıcıları değil aynı zamanda freelance/serbest çalışan veya web tasarım ajanslarını da hedefliyor Tilda.

E-ticaret yaparak ürün ve hizmetlerini satmak isteyenler için $10'lık paket yeterli görünüyor.

Tilda ödeme sağlayıcıları olarak PayPal, 2Checkout, Stripe, Cloudpayments, Kredi ve banka havalesi gibi seçenekleri destekliyor.

Artıları:

Nispeten güçlü görsel editörü.
Basit bir Kullanıcı Yönetim Paneli (CRM) uygulamasını ücretsiz kullanabiliyorsunuz.
Kod export etmeye izin veriyor (Üst paket)

Eksileri:

Hazır tasarlanmış blokların haricinde tasarım yapmak biraz zor.
Müşteri hizmetlerinin kalitesinin kötü olduğuna dair yorumlar var.

Big Cartel - Easy Online Stores for Artists and Makers

Build a unique online store, sell your work, and run a creative business. Perfect for clothing designers, bands, jewelry makers, crafters, and other artists.

Big Cartel

2 - Big Cartel

Big Cartel daha çok sanatçı ve özel üretim yapan üreticileri hedeflemekte olan bir e-ticaret altyapı sitesi.

İnceleyince fark edeceğiniz üzere şirin bir web sayfasına da sahip.

Eğer e-ticaret yapmayı planlıyorsanız Big Cartel sizin için uygun bir platform olabilir.

Big Cartel'in ücretli paketleri ise $9.99, $19.99 ve $29.99 olarak sıralanmakta.

Ödeme sağlayıcıları arasında PayPal, Stripe, Venmo ve Apple Pay bulunmakta.

Artıları:

Big Cartel'in en göze çarpan özelliği ücretsiz paketinde 5 ürüne kadar e-ticaret yapmanıza imkan vermesi.
Yeni başlayanlar için kolay ve basit arayüz.

Eksileri:

Hazır temaların dışında özelleştirme imkanı çok kısıtlı.

Free Website Builder | Create a Website With Ucraft | Ucraft

Create a professional website, blog or online store with Ucraft website builder: 80+ templates, 24/7 customer support, free domain hosting and more.

Ucraft

3 - UCraft

Rusya orijinli olan bu platform, Amerika'da dahil olmak üzere 3 ülkede ofisi bulunmakta.

UCraft ayrıca e-ticaret hizmeti de veriyor.

Diğer örneklere kıyasla daha az bilinen bir platform olmasına rağmen yeni başlayanlar için uygun alternatiflerden biridir diyebiliriz.

En düşük ücretli paket olan $10'lık abonelikte ise e-ticaret servisini kullanabiliyorsunuz.

E-ticaret servisini kullanmayı düşünenler için online ödeme sağlayıcıları arasında şu firmalar bulunmaktadır: PayPal, Stripe, Square, 2Checkout.

Artıları:

Ücretsiz web sitesi paketi 15 adet sayfa yapmanıza olanak verirken, özel alan adınızı bağlamanıza da izin veriyor.
Ayrıca 24 saat İngilizce canlı yardım alabiliyorsunuz.
Stock fotoğraflara hızlı erişim sağlıyor.

Eksileri:

Telefon ile destek yok.
Ayrı bir mail hizmeti vermiyor.
Mobil için özelleştirme imkanı verse de biraz zorlayıcı olabiliyor.

Build a Website – Website Builder – Squarespace

Squarespace is the all-in-one solution for anyone looking to create a beautiful website. Domains, eCommerce, hosting, galleries, analytics, and 24/7 support all included.

Squarespace

4 - SquareSpace

New York merkezli Square Space bu listenin bir diğer popüler we sitesi kurma platformlarından.

E-ticaret sitesi kurmak isteyenler, kreatif kişiler ve firmalar için olası çözümlerden biri.

14 günlük deneme sürüm sonrası $12'lık paket gerekiyor.

Artıları:

Yeni başlayanlar için kolay bir kullanıcı arayüzüne sahip.
Tek bir site için birden fazla şablon üzerinde çalışma imkanı veriyor.
Kod ile özelleştirme imkanı da sunuyor.

Eksileri:

Ücretsiz sürümü mevcut değil. Yalnızca 14 günlük deneme sürümü var.
Hazır şablonların izin verdiği ölçüde özelleştirme

Responsive web design tool, CMS, and hosting platform | Webflow

Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business.

Webflow logo

5 - Webflow

California merkezli, YC startup'ı olan Webflow ileri düzey bir editöre sahip.

Bazı platformlar teknik alt yapıları gereği kullanıcılarına kendi tasarım metotlarını dayatma gereği duyuyorlar.

Hatta web tasarlamanın ruhuna aykırı olanları da gördüm.

Webflow bu konuda web tasarlamaya en yakın editöre sahip.

Eğer bir geliştiriciyseniz hızlı bir şekilde editöre uyum sağlamanız kaçınılmaz.

Webflow fiyatlandırmayı 2 genel kategori üzerinden yapıyor.

Bu yazının konusu olan hosting bu genel kategorilerden biri. $12'lık paket ile kendi alan adınızı bağlayabilirsiniz.

E-ticaret'e olanak veren paket ise $29. Bir diğer kategori ise "Account Plan" adı altında sunulan ve daha çok freelancer, geliştiriciler ve ajanslar için uygun olan kategori.

Bu kategori daha çok aynı anda kaç proje barındırabileceğiniz ve yatığınız projelerin kodlarını dışarı çıkartmak için geçerli.

Bu kategori altındaki en düşük paket ise yıllık ödeme yapıldığında $16. Ajanslar ve serbest çalışanlar için müşterilerine hizmet verebilecekleri platformlardan biri.

Eğer e-ticaret sitesi açmayı planlıyorsanız şu an için Stripe ve PayPal üzerinden ödeme kabul etmekte.

Artıları:

Ulta-gelişmiş editörü ile tasarlayabilecklerinizin sınırı çok az.
Güçlü animasyon ve etkileşim editörü.
Kod export (Ek paket)
Nispeten zengin 3.taraf entegrasyonları.
Dahili Lottie animasyon desteği.

Eksileri:

Yeni başlayanlar için alışması zaman alabilen editör.
Az sayıda ücretsiz resmi şablon sayısı
Canlı destek imkanı yok.
Kullanıcı isteklerini fazla önemsemiyorlar.
Yeterli gibi gözükse de trafik ve form işlemlerinde limit var (Aylık 100000 ziyaret ve 1000 form gibi)

You don’t need to be a coder

Bubble introduces a new way to build a web application. It’s a no-code, point-and-click programming tool, entirely without code. Bubble hosts all applications on its cloud platform.

Bubble

6 - Bubble

Bubble yalnızca web siteleri değil aynı zamanda uygulama geliştirmenize de yardımcı olan gelişmiş platformlardan biri. Bubble ajanslar veya serbest çalışanlar için de müşterilerine web sitesi tasarlayıp sunabilecekleri platformlardan biri. E-ticaret için Stripe ve Braintree ile entegrasyon sağlıyor.

Artıları:

Ultra-gelişmiş tasarım editörü.
Kullanım limitleri dayatmasına sahip değil.

Eksileri:

Aylık $25 ile nispeten yüksek fiyata sahip.
Yeni başlayanlar için ara yüzüne alışmak zaman alabilir.

Free Website Builder | Create a Free Website | Wix.com

Create a free website with Wix.com. Choose a stunning template and customize anything with the Wix website builder—no coding skills needed. Create yours today!

wix.com

7 - Wix

Wix bu platformların en eskilerinden diyebiliriz.

Dünya çapında 110 milyondan fazla kişiye hizmet veriyor.

Türkiye piyasasında da resmi olarak bulunuyor, bu yüzden Türkçe destek ve paketleri mevcut.

Wix neredeyse tüm kullanıcı segmentleri için en güçlü adaylardan biri. Ajanslar ve serbest çalışanlar için müşterilerine hizmet verebilecekleri platformlardan da biri.

Artıları:

Uygun fiyat (26TL/Ay). İndirim zamanları 13 TL/Ay .
500'den fazla hazır şablona sahip.
Yapay zeka destekli editörünün yanında normal editör ve EditorX dahil 3 editöre sahip.
Corvid platformu ile uygulama geliştirmek isteyenler veya kod ile özelleştirme yapmak isteyenlere de hitap ediyor.
Türkçe dil ve yardım desteğine sahip.
Partner programına ve güçlü bir topluluğa sahip. Kullanıcı isteklerini fazlaca önemsiyorlar.
Stock fotoğraflara hızlı erişim sağlıyor.

Eksileri:

Tasarım için dayatılan metotlar web geliştiriciler için biraz zorlayıcı olabiliyor.
Bazı API'ları tam özellik sağlamıyor. (Blog API ile yalnızca plain text alınabiliyor)
Editörler arası tasarım geçişleri şu an mevcut değil.
EditorX henüz beta aşamada.
Blog içeriklerini dışarı çıkartmaya izin vermiyor.

Karşılaştırmalı Tablo

Web sitesi oluşturma platformlarını incelediğim bu yazıyı zaman içerisinde kayda değer veya potansiyel taşıdığına inandığım diğer örnekler ile güncelleyeceğim. E-ticaret hizmetlerinizde danışmanlık için iletişime geçmekten çekinmeyiniz.

	Wix	SquareSpace	WebFlow	UCraft	Tilda
Ücretsiz Paket	✔	14 Günlük Deneme	✔	✔	✔
E-Ticaret Paketi	50 TL/Ay	18$ - 26$	29$ - 42$	21$ - 28$	20$ - 25$
Özel Alan Adı Paketi	26 TL/Ay	12$ - 16$	12$ - 15$	Ücretsiz	10$ - 15$
Ödeme Sağlayıcı	Kredi Kartı, 3.taraflar, PayPal, Manuel	Stripe, PayPal, Square POS	Stripe, PayPal	50'den fazla	2Checkout, Paypal or Stripe
Tam Kod Export	✖	✖	Ekstra 16$ - 24$	✖	20$ - 25$
Blog	✔	✔	16$ - 24$	10$ - 13$	✔
Mail Bülteni Oluşturabilme	✔	✔	✖	✖	✔
Kullanıcı Üyelik Sistemi	✔	✔	10$ - 13$	✖	✔
Yardım/Destek	Eposta, Telefon	Canlı, Eposta	Canlı, Eposta	Canlı, Eposta	Eposta