Bir Raspberry Pi web sunucusu kurun ve kolayca bir HTML web sayfası oluşturun

Giriş

Bir Raspberry Pi var mı ve evde bir web sunucusu çalıştırmak mı istiyorsunuz? Ancak, Raspberry Pi üzerinde bir web sunucusu çalıştırdıktan sonra ne yapacağınızı düşünebilirsiniz. Bu blogda, birkaç dakika içinde bir Raspberry Pi kullanarak evde bir web sunucusu kurmanız için adım adım rehberlik edeceğiz ve ayrıca temel HTML kodlamayı öğrenmenize yardımcı olacağız ve nihayetinde internette kendi web siteniz olacak!

Web sunucusu nedir?

Bir web sunucusu, yazılım çalıştıran ve bir web sitesini çalıştırmak için gerekli olan HTML belgeleri, resimler, videolar ve diğer dosyaları depolayan bir bilgisayar olarak basitçe tanımlanabilir. Bir web sunucusu her zaman internete bağlıdır çünkü web siteleri her zaman halka açıktır. Eğer bir web sunucusu kapanırsa, o sunucuya bağlı olan web sitesi de kapanır.

Tarayıcı aracılığıyla web sitelerine nasıl erişiyorsunuz?

Tarayıcıda bir URL girdiğinizde, bu URL bir IP adresine dönüştürülür ve tarayıcı, istenen IP adresine bağlı web sunucusuna ulaşana kadar bunu internet üzerinden bir HTTP isteği olarak gönderir. Web sunucusuna ulaştığında, bir HTTP sunucusu bu isteği kabul eder ve kullanıcının talep ettiği belgeyi bulur. Daha sonra, istenen web sayfasını HTTP aracılığıyla tarayıcıya geri gönderir.

Raspberry Pi üzerinde bir web sunucusu kurmanın avantajları

Bir web sunucusu kurmak için Raspberry Pi kullanmanın birkaç avantajı vardır.

• Genel barındırma maliyetlerinin yüksek olması nedeniyle maliyet etkin
• Çok düşük güçle çalışır ve bu nedenle elektrik tasarrufu sağlar
• Taşınabilir bir cihaz olarak yapılandırılabilir

Ayrıca, web sitenizi bir Raspberry Pi üzerinde barındırmak istiyorsanız, istediğiniz herhangi bir Raspberry Pi kullanabilirsiniz. Hatta bir Raspberry Pi Zero bile bir web sunucusu barındırabilir!

Raspberry Pi üzerinde Apache Web Sunucusu Kurma

Farklı türde web sunucuları vardır, ancak Raspberry Pi üzerinde kurabileceğiniz en ünlü web sunucularından biri olan Apache web sunucusunu kullanacağız. Apache, HTML dosyalarını HTTP ve HTTPS protokolleri üzerinden iletebilir ve dinamik içerik sunabilen PHP gibi ek modülleri de destekler. Ancak bu eğitimde, başlangıç için daha basit olduğu için Apache’yi statik HTML sayfaları sunacak şekilde kuracağız.

Gerekli malzemeler

Raspberry Pi üzerinde bir Apache Web Sunucusu kurmak karmaşık bir süreç değildir. Bu kurulum için ihtiyaç duyduğunuz şeyleri listeleyerek başlayacağız:

• 1 x Raspberry Pi
• 1 x USB Type-C Kablo ve güç adaptörü
• 1 x Argon ONE Raspberry Pi 4 Alüminyum Kasa (Opsiyonel)
• 1 x Micro-SD kart ve kart okuyucu

Apache Web Sunucusunu Raspberry Pi’nizde kurduktan sonra sürekli çalışır halde bırakacağınız için Argon ONE Raspberry Pi 4 Alüminyum Kasa kullandık. Bu kasa, Raspberry Pi’nin sürekli kullanımından dolayı ısınmasını önlemek için daha iyi soğutma sağlar. Ayrıca, Raspberry Pi’nizle kullanmak için çok şık bir alüminyum kasadır!

