Fatih M. KILIÇ

Still using nginx, apache etc. to serve static web sites?

Fatih M. KILIÇ — Fri, 09 Oct 2020 20:00:00 +0300

If yes, I recommend to migrate your static web sites to AWS S3 + CloudFront.

Obviously, my goal is not to write article like a “how to serve static web page on aws s3?”

There are tons of articles on this topic, but there are some fine details about serving static sites on aws s3 I want to highlight them.

You don’t have to make bucket as public! I have seen many articles on this subject, the first thing it has done is to mark the bucket as public…
You don’t have to enable static web site hosting Yeah, it is enough to just create a typical private bucket.

On the other hands, there are remarkable features when we are using aws s3 to serving static web pages.

You don’t care about to up-to-date your OS or applied security patch etc. if you don’t use traditional method to serving static web pages. Thus, your time to maintain the system will be considerably reduced.
I think it would be cheaper to use s3 and cloudfront compared to using s3 and cloudfront than using VM to serve only static sites.

Enough words, let’s move on to the example :)

S3

As you can see, I have a standart bucket which name is fatihkilic.net. BTW, bucket name always must be unique. Otherwise, you couldn’t create it.

Here is the full detail of my bucket:

The most important configuration is Bucket Policy:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::fatihkilic.net/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXX"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::fatihkilic.net"
        }
    ]
}

Sid 1 was created automatically by CloudFront. We must just add Sid 2.

Note that, when we are used ListBucket action, Resource shouldn’t be ending arn with /

CloudFront

Here is detail of cloudfront settings:

The most import settings in CloudFront are

Default Root Object
Error page handling espacially to serve react or angular projects.

HTTP/2 200 
content-type: text/html
content-length: 14553
date: Fri, 09 Oct 2020 17:11:31 GMT
last-modified: Fri, 09 Oct 2020 16:50:30 GMT
etag: "bb997cbe12c190bf4a48990deafe75f9"
accept-ranges: bytes
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 b912dc97777020eb19579888add26978.cloudfront.net (CloudFront)
x-amz-cf-pop: FRA50-C1
x-amz-cf-id: P-tacNZHerCslXXc2_7eQcXYUWqtdVCEiYHBHBi1ZPD4wRY30qD7ZQ==
age: 51

fatih@andromeda:~$

You can also use this system for your react and angular projects.

Finally, we can say that our architecture is as follows:

That’s all.

Özgür Yazılım ve Linux Günleri - 2017

Fatih M. KILIÇ — Thu, 06 Apr 2017 10:15:00 +0300

Benim de üyesi olduğum, Linux Kullanıcıları Derneği (LKD) ve İstanbul Bilgi Üniversitesi ev sahipliğinde düzenlenecek olan Özgür Yazılım ve Linux Günleri bu yıl 8 ve 9 Nisan tarihlerinde, aynı zamanlı 2 salonda gerçekleşecek.

Etkinlik programı şu şekilde:

1. Gün (8 Nisan, Cumartesi)

Saat	1. Salon	2. Salon
09:20 10:00	Açılış Konuşmaları
10:00 10:45	Fonksiyonel Programlama ve Özgür Yazılımlar Chris Stephenson	Kıymetlimiz "Ruby Gems" Ender Ahmet Yurt
11:00 11:45	IoT Sistemler ve Güvenlik Barkın Kılıç	Metglobal Büyük Veri Uygulama ve Teknolojileri Yaşarcan Yılmaz
12:00 12:45	Masaüstünde Özgürlük Barış Büyükakyol	Prometheus ve Monitoring Erdem Ağaoğlu
13:00 14:00	Öğle Arası
14:00 14:45	TAILS GNU/Linux Masaüstü Dağıtımı, CoreOS GNU/Linux Sunucu Dağıtımı Emel Şimsek PardusARM Erdoğan Bilgici	Kartaca İK Sunumu Yeliz Canpolat Python ile Büyük Veri Coşkun Soysal
15:00 15:45	Bitcoin, Bu Nasıl Özgürlük Ya? Engür Pişirici	Yeni Başlayacaklar için Openstack Erol Guzoğlu
16:00 16:45	Ruby Türkiye Topluluğu Muhammet Dilmaç, Ender Ahmet Yurt, Serdar Doğruyol Django Girls Gönül Aycı, Çağıl Uluşahin, Suzan Üsküdarlı	PISI Paket Yöneticisi Eray Özkural

2. Gün (9 Nisan, Pazar)

