Phenquestions
Tutorial ini akan menunjukkan kepada Anda bagaimana Anda dapat mengatur blog sederhana menggunakan generator situs statis yang sangat cepat dan mudah digunakan.
Apa Itu SSG??
SSG, atau Static Site Generator, adalah aplikasi web yang mengubah konten dinamis pada halaman web menjadi konten statis yang biasanya disimpan secara lokal. Generator situs statis tidak memerlukan basis data dan backend, sehingga menghilangkan kebutuhan untuk mempelajari cara membuat kode. Ini terutama berfokus pada penulisan dan penyajian konten.
SSG vs. CMS
Cara paling populer untuk membuat situs web dan mengelola konten adalah menggunakan CMS atau sistem manajemen Konten seperti WordPress, Drupal, Joomla, dll.
Sistem CMS bekerja dengan membuat dan mengelola konten secara langsung menggunakan antarmuka interaktif. Karena data dalam CMS diambil dari database, CMS sangat lambat karena konten diambil dan disajikan sebagai konten dinamis. Sistem CMS juga rentan terhadap kerentanan keamanan karena mengandalkan plugin eksternal yang ditulis oleh pengembang lain untuk meningkatkan fungsionalitas.
Di sisi lain, generator situs statis bekerja dengan membuat media offline konten seperti editor teks dan merender tampilan halaman akhir setelah publikasi. Karena konten dirender secara lokal, tanpa perlu database, halaman dirender lebih cepat, dan kecepatan memuat sangat cepat.
Generator situs statis terbuat dari kode yang telah dikompilasi sebelumnya yang bertindak sebagai mesin untuk merender konten yang dipublikasikan.
Cara Membuat Blog Statis Dengan Hexo
Salah satu pilihan populer untuk membangun situs statis adalah Hexo.
Hexo adalah aplikasi SSG sederhana, cepat, dan kuat yang ditulis dalam NodeJS. Meskipun ada pilihan lain untuk membangun situs statis, Hexo memungkinkan Anda untuk menyesuaikan situs Anda dan mengintegrasikan berbagai alat.
Mari kita lihat bagaimana kita dapat mengatur situs statis sederhana dengan Hexo.
Menginstal Hexo
Sebelum kita dapat membangun sebuah situs, kita perlu menyiapkan persyaratan hexo dan menginstalnya. Untuk ini, kami membutuhkan NodeJS dan git.
Mulailah dengan memperbarui sistem Anda:
sudo apt-get updatesudo apt-get upgrade
Setelah sistem Anda diperbarui, instal git
sudo apt-get install gitSelanjutnya, instal nodejs dari nodesource menggunakan perintah:
curl -sL https://deb.sumber simpul.com/setup_14.x | sudo -E bash -apt-get install -y nodejs
Setelah Anda menginstal Nodejs, kita dapat melanjutkan untuk menginstal hexo menggunakan perintah:
npm install -g hexo-cliBekerja di Hexo
Setelah Anda menginstal hexo, Anda dapat membuat situs dan mempublikasikan konten. Mari kita lihat cara bekerja dengan Hexo. Ingatlah bahwa ini adalah panduan cepat dan sederhana. Lihat dokumentasi untuk mempelajari lebih lanjut.
Membuat situs
Untuk membuat situs hexo baru, gunakan perintah di bawah ini:
hexo init HexoSitecd situs hexo
instal npm
Memahami struktur Direktori Hexo
Setelah Anda menginisialisasi situs Hexo baru, Anda akan mendapatkan struktur direktori seperti di bawah ini:
-rw-r--r-- 1 cs cs 0 Feb 8 20:51 _config.pemandangan.yml-rw-r--r-- 1 cs cs 2439 8 Feb 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 Feb 20:51 node_modules
-rw-r--r-- 1 cs cs 615 8 Feb 20:51 paket.json
-rw-r--r-- 1 cs cs 56716 8 Feb 20:51 kunci paket.json drwxr-xr-x 1 cs cs 4096 8 Feb 20:51 perancah drwxr-xr-x 1 cs cs 4096 8 Feb 20:51 sumber drwxr-xr-x 1 cs cs 4096 8 Feb 20:51 tema
File pertama adalah _config.yml berisi semua pengaturan untuk situs Anda. Pastikan untuk memodifikasinya sebelum menerapkan situs Anda karena akan berisi nilai default.
File selanjutnya adalah paket.json yang berisi data dan konfigurasi aplikasi NodeJSJS. Di sini, Anda akan menemukan paket yang diinstal dan versinya.
Anda dapat mempelajari lebih lanjut tentang paket.json dari halaman sumber daya di bawah ini:
https://docs.npmjs.com/cli/v6/configuring-npm/package-json
Membuat Blog
Untuk membuat blog sederhana di hexo, gunakan perintah:
hexo blog baru “Blog Halo Dunia”Setelah dibuat, Anda dapat mengarsipkan file penurunan harga di bawah direktori /source/_posts. Anda harus menggunakan bahasa markup penurunan harga untuk menulis konten.
Membuat halaman baru
Membuat halaman di Hexo itu sederhana; gunakan perintah:
hexo halaman baru "Halaman-2"Sumber halaman terletak di bawah /source/Page-2/index.md
Menghasilkan dan Melayani konten
Setelah Anda mempublikasikan konten Anda di hexo, Anda harus menjalankan aplikasi untuk menghasilkan konten statis.
Gunakan perintah di bawah ini:
$ menghasilkan hexoINFO Memvalidasi konfigurasi
INFO Mulai diproses
File INFO dimuat dalam 966 mdtk
INFO Dihasilkan: arsip/indeks.html
INFO Dihasilkan: Halaman-2/indeks.html
INFO Dihasilkan: arsip/2021/indeks.html
INFO Dihasilkan: indeks.html
INFO Dihasilkan: arsip/2021/02/indeks.html
INFO Dihasilkan: js/script.js
INFO Dihasilkan: fancybox/jquery.Kotak mewah.min.css
INFO Dihasilkan: 2021/02/08/Hello-World-Post/index.html
INFO Dihasilkan: css/style.css
INFO Dihasilkan: 2021/02/08/hello-world/index.html
INFO Dihasilkan: css/fonts/FontAwesome.otf
INFO Dihasilkan: css/fonts/fontawesome-webfont.woff
INFO Dihasilkan: css/fonts/fontawesome-webfont.eot
INFO Dihasilkan: fancybox/jquery.Kotak mewah.min.js
INFO Dihasilkan: css/fonts/fontawesome-webfont.woff2
INFO Dihasilkan: js/jquery-3.4.1.min.js
INFO Dihasilkan: css/fonts/fontawesome-webfont.ttf
INFO Dihasilkan: css/gambar/banner.jpg
INFO Dihasilkan: css/fonts/fontawesome-webfont.svg
INFO 19 file dihasilkan dalam 2.08 s
Untuk melayani aplikasi, jalankan perintah:
$ hexo server INFO Memvalidasi config INFO Mulai memproses INFO Hexo berjalan di http://localhost:4000 . Tekan Ctrl+C untuk berhenti.Kesimpulan
Pengantar cepat dan sederhana ini telah menunjukkan kepada Anda cara menggunakan situs statis Hexo. Jika Anda memerlukan informasi lebih lanjut tentang cara bekerja dengan Hexo, silakan merujuk ke dokumentasi utama yang disediakan di bawah ini:
https://hexo.io/dokumen
