Dijital Not tutma uygulamları pazar büyüklüğünün 2026 yılında 1.35 Milyar $ olacağı ön görülüyor[1] ve her gün neredeyse yeni bir uygulama çıkıyor.

Bu yazıda sıradışı olduğu kadar pek de maharetli bir not alma uygulaması olan TiddlyWiki'den bahsedeceğim. Herkese hitap etmeyen ama hedef kitlesine girdiğinizde de çıkması kolay olmayacak bir not alma uygulaması bu.

2004 yılında ilk defa Jeremy Ruston tarafından açık-kaynak olarak dağıtılıyor. Yalnızca tek bir HTML dosyasından ibaret.

Tek bir dosya oluşu sizi yanılgıya düşürmesin. TiddlyWiki aslında kişisel bilgi yönetiminizi tamamen üzerine kurabileceğiniz, kompleks bilgi (JSON, CSV) yapılarını kullanabileceğiniz çok gelişmiş bir modüler not tutma uygulaması.

Asıl mahareti meta-programlama olan bu yazılım ile bizzat yazılımın kendisini ciddi ölçüde değiştirmeniz mümkün.

😥TiddlyWiki'nin Olumsuz Özellikleri:

• Herhangi bir program bu seviyede über-yetenekler barındırdığında genelde kullanımı kolay olmuyor. TW'de başlangıç açısından ciddi zorluklar barındırmakta. Yeni kullanıcılar ve teknik olmayan kişiler için ciddi zorluklar barındırabiliyor.
• Hiç özelleştirilmemiş TiddyWiki dosyası görsel anlamda hiç de çekici değil. Tasarımı fonksiyona tercih eden kişiler için ilk başta tercih sebebi olmayacaktır.
• TiddlyWiki'nin mimarisinden kaynaklanan bir sorunu var: Bir web sayfası olarak çalıştığı için yaptığınız değişiklikleri kaydederken her defasında dosyanın bulunduğu konuma seçip kaydettikten sonra tarayıcı ekranınızı tekrar yenilemeniz gerekiyor. Bunun için alternatif çözümler bulunmuş olsa da hala tüm sistemler için geçerli olabilecek bir çözüm mevcut değil. Mobil cihazınızda kullandığınız yöntem masaüstünüzde geçerli olmayacaktır. Ancak her ortam için de çözüm var diyebilirim.

😍TiddlyWiki'nin Olumlu Özellikleri

• Açık kaynak ve ücretsiz olması
• Büyük bir kullanıcı topluluğuna sahip olması: Yıllardır bu programı kullanan ciddi bir profesyonel-teknik kullanıcı grubu var. Karşılaştığınız problemler konusunda yardımcı olacak çok fazla kişiye ulaşmanız çok kolay.
• Özelleştirmeler konusunda çok fazla alternatife sahipsiniz. Kullanıcı toplulukları çok fazla tema, makro ve plugini bir arada toplamaya çalışıyorlar. Bu kaynakları yazının sonunda paylaşacağım.
• Tek bir dosya olduğundan taşınması ve transferi çok kolay oluyor.
• GitHub'ınız ile senkronize edebilirsiniz.

Bir Not Alma Uygulamasından Çok Daha Fazlası

Bu program için not alma uygulaması demek pek ala onun özelliklerini göz ardı etmek demek aslında. Çünkü TiddlyWiki'yi en bilinen şekillerde:

• Not-tutma uygulaması
• Kişisel Wiki
• Yazı arşivi / bilgi-tabanı (knowledgebase)
• Database
• Sunum arşivi
• Kişisel blog gibi amaçlarla kullanabilirsiniz

Örneğin ben bir Digital Garden olarak kullanıyorum. Eğer TiddlyWiki'nin Drift temasıyla yapılmış olan  Digital Garden'ımı incelemek isterseniz buraya tıklayabilirsiniz.

TiddlyWiki'ye Giriş

Öncelikle uygulamamızın bulunduğu sayfanın linkini paylaşayım. Pek de göze hitap etmediğini hemen fark edeceksiniz.

TiddlyWiki — a non-linear personal web notebook

TiddlyWiki