Saat	1. Salon	2. Salon
10:00 10:45	Özgür Yazılım Son Kullanıcı için Neden Önemli? Necdet Yücel, Gülşah Köse, Kaan Özdinçer	Kıymetlimiz "Ruby Gems" Ender Ahmet Yurt
11:00 11:45	Uzaktan Sistem Yöneticisi Olarak Çalışmak Aydın Doyak	Metglobal Büyük Veri Uygulama ve Teknolojileri Yaşarcan Yılmaz
12:00 12:45	Linux Sistem Yöneticisi Olmak Doruk Fişek	LibreOffice Geliştirmeye Hızlı Başlangıç Muhammet Kara Özgür Yazılımlar ile Hesaplamalı Akışkan Modelleme Abdullah Anar Sistem Yöneticisi Gözünden CI ve CD süreçleri Seçkin Alan
13:00 14:00	Öğle Arası
14:00 14:45	Özgür Yazılımlarla Siber Tehdit Avcılığı Huzeyfe Önal	Şimdi ve Gelecekte Yapay Öğrenmede Özgür Yazılım Utku Somer Knet ile Derin Öğrenmeye Giriş İlker Kesen
15:00 15:45	Koha, Dspace ve Vufind ile Kütüphane Otomasyonu Mengü Yazıcıoğlu	Knet ile Derin Öğrenmeye Giriş İlker Kesen
16:00 16:45	Özgür Yazılım Çevirmenleri Buluşuyor Necdet Yücel, Kaan Özdinçer, Muhammet Kara,Selim Şumlu	Python/Kivy ile Mobil Oyun Geliştirme Güray Yıldırım

Programı görünce bir iç geçirmedim değil, Chris Stephenson hocanın 2012’de gerçekleştirdiği bir oturum; izlemediyseniz izleyin, izlediyseniz tekrar bi’ izleyin derim: Bilgisayar Bilimleri’nin Başarısı

"Bilgisayar Bilimleri'nin Başarısı" ya da "Kaplanın Çizgilerinin Oluşumu" from Chris Stephenson on Vimeo.

SEO ve Apache Üzerine

Fatih M. KILIÇ — Fri, 31 Mar 2017 12:07:00 +0300

Türkçe’ye de SEO -Search Engine Optimization- olarak geçen Arama Motoru Optimizasyonu üstüne yazılmış bir çok doküman bulabilirsiniz. Ben nedir, nasıl yapılır … şeklinde sayfalarca yazı yazmaktan ziyade bir kaç servis sağlayıcının nelere dikkat ettiğini uygulamalı olarak göstermeye çalışacağım.

Benim SEO’yla ilgilenmemim sebebi sitemin üst sıralarda görüntülenmesinden ziyade standartlara uygun, hızlı bir kullanıcı deneyimi sunma istediğimden dolayıdır.

Öncelikle gördüğüm bütün SEO siteleri temelde iki tane araç takımını referans alıyor:

Google’ın PageSpeed aracı,
Yahoo!’nun performans takımı tarafından oluşturulan kuralları referans alan YSlow aracı

GTmetrix

https://gtmetrix.com/ adresinden erişebilirsiniz.

Temelde yukarıdaki söylediğim iki araç takımını kullanarak sitenize bir skor veriyor. Elbette bununla kalmayıp, sitenin ne kadar sürede yüklendiği, toplam boyutunun ne kadar olduğu gibi veriler üstünden bir dizi çıkarımda bulunup bunu oluşan skora ekliyor.

Skorları neye göre veriyor?

Örnek üzerinden gitmek daha açıklayacı olabilir.

Siz kendi sitenizi analiz ettirebilirsiniz. Örnek olması açısında ben fatihkilic.net üzerinden anlatmaya çalışayım.

Google’ın Apache için -Nginx’de destekleniyor- geliştirmiş olduğu Pagespeed adında bir modülü var. Bu modülü aktif etmeden önceki skorlarım şu şekildeydi:

PageSpeed Score	YSlow Score
(99%)	(91%)

Bütün rapora buradan erişebilirsiniz.

Pagespeed modülünü aktifleştirdikten sonraki skorlar ise şu durumda gerçekleşti:

PageSpeed Score	YSlow Score
(99%)	(96%)

Yine raporun tamamına erişmek isterseniz buradan bakabilirsiniz.

Ne oldu da YSlow skoru %5 artış gösterdi?

Yukarıdaki iki raporu açıp incelediğinizde, Minify CSS , Minify JavaScript ve Avoid a character set in the meta tag sekmesi altındaki farklılığı fark edeceksiniz.

Minification nedir? Diyenleri şöyle alalım.