Raspberry Pi’yi ilk önyükleme için yapılandırma

Bir Raspberry Pi satın aldığınızda, kutudan çıktığında üzerinde herhangi bir işletim sistemi yoktur. Bu nedenle, bir micro-SD karta bir işletim sistemi yüklemeniz ve ardından Raspberry Pi’yi bu karttan başlatmanız gerekir.

Adım 1

Öncelikle, Linux tabanlı bir işletim sistemi indirmemiz gerekiyor. Raspberry Pi, Ubuntu gibi çeşitli Linux dağıtımlarını destekler, ancak bu kılavuzda Raspberry Pi Vakfı’nın resmi işletim sistemi olan Raspberry Pi OS’u kullanacağız. Bunu buradan “masaüstü ve önerilen yazılımlar ile” sürümünü seçerek indirin.

Adım 2

Daha sonra, yukarıda indirilen görüntüyü yakmak ve Raspberry Pi’nin Micro-SD karttan önyükleme yapmasını sağlamak için “balenaEtcher” adlı bir yazılım indirmeniz gerekiyor. Bu yazılımın en son sürümünü indirmek için buraya tıklayın.

Adım 3

Daha sonra, bir micro-SD kartı bir PC’nin micro-SD kart yuvasına bir micro-SD’den SD kart adaptörü kullanarak takın. Ayrıca bir USB Micro-SD kart okuyucu da kullanabilirsiniz.

Adım 4

Ardından “balenaEtcher” yazılımını açın. İndirilen görüntünün konumunu gösterin, bağlı micro-SD kartı seçin ve “flash” butonuna basın. Bu işlemin tamamlanması birkaç dakika sürecektir.

Adım 5

Şimdi Raspberry Pi’yi otomatik olarak kablosuz ağa bağlanacak şekilde ayarlayacağız, böylece onunla iletişim kurabiliriz.

Ancak, bir HDMI ekran, klavye ve fareye sahipseniz, bu adımı atlayabilir, bunları Raspberry Pi’ye bağlayabilir ve “ Apache Web Sunucusu Kurma ” kısmına geçebilirsiniz.

Ayrıca bir Seeeduino XIAO’nuz varsa, Raspberry Pi ile PC arasındaki iletişimi ayarlamak için buradaki kılavuzu takip edebilir ve “Apache Web Sunucusu Kurma” kısmına geçebilirsiniz.

Adım 6

PC’nizden Raspberry Pi kök klasörüne gidin ve “wpa_supplicant.conf” adında bir dosya oluşturun. Ardından, bu dosyaya aşağıdaki kodları kopyalayın ve “WiFi-name” ve “WiFi-password” alanlarına ev Wi-Fi kullanıcı adınızı ve şifrenizi ekleyin.

country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
 
network={
ssid="WiFi-adi"
psk="WiFi-sifresi"
key_mgmt=WPA-PSK
priority=1
}

Not:
Wi-Fi adı ve şifresi, PC’nizin bağlı olduğu yerel Wi-Fi ile aynı olmalıdır (PC’niz ve Raspberry Pi’nizin aynı LAN’da olduğundan emin olun).

Adım 7

Bu dizinde “ssh” adında boş bir dosya oluşturun.

Adım 8

Ardından, micro-SD kartı PC’den çıkarın ve Raspberry Pi’ye takın.

Adım 9

Raspberry Pi’yi bir Type-C USB kablosu ve bir güç adaptörü ile açın.

Adım 10

Artık Raspberry Pi ile iletişim kurmak için kullanacağımız bir SSH istemcisi olan Putty’yi indireceğiz. İndirmek için buraya tıklayın.

Adım 11

Putty’yi açın ve hostname olarak “raspberrypi.local” ve port olarak “22” ayarlayın. Ardından “Open” butonuna basın.

Apache Web Sunucusu Kurulumu

Adım 1

Öncelikle, Raspberry Pi’nizdeki paket listesini güncellemek için aşağıdaki komutları girin.

sudo apt-get update
sudo apt-get upgrade

Adım 2

