Headless Hashnode ile DigitalOcean Üzerinde Blogunuzu Kurmaya Başlangıç
Giriş: Modern Bloglama Deneyimine Hoş Geldiniz
Günümüzün dijital dünyasında, içerik yönetimi ve sunumu hiç olmadığı kadar esnek ve güçlü hale geldi. Geleneksel içerik yönetim sistemlerinin (CMS) sunduğu kısıtlamaların ötesine geçmek isteyen geliştiriciler ve içerik üreticileri için “başlıksız” (headless) mimariler, yepyeni bir özgürlük alanı sunuyor. Bu makalede, geliştirici odaklı blog platformu Hashnode’u headless bir CMS olarak kullanarak, modern bir frontend ile DigitalOcean üzerinde nasıl dağıtabileceğinizi ayrıntılı bir şekilde inceleyeceğiz.
Headless CMS, içeriği depolayan ve yöneten bir arka uç (backend) ile içeriği görüntüleyen bir ön uç (frontend) arasında net bir ayrım yapar. Bu ayrım, içeriğinizi web siteleri, mobil uygulamalar, IoT cihazları ve hatta sanal gerçeklik deneyimleri gibi birden fazla kanalda sorunsuz bir şekilde kullanmanıza olanak tanır. Hashnode, yazarların içerik oluşturmasına ve yönetmesine odaklanırken, güçlü GraphQL API’si sayesinde bu içeriği kendi seçtiğiniz herhangi bir frontend teknolojisiyle çekmenize ve özelleştirilmiş bir kullanıcı deneyimi sunmanıza olanak tanır.
DigitalOcean ise, bulut altyapısı sağlayıcıları arasında geliştirici dostu arayüzü, uygun fiyatlandırması ve güçlü sanal sunucuları (Droplets), uygulama platformu (App Platform) gibi hizmetleriyle öne çıkar. Kendi headless Hashnode blogunuzu DigitalOcean üzerinde barındırmak, hem maliyet etkinliği hem de dağıtım kolaylığı açısından ideal bir çözümdür.
Bu kapsamlı rehberde, headless mimarinin temel prensiplerinden başlayarak, Hashnode API’sini nasıl kullanacağınızı, Next.js gibi modern bir frontend çatısı ile nasıl bir blog uygulaması geliştireceğinizi ve son olarak bu uygulamayı DigitalOcean’ın App Platform’u veya Droplet’leri üzerinde nasıl dağıtacağınızı adım adım öğreneceksiniz. Amacımız, size kendi özelleştirilmiş, hızlı ve ölçeklenebilir headless blogunuzu kurmak için gerekli tüm bilgi ve araçları sunmaktır.
Headless Mimariyi Anlamak: Neden ve Nasıl?
Geleneksel CMS’ler (WordPress, Joomla vb.) genellikle bir monolitik yapıya sahiptir; yani içerik yönetimi, veritabanı, tema ve sunum katmanları tek bir pakette birleşiktir. Bu, küçük ve orta ölçekli projeler için hızlı başlangıçlar sunsa da, modern web uygulamalarının gerektirdiği esneklik, ölçeklenebilirlik ve çok kanallı dağıtım ihtiyaçlarında yetersiz kalabilir.
Geleneksel CMS vs. Headless CMS
* Geleneksel CMS: İçerik depolama ve sunum katmanları sıkı bir şekilde bağlıdır. Bir tema seçer, eklentilerle özelleştirir ve genellikle aynı platform üzerinde yayınlarsınız.
* Headless CMS: İçerik depolama (backend) ve sunum (frontend) birbirinden tamamen bağımsızdır. İçeriği bir API aracılığıyla sunar ve bu içeriği istediğiniz herhangi bir frontend teknolojisiyle (React, Vue, Angular, Svelte, mobil uygulamalar vb.) çekerek kendi benzersiz kullanıcı arayüzünüzü oluşturursunuz.
Headless Mimarisinin Avantajları
1. Esneklik ve Teknoloji Özgürlüğü: Geliştiriciler, frontend için en sevdikleri ve projenin ihtiyaçlarına en uygun teknolojiyi seçebilirler. Bu, daha iyi performans, geliştirme hızı ve daha iyi bir geliştirici deneyimi anlamına gelir.
2. Çok Kanallı Dağıtım: İçerik, tek bir kaynaktan (headless CMS) birden fazla cihaza ve platforma (web sitesi, mobil uygulama, akıllı saat, IoT cihazı vb.) kolayca dağıtılabilir. İçeriği bir kez oluşturur, her yerde kullanırsınız.
3. Performans: Frontend’in ayrı olması, statik site oluşturucuları (SSG) veya sunucu tarafı renderlama (SSR) gibi modern tekniklerin kullanılmasını kolaylaştırır. Bu da daha hızlı yükleme süreleri ve daha iyi bir kullanıcı deneyimi sağlar.
4. Ölçeklenebilirlik: Backend ve frontend’in ayrı ayrı ölçeklenebilmesi, yoğun trafik durumlarında sistemin daha dayanıklı olmasını sağlar.
5. Güvenlik: Frontend ve backend’in ayrılması, saldırı yüzeyini azaltabilir. Backend genellikle bir API aracılığıyla erişildiği için daha az doğrudan maruz kalır.
6. Geleceğe Hazırlık: Yeni teknolojiler ortaya çıktığında, sadece frontend katmanını güncelleyerek içeriğinizi yeni platformlara taşıyabilirsiniz, backend’i değiştirmeye gerek kalmaz.
Headless Kullanım Senaryoları
* Bloglar ve Haber Siteleri: Hashnode gibi platformlar, içeriği yönetirken, frontend’i tamamen size bırakır.
* E-ticaret Siteleri: Ürün bilgilerini bir headless CMS’te tutarak, farklı frontend’ler üzerinden satış yapabilirsiniz.
* Kurumsal Web Siteleri: İçeriği farklı pazarlama kanallarında tutarlı bir şekilde sunmak için idealdir.
* Mobil Uygulamalar: Uygulama içi içeriği merkezi bir headless CMS’ten yönetmek.
Hashnode’u Tanımak: Geliştiriciler İçin Bir Bloglama Platformu
Hashnode, özellikle geliştiriciler ve teknoloji meraklıları için tasarlanmış, güçlü bir bloglama platformudur. Markdown desteği, kod blokları, entegre yorum sistemi ve aktif bir geliştirici topluluğu gibi özellikleriyle öne çıkar. Ancak Hashnode’u bu makalenin konusu yapan asıl özelliği, sunduğu güçlü GraphQL API’si ile içeriğinizi headless bir şekilde kullanma yeteneğidir.
Hashnode’un Başlıca Özellikleri
* Geliştirici Odaklı: Kod blokları, Markdown editörü, entegrasyonlar (GitHub, Notion vb.)
* Topluluk: Geniş ve aktif bir geliştirici topluluğu sayesinde içeriklerinizin daha fazla kişiye ulaşma potansiyeli.
* Özel Alan Adı Desteği: Blogunuzu kendi özel alan adınızda yayınlayabilirsiniz.
* GraphQL API: İçeriğinize programatik olarak erişmek için güçlü ve esnek bir API.
* Otomatik SEO: Temel SEO ayarları otomatik olarak yapılırken, headless kullanımda tam kontrol sizde olur.
Neden Hashnode’u Headless CMS Olarak Kullanmalı?
Hashnode, blog içeriğinizi oluşturmak ve yönetmek için harika bir platformdur. Yazı yazmaya odaklanmanızı sağlar ve teknik detaylarla uğraşmanıza gerek kalmaz. Ancak, blogunuzun görünümünü, performansını ve kullanıcı deneyimini tamamen kendi kontrolünüz altına almak istediğinizde headless yaklaşımı devreye girer. Hashnode’un GraphQL API’si sayesinde:
1. Tam Tasarım Kontrolü: Blogunuzun her pikselini kendi markanıza ve tercihlerinize göre tasarlayabilirsiniz.
2. Özelleştirilmiş Performans: Next.js gibi modern frontend çatılarının sunduğu optimizasyon özelliklerini kullanarak blogunuzu inanılmaz hızlı hale getirebilirsiniz.
3. Benzersiz Özellikler: Hashnode’un kendi arayüzünde bulunmayan özel özellikler veya entegrasyonlar ekleyebilirsiniz.
4. Frontend Teknolojisi Seçimi: Kendi frontend geliştirme becerilerinize veya projenizin gereksinimlerine en uygun JavaScript çatısını (React, Vue, Svelte vb.) kullanabilirsiniz.
Hashnode GraphQL API’si
Hashnode, blog içeriğinize erişmek için GraphQL tabanlı bir API sunar. GraphQL, REST API’lerine göre daha esnek ve verimli bir veri sorgulama dilidir. İstediğiniz veriyi tam olarak belirtmenize olanak tanır, bu da gereksiz veri transferini önler.
* API Uç Noktası: Genellikle https://api.hashnode.com/ veya https://gql.hashnode.com/ gibi bir adreste bulunur. (Hashnode v2 API için https://gql.hashnode.com/)
* Kimlik Doğrulama: Genellikle bir Personal Access Token (PAT) kullanılarak yapılır. Bu token, Hashnode hesabınızdan oluşturulur ve API isteklerinizle birlikte gönderilir.
DigitalOcean’ı Tanımak: Bulut Altyapınız
DigitalOcean, geliştiricilere ve küçük işletmelere yönelik bulut altyapısı hizmetleri sunan popüler bir platformdur. Kullanım kolaylığı, uygun fiyatlandırması ve geniş hizmet yelpazesi ile dikkat çeker. Kendi headless Hashnode frontend’inizi barındırmak için DigitalOcean, hem esneklik hem de maliyet etkinliği sunar.
DigitalOcean’ın Başlıca Hizmetleri
1. Droplets (Sanal Sunucular): Linux tabanlı sanal makinelerdir. Tam kontrol ve özelleştirme imkanı sunar. Kendi sunucunuzu kurup yönetmek istediğinizde idealdir.
2. App Platform: Git deposundan doğrudan uygulama dağıtımı sağlayan, yönetilen bir platformdur (PaaS). Geliştiricilerin altyapı yönetimi yerine kod yazmaya odaklanmasını sağlar. Otomatik ölçekleme, CI/CD, SSL gibi özellikleri vardır.
3. Spaces (Nesne Depolama): Amazon S3 benzeri, ölçeklenebilir ve uygun maliyetli nesne depolama hizmetidir. Statik dosyalar, resimler ve videolar için kullanılabilir.
4. Managed Databases: Yönetilen veritabanı hizmetleri (PostgreSQL, MySQL, Redis vb.).
5. Kubernetes: Yönetilen Kubernetes kümeleri.
Neden DigitalOcean Headless Frontend Dağıtımı İçin İyi Bir Seçim?
* Basitlik ve Geliştirici Dostu: Hem Droplets hem de App Platform, geliştiricilerin hızlıca dağıtım yapmasını sağlayan sezgisel arayüzlere sahiptir.
* Maliyet Etkinliği: Küçük ve orta ölçekli projeler için rekabetçi fiyatlandırma sunar.
* Performans: SSD tabanlı depolama ve yüksek hızlı ağ bağlantıları sayesinde iyi performans sunar.
* Ölçeklenebilirlik: Uygulamanız büyüdükçe kolayca kaynakları artırabilirsiniz.
* App Platform ile CI/CD: Git entegrasyonu sayesinde kodunuzu her push ettiğinizde otomatik dağıtım yapabilir, bu da geliştirme sürecini hızlandırır.
Bu makalede, headless Hashnode frontend’inizi dağıtmak için DigitalOcean App Platform’u öneriyoruz. Daha az sunucu yönetimi gerektirir ve CI/CD süreçlerini otomatikleştirir. Ancak, Droplet üzerinde de nasıl dağıtım yapabileceğinize kısaca değineceğiz.
Ön Gereksinimler ve Hazırlıklar
Headless Hashnode blogunuzu kurmaya başlamadan önce, bazı temel gereksinimleri karşılamanız ve hazırlıkları yapmanız gerekmektedir.
1. Hashnode Hesabı ve Blogu:
* Bir Hashnode hesabınızın olması ve en az bir blog oluşturmuş olmanız gerekir.
* Hashnode blogunuzun ayarlarından bir Personal Access Token (PAT) oluşturmanız gerekecek. Bu token, Hashnode API’sine güvenli bir şekilde erişmek için kullanılacaktır. Settings -> Developer -> Personal Access Tokens yolunu izleyerek yeni bir token oluşturabilirsiniz. Bu token’ı güvenli bir yerde saklayın, zira bir daha gösterilmeyecektir.
2. DigitalOcean Hesabı:
* Bir DigitalOcean hesabına sahip olmanız gerekir. Henüz yoksa, kaydolmak oldukça basittir.
3. Temel Web Geliştirme Bilgisi:
* JavaScript, React (veya seçtiğiniz başka bir frontend çatısı) ve Next.js (veya Gatsby) hakkında temel bilgiye sahip olmanız faydalı olacaktır.
* Git ve komut satırı (terminal) kullanımı hakkında bilgi.
4. Yerel Geliştirme Ortamı:
* Node.js ve npm/yarn: Yerel makinenizde Node.js’in güncel bir sürümünün (tercihen LTS) kurulu olması gerekir. npm (Node Package Manager) veya yarn paket yöneticisini kullanacağız.
* Git: Kodunuzu versiyonlamak ve DigitalOcean’a dağıtmak için Git kurulu olmalıdır.
* Metin Düzenleyici/IDE: VS Code gibi bir kod düzenleyici.
5. Alan Adı (İsteğe Bağlı ama Önerilir):
* Blogunuzu kendi özel alan adınızda yayınlamak isterseniz, bir alan adı kaydetmiş olmanız ve DigitalOcean’a yönlendirme yapabilmeniz gerekecektir.
Hashnode API Erişimi ve Yapılandırma
Hashnode içeriğinize erişmek için GraphQL API’sini kullanacağız. İlk adım, API token’ınızı almak ve basit bir sorgu ile API’nin çalıştığını doğrulamaktır.
Personal Access Token (PAT) Oluşturma
1. Hashnode hesabınıza giriş yapın.
2. Sol menüden Settings (Ayarlar) seçeneğine tıklayın.
3. Developer (Geliştirici) sekmesine gidin.
4. Personal Access Tokens (Kişisel Erişim Tokenları) bölümünde Generate New Token (Yeni Token Oluştur) düğmesine tıklayın.
5. Token’ınıza anlamlı bir isim verin (örn. “MyHeadlessBlog”).
6. Oluşturulan token’ı kopyalayın ve güvenli bir yere kaydedin. Bu token’ı daha sonra frontend uygulamanızda ortam değişkeni olarak kullanacağız.
Hashnode GraphQL API Uç Noktası
Hashnode’un GraphQL API’si için ana uç nokta: https://gql.hashnode.com/. Tüm GraphQL sorgularımızı bu adrese göndereceğiz.
Basit Bir GraphQL Sorgusu
Hashnode API’si ile etkileşim kurmak için bir GraphQL istemcisi kullanacağız. Next.js projemizde graphql-request kütüphanesini kullanmak pratik olacaktır. Ancak önce, API’yi anlamak için bir örnek sorguya bakalım.
Aşağıdaki sorgu, belirli bir kullanıcıya ait blog gönderilerini (başlık, slug ve yayın tarihi ile birlikte) listeler:
query GetUserArticles($username: String!) {
user(username: $username) {
publication {
posts(page: 0) {
_id
title
slug
publishedAt
brief
coverImage {
url
}
}
}
}
}Bu sorguyu Postman, Insomnia gibi araçlarla veya doğrudan Hashnode’un kendi API Playground’u üzerinden test edebilirsiniz. Unutmayın, bazı sorgular için Authorization başlığı altında Bearer YOUR_HASHNODE_PAT şeklinde token’ınızı göndermeniz gerekebilir.
Headless Frontend Geliştirme: Next.js ile Blog Uygulaması
Bu bölümde, Hashnode’dan veri çekecek ve bunları güzel bir şekilde gösterecek bir Next.js uygulaması geliştireceğiz. Next.js, React tabanlı bir çerçevedir ve statik site oluşturma (SSG) veya sunucu tarafı renderlama (SSR) gibi özellikleriyle headless CMS projeleri için mükemmel bir seçimdir.
Next.js Projesi Oluşturma
Yeni bir Next.js projesi oluşturalım:
npx create-next-app@latest my-headless-hashnode-blog --typescript
cd my-headless-hashnode-blogGerekli GraphQL kütüphanelerini kuralım:
npm install graphql graphql-request react-markdown
veya yarn add graphql graphql-request react-markdown
* graphql: GraphQL sorgularını ve şemalarını tanımlamak için.
* graphql-request: GraphQL API’sine istek göndermek için hafif bir istemci.
* react-markdown: Markdown içeriğini React bileşenlerine dönüştürmek için.
Ortam Değişkenleri
Hashnode PAT’nizi ve Hashnode blogunuzun kullanıcı adını güvenli bir şekilde saklamak için ortam değişkenlerini kullanacağız. Projenizin kök dizininde .env.local adlı bir dosya oluşturun:
NEXT_PUBLIC_HASHNODE_API_URL=https://gql.hashnode.com/
HASHNODE_PAT=your_hashnode_personal_access_token
HASHNODE_USERNAME=your_hashnode_username* NEXT_PUBLIC_ öneki, değişkenin istemci tarafında da erişilebilir olmasını sağlar (SSG/SSR bağlamında). PAT’nizi doğrudan istemci tarafında kullanmaktan kaçınmalısınız, ancak API URL’si genellikle kamuya açıktır. PAT’yi sadece sunucu tarafında (getStaticProps/getServerSideProps) kullanacağız.
Hashnode API İstemcisi Oluşturma
lib/hashnode.ts (veya .js) adında bir dosya oluşturalım ve GraphQL istemcimizi tanımlayalım:
// lib/hashnode.ts
import { GraphQLClient, gql } from 'graphql-request';
const API_URL = process.env.NEXT_PUBLIC_HASHNODE_API_URL || 'https://gql.hashnode.com/';
const HASHNODE_PAT = process.env.HASHNODE_PAT;
export const graphQLClient = new GraphQLClient(API_URL, {
headers: {
Authorization: HASHNODE_PAT ? Bearer ${HASHNODE_PAT} : '',
},
});
export const GET_USER_ARTICLES = gql
query GetUserArticles($username: String!, $page: Int = 0) {
user(username: $username) {
publication {
posts(page: $page) {
_id
title
slug
publishedAt
brief
coverImage {
url
}
}
}
}
}
;
export const GET_SINGLE_ARTICLE = gql
query GetSingleArticle($slug: String!, $hostname: String) {
publication(host: $hostname) {
post(slug: $slug) {
_id
title
slug
content {
markdown
}
publishedAt
coverImage {
url
}
author {
name
profilePicture
}
}
}
}
;Not: GET_SINGLE_ARTICLE sorgusunda hostname değişkeni, eğer Hashnode blogunuz özel bir alan adında ise gereklidir. Aksi takdirde, host yerine username ile de sorgu yapabilirsiniz, ancak publication(host: $hostname) daha esnektir.
Ana Sayfa (Tüm Gönderileri Listeleme)
pages/index.tsx dosyasını düzenleyelim:
// pages/index.tsx
import { GetStaticProps } from 'next';
import Link from 'next/link';
import { graphQLClient, GET_USER_ARTICLES } from '../lib/hashnode';
interface Post {
_id: string;
title: string;
slug: string;
publishedAt: string;
brief: string;
coverImage?: {
url: string;
};
}
interface HomeProps {
posts: Post[];
}
export const getStaticProps: GetStaticProps = async () => {
const username = process.env.HASHNODE_USERNAME;
if (!username) {
throw new Error('HASHNODE_USERNAME is not defined in .env.local');
}
const data = await graphQLClient.request(GET_USER_ARTICLES, {
username,
page: 0,
});
const posts = data.user.publication.posts;
return {
props: {
posts,
},
revalidate: 60, // Her 60 saniyede bir yeniden oluştur
};
};
const Home: React.FC = ({ posts }) => {
return (
{posts.map((post) => (
{post.coverImage && (
/post/${post.slug}} className="text-blue-600 hover:underline">
{post.title}
{new Date(post.publishedAt).toLocaleDateString()}
{post.brief}
))}
);
};
export default Home;
Bu örnekte Tailwind CSS sınıfları kullanılmıştır. Projenize Tailwind CSS eklemek için Next.js dokümantasyonuna bakabilirsiniz.
Dinamik Gönderi Sayfaları ([slug].tsx)
Gönderi detaylarını göstermek için dinamik bir rota oluşturacağız. pages/post/[slug].tsx adında bir dosya oluşturun:
// pages/post/[slug].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { graphQLClient, GET_USER_ARTICLES, GET_SINGLE_ARTICLE } from '../../lib/hashnode';
import ReactMarkdown from 'react-markdown';
interface PostContent {
_id: string;
title: string;
content: {
markdown: string;
};
publishedAt: string;
coverImage?: {
url: string;
};
author: {
name: string;
profilePicture: string;
};
}
interface PostProps {
post: PostContent;
}
export const getStaticPaths: GetStaticPaths = async () => {
const username = process.env.HASHNODE_USERNAME;
if (!username) {
throw new Error('HASHNODE_USERNAME is not defined in .env.local');
}
const data = await graphQLClient.request(GET_USER_ARTICLES, {
username,
page: 0,
});
const posts = data.user.publication.posts;
const paths = posts.map((post: any) => ({
params: { slug: post.slug },
}));
return { paths, fallback: 'blocking' }; // blocking: yeni gönderiler için sayfa oluşturur
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const username = process.env.HASHNODE_USERNAME; // Kendi Hashnode kullanıcı adınız
const hostname = process.env.NEXT_PUBLIC_HASHNODE_HOSTNAME || 'blog.yourdomain.com'; // Eğer özel bir alan adınız varsa
if (!params || !params.slug) {
return { notFound: true };
}
const data = await graphQLClient.request(GET_SINGLE_ARTICLE, {
slug: params.slug,
hostname: username ? null : hostname, // Eğer username varsa hostname'e gerek yok
});
const post = data.publication?.post || null;
if (!post) {
return { notFound: true };
}
return {
props: {
post,
},
revalidate: 60,
};
};
const PostPage: React.FC = ({ post }) => {
return (
Yazar: {post.author.name} - Yayınlanma Tarihi: {new Date(post.publishedAt).toLocaleDateString()}
{post.coverImage && (
prose sınıfları, tailwindcss/typography eklentisinden gelmektedir. Markdown içeriğini daha iyi biçimlendirmek için bu eklentiyi kurmanız ve tailwind.config.js dosyanıza eklemeniz önerilir.
Uygulamanızı yerel olarak test etmek için:
npm run dev
veya yarn dev
Tarayıcınızda http://localhost:3000 adresine giderek blogunuzu görüntüleyebilirsiniz.
DigitalOcean’da Dağıtım
Next.js uygulamanızı DigitalOcean’da dağıtmak için iki ana seçeneğiniz var: DigitalOcean App Platform (önerilen) veya bir Droplet (sanal sunucu).
Seçenek 1: DigitalOcean App Platform (Önerilen)
DigitalOcean App Platform, Git deposundan doğrudan uygulama dağıtımı sağlayan yönetilen bir hizmettir. CI/CD, otomatik SSL, ölçekleme gibi özellikleri otomatik olarak yönetir.
1. Kodunuzu Git Deposuna Yükleyin: Next.js projenizi GitHub, GitLab veya Bitbucket gibi bir Git sağlayıcısına yükleyin.
2. DigitalOcean App Platform’a Giriş Yapın: DigitalOcean kontrol panelinize gidin ve sol menüden Apps seçeneğine tıklayın.
3. Uygulama Oluşturun: Create App düğmesine tıklayın.
4. Kaynak Seçimi: Git sağlayıcınızı seçin ve projenizin bulunduğu depoyu bağlayın. Next.js projenizin ana dalını (örn. main veya master) seçin.
5. Kaynakları Yapılandırın: DigitalOcean, projenizin bir Next.js uygulaması olduğunu otomatik olarak algılamalıdır.
* Type: Web Service
* Build Command: npm run build (veya yarn build)
* Run Command: npm start (veya yarn start)
* Environment Variables: .env.local dosyanızdaki değişkenleri buraya ekleyin. HASHNODE_PAT ve HASHNODE_USERNAME (veya NEXT_PUBLIC_HASHNODE_HOSTNAME eğer özel alan adı kullanıyorsanız) değişkenlerini eklemeyi unutmayın. PAT’nizi Encrypted olarak işaretleyin.
6. Plan Seçimi: Uygulamanız için uygun bir plan seçin (Başlangıç seviyesi için “Basic” planlar yeterli olabilir).
7. Uygulamayı Dağıtın: Launch App düğmesine tıklayın. DigitalOcean kodunuzu çekip, derleyecek ve dağıtacaktır. Bu işlem birkaç dakika sürebilir.
8. Alan Adı Yapılandırması (İsteğe Bağlı): Uygulamanız dağıtıldıktan sonra, DigitalOcean size geçici bir URL sağlayacaktır. Kendi alan adınızı bağlamak isterseniz, Settings sekmesinden Domains bölümüne gidin ve alan adınızı ekleyin. DigitalOcean size yönlendirme için gerekli DNS kayıtlarını (CNAME veya A kaydı) sağlayacaktır. Bu kayıtları alan adı sağlayıcınızın DNS yönetimi panelinde yapılandırmanız gerekir.
Artık her Git deposuna push yaptığınızda, DigitalOcean App Platform otomatik olarak uygulamanızı yeniden derleyip dağıtacaktır. Bu, geliştirme sürecinizi büyük ölçüde hızlandırır.
Seçenek 2: DigitalOcean Droplet Üzerinde Dağıtım (Daha Fazla Kontrol)
Eğer sunucu yönetimi konusunda daha fazla kontrol istiyorsanız veya daha karmaşık bir altyapınız varsa, bir Droplet üzerinde dağıtım yapabilirsiniz.
1. Droplet Oluşturun:
* DigitalOcean kontrol panelinizden Create -> Droplets seçeneğine tıklayın.
* Bir Ubuntu sürümü seçin (örn. Ubuntu 22.04 LTS).
* Uygulamanızın ihtiyaçlarına uygun bir plan seçin (en az 1GB RAM önerilir).
* Bir veri merkezi konumu seçin.
* SSH anahtarınızı ekleyin veya yeni bir anahtar oluşturun.
* Bir Droplet adı verin ve Create Droplet düğmesine tıklayın.
2. SSH ile Droplet’e Bağlanın:
* Droplet’iniz oluşturulduktan sonra IP adresini kopyalayın.
* Terminalinizden SSH ile bağlanın: ssh root@your_droplet_ip
3. Node.js ve npm Kurulumu:
* Droplet’e bağlandıktan sonra Node.js ve npm’i kurun (eğer kurulu değilse):
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs4. Git Kurulumu:
* sudo apt-get install -y git
5. Uygulamanızı Klonlayın:
* Git deponuzu Droplet’inize klonlayın: git clone your_repo_url /var/www/my-headless-hashnode-blog
* Dizinine gidin: cd /var/www/my-headless-hashnode-blog
6. Ortam Değişkenlerini Ayarlayın:
* .env.local dosyasını sunucuda manuel olarak oluşturun ve gerekli değişkenleri ekleyin. Örneğin:
nano .env.local
# İçine:
# NEXT_PUBLIC_HASHNODE_API_URL=https://gql.hashnode.com/
# HASHNODE_PAT=your_hashnode_personal_access_token
# HASHNODE_USERNAME=your_hashnode_username
# Kaydet ve çık (Ctrl+X, Y, Enter)7. Bağımlılıkları Kurun ve Uygulamayı Derleyin:
* npm install (veya yarn install)
* npm run build (veya yarn build)
8. Uygulamayı Çalıştırın (PM2 ile):
* Uygulamanızı sürekli çalıştırmak ve süreç yönetimi için PM2’yi kullanın:
sudo npm install -g pm2
pm2 start npm --name "my-hashnode-blog" -- start
pm2 save
pm2 startup9. Nginx ile Reverse Proxy ve SSL (İsteğe Bağlı ama Önerilir):
* Nginx’i kurun: sudo apt-get install -y nginx
* Nginx yapılandırma dosyası oluşturun (/etc/nginx/sites-available/my-hashnode-blog):
server {
listen 80;
server_name your_domain.com www.your_domain.com; # Kendi alan adınızı girin
location / {
proxy_pass http://localhost:3000; # Next.js uygulamanızın çalıştığı port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}* Yapılandırma dosyasını etkinleştirin ve Nginx’i yeniden başlatın:
sudo ln -s /etc/nginx/sites-available/my-hashnode-blog /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx* SSL (Let’s Encrypt ile Certbot):
sudo snap install core
sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginx -d your_domain.com -d www.your_domain.com Certbot, Nginx yapılandırmanızı otomatik olarak güncelleyecek ve SSL sertifikalarını yükleyecektir.
10. Güvenlik Duvarı (UFW) Yapılandırması:
* Gerekli portları açın:
sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enableBu adımlarla, Next.js uygulamanız Droplet üzerinde çalışacak ve Nginx aracılığıyla erişilebilir olacaktır.
Sürekli Entegrasyon ve Dağıtım (CI/CD)
DigitalOcean App Platform kullanıyorsanız, CI/CD süreci zaten otomatiktir. Git deponuza yaptığınız her push, uygulamanızın otomatik olarak yeniden dağıtılmasını tetikler. Bu, geliştirme sürecinizi basitleştirir ve hızlandırır.
Eğer bir Droplet üzerinde dağıtım yapıyorsanız, CI/CD’yi manuel olarak yapılandırmanız gerekir. GitHub Actions, GitLab CI/CD veya Jenkins gibi araçları kullanarak, kodunuzu her push ettiğinizde Droplet’inize otomatik olarak dağıtım yapacak iş akışları (workflows) oluşturabilirsiniz. Bu, genellikle SSH üzerinden sunucuya bağlanıp git pull, npm install, npm run build ve pm2 restart komutlarını çalıştırmayı içerir.
SEO ve Performans İpuçları
Headless mimari, SEO ve performans üzerinde tam kontrol sahibi olmanızı sağlar.
* Statik Site Üretimi (SSG): Next.js’in getStaticProps ve getStaticPaths gibi fonksiyonları, blogunuzun sayfalarını derleme zamanında (build time) statik HTML dosyaları olarak oluşturmanıza olanak tanır. Bu, sayfaların çok hızlı yüklenmesini sağlar ve SEO için idealdir. İçerik güncellendiğinde (örn. Hashnode’da yeni bir yazı yayınlandığında), Next.js’in revalidate seçeneği (Incremental Static Regeneration – ISR) veya bir webhook ile yeniden derleme tetikleyebilirsiniz.
* Metadata ve SEO: Her sayfa için uygun title etiketleri, meta description ve Open Graph etiketleri ekleyin. Next.js’in next/head bileşenini kullanarak bunu kolayca yapabilirsiniz.
* Anlamsal HTML: Başlık etiketlerini (h1, h2, h3), paragrafları (p) ve diğer HTML etiketlerini doğru ve anlamsal bir şekilde kullanın.
* Resim Optimizasyonu: next/image bileşenini kullanarak resimleri otomatik olarak optimize edin, lazy load (tembel yükleme) uygulayın ve uygun boyutlarda sunun.
* Hız Optimizasyonu: CSS ve JavaScript dosyalarını küçültün (minify), gereksiz kodları kaldırın ve tarayıcı önbellekleme mekanizmalarını kullanın.
* Sitemap ve Robots.txt: Arama motorlarının blogunuzu daha iyi taraması için bir sitemap.xml dosyası oluşturun ve robots.txt dosyanızı doğru yapılandırın.
Sıkça Sorulan Sorular (SSS)
1. Başka bir frontend çatısı kullanabilir miyim?
Kesinlikle! Headless mimarinin güzelliği budur. React, Vue, Angular, Svelte veya Gatsby gibi herhangi bir frontend çatısını kullanabilirsiniz. Veri çekme mantığı benzer olacaktır.
2. Hashnode’daki yorumlarımı nasıl gösteririm?
Hashnode API’si şu anda yorumlara doğrudan erişim sağlamaz. Ancak, Discus, Commento veya Hyvor Talk gibi üçüncü taraf bir yorum sistemini frontend uygulamanıza entegre edebilirsiniz.
3. Hashnode API’sinde bir değişiklik olursa ne olur?
Hashnode, API kararlılığını korumaya çalışır. Ancak büyük bir sürüm değişikliği (örn. v1’den v2’ye geçiş) olursa, sorgularınızı ve veri işleme mantığınızı güncellemeniz gerekebilir. Bu tür değişiklikler genellikle önceden duyurulur.
4. Maliyetler ne kadar olur?
DigitalOcean App Platform veya Droplet’in maliyetleri seçtiğiniz plana ve kullanımınıza göre değişir. Küçük bir blog için aylık birkaç dolardan başlayan fiyatlarla hizmet alabilirsiniz. Hashnode’un kendisi ücretsizdir.
5. Blogumdaki içeriği nasıl güncellerim?
İçeriği Hashnode’un kendi platformunda yazmaya ve düzenlemeye devam edersiniz. Eğer frontend’iniz SSG kullanıyorsa, içeriği güncellediğinizde otomatik olarak yeniden derlenmesi için bir webhook kurmanız veya DigitalOcean App Platform’un otomatik dağıtım özelliğini kullanmanız gerekir.
Sonuç
Bu makalede, Hashnode’u headless bir CMS olarak kullanarak, Next.js ile bir blog frontend’i geliştirmeyi ve bu uygulamayı DigitalOcean üzerinde dağıtmayı adım adım öğrendiniz. Headless mimarinin sunduğu esneklik ve performans avantajları sayesinde, kendi markanıza ve ihtiyaçlarınıza tamamen uygun, hızlı ve ölçeklenebilir bir blog deneyimi yaratabilirsiniz.
DigitalOcean’ın geliştirici dostu platformu, uygulama dağıtımını ve yönetimini kolaylaştırırken, Hashnode’un güçlü GraphQL API’si içeriğinize sorunsuz erişim sağlar. Bu kombinasyon, modern web geliştirme prensiplerini benimseyen herkes için güçlü bir araç setidir.
Artık kendi özelleştirilmiş headless blogunuzu kurmak için gerekli bilgiye sahipsiniz. Deneyler yapmaktan, farklı frontend teknolojilerini keşfetmekten ve blogunuzu kendi benzersiz vizyonunuzla şekillendirmekten çekinmeyin. İyi bloglamalar!