Membuat Styling Laman Autoindex Nginx


Hai, selamat datang di ChotibulStudio. Pada kesempatan kali ini, saya ingin berbagi tutorial cara membuat styling atau penataan gaya untuk laman autoindex-nya Nginx. Penataan gaya ini akan berguna untuk mempercantik tampilan halaman index, seperti web repositori.

Ada beberapa hal yang perlu Anda siapkan dahulu sebelum mulai merancang styling laman autoindex Nginx. Beberapa hal tersebut diantaranya:

  1. Mengerti dasar-dasar HTML.
  2. Mengerti dasar-dasar CSS. Anda bisa pakai Bootstrap atau kerangka kerja CSS yang lain.
  3. Mengerti sedikit tentang JavaScript.

Semoga Anda sudah mengerti beberapa hal yang dibutuhkan di atas, ya. Karena, mohon maaf, saya tidak akan menjelaskan lebih detail terkait apa itu HTML, CSS dan JavaScript. Kalau-pun saya punya lebih banyak waktu longgar, nanti akan saya bahas terpisah, kok.

Sekarang, mari kita nikmati saja tutorialnya. Asal salin-tempel juga gak apa-apa. Saya juga begitu. Anggap saja itu adalah awal dari sebuah pembelajaran.

Membuat laman styling dengan HTML, CSS dan JavaScript

Implementasi penataan gaya untuk laman autoindex Nginx membutuhkan setidaknya dua berkas yang didalamnya terdapat skrip HTML. Terlepas akan Anda beri nama apa kedua berkas tersebut nanti, yang penting ada bagian header dan footer.

Dalam membuat laman styling ini, saya menggunakan bantuan Bootstrap, Font Awesome dan sedikit custom CSS. Anda bisa mengunduhnya ke situs web masing-masing, ya.

Berikut langkah-langkah membuat laman statik untuk autoindex Nginx.

1. Struktur direktori laman statik styling

Projek web biasanya memiliki struktur direktori. Projek dengan direktori yang terstruktur, tentu bisa membantu memudahkan kita untuk melakukan pemeliharaan pada kode program.

Inilah root direktori templat styling di mesin lokal saya.

$ ls -l Document/Projek/cs/
drwxr-xr-x 6 root root 4096 Jan 22 21:27 assets
-rw-r--r-- 1 root root 2386 Jan 22 21:38 style_footer.html
-rw-r--r-- 1 root root 4401 Jan 22 22:09 style_header.html

Dimana assets adalah direktori yang saya gunakan untuk menyimpan aset Bootstrap, Font Awesome, dan gambar. Untuk dua berkas berekstensi .html adalah berkas inti untuk mengatur tampilan styling-nya.

Terkait struktur direktori ini, Anda bisa menyesuaikan sesuai dengan kebiasaan Anda.

2. Kode untuk style_header.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>ChotibulStudio Repository Server</title>
    <meta name="twitter:image" content="assets/img/g1144.png">
    <meta property="og:image" content="assets/img/g1144.png">
    <meta name="description" content="Server repositori Ubuntu, Debian, LibreOffice persembahan ChotibulStudio untuk Indonesia">
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:type" content="website">
    <link rel="icon" type="image/png" sizes="104x104" href="/templat/cs/assets/img/g1144.png">
    <link rel="icon" type="image/png" sizes="104x104" href="/templat/cs/assets/img/g1144.png">
    <link rel="icon" type="image/png" sizes="104x104" href="/templat/cs/assets/img/g1144.png">
    <link rel="icon" type="image/png" sizes="104x104" href="/templat/cs/assets/img/g1144.png">
    <link rel="icon" type="image/png" sizes="104x104" href="/templat/cs/assets/img/g1144.png">
    <link rel="stylesheet" href="/templat/cs/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins&amp;display=swap">
    <link rel="stylesheet" href="/templat/cs/assets/fonts/fontawesome-all.min.css">

    <style>
        .navigation-clean {
        background: #fff;
        padding-top: .75rem;
        padding-bottom: .75rem;
        color: #333;
        border-radius: 0;
        box-shadow: none;
        border: none;
        margin-bottom: 0;
    }
    @media (min-width:768px) {
        .navigation-clean {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
    }
    .navigation-clean .navbar-brand {
        font-weight: bold;
        color: inherit;
    }
    .navigation-clean .navbar-brand:hover {
        color: #222;
    }
    .navigation-clean .navbar-toggler {
        border-color: #ddd;
    }
    .navigation-clean .navbar-toggler:hover, .navigation-clean .navbar-toggler:focus {
        background: none;
    }
    .navigation-clean .navbar-toggler {
        color: #888;
    }
    .navigation-clean.navbar-light .navbar-nav .nav-link.active, .navigation-clean.navbar-light .navbar-nav .nav-link.active:focus, .navigation-clean.navbar-light .navbar-nav .nav-link.active:hover {
        color: #8f8f8f;
        box-shadow: none;
        background: none;
        pointer-events: none;
    }
    .navigation-clean.navbar .navbar-nav .nav-link {
        padding-left: 18px;
        padding-right: 18px;
    }
    .navigation-clean.navbar-light .navbar-nav .nav-link {
        color: #465765;
    }
    .navigation-clean.navbar-light .navbar-nav .nav-link:focus, .navigation-clean.navbar-light .navbar-nav .nav-link:hover {
        color: #37434d !important;
        background-color: transparent;
    }
    .navigation-clean .navbar-nav > li > .dropdown-menu {
        margin-top: -5px;
        box-shadow: none;
        background-color: #fff;
        border-radius: 2px;
    }
    .navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item {
        line-height: 2;
        color: #37434d;
    }
    .navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item:hover {
        background: #eee;
        color: inherit;
    }
    body {
        display: flex;
        flex-direction: column;
    }
    a#email {
        text-decoration: none !important;
    }
    footer {
        margin-top: auto;
    }
    </style>