Ardından, Apache2 paketini kurmak için aşağıdaki komutu girin.

sudo apt install apache2 -y

Hepsi bu kadar! Sadece iki adımda Raspberry Pi’nizde çalışan bir Apache Web Sunucusu kurdunuz!

Bu web sunucusunun çalışıp çalışmadığını doğrulamak için aşağıdaki komutu girin.

sudo service apache2 status

Artık Apache’nin çalıştığını kontrol etmek için, bir web tarayıcısına Raspberry Pi’nizin IP adresini girebilir ve aşağıdaki gibi basit bir web sayfası ile karşılaşabilirsiniz.

Ancak, Raspberry Pi’nizin IP adresini bilmiyorsanız, Raspberry Pi’nizin terminalinde aşağıdaki komutu girerek bulabilirsiniz.

hostname -I

Yeni kurduğunuz sunucu yalnızca ev ağınız üzerinden erişilebilir ve internet üzerinden erişilemez. Bu sunucunun her yerden erişilebilir olması için yönlendiricinizde port yönlendirmesi ayarlamanız gerekir. Ancak, bu blogda bunu tartışmayı planlamıyoruz.

Düzenleme için HTML sayfası ayarlama

Yukarıda gösterilen varsayılan web sayfası, Raspberry Pi’nin dosya sisteminde sadece bir HTML dosyasıdır. Kendi HTML dosyamızı oluşturacak ve kendi web sayfamızı inşa edeceğiz.

Adım 1

Öncelikle, bu HTML dosyasının Raspberry Pi’deki konumunu bulalım. Terminalde aşağıdaki komutu girin.

cd /var/www/html 

Adım 2

Ardından, bu dizindeki tüm dosyaları listelemek için aşağıdaki komutu yazın.

ls -al 

Bu dizindeki tüm dosyalarla birlikte index.html dosyasının root kullanıcısına ait olduğunu göreceksiniz.

Bu nedenle, bu dosyayı düzenlemek için sahipliğini kendi kullanıcı adınıza değiştirmeniz gerekir. Burada Raspberry Pi’nin varsayılan kullanıcı adı olan “pi”yi seçeceğiz.

sudo chown pi: index.html

Artık bu dosyayı düzenleyebilir ve düzenledikten sonra dosyayı kaydettikten sonra tarayıcınızı yenileyerek değişiklikleri görebilirsiniz.

İlk HTML sayfanızı oluşturma

Artık size HTML’nin temellerini öğretmeye odaklanacağız.

Öncelikle, index.html dosyasını açmak için aşağıdaki komutu girin ve içindeki tüm içeriği silerek temiz bir sayfayla başlayın.

sudo nano index.html

HTML Etiketleri

Öncelikle, HTML’nin temel bir özelliği olan HTML etiketleri hakkında bilgi sahibi olmalısınız. Etiketler, bir web sayfasının farklı bölümlerini tanımlamak ve içeriğe özel biçimlendirme uygulamak için kullanılır.

Genellikle, içeriğinizi iki etiket arasında koyarsınız; bunlar açılış etiketi ve kapanış etiketidir ve bu etiketler içindeki içerik, bu etiketlerde belirtilen şekilde davranır.

Örneğin, <b> etiketi metni kalın yapabilir. Dolayısıyla, içeriğiniz:

This is my <b>new</b> website

“new” kelimesi kalın görünecektir. Açılış etiketinin <> ve kapanış etiketinin </> olduğunu unutmayın.

Bir HTML belgesinin temel formatı

Genel bir HTML belgesi aşağıdaki formatı alır.

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

   </body>
</html>

<!DOCTYPE html>: Bu etiket, bunun bir HTML belgesi olduğunu belirtmek için kullanılır. Bunun için kapanış etiketine ihtiyacınız yoktur.

<html>: Bu etiket, içindeki içeriğin gerekli HTML özelliklerine sahip olmasını sağlar. Bunun bir kapanış </html> etiketi vardır.

 </head>: Bu etiket, web siteniz hakkında bilgi tutar, ancak içindeki içerik bir web tarayıcısında açıldığında görünmez.