1) Bilgisayarımıza İndirme

Açılış sayfasında biraz aşağıya indiğinizde "Getting Started" başlığının altında farklı platformlar için seçeneklerin bulunduğu kısmı bulacaksınız. Biz en basit hali olan boş TW dosyasını indireceğiz.

Mavi kutu içerisinde yer alan "Download Empty" yazılı butona tıklayarak boş TiddlyWiki dosyasını bilgisayarınızda istediğiniz klasöre indirin.

2) İlk İzlenim

İndirdiğiniz empty.html dosyasına çift tıklayarak tarayıcınızla açabilirsiniz. Eminim ki bir çok uygulamada yaşadığınız o "sihirli an"lardan biri değil bu. Bizi karşılayan ekran içi neredeyse boş ve sizin doldurmanızı bekleyen bir TiddlyWiki ekranı.

(Devamı gelecek - Bundan sonraki kısımda TiddlyWiki'yi nasıl kullanacağınızdan bahsedeceğim.)  

Referanslar:

• Global Note Taking Management Software Market By Type, By Application, By Geographic Scope, Competitive Landscape And Forecast. (kaynak)

Bu yazıda süper fonksiyonel, üretkenliğinizi ciddi ölçüde arttıracak ve size yeni bir-aradalıklar sunabilecek, aynı zamanda Zettelkasten metodu ile uyumlu en iyi not alma uygulamalarından bahsedeceğim.

Hatırlamak maksadıyla: geçen yazıda Zettelkasten metodundan ve bu metodu oluşturan temel özelliklerden bahsetmiştim. Ayrıca Alman sosyolog Luhmann'ın bu yöntem ile hayatını nasıl şaşılacak ölçüde üretken geçirdiğini de sizlerle paylaşmıştım. Yazıyı okumak isteyenler buradan Zettelkasten Metodu ile ilgili yazıya ulaşabilir.

Bu yazıda ise Zettelkasten metodunu kullanabileceğiniz en yetenekli not alma uygulamalarından bahsedeceğim. Bu alanda arşivim yeterince geniştir ve hepsini burada zaman içerisinde paylaşacağım.

1) En İnovatif Not Alma Uygulaması: Notion

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

Notion ilk çıktığında Evernote'a alternatif olarak adından bahsetmişti, sunduğu özellikler ile bugün web sitesi bile yapabileceğiniz bir uygulamaya dönüştü. Notion ile nasıl ücretsiz web sitesi yapabileceğinize buradaki yazıdan bakabilirsiniz.

Daha geçen hafta (2020 Eylül'ünün son günleri) Notion uygulaması backlink özelliğini tanıttı.

2) En İyi (Denilen) Not Alma Uygulaması: Roam Research

Roam Research – A note taking tool for networked thought.

As easy to use as a word document or bulleted list, and as powerful for finding, collecting, and connecting related ideas as a graph database. Collaborate with others in real time, or store all your data locally.

Roam Research

Roam bugün itibariyle piyasadaki en iyi not alma uygulamasıdır deniliyor. Ancak bu tabi ki mümkün değil. Piyasada o kadar fazla not alma uygulaması ve farklı özellikler mevcut ki, her bütçeye, zevke ve fonksiyona göre ayrı bir uygulama bulmanız kaçınılmaz. Daha önemlisi bunların hepsinin bir arada olabileceği bir uygulama çok mümkün gözükmüyor.

Neyse, Roam'a geri dönelim. Block seviyesinde backlinklere izin vermesi ve graph modeli ile notlarınızı size göstermesi gibi daha bir çok üretkenlik özelliğine sahip bu uygulama aylık 15$ gibi nispeten pahalı bir fiyat politikasına sahip.

Akademik amaçlar için burs imkanı da sunuyor diyerek notumuzu da düşelim.

3) En İyi Offline Not Uygulması: Obsidian

Obsidian: A knowledge base that works on local Markdown files.

Obsidian – A knowledge base that works on local Markdown files.

PC'nize indirip kurabileceğiniz bu çevrimdışı yazılım markdown formatında notlar almanızı, backlinkler oluşturmanızı ve notlarınızı daha önce görmediğiniz bir aradalık ile size sunuyor.