</head>

<body style="height: auto;margin: 0;">
    <header>
        <!-- Start: Navigation Clean -->
        <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="padding-top: 20px;">
            <div class="container">
                <div><img class="img-fluid" src="/templat/cs/assets/img/g1144.png" loading="lazy" alt="Peladen repositori ChotibulStudio" width="76">
                    <p style="margin-top: 16px;">Server Repositori ChotibulStudio</p>
                </div>
            </div>
        </nav><!-- End: Navigation Clean -->
    </header>
    <section style="margin-top: 36px;margin-bottom: 36px;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Start: Insert content here -->
                    <p style="margin-top: 16px;">

3. Kode untuk style_footer.html

</p><!-- End: Insert content here -->
</div>
</div>
</div>
</section>
<footer style="background: #f5f5f5;padding-bottom: 20px;min-height: 50px;">
<!-- Start: 1 Row 3 Columns -->
<div class="container" style="padding-top: 20px;padding-bottom: 20px;">
<div class="row" style="padding-top: 20px;">
<div class="col-md-4" style="padding: 12px;">
    <h4 style="font-size: 16px;font-family: Poppins, sans-serif;font-weight: bold;">ChotibulStudio</h4>
    <p style="font-size: 12px;font-family: Poppins, sans-serif;">Situs web yang menyediakan beragam artikel, tutorial, tips dan trik, serta ulasan untuk dunia Free/Libre Open Source Software</p>
    <div class="d-grid" style="margin-top: 6px;margin-bottom: 6px;"><a id="email" href="mailto:chotibulstudio@gmail.com" style="font-size: 12px;font-family: Poppins, sans-serif;"><i class="far fa-envelope" style="margin-right: 6px;font-size: 16px;"></i>chotibulstudio@gmail.com</a></div>
</div>
<div class="col-md-4" style="padding: 12px;">
    <div class="d-block">
        <h4 style="font-size: 16px;font-family: Poppins, sans-serif;font-weight: bold;">Ditenagai oleh</h4>
        <a href="https://ubuntu.com" target="_blank"><img class="img-fluid" loading="lazy" style="padding: 6px;" src="/templat/cs/assets/img/cof_orange_hex.png" width="62"></a>
        <a href="https://nginx.org" target="_blank"><img class="img-fluid" loading="lazy" style="padding: 6px;" src="/templat/cs/assets/img/1412239.png" width="68"></a>
        <a href="https://letsencrypt.org/id/" target="_blank"></a><img class="img-fluid" loading="lazy" style="padding: 6px;" src="/templat/cs/assets/img/let%27s-encrypt-logo-only.png" width="68"></a>
    </div>
</div>
<div class="col-md-4" style="padding: 12px;">
    <div class="d-block"><img style="margin: 6px;" src="/templat/cs/assets/img/World_IPv6_launch_banner_256.png" width="128"><img style="margin: 6px;"></div>
</div>
</div>
</div><!-- End: 1 Row 3 Columns -->
<!-- Start: 1 Row 1 Column -->
<div class="container">
<div class="row">
<div class="col-md-12" style="margin-bottom: 10px;">
    <p style="font-size: 12px;margin-bottom: 0px;">ChotibulStudio.ID</p>
</div>
</div>
</div><!-- End: 1 Row 1 Column -->
</footer>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

Konfigurasi blok server Nginx untuk laman autoindex