Örneğin, web siteniz için karakter kodlamasını ayarlamak üzere başlık etiketinizin içinde bir meta etiketi bulundurabilirsiniz. Bunun bir kapanış </head> etiketi vardır.

<head>
   <meta charset="utf-8">
</head>

Ayrıca, başlık etiketinin içinde bir title etiketi bulundurabilirsiniz. Bu etiket, web sayfanızın başlığını ayarlar ve bir kapanış </title> etiketine sahiptir.

<head>
   <meta charset="utf-8">
   <title> Benim web sitem </title>
</head>

<body>: Bu etiket, web sayfasının ana içeriğini tutar. Bir web sayfasını açtığınızda, gördüğünüz her şey genellikle body etiketleri içinde yer alır. Bunun bir kapanış </body> etiketi vardır. Bu body etiketinin içinde birçok başka etiket olabilir, ancak ilk temel web sayfanızı kurmak için ihtiyaç duyduğunuz en kullanışlı olanları tartışacağız.

Başlık Etiketleri

Bu etiketler genellikle bir sayfanın başlıkları ve alt başlıkları için kullanılır. Başlıkların ve alt başlıkların boyutuna ve önceliğine karşılık gelen altı farklı başlık etiketi vardır. Bunlar <h1> ile <h6> arasında değişir ve boyut h1’den h6’ya doğru azalır. Ayrıca, bu etiketlerin de bir kapanış </h> etiketine ihtiyacı vardır.

<body>
   <h1>Başlık</h1>
   <h2>Alt başlık</h2>
   <h3>Alt başlık</h3>
   <h4>Alt başlık</h4>
   <h5>Alt başlık</h5>
   <h6>Alt başlık</h6>
</body>

Dosyayı Ctrl + X tuşlarına basarak kaydedebilir ve komut isteminde Y tuşuna basarak onaylayabilirsiniz. Ardından, tarayıcıda sayfayı yenileyerek değişiklikleri görebilirsiniz.

Paragraf Etiketleri

Bu etiketler, içeriği farklı paragraflara ayırmak için kullanılır. İçeriğinizi <p> etiketleri içine koyduğunuzda, içerik bir paragraf içinde yer alır. Ayrıca, bu etiketlerin de bir kapanış </p> etiketine ihtiyacı vardır.

<p>Bu birinci paragraftır</p>
<p>Bu ikinci paragraftır</p>
<p>Bu üçüncü paragraftır</p>

Tarayıcıyı yenileyerek değişiklikleri görebilirsiniz.

Satır Sonu Etiketleri

Bu etiketler, metni iki satır arasında herhangi bir boşluk bırakmadan farklı satırlara ayırmak için kullanılır. Kapanış etiketi olmadığı için boş bir eleman olarak kabul edilir ve etiket içinde herhangi bir nitelik barındıramaz.

Bu cümle burada <br> kesilecek ve yeni bir cümle ile başlayacak

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Metninize Stil Eklemek için Etiketler

Metnin görünümünü değiştirmek için yararlı olan bazı etiketler vardır.

<b>: Bu metni kalın yapar

<i>: Bu metni italik yapar

<u>: Bu metni altı çizili yapar

<em>: Bu etiket bir şeyi vurgulamak için kullanılır ve italik olarak gösterir

<strong>: Bu etiket önemli bir metni vurgulamak için kullanılır ve kalın olarak gösterir

Bu <b>kalın</b> metin<br>
Bu <i>italik</i> metin<br>
Bu <u>altı çizili</u> metin<br>
Bu <em>vurgulanan</em> metin<br>
Bu <strong>önemli</strong> metin<br>

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Yatay Kural Etiketi

Bu etiketler, web sayfanızda soldan sağa doğru yatay bir çizgi oluşturmak için kullanılır. Bu bir boş elemandır ve <hr> etiketine sahiptir.

Bu bir cümledir 
<hr>
Bu ayrı bir cümledir

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Web Sayfanıza Resim Eklemek