Uygulama kişisel kullanımınız için ücretsiz.

4) En Modüler Not Tutma/ Kişisel Wiki Uygulaması: TiddlyWiki​

Link: TiddlyWiki

​TiddlyWiki çok uzun süredir bizlerle beraber olan sıradışı bir knowledgebase/kişisel-wiki uygulaması. Sıradışılığı şuradan geliyor: Tüm program yalnızca bir HTML dosyasından ibaret. Tek bir dosyadan oluştuğu için basit bir uygulama olduğunu düşünecekseniz, şimdiden söyleyebilirim ki büyük bir yanılgıya düşersiniz. Hiç de başlangıç-tipi kullanıcı dostu olmayan bir arayüze sahip. Daha detaylı bilgi için incelemesini yaptığım Not Alma Uygulaması:TiddlyWiki yazısına bakabilirsiniz.

Ancak, muhtemelen piyasadaki tüm uygulamalardan çok daha yetenekli bir uygulama diyebilirim. Özellikle açık kaynak olması, uzun yıllardır biriken ciddi bir komüniteye sahip oluşu onu eşsiz bir yere koyuyor. Çok fazla varyasyona sahip bu uygulama için önerebileceğim bir kaç tanesi şunlar:

• Tiddly Roam: Kısmi Roam özellikleri ile donatılmış ve graph map özellikli olan versiyon.
• Tiddly Research: Kısmi Roam özellikleri ile donatılmış bir diğer versiyon.
• Tiddly Drift: Pek yetenekli bir başka versiyon.

Ben en son Drift versiyonunu kişisel wiki sayfamda kullanıyorum. Kendi digital-garden'ımdan bir ekran görüntüsü paylaşayım.



5) GitHub Senkronize bir Roam Alternatifi: Logseq

A local-first knowledge base.

A local-first knowledge base which can be synced using Git.

logseq



Online olarak kullanabileceğiniz Logseq'i kullanırken fark edeceksiniz ki Roam'a çok benzeyen bir arayüzü ve kullanımı var. Outline tipi notlar alıp, graph map üzerinde notlarınız arasındaki ilişkileri görebileceğiniz bu uygulama şu an ücretsiz.  

6) Markdown Notlarınız için Online Bir Uygulama: Relanote

Relanote - Connect your notes into a knowledge graph

A note-taking tool to help you connect the dots. Wiki or classical hierarchy, Relanote adapts to your creative workflow

Relanote



Obsidian ile benzer özellikler taşıyan RelaNote henüz beta aşamada ve makul bir ücretsiz plana sahip.

7) Supernotes

Supernotes | The best collaborative note-taking app

The fastest way to take notes and collaborate with friends. Create notecards with Markdown, LaTeX, images, emojis and more. Get started for free!

Daniel D. - PhD StudentSupernotes | The best collaborative note-taking app



Güzel bir arayüze sahip Supernotes. Mini kartlarınıza aldığınız notları tag'lemenize ve özelleştirmenize izin veriyor.

8) Amplenote

Amplenote





Amplenote da Zettelkasten metodunu uygulayabileceğiniz online uygulamalardan biri.

(Devamı Gelecek)

---

Zettelkasten yazı serisini de paylaştığım mail bültenime abone olmak isterseniz aşağıya eposta adresinizi bırakabilirsiniz.

Uygulamalar Bülteni

Yazılım, tasarım ve üretkenlik uygulamaları önerdiğim eposta bültenine kayıt olmak için eposta adresinizi bırakabilirsiniz.

Kaydol

We respect your privacy. Unsubscribe at any time.

Built with ConvertKit

Bu yazıda üretkenliğinizi ciddi şekilde arttıracak belkide en verimli not tutma tekniği olan Zettelkasten'den bahsedip, bu yöntemi dijital ortamda uygulayabileceğiniz uygulamaların listesini vereceğim.

Her taraftan bilgi bombardımanına tutulmaya pek ala alıştık artık. Akıllı telefonlar ve sosyal medya uygulamaları derken artık çok daha niş içerikler tüketmemize olanak veren ve bu dar bağlamın da dışına çıkmamamız için de yeterli içeriği bize sunabilecek uygulamalar da fazlasıyla mevcut.  (Flipboard, Medium, Feedly, Paper.li gibi)