Pagespeed modülü sadece bu işe mi yarıyor? Başka ne iş yapar?

İmajları ölçeklendirme, html’in içindeki yorum satırlarını kaldırma, cachelemeyi daha performanslı hale getirmek … gibi pek çok şey yaptığı yazıyor.

Nasıl Kurulur?

Debian tabanlı dağıtımlar için kurulumu

Apache’nin daha önceden kurulduğunu ve 32 bitlik mimari kullandığınızı varsayarsak:

$ cd /tmp; wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb
$ sudo dpkg -i mod-pagespeed-stable_current_i386.deb

Komutlarıyla kurulumu gerçekleştirebilirsiniz.

Kurulumu kaldırmak için: $ sudo apt-get remove mod-pagespeed-stable komutunu kullanabilirsiniz.

RPM tabanlı dağıtımlar için

Apache’nin daha önceden kurulduğunu ve 64 bitlik mimari kullandığınızı varsayarsak:

$ cd /tmp; wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm
$ sudo yum install mod-pagespeed-stable_current_x86_64.rpm

Kaldırmak için: $ sudo yum remove mod-pagespeed-stable komutu yeterli olacaktır.

Diğer mimariler ve işlemler hakkında bilgi almak için: https://modpagespeed.com/doc/download

Konfigürasyonu nasıl yapılır?

Debian tabanlı dağıtımlarda genelde gördüğüm apache’nin path’i /etc/apache2 altında, RPM tabanlı dağıtımlarda ise /etc/httpd şeklinde.

Paketi kurduğunuzda ön tanımlı olarak apache sizin için pagespeed modülünü aktif hale getirdi.

Normalde apache modüllerini aktif hale getirmek için kullandığımız komut a2enmod komutudur.

$ a2enmod pagespeed
Module pagespeed already enabled

Ön tanımlı konumlandırıldığı yer yine farklılık gösterebilir. Debian tabanlı apache2 paketlerinde bu genellikle ...../mods-available/ klasörü altında konumlandırılır.

Zaten a2enmod komutu da ...../mods-available/ klasörü altında yüklü bulunan *.conf dosyalarını ...../mods-enabled/ klasörü altına sembolik link ile bağlar.

Pagespeed modülünün konfigürasyonuna:
/etc/apache2/mods-enabled/pagespeed.conf dosyasından ulaşabilirsiniz.

Çok daha fazla detaya giremeyeceğim, apache’nin modül konfigürasyonu hakkında daha fazla detaya buradan ulaşabilirsin.

Pagespeed modülü için de daha fazla detaya buradan erişebilirsin.

Google

Eskiden insights adında bir aracı vardı: https://developers.google.com/speed/pagespeed/insights/

Ancak şu an onu ~~desteklemiyorlar~~:

“PageSpeed Insights has moved the User Experience test for mobile pages into the Mobile Friendly Test”

Düzeltme: Insights’ın sitesine tekrar girdiğimde yukarıdaki açıklamayı göremedim. Ancak en yakın zaman aralığındaki arşiv kaydından bu açıklamıyı görebilirsiniz: https://web.archive.org/web/20170317095251/http://developers.google.com/speed/pagespeed/insights/

Ek olarak destek kelimesini yanlış kullanmışım, kendi geliştirdikleri diğer araçlara yönlendiriyorlar demek istemiştim.

Onun yerine şöyle bir hizmet açmışlar: https://search.google.com/search-console/mobile-friendly ağırlıklı olarak mobil görünüme önem veriyorlar gibi duruyor.

İkinci bir araç olarak: https://testmysite.withgoogle.com/intl/tr-tr/ altında mobil görünüm ve hızı referans alan rapor sunuyorlar.

Tavsiyeler

Cachelemeyi aktif edin.

Sitenizin hızında fark edilir bir süre kazanımı olacaktır, aynı zamanda hem YSlow hem de PageSpeed puanınız da en az %5 artış olabilir.

Bunun için yine apache’nin expires modülünü kullanabilirsiniz.

Aktifleştirmek için: $ sudo a2enmod expires

Ardından .htaccess dosyasının erişilebilinirliğini test etmek iyi olabilir.

Bunun için bir sürü yöntem bulunabilir. Basitçe burada bulunan PHP dosyasını -tabii apache’nin php çalıştırabildiğini varsayıyorum- sunucunuza kopyalayıp kontrol edebilirsiniz.

Son bir adım olarak AllowOverride tagında değişiklik yapmalıyız. Bunun için nasıl bir apache yapısı oluşturulduğunuzu bilemediğimden varsayımsal olarak anlatacağım.