Web sayfanıza <img> etiketini kullanarak resim ekleyebilirsiniz. Bu da bir boş elemandır ve kapanış etiketi yoktur. Aşağıdaki formatı alır

<img src="Resim konumunun URL'si">

Örneğin, Seeeduino XIAO’nun bir resmini ekleyelim

<p>Bu Seeeduino XIAO'nun bir resmidir</p>
<img src="https://static-cdn.seeedstudio.com/media/catalog/product/cache/9d0ce51a71ce6a79dfa2a98d65a0f0bd/s/e/seeeduino-xiao-preview_1.jpg">

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Ayrıca bir resmi indirip /var/www/html dizinine koyabilirsiniz.

Sonra, index.html dosyanıza aşağıdakini yazabilirsiniz, “Resim Adınız” kısmını resminizin adıyla ve ardından resim uzantısıyla değiştirin.

<img src="Resim Adınız">

Metne Bağlantı Eklemek

Metne bağlantı eklemek için aşağıdakileri kullanabilirsiniz:

<a href=”URL”>metin</a>

Örnek

Buraya <a href="www.seeedstudio.com”>tıklayın</a> Seeed Studio'nun web sitesini kontrol etmek için.

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Liste Oluşturma

HTML’de oluşturulabilecek iki tür liste vardır

• Sıralı Liste
• Sırasız Liste

Sıralı listeler genellikle numaralı listelerken, sırasız listeler genellikle madde işaretli listelerdir. Sıralı listeler <ol> etiketini kullanırken, sırasız listeler <ul> etiketini kullanır. Liste içinde, liste öğelerini yerleştirmeniz gerekir. Her liste öğesi <li> etiketine sahiptir.

Sırasız bir liste ve sıralı bir liste için bir örneğe bakalım

<ul>
   <li>kırmızı</li>
   <li>mavi</li>
   <li>yeşil</li>
   <li>mor</li>
   <li>sarı</li>
</ul>
<ol>
   <li>kırmızı</li>
   <li>mavi</li>
   <li>yeşil</li>
   <li>mor</li>
   <li>sarı</li>
</ol>

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Ayrıca, bir listeyi içine başka bir liste koyarak iç içe geçirebilirsiniz

<ul>
   <li>kırmızı
	<ul>
		<li>koyu kırmızı</li>
<li>açık kırmızı</li>
	</ul>
   </li>
   <li>mavi</li>
   <li>yeşil</li>
   <li>mor</li>
   <li>sarı</li>
</ul>

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Tablo Oluşturma

HTML sayfasının birçok önemli öğesinden bahsettik ve şimdi nihayet HTML’de nasıl tablo oluşturacağımızı konuşacağız.

Tabloyu oluşturmak için <table> etiketini kullanın. Tablo için tüm içerik bir açılış <table> etiketi ve bir kapanış </table> etiketi içinde olacaktır.

Daha sonra, ilk tablo satırı olan <tr> etiketini ekleyeceğiz. Tüm tablo başlıkları bu ilk <tr> etiketinde yer alacaktır. Tüm tablo başlıkları <th> etiketi ile listelenmelidir.

Daha sonra, ikinci tablo satırını oluşturmak için ikinci bir <tr> etiketi ekleyeceğiz ve her sütun için veri eklemek için <td> etiketini kullanacağız.

Öğrendiklerimizle basit bir tablo oluşturalım.

<table>
   <tr>
      <th>SKU</th>
      <th>Ürün Adı</th>
      <th>Fiyat</th>
   </tr>
   <tr>
      <td>102010328</td>
      <td>Seeeduino XIAO</td>
      <td>$4.90</td>
   </tr>
</table>

Değişiklikleri görmek için tarayıcıyı yeniden yükleyin

Sonuç

Raspberry Pi’nizde bir web sunucusu kurmayı ve bu blogu okuyarak temel bir HTML web sayfası oluşturmayı öğrendiğinizi düşünüyoruz. Bu blogun web geliştirme yolculuğunuza bir başlangıç olmasını umuyoruz!