Hatta çok yorulmadan siz konu başlığını yazıyorsunuz, yapay-zeka size onunla ilgili en iyi içerikleri getiriyor. (Bakınız: Keen)

Kısacası içeriğe dair sıkıntımız yok. Fazlasıyla içeriğimiz mevcut. Hatta bu fazlalık ciddi problemler yaratmaya başladı ve işin kötüsü bu durumu da kabullendik sayılır.

Zaten Allah'a emanet olan Twitter beğenileri ile diğer platformlardaki kaydettiklerimi birleştirmeye kalkmak zaten zulüm.

Sadece sosyal medyadan ibaret değil ki mevzu. Çalışma alanına dair faydalı bilgileri kaydedeceksin, yeni bilgiler gelince eski olanı tedavülden kaldıracaksın.

Bir de bunları el altında tutacaksın ki her istediğinde hızlı bir şekilde bulabilesin.

Bir de olursa bunlar arasında ilişki kuracaksın ....

Adına ister information-overload ister başka şey deseniz de artık kullanacağımız bilginin yönetimi başlı başına bir iş.  

Çözüm olarak kişisel wiki uygulamalarına veya knowledgebase'lere bakılabilir. Güzel uygulamalarla da karşılaşmanız çok olası.

(Bir ara sevdiğim knowledgebase'leri de sizinle paylaşacağım. Şu an sadece TiddlyWiki versiyonu olan Drift kullanıyorum. Yazının sonunda bulabilirsiniz)  

Zettelkasten Not Tutma Tekniği

"Kutudaki kartlar" anlamına gelen "Zettelkasten" çok eskilerden beri kullanılan bir yöntem olmasına rağmen popülerliğini Alman sosyolog Niklas Luhmann (1927-1998) tarafından fazlaca kullanılmasıyla kazanmış. Alman Sosyolog hayatı boyunca 90.000'den fazla indekslenmiş kart kullanarak 400'e yakın makale ve 50'den fazla kitap yayımlamış. Bu rakamlara ulaşabilmenin ciddi bir üretkenlik gerektirdiği çok açık.

Bu yöntemi kullanarak not tutmak için yalnızca kağıt ve kalem yeterli (Bir de not alıyor olmanız 😇).

Günümüzde bilginin fazlasıyla dijitalde dolaştığını düşününce, bu yöntemi dijital uygulamalar üzerinde göstermek çok daha yararlı olacaktır.

Ancak İlk başta Luhmann'ın analog yönteminin önemli başlıklarından bahsetmemiz elzem.

♻️Atomik Notlar Almak

Luhmann atomik notlar alıyordu. Yani bir cümle ile bir paragraf arasında değişen (3-5 cümle diyelim) büyüklükteydi notları. Geriye dönüp baktığında okuması kolay olabilen, aynı zamanda çöpe atmaya kalktığında da maliyeti çok olmayacak notlar.

🧳Tek Başına Anlam İfade Edebilme

Not alırken o anki bağlamın fazla içinde kalan notlar almışızdır çoğumuz. Daha sonra dönüp baktığımızda aynı balamı bulamadığımızdan bu sorun yaratmıştır hep.

Zettelkasten'in belli başlı prensiplerinden biri de alınan notların tek başlarına anlam ifade edebilecek semantik zenginliğe sahip olması.

🔁 Çift-yönlü Bağlantılar (Bi-directional linking)

Zettelkasten metodunun ana hatlarından birisi çift-yönlü (bi-directional veya backlink) bağlantılar.  Bu bağlantıları kullanarak ilişkili notlarınızı hızlıca bulabiliyorsunuz.

Luhmann'ın not tutma tekniği tüm notların indekslenmesini içeriyordu. Böylece bir konuya ait 3. veya 4. notunu aldığında bu notun üzerinde hiyerarşiyi takip edebileceği indeks numaralarına sahipti. (Genel bir hiyerarşiden söz etmiyorum burada).

Notlar arasında bağlantı kurarken bu bağlantıların neden alındığı da belirtilmesi gereken şeylerden biri.

Bu bağlantı notları ise ancak ve ancak herkesin kendi anlam dünyası tarafından konulduğunda bir anlam ifade edebilecek. Bu yüzden kişlerin en çok zorlandıkları alanlardan birisi bu bağlantı notları.

Örneğin Notion uygulamasından backlinkler için örnek vermek gerekirse:

Kolayca Zettelkasten Not Tutma Tekniklerini Kullanabileceğiniz Uygulamalar

Sonraki yazıda Zettelkasten not alma teknkilerini kullanabileceğiniz uygulamaları bulacaksınız. Buyurunuz:

Süper Yetenekli Zettelkasten Not Alma Uygulamaları

Zettelkasten metodunu uygulayabileceğiniz ve süper yetenekli not-alma uygulamaları listesi.

Can Burak SofyaliogluDESIGN | DEVELOPMENT

Zettelkasten yazı serisini de paylaştığım mail bültenime abone olmak isterseniz sizi şöyle alalım:

Methods of communication

An article about Communication in HTML by Remy Sharp (2011).

Methods of communication | HTML5 Doctor

Remy SharpHTML5 Doctor Helping you implement HTML5 today



Deep Roots of JS Fatigue

An historical perspective to JS Fatigue.

The Deep Roots of Javascript Fatigue

The Segment team’s latest thinking on all things data, product, marketing, and growth.

Segment Blog

Metaprogramming with Proxies

by Dr. Axel Rauschmayer

Metaprogramming with Proxies • Deep JavaScript

Design Patterns in JavaScript

Design Patterns in JavaScript

Design patterns are documented solutions to commonly occurring problems in software engineering. Don’t bang your heads on problems someone else already solved.

Ankita MasandTelerik

JavaScript Visualized: The JavaScript Engine

It is a visual representation of  event loop, hoisting, scope etc..

🚀⚙️ JavaScript Visualized: the JavaScript Engine

JavaScript is cool (don’t @ me), but how can a machine actually understand the code you’ve written? A...

Lydia HallieDEV Community

Web Components Article Series

A comprehensive article series about web components  from Caleb Williams

An Introduction to Web Components | CSS-Tricks

Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what

Caleb WilliamsCSS-Tricks

Create Fully Reactive UI Framework with Vanilla JS

Create a fully Reactive UI Framework with JavaScript Proxies and Virtual DOM

Recently I got interested in the Reactive Programming world, especially in the MobX ecosystem. I really like the idea behind this framework: to be reactive in a transparent way. So I asked myself……

Francesco StrazzulloFlowing

Arama motoru optimizasyonu uzun vadeli dönüşleri olan kompleks bir süreçtir.

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.

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

Son

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.

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.

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:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

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

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ıda en iyi blog sitelerinin listesini bulacaksınız.

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ıda;

• popüler blog oluşturma platformlarından
• az bilinen mikro blog sitelerinden
• blog yazılarınızın ücretli üyelik üzerinden okunabilmesini sağlayan

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:

• 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.

Ç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

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.

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.

8 ) Wavium