Ancak bu yapacağımız değişiklik güvenlik riski oluşturabilir. Bunun için dikkatli ve daha sağlıklı bir apache klasör yapısı oluşturmak için buraya bakmak faydalı olabilir: http://askubuntu.com/a/429931

/etc/apache2/apache2.conf dosyasında aşağıdaki gibi bir değişiklik yapabilirsiniz:

<Directory {path}>
        ...
        AllowOverride All
        ...
</Directory>

...lar başka konfigürasyonlar olduğunu düşünerek yazdım. Onları yazarsanız apache’yi ayağa kaldıramazsınız. {path} dediğim yere hangi klasör altından hizmet verecek şekilde bir yapı oluşturduysanız onu yazmalısınız. /var/www/html genelde ön tanımlı gelen şeklidir.

.htaccess dosyanıza aşağıdaki konfigürasyonu yazdığınızda hızda bir miktar daha artış olduğunu gözlemleyeceksiniz.

ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"

Son olarak apache’yi yeniden başlatmalıyız.

$ sudo service apache2 restart

Hoşça kalın.

VIM Renklendirme

Fatih M. KILIÇ — Thu, 30 Mar 2017 08:55:00 +0300

VIM nedir?

VIM -VI iMproved- Bram Moolenaar tarafından VI editörünün üstüne bir dizi ek özellik eklenerek yeniden yazılmıştır.

Kullanımını öğrenmeye başlamak için aşağıdaki linkler güzel bir başlangıç olabilir:

VIM Konfigürasyonu

VIM’in kullanıcı temelli konfigürasyonu ~/.vimrc dosyasıdır. ~/.vim klasörünün altında da eklentileri ve diğer konfigürasyon dosyalarını saklarız.

Aşağıda ön tanımlı olarak vim’in sunduğu ekranı görüyorsunuz:

Bu da renk ve söz dizimi tanıma özelliği ekledikten sonraki hali:

~/.vimrc dosyasına aşağıdaki satırları ekleyin:

syntax on
colorscheme distinguished

~/.vim klasörünün altında colors adında bir klasör oluşturun ($ mkdir -p ~/.vim/colors) ardından oluşturduğunuz dizinin altında distinguished colorscheme dosyasını indirin:

$ cd ~/.vim/colors
$ wget https://raw.githubusercontent.com/Lokaltog/vim-distinguished/develop/colors/distinguished.vim

Bu şekilde bir sürü color scheme indirip istediğinizi yükleyip, deneyebilirsiniz. ~/.vimrc dosyasında indirdiğiniz renk şemasının adını düzeltmeyi unutmayın.

Son bir adım kaldı. TERM’ü renk destekleyecek şekilde setlemeliyiz.

Şu an mevcut şekliyle herhangi bir dosyayı vi(m) ile açmaya çalıştığımda şuna benzer bir uyarı verecektir:

line   16:
The distinguished color scheme requires gvim or a 256-color terminal
Press ENTER or type command to continue

Ve şu şekilde görünecektir:

Bunu da düzeltmek için .bashrc dosyasında TERM’ü xterm-256color‘a setlemeliyiz: $ echo 'export TERM="xterm-256color"'' >> ~/.bashrc

Aman dikkat! >> ile > aynı şeyler değiller.

Bir tanesi mevcut dosyanın sonuna ekleme yapan bir operatör (>>) diğeri ise direk olarak mevcut dosyanın içindeki her ne ise yok sayıp, sıfırdan dosya yaratırmış gibi davranan bir operatördür.

Örnek olarak:

$ echo "Deneme" > ~/deneme.out
$ cat ~/deneme.out
$ echo "İkinci satır olsun?" > ~/deneme.out
$ cat ~/deneme.out

Hoşça kalın.

Jekyll Kurulumu

Fatih M. KILIÇ — Tue, 28 Mar 2017 15:21:00 +0300

Son yıllarda adını sıkça duymaya başladığımız Static Site Generator -Statik Site Üretici- gittikçe popülerleşti ve yaygın bir kullanım oranına ulaştı.

Bunda hız, düz metin üstünden bloglama, daha az bir kompleks yapı barındırması başlıca nedenler sayılabilir.

Jekyll nedir?

Basitçe düz metin üstünden(Markdown ve benzerleri) oluşturulan içerikleri ruby kullanarak html formatına dönüştüren bir yazılımdır.

Dinamik sitelerden farkı nedir?

