Skru! Saya telah Membangunkan Penjana Tapak Statik Saya Sendiri!

Pembangunan web pada masa kini menjadi begitu rumit terima kasih kepada pencipta beribu-ribu cara baharu untuk melakukan perkara yang sama. Pada hari-hari awal pembangunan web dia mempunyai PHP dan jQuery yang melakukan hampir semua yang kami perlukan. Tetapi keadaan telah berubah sekarang.

Singkat Cerita Panjang

Jadi, saya sedang mencari cara untuk membina tapak web peribadi saya. Yang mungkin mempunyai beberapa blog dan pameran projek saya itu sahaja, bukan masalah besar bukan? Nah, walaupun perkara yang sama juga. Jadi, pemikiran awal saya adalah untuk menggunakan ini sebagai timbunan teknologi saya

• Bertindak balas
• Firebase/Supabase
• CSS Tailwind
• Halaman Cloudflare untuk digunakan

Nah, ini mungkin pengakhiran yang menggembirakan tetapi... ?

Seperti yang telah saya nyatakan, saya memerlukan bahagian blog dan ironinya blog dan reaksi tidak berjalan lancar. Memandangkan React pada asasnya adalah untuk membina WebApps bukan tapak web berasaskan kandungan. Sekarang mereka yang tidak tahu kenapa ini ringkasan dari chatGPT

Mengapa React Tidak Sesuai untuk Tapak Didorong Kandungan

ChatGPT Berkata,

React tidak sesuai untuk tapak terdorong kandungan terutamanya kerana ia bergantung pada pemaparan sisi pelanggan, yang boleh memberi kesan negatif kepada SEO dan masa pemuatan halaman awal. Tapak terdorong kandungan mendapat manfaat daripada pemaparan sisi pelayan (SSR) atau penjanaan tapak statik (SSG), yang tidak dikendalikan oleh React di luar kotak. Alat seperti Next.js atau Gatsby, yang memanjangkan React, lebih sesuai untuk keperluan ini.

Sasaran Seterusnya: NextJs

Nah, jelas sekali saya memerlukan SSR untuk laman blog kerana saya mahukan pengindeksan yang baik oleh enjin carian dan pratonton pautan media sosial profesional. NextJs boleh memberi saya kedua-dua perkara itu, tetapi masih ada masalah, dan ia adalah masalah peribadi.

Lihat, saya sentiasa suka menggunakan halaman cloudflare dan ingin mengekalkannya, selain itu saya mahu penghalaan e-mel percuma cloudflare mempunyai alamat e-mel tersuai dilampirkan pada domain saya sekali gus mengurangkan kos.

NextJS di Cloudflare

Saya cuba menggunakan tapak nextJS ke halaman cloudflare melalui dokumentasi rasmi mereka. Nah, keadaan tidak berjalan lancar. Saya tidak dapat menggunakan di sana saya mencuba berjam-jam mencari penyelesaian dan tiada apa yang berhasil. Katakan sahaja nextJS dan cloudflare tidak berjalan lancar untuk saya. Jadi jika sesiapa dari Vercel atau Cloudflare membaca ini betulkan saya jika saya terlepas sesuatu.

Nah, pada ketika ini saya putus asa dan pilihan terakhir yang saya ada ialah SSG.

Penyelesaian Seterusnya: SSG

Kini SSG bagus, dan saya faham kepentingannya di sini. Masalahnya ialah saya tidak pernah bekerja dengan SSG sebelum ini dan terdapat banyak laluan untuk dilalui. Ada macam Hugo, Gatsby, Astro bla bla. Dan mungkin lebih. Sekarang saya tidak biasa dengan mana-mana daripada itu dan pada ketika ini saya sangat kecewa sehingga saya tidak mahu melabur sedikit untuk mempelajari alat baharu untuk apl blog yang mudah. Jadi saya seperti f*$k itu saya akan lakukan perkara saya sendiri.

Mencipta Penjana Tapak Statik Saya Sendiri.

Beberapa perkara mengapa saya memutuskan untuk membangunkan penjana tapak statik saya sendiri

1. Saya kecewa (sudah tentu lol)
2. Memandangkan saya membuat alat saya sendiri untuk perkara saya sendiri, saya akan mempunyai kawalan penuh ke atas cara halaman akan dijana. Bagaimanakah rupa mereka.
3. Saya suka mencipta semula.
4. Saya mempunyai masa lapang untuk dihabiskan.

Rancangan

Pelan itu adalah cara lama untuk mencipta tapak web. Artikel yang berasingan akan mempunyai halaman html mereka sendiri.

Berikut ialah rangka penuh:

1. Saya akan menulis pada fail Markdown palin
2. Gunakan python untuk menghuraikan markdown ke dalam HTML biasa
3. Saya sudah pun mempunyai templat di mana bahagian berbeza akan disuntik secara dinamik.
4. Saya juga akan mempunyai fail konfigurasi yang sepadan dengan artikel itu. Jadi hierarki fail akan kelihatan seperti ini

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

Oleh itu, setiap siaran akan mempunyai foldernya sendiri dan folder itu akan mempunyai config.json dan art.md , Skrip python akan mengambil template.html dan memasukkan kandungan dinamik ke templat HTML itu, contohnya tajuk siaran, slug, lakaran kecil daripada fail konfigurasi dan artikel utama daripada fail markdown yang dihuraikan. Paling penting ia akan menjana tag meta secara dinamik untuk SEO dan media sosial. Selepas itu, ia akan menulis perubahan pada fail yang dipanggil art/.html supaya pautan siaran akan menjadi example.com/art/slug.

Bagaimanakah ia disepadukan?

Jadi saya telah membangunkan antara muka CLI untuk berinteraksi dengan penjana. Saya telah menamakannya sesuai anda tahu seperti dalam F it. Ia mempunyai arahan atau pilihan berikut:

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit <action> <argument>
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-<n>       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload <file_path>  Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Deployment mechanism

So, like I said I wanted to use Cloudflare pages for deploying. Basically what I've done is I've created a branch called prod and whenever the ./fit deploy command is run it will basically copy all the necessary files to the prod branch and push the changes to github. Then, cloudflare will automatically build and redeploy the changes.

Handing images

In order to handle images or any static files I have used firebase storage, the ./fit uploader will pop open a GTK based GUI uploader from which I can upload an image and it will give me the public url which I can than copy, Here's how it looks:

Upload Interface

Post Upload Interface

CLI Interface

There's also a CLI Interface which can be used by ./fit upload

Dynamic Ambient Bcakground

So, I thought when I am the one handling all the building and generation myself I can definitely do some cool stuffs with it, so I've added a dynamic colored ambient background to each post. The idea was to pick an average color from the thumbnail image and then darken it and use it as the background. I've also picked a primary color for the links and buttons from the thumbnail image as well and honestly to me, it looks really cool, here's an screenshot

Comments and Discussion

Since I was working with basically no database or no backend service at all, I had to choose an external service for this and what else does this better than Disqus .

Was it Worth It?

Well, to be honest like I said I was spending some free times, so yeah it was definitely worth it, and it didn't take me long time to be honest I've spent 2-3 days for this full project and really had fun building something creative.

Wrapping Up

So, I've had really fun experience with this project and will hopefully do more improvements and add more functionalities to it. Right now it's so basic and simple which was what I wanted. If you like this project or want me to open source it please let me know. Oh and here's the link of the site I was screaming about shazin.me Thanks for reading.

Atas ialah kandungan terperinci Skru! Saya telah Membangunkan Penjana Tapak Statik Saya Sendiri!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!