Ada beberapa persiapan sebelum laman autoindex berikut styling-nya berjalan di atas Nginx. Pada praktiknya, saya masih menggunakan mesin lokal untuk implementasi. Jika Anda ingin mempraktikkan langsung dari VPS, Anda bisa menyesuaikan beberapa konfigurasi.

Fyi, pada tutorial ini, saya menggunakan Ubuntu MATE 20.04 LTS untuk melakukan semua tahapan uji coba ini.

1. Buat direktori untuk menyimpan templat

Sebelum mulai konfigurasi, ada baiknya kita menyiapkan direktori untuk menyimpan semua aset kode yang sudah dibuat sebelumnya.

$ sudo mkdir /etc/nginx/theme/

Salin-tempel atau pindahkan root direktori projek styling (yang berisi berkas html berikut aset-nya) ke direktori theme yang barusan Anda buat.

$ sudo cp -r Documents/Projek/cs /etc/nginx/theme/

atau

$ sudo mv Documents/Projek/cs /etc/nginx/theme/

Sampai pada langkah ini, persiapan dari sisi styling sudah selesai. Berikutnya, mari kita buat konfigurasi blok server di Nginx.

2. Konfigurasi blok server Nginx

Sebelum melakukan konfigurasi blok server pada Nginx, Anda perlu memastikan terlebih dahulu bahwa Nginx sudah terpasang.

$ whereis nginx
nginx: /usr/sbin/nginx /usr/lib/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz

Jika hasilnya seperti berikut,

$ whereis nginx
nginx: /etc/nginx

atau

$ whereis nginx
nginx:

Maka Anda pelu memasang Nginx terlebih dahulu.

$ sudo apt update && sudo apt install nginx

Proses pemasangan akan memerlukan waktu beberapa saat. Pastikan koneksi internet Anda aman, ya. Setelah proses pemasangan selesai, salin dan pindahkan berkas konfigurasi bernama default dengan mengeksekusi perintah berikut.

$ sudo cp /etc/nginx/sites-available/default /etc/nginx/conf.d/repocs.conf

Perintah di atas digunakan untuk menyalin berkas default dan memindahkannya ke direktori lain dengan nama repocs.conf. Masalah penamaan berkas, Anda bisa memberikan nama terserah Anda. Bebas!.

Tahapan selanjutnya adalah dengan mengedit berkas repocs.conf. Anda bisa menyesuaikan dengan konfigurasi berikut.

# Konfigurasi server blok untuk styling laman autoindex Nginx
#
server {
        listen 80;
        listen [::]:80;

        # Sesuaikan dengan nama domain atau IP server Anda
        server_name 192.168.1.1;

        # Konfigurasi untuk memuat berkas ikon situs web
        location = '/favicon.ico' {
                alias /etc/nginx/templat/cs/assets/img/favicon.ico;
                access_log off;
                log_not_found off;
        }

        # Konfigurasi direktori templat
        location /templat/cs/ {
                root /etc/nginx;
        }

        # Muat templat yang sudah Anda buat ke laman autoindex
        add_before_body /templat/cs/style_header.html;
        add_after_body /templat/cs/style_footer.html;

        # Konfigurasi laman autoindex
        location / {
                autoindex on;
                autoindex_exact_size off;
                autoindex_localtime on;
                # Sesuaikan root direktorinya, ya
                root /var/www/html;
                index noting_will_match;
        }

}

Simpan konfigurasi yang sudah Anda buat dan muat ulang layanan Nginx.

$ sudo systemctl restart nginx

Sampai pada langkah ini, konfigurasi blok server Nginx berhasil dilakukan. Lanjut untuk uji cobanya.

3. Uji coba

Proses uji coba bisa dilakukan melalui peramban web favorit Anda. Bisa Chrome, Firefox, Safari atau yang lainnya. Kecuali IE, ya.

Buka peramban web dan masukkan domain atau alamat IP yang ada di konfigurasi blok server Nginx. Kurang lebih, berikut ini hasilnya.

Tampilan laman styling autoindex Nginx
Tampilan laman styling autoindex Nginx

Demikian tutorial cara membuat styling laman autoindex Nginx. Semoga bermanfaat untuk saya, Anda dan orang-orang yang Anda cintai.

Referensi

Nginx auto-index styling, tersedia daring di https://abhij.it/58-2/ 

Komentar

Postingan populer dari blog ini

Cara Memperbaiki Galat libdvd-pkg: apt-get check failed di Ubuntu 20.04 LTS

Daftar Rekomendasi Repositori Lokal Debian 11 "Bullseye"

Visual Studio Code Bisa Ngedit Berkas Secara Remote Via SSH, Canggih!