Dinamik sitelerde genellikle düz html yazmayız. Dataları saklamak için bir veritabınına ihtiyaç duyarız -elbette düz metin olarak da saklanabilir, sonra onu tekrar process etmek için yazacağın kodu düşününce; veritabını kullanmanın daha anlamlı olduğunu görürsün-. İşte statik site üreticelerin güzelliği burada, dataları saklamak için MySQL, PosgreSQL vb. bir sunucuya ihtiyaç yoktur.

*.md veya *.markdown formatında yazınızı hazırlayıp saklayabilirsiniz.

Tek avantajı bu mudur?

Hayır. Başlıca avantajlı yanları şunlar sayılabilir:

Hız
Daha az bağımlılık
Güvenlik
Esneklik
Yönetimsel kolaylık

Markdown nedir?

Düz metinleri HTML’e çeviren bir araçtır. Basit söz dizimi sayesinde bir kez öğrenildikten sonra kolayca yazı yazmaya başlanabilir.

IETF tarafından spesifikasyonu yayınlandı, artık bir standardı var.

Markdown resmi sitesine buradan söz dizimi hakkında küçük bir demo yapmaya buradan ulaşabilirsin.

Kurulum

Windows üstünden nasıl kurulur, nasıl yapılır bilmiyorum :-/

Jekyll’in en temel ihtiyaç duyduğu bağımlılık Ruby. Ben bunu doğrudan işletim sistemi paket depolarından kurmak yerine RVM -Ruby Version Manager- kullanarak yapıyorum. RVM hakkında detaylara buradan ulaşabilirsin.

Terminalden:

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
gpg: requesting key D39DC0E3 from hkp server keys.gnupg.net
gpg: key D39DC0E3: "Michal Papis (RVM signing) <mpapis@gmail.com>" 4 new signatures
gpg: no ultimately trusted keys found
gpg: Total number processed: 1
gpg:         new signatures: 4

$ \curl -sSL https://get.rvm.io | bash -s stable --ruby
Downloading https://github.com/rvm/rvm/archive/1.29.1.tar.gz
Downloading https://github.com/rvm/rvm/releases/download/1.29.1/1.29.1.tar.gz.asc
...
...

Komutlarını çalıştırarak kendi kullanıcımız için ruby geliştirme ortamı kurmuş olduk.

To start using RVM you need to run source /home/fatih/.rvm/scripts/rvm in all your open shell windows, in rare cases you need to reopen all shell windows.

Her defasında rvm’yi çağırmaktansa alias tanımlayabiliriz. Kullandığınız dağıtıma göre, .bashrc veya .bash_profile dosyasına alias uservm="source /home/{username}/.rvm/scripts/rvm" yazıp, yazdığınız dosyayı bir kez güncellediğinizde artık RVM’ye erişmek için uservm yazmanız yeterli olacaktır.

{username} yazan yere kendi kullanıcınızı yazmalısınız. Terminalde whoami komutu ile öğrenebilirsiniz.

Jekyll kurulumu

$ gem install jekyll bundler
$ jekyll new jekyll-deneme
$ cd jekyll-deneme

Komutları ile jekyll-deneme klasörü altında jekyll’in çalışması için gerekli kütüphaneleri indirmiş olduk.

jekyll serve

Komutu ile ön tanımlı gelen tema üzerinden sitenin nasıl görüntülendiğini görebilirsin.

_config.yml dosyasında bir değişiklik yapmadıysan http://127.0.0.1:4000 adresinden görünüme göz atabilirsin.

Sonraki yazılarda Jekyll’in konfigürasyonundan ve kullanımından biraz daha detaylıca bahsetmeye çalışacağım.

O kadar beklemeden direk https://jekyllrb.com/docs/structure/ adresinden okumaya başlayabilirsiniz :)

Selamlar,

Hoşça kalın.

Yine, yeni, yeniden...

Fatih M. KILIÇ — Thu, 02 Mar 2017 11:57:00 +0300

Lise yıllarındayken bir blogum vardı. Php + Mysql kullanarak yazmıştım. Zaman içerisinde araya giren önceliklerden dolayı pek üstüne düşememiştim eskidi gitti.

Bu kez Jekyll altyapısı kullanarak yazmaya çalışacağım.

Hoşça kalın.

A long time ago -when I was going to go high school- I had been writing about different topics but mostly technology related.

Now, I decided that writing again about various topics that interest me. I will often write about encountered problems and solutions, new learned technologies, some tricks…

Sometimes It might be only Turkish or only English or sometimes both of them like this :)

By the way, I have made this application by using Jekyll.

In the next post, I will explain how to use it.

Bye.