Phenquestions
Tutorial ini akan menunjukkan kepada anda bagaimana anda dapat membuat blog mudah menggunakan penjana laman web statik yang sangat cepat dan mudah digunakan.
Apa itu SSG?
SSG, atau Static Site Generator, adalah aplikasi web yang mengubah kandungan dinamik di laman web menjadi kandungan statik yang biasanya disimpan di dalam negara. Penjana laman web statik tidak memerlukan pangkalan data dan backend, sehingga menghilangkan keperluan untuk belajar bagaimana membuat kod. Terutama fokus pada penulisan dan penyampaian kandungan.
SSG vs. CMS
Cara paling popular untuk membuat laman web dan mengurus kandungan adalah menggunakan CMS atau sistem pengurusan Kandungan seperti WordPress, Drupal, Joomla, dll.
Sistem CMS berfungsi dengan membuat dan mengurus kandungan secara langsung menggunakan antara muka interaktif. Oleh kerana data dalam CMS diambil dari pangkalan data, CMS sangat lambat kerana kandungan diambil dan disajikan sebagai kandungan dinamik. Sistem CMS juga rentan terhadap kerentanan keselamatan kerana mereka bergantung pada plugin luaran yang ditulis oleh pembangun lain untuk meningkatkan fungsi.
Sebaliknya, penjana laman web statik berfungsi dengan membuat kandungan luar talian seperti penyunting teks dan menjadikan paparan halaman terakhir setelah diterbitkan. Oleh kerana kandungannya dirender secara tempatan, tanpa memerlukan pangkalan data, halaman menjadi lebih cepat, dan kecepatan memuat sangat cepat.
Penjana laman web statik terbuat dari kod pra-kompilasi yang bertindak sebagai enjin untuk membuat kandungan yang diterbitkan.
Cara Membina Blog Statik Dengan Hexo
Salah satu pilihan popular untuk membina laman web statik adalah Hexo.
Hexo adalah aplikasi SSG yang ringkas, pantas, dan hebat yang ditulis dalam NodeJS. Walaupun ada pilihan lain untuk membina laman web statik, Hexo membolehkan anda menyesuaikan laman web anda dan mengintegrasikan pelbagai alat.
Mari kita lihat bagaimana kita dapat membuat laman web statik sederhana dengan Hexo.
Memasang Hexo
Sebelum kita dapat membina laman web, kita perlu menyediakan keperluan hexo dan memasangnya. Untuk ini, kami memerlukan NodeJS dan git.
Mulakan dengan mengemas kini sistem anda:
sudo apt-get kemas kinisudo apt-get peningkatan
Setelah sistem anda dikemas kini, pasang git
sudo apt-get install gitSeterusnya, pasang nodej dari sumber node menggunakan arahan:
curl -sL https: // deb.sumber node.com / persediaan_14.x | sudo -E bash -apt-get install -y nodejs
Sebaik sahaja anda memasang Nodejs, kita boleh terus memasang hexo menggunakan arahan:
npm pasang -g hexo-cliBekerja dengan Hexo
Setelah memasang hexo, anda boleh membuat laman web dan menerbitkan kandungan. Mari kita lihat cara bekerjasama dengan Hexo. Perlu diingat bahawa ini adalah panduan ringkas dan ringkas. Rujuk dokumentasi untuk mengetahui lebih lanjut.
Membuat laman web
Untuk membuat laman web hexo baru, gunakan arahan di bawah:
hexo init HexoSitecd HexoSite
pasang npm
Memahami struktur Direktori Hexo
Sebaik sahaja anda memulakan laman web Hexo baru, anda akan mendapat struktur direktori seperti di bawah:
-rw-r - r-- 1 cs cs 0 8 Feb 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 pakej.json
-rw-r - r-- 1 cs cs 56716 8 Feb 20:51 kunci-pakej.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
Fail pertama ialah _config.yml mengandungi semua tetapan untuk laman web anda. Pastikan untuk mengubahnya sebelum menyebarkan laman web anda kerana ia akan mengandungi nilai lalai.
Fail seterusnya adalah pakej.fail json yang mengandungi data dan konfigurasi aplikasi NodeJS. Di sini, anda akan menemui pakej yang dipasang dan versi mereka.
Anda boleh mengetahui lebih lanjut mengenai pakej tersebut.json dari halaman sumber di bawah:
https: // dokumen.npmjs.com / cli / v6 / konfigurasi-npm / pakej-json
Membuat Blog
Untuk membuat blog ringkas dalam hexo, gunakan arahan:
hexo blog baru "Hello World Blog"Setelah dibuat, anda boleh memfailkan fail markdown di bawah / source / _posts direktori. Anda perlu menggunakan bahasa markup Markdown untuk menulis kandungan.
Membuat halaman baru
Membuat halaman di Hexo adalah mudah; gunakan arahan:
hexo halaman baru "Halaman-2"Sumber halaman terletak di bawah / source / Page-2 / index.md
Menjana dan Melayan kandungan
Setelah menerbitkan kandungan anda di hexo, anda perlu menjalankan aplikasi untuk menghasilkan kandungan statik.
Gunakan arahan di bawah:
$ hexo menjanaINFO Mengesahkan konfigurasi
INFO Mula memproses
INFO Fail dimuat dalam 966 ms
INFO Dihasilkan: arkib / indeks.html
INFO Dihasilkan: Halaman-2 / indeks.html
INFO Dihasilkan: arkib / 2021 / indeks.html
INFO Dihasilkan: indeks.html
INFO Dihasilkan: arkib / 2021/02 / indeks.html
INFO Dihasilkan: js / skrip.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 / sepanduk.jpg
INFO Dihasilkan: css / fonts / fontawesome-webfont.svg
INFO 19 fail dihasilkan dalam 2.08 s
Untuk melayani aplikasi, jalankan arahan:
$ hexo server INFO Mengesahkan konfigurasi INFO Mula memproses INFO Hexo dijalankan di http: // localhost: 4000 . Tekan Ctrl + C untuk berhenti.Kesimpulannya
Pengenalan ringkas dan ringkas ini telah menunjukkan kepada anda cara menggunakan laman web statik Hexo. Sekiranya anda memerlukan lebih banyak maklumat mengenai cara bekerja dengan Hexo, sila rujuk dokumentasi utama yang disediakan di bawah:
https: // hexo.io / dokumen
