0Pricing
Linux Server Deployment & SSH Mastery · Ders

Statik Web Sitelerini Barındırma

İlk web sitenizi erişilebilir hâle getirmek için seçtiğiniz web sunucusunu statik HTML, CSS ve JavaScript dosyalarını sunacak şekilde yapılandırın.

Statik Web Sitelerini Barındırma, CoddyKit'te ücretsiz bir Linux Server Deployment & SSH Mastery dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Linux Server Deployment & SSH Mastery öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Linux Server Deployment & SSH Mastery kursu toplamda 4 dersten oluşur.

Statik Web Siteleri Nedir?

Hoş geldiniz! Bu derste basit websitenizi nasıl çevrimiçi hâle getireceğinizi öğreneceğiz.

Statik website, HTML, CSS ve JavaScript gibi dosyalardan oluşur; bu dosyalar sunucuda depolandıkları hâliyle kullanıcının tarayıcısına gönderilir.

  • Sunucu tarafında işleme yoktur (PHP veya Python gibi).
  • Hızlı, güvenli ve barındırması kolaydır.
  • Portföyler, bloglar veya basit bilgilendirme siteleri için idealdir.

İlk HTML Dosyanızı Oluşturma

Son derece basit bir index.html dosyası oluşturalım. Bu, statik websitemizin ana sayfası olacak.

Genellikle bu dosyayı sunucunuzda oluşturursunuz. Örneğin nano veya vim gibi bir metin düzenleyicisi kullanabilirsiniz.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

CSS ve JavaScript Ekleme

HTML dosyamız style.css ve script.js dosyalarına başvuruyor. Temel sitemizi tamamlamak için bunları da oluşturalım.

Bu dosyalar index.html ile aynı dizinde bulunacak.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Web Dizininizi Oluşturma

Bu website dosyalarını depolamak için sunucumuzda özel bir konuma ihtiyacımız var. Yaygın bir konum /var/www/ içidir.

Önce websiteniz için bir dizin oluşturun. Ardından index.html, style.css ve script.js dosyalarınızı bu dizine kopyalayın.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: Sunucu Bloğunun Temelleri

Nginx, belirli web siteleri için yapılandırmaları tanımlamak üzere Apache'nin Sanal Ana Bilgisayarlarına benzer sunucu bloklarını kullanır.

Her sunucu bloğu bir bağlantı noktasındaki (HTTP için 80 gibi) istekleri dinler ve alan adına göre yanıt verir.

  • Genellikle /etc/nginx/sites-available/ konumunda bulunur.
  • /etc/nginx/sites-enabled/ konumuna sembolik bağlantı oluşturularak etkinleştirilir.

Nginx: Kök ve Dizin Yönergeleri

Bir sunucu bloğunun içindeki iki önemli yönerge, Nginx'e dosyalarınızı nerede bulacağını söyler:

  • root: Websitenizin dosyalarının mutlak yolunu belirtir. Nginx içeriği burada arar.
  • index: Bir dizin istendiğinde Nginx'in sunması gereken varsayılan dosyayı tanımlar (örneğin biri yourdomain.com/ adresini ziyaret ettiğinde Nginx index.html dosyasını arar).

Nginx: Eksiksiz Statik Site Yapılandırması

Statik sitemiz için eksiksiz bir Nginx sunucu bloğu yapılandırması aşağıdadır. Bunu /etc/nginx/sites-available/mywebsite.conf olarak kaydedin.

your_domain.com ifadesini gerçek alan adınızla veya sunucu IP adresinizle değiştirmeyi unutmayın.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: Sanal Ana Bilgisayar Karşılığı

Apache kullanıyorsanız kavram, Sanal Ana Bilgisayarlar ile benzerdir. Bir yapılandırma dosyası oluşturmanız gerekir (örneğin /etc/apache2/sites-available/mywebsite.conf).

Önemli yönergeler DocumentRoot (Nginx'teki root gibi) ve DirectoryIndex'tir (Nginx'teki index gibi).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Sunucunuzu Etkinleştirme ve Yeniden Yükleme

Yapılandırma dosyanızı oluşturduktan sonra değişikliklerin etkili olması için onu etkinleştirmeniz ve web sunucunuzu yeniden yüklemeniz gerekir.

  • Nginx için: Bir sembolik bağlantı oluşturun ve yeniden yükleyin.
  • Apache için: Siteyi etkinleştirin ve yeniden yükleyin.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Canlı Web Sitenizi Sınama

Harika iş çıkardınız! Statik websitenize artık erişilebilmelidir.

Web tarayıcınızı açın ve sunucunuzun IP adresine veya yapılandırdığınız alan adına gidin.

"Hello CoddyKit!" mesajınızı görmelisiniz!

Hızlı Kontrol: Nginx Yönergeleri

Aşağıdaki Nginx sunucu bloğu parçasını inceleyin:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Bir kullanıcı http://example.com/ adresine giderse Nginx ilk olarak hangi dosyayı sunmayı deneyecektir?

Özet: Statik Siteleri Barındırma

Statik bir website barındırmayı başarıyla öğrendiniz!

Şunları ele aldık:

  • Temel HTML, CSS ve JS dosyaları oluşturma.
  • Website içeriğiniz için özel bir dizin oluşturma.
  • root/DocumentRoot ve index/DirectoryIndex kullanarak Nginx sunucu bloklarını (veya Apache Sanal Ana Bilgisayarlarını) yapılandırma.
  • Web sunucunuzu etkinleştirme ve yeniden yükleme.
  • Canlı websitenizi tarayıcıda sınama.

Sırada, tek bir sunucuda birden çok website barındırmak için sanal ana bilgisayarları yapılandırmayı inceleyeceğiz!

Sıkça Sorulan Sorular

“Statik Web Sitelerini Barındırma” dersi ücretsiz mi?

Evet — “Statik Web Sitelerini Barındırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Linux Server Deployment & SSH Mastery kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Linux Server Deployment & SSH Mastery kursu toplamda 4 dersten oluşur.

“Statik Web Sitelerini Barındırma” dersinde ne öğreneceğim?

İlk web sitenizi erişilebilir hâle getirmek için seçtiğiniz web sunucusunu statik HTML, CSS ve JavaScript dosyalarını sunacak şekilde yapılandırın. Linux Server Deployment & SSH Mastery ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Linux Server Deployment & SSH Mastery öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Linux Server Deployment & SSH Mastery, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Statik Web Sitelerini Barındırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Linux Server Deployment & SSH Mastery dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Linux Server Deployment & SSH Mastery dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Nginx/Apache Kurulumu
  2. Statik Web Sitelerini Barındırma
  3. Temel Sanal Ana Makine Yapılandırması
  4. Let's Encrypt ile HTTPS'yi Etkinleştirme
← Linux Server Deployment & SSH Mastery Sayfasına Dön