Wavium | The Easiest Way to Start a Blog

Everything you need to create, grow, and monetize your blog is now in one spot. Get started in under 5 minutes.

The Easiest Way to Start a Blog

Wavium bu listedeki ilginç platformlardan biri. Wavium ile hem bloğunuzu oluşutup hem de eposta bülteni düzenleyebiliyorsunuz. Bu açıdan içerik üreticileri için ilgi çekici olabilir.

9) Substack

Substack

Substack makes it simple for a writer to start an email newsletter that makes money from subscriptions.

SubstackSubstack

Bu listenin olmazsa olmazlarından biri de Substack. Substack size ücretsiz blog hizmeti sunuyor. Bu platformun asıl olayı ise paywall ardında üretebileceğiniz içeriklere izin vermesi. Bu sayede içeriğinizin ister bir kısmını ister tamamını ücret karşılığında takipçilerinize sunabilmeniz. Substack ise bu ücretten yalnızca makul bir payı kendisine ayırıyor. İçerik üreticileri için vazgeçilmez blog sitelerinden biri bu anlamda.

10) Letterdrop

Letterdrop

Write. Grow. Earn

Logo text.svg

Letterdrop da Substack gibi yazılarınızı paywall ardına koymanıza izin veren daha çok yeni bir platform. Mail bülteni de oluşturmanıza olanak veren bu platform ücretsiz. Daha sonra sizin ücretli üyelikleriniz üzerinden %5'lik bir kesinti yapıyor

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

Collected Notes.

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

Imprint

Publishing for the rest of us

Imprint

Notepin

Extremely simple note taking + blogging | By @okozzie_

Notepin

About Svbtle

Svbtle, a publishing platform.

Svbtle

Not:

1. Ek olarak bu siteleri incelerken nesnelliği kaybetmemek adına uyguladığım testler hemen hemen tümünde aynı olacak şekilde yapıldı.
2. 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 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

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

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

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.

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.

Çok amaçlı üretkenlik uygulaması Notion ile ücretsiz bir web sitesi nasıl yapılır bu yazıda göstermeye çalışacağım. Yazının sonunda da hazır Notion şablonlarını bulabileceğiniz bir kaç web sitesinin linkini paylaş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:

1. Not Uygulaması
2. Blog Uygulaması
3. Bilgi Platformu (Wiki)
4. Proje Yönetim Aracı (Kanban, Checkbox, To-Do List vs.)
5. Database oluşturma (Henüz resmi bir API'si yok)
6. Ortak Çalışma Alanı
7. Markdown Editör
8. 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:

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.

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.

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.

Eğer Ad sunucuları çıkmamışsa kendimiz bir A kaydı oluşturmamız gerekecek. Bu kaydın Host kısmına @, Değer kısmına da 1.1.1.1 girmeliyiz.

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.

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.

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.

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

Notion Şablonları Bulabileceğiniz Kaynaklar

Ücretli ve ücretsiz Notion şablonları ve ilham verici kaynakları bulabileceğiniz platformlar:

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

Learn the secrets to Notion

Discover new, productive Notion templates from pros.

Notion Pages ⚡️

Notion Expert

Notion Expert is a hand curated directory of the best resources for Notion users.

NoCode Notion

Get the templates, tools and guides you need to build a micro-startup, entirely in Notion.

NoCode Notion

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- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh> | 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.

<!-- App.svelte -->
<script>
  import { Router, Link, Route } from "svelte-routing";
  import MovieList from "./MovieList.svelte";
  import MoviePage from "./MoviePage.svelte";

  export let url = "";
</script>

<Router url="{url}">
  <nav class="navbar">
    <Link to="/">Home</Link>
  </nav>
  <div class="main-container">
    <Route path="movie/:slug" component="{MoviePage}" />
    <Route path="/"><MovieList /></Route>
  </div>
</Router>

<style>
.navbar {
        background-color:rgba(0,0,0,0.6);
        display: flex;
        padding: 16px 64px;
        font-weight: bold;
        color:white;
    }
    .main-container {
        margin-top:32px;
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0, 0.15);
    }

</style>

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: '<http://127.0.0.1:8000/graphql>',
    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.

<script>
    import { Router, Link, Route } from "svelte-routing";
    import { get, MOVIE_QUERY, MOVIE_LIST_QUERY } from "./api.js";

	var movielist = get(MOVIE_LIST_QUERY);

</script>
<div class="wrapper"><!-- promise is pending -->
    {#await movielist}
        loading

	<!-- promise was fulfilled -->
    {:then response}
        {#if response.data.movieList.length > 0}
            {#each response.data.movieList as movie}
                <div class="card"><Link to={`/movie/${movie.slug}`}><img class="poster" alt={movie.name} src={movie.posterUrl} /><p class="movie-title">{movie.name}</p></Link></div>
            {/each}
        {/if}

    <!-- promise was rejected -->
    {:catch error}
        <p>Something went wrong: {error.message}</p>
    {/await}
</div>

<style>
	.wrapper {
        width:100%;
        height: auto;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card {
        box-sizing: border-box;
        position: relative;
        width:200px;
        height:auto;
        margin:16px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    }
    .poster {
        width:100%;
        height:auto;
        cursor: pointer;
    }
    .movie-title {
        padding:4px 8px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
    }
</style>

Also, fill MoviePage.svelte according to this.

<script>
    import { Router, Link, Route } from "svelte-routing";
    import { get, MOVIE_QUERY } from "./api.js";

    // acquired from dynamic route part => /movie/:slug
    export let slug;

    const moviedata = get(MOVIE_QUERY, {slug})
    
</script><div class="wrapper"><!-- promise is pending -->
    {#await moviedata}
        <p>Movie {slug} is loading</p><!-- promise was fulfilled -->
    {:then moviedata}
        {#if moviedata.data}
            <div class="movie-container"><img 
                    src={moviedata.data.movie.posterUrl} 
                    alt={`${moviedata.data.movie.name} poster`} 
                    class="movie-poster"/><div class="text-box"><h1 class="movie-title">{moviedata.data.movie.name}</h1><p class="movie-description">{moviedata.data.movie.summary}</p></div></div>
        {/if}

    <!-- promise was rejected -->
    {:catch error}
        <p>Something went wrong: {error.message}</p>
    {/await}
</div><style>
	.wrapper {
        width:100%;
        height: auto;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .movie-container {
        display: flex;
        flex-wrap: wrap;
        max-width:500px;
    }
    .movie-poster {
        width:250px;
        height:auto;
    }
    .text-box {
        display: flex;
        flex-direction: column;
    }
</style>

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

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- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh> | 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.

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 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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Django-React Integration Tutorial"/>
    <title>Django React Integration</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

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: '<http://127.0.0.1:8000/graphql>',
  });

const Init = () => (
    <ApolloProvider client={apiclient}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </ApolloProvider>
)

ReactDOM.render( <Init />, 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 (
        <div className="App">
            <Switch>
                <Route exact path="/" component={MainPage} />
                
                {// 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.
                }
                <Route exact path="/movie/:slug" component={MoviePage} />
            </Switch>
        </div>)
}
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 <div>Loading</div>
    
    // if response fail, this will be rendered
    if (error) return <div>Unexpected Error: {error.message}</div>//if query succeed, data will be available and render the data
    return(
        <div className="main-page">
            {data && data.movieList &&
                data.movieList.map(movie => (
                    <div className="movie-card" key={movie.slug}>
                        <img 
                            className="movie-card-image"src={movie.posterUrl}alt={movie.name + " poster"}title={movie.name + " poster"}/>
                        <p className="movie-card-name">{movie.name}</p>
                        <Link to={`/movie/${movie.slug}`} className="movie-card-link" />
                    </div>))
            }
        </div>)
}

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 <div>Loading</div>if (error) return <div>Unexpected Error: {error.message}</div>
  
    return (
        <div className="movie-page">
        <Link to="/" className="back-button" >Main Page</Link>
            {data && data.movie && 
                <div className="movie-page-box">
                    <img 
                        className="movie-page-image"src={data.movie.posterUrl}alt={data.movie.name + " poster"}title={data.movie.name + " poster"}/>
                    <div className="movie-page-info">
                        <h1>{data.movie.name}</h1>
                        <p>Year: {data.movie.year}</p>
                        <br />
                        <p>{data.movie.summary}</p>
                    </div>
                </div>}
        </div>)
}

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

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 = (
    '<http://localhost:8080>',
)

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': '<https://image.tmdb.org/t/p/w185/3nk9UoepYmv1G9oP18q6JJCeYwN.jpg>'
    },{
    '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': '<https://image.tmdb.org/t/p/w185/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg>'
    },{
    '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': '<https://image.tmdb.org/t/p/w185/rXsh4MI6uyVgZBSSzXCfitJnVPy.jpg>'
  },{
    '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': '<https://image.tmdb.org/t/p/w185/3NTEMlG5mQdIAlKDl3AJG0rX29Z.jpg>'
  }]

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: <QuerySet []>

# 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](<http://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": "<https://image.tmdb.org/t/p/w185/3nk9UoepYmv1G9oP18q6JJCeYwN.jpg>"

		}

	}

}

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

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.