Hexo adalah kerangka kerja blog statis yang dibangun di atas Node.js. Hexo memungkinkan Anda untuk menulis posting dalam format penurunan harga. Entri blog ini diproses dan diubah menjadi file HTML statis menggunakan tema yang telah ditentukan sebelumnya.
Ini berbeda dari perangkat lunak blogging biasa seperti WordPress karena menghasilkan file statis. WordPress memuat blog secara dinamis dengan menjalankan kode PHP setiap kali Anda memuat ulang situs yang membuatnya rentan terhadap kerentanan.
Dalam tutorial ini, Anda akan belajar cara Menginstal Hexo dan menggunakannya untuk membuat blog di server berbasis Ubuntu 20.04.
Prasyarat
-
Server berbasis Ubuntu 20.04 dengan pengguna non-root dengan hak sudo.
-
Git harus diinstal. Jika Anda belum menginstal git, Anda dapat melakukannya melalui perintah berikut.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email "[email protected]" -
Sebuah akun di Github.
Konfigurasi Firewall
Ubuntu 20.04 hadir dengan Uncomplicated Firewall (UFW) secara default. Jika belum, instal terlebih dahulu.
$ sudo apt install ufw
Aktifkan port SSH.
$ sudo ufw allow "OpenSSH"
Aktifkan firewall.
$ sudo ufw enable
Aktifkan port 4000 yang digunakan oleh server Hexo.
$ sudo ufw allow 4000
Juga, buka port HTTP dan HTTPS yang akan kita perlukan nanti.
$ sudo ufw allow http
$ sudo ufw allow https
Periksa status firewall.
$ sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
80/tcp ALLOW Anywhere
4000 ALLOW Anywhere
443/tcp ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
Instal Node.js
Karena Hexo didasarkan pada Node.js, Anda harus menginstalnya terlebih dahulu.
Jalankan perintah berikut untuk menambahkan Repositori Node.js.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Instal Node.js.
$ sudo apt-get install nodejs
Konfirmasi apakah sudah terpasang dengan benar.
$ node --version
v14.15.0
Instal Hexo
Jalankan perintah berikut untuk menginstal paket Hexo.
$ sudo npm install hexo-cli -g
-g parameter menginstal hexo-cli paket global yang memungkinkan Anda menginstal blog Hexo di direktori mana pun yang Anda pilih.
Buat direktori untuk menginstal Hexo.
$ sudo mkdir -p /var/www/hexo
Tetapkan izin dan kepemilikan yang diperlukan.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
Selanjutnya, Anda perlu menginisialisasi dan mengatur file yang diperlukan untuk blog Hexo. Untuk melakukannya, pindah ke direktori yang baru saja Anda buat.
$ cd /var/www/hexo
Inisialisasi blog Hexo.
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
INFO Start blogging with Hexo!
Instal Hexo.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 5 packages from 1 contributor and audited 191 packages in 1.567s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Anda sekarang dapat memeriksa struktur direktori.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
_config.yml file menyimpan konfigurasi untuk blog Hexo Anda. Sebagian besar pengaturan blog dapat diubah dari sini.
node_modules direktori menampung semua paket yang dibutuhkan Hexo dan yang bergantung padanya.
package.json file berisi daftar semua paket dan nomor versinya yang dibutuhkan Hexo.
package-lock.json file secara otomatis dihasilkan oleh npm setiap kali Anda melakukan instalasi atau perubahan pada paket Hexo. Ini berisi informasi tentang paket dan versi yang diinstal atau diubah.
scaffolds direktori berisi template yang menjadi dasar postingan dan halaman blog Anda.
source direktori berisi konten situs aktual dalam format HTML/CSS yang kemudian dipublikasikan ke web. Folder atau file apa pun yang diawali dengan _ (garis bawah) diabaikan oleh Hexo kecuali _posts map. Untuk saat ini, direktori kosong karena kami belum menulis atau menerbitkan apa pun.
themes direktori berisi tema Blog Anda.
Konfigurasi Hexo
Buka _config.yml file untuk diedit.
$ nano _config.yml
Periksa bagian file yang berjudul Site
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
Pilihannya cukup jelas. Ubah nama situs Anda, atur subtitle jika Anda mau. Tambahkan deskripsi situs Anda dan beberapa kata kunci untuk mendeskripsikannya. Ubah nama penulis dan zona waktu untuk situs Anda.
Selanjutnya, periksa URL bagian dari file.
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
Ubah URL situs Anda menjadi nama domain Anda. Pastikan Anda menggunakan HTTPS di URL Anda karena kami akan memasang SSL nanti.
Jika Anda tidak ingin URL situs Anda menampilkan index.htm l di akhir setiap halaman, Anda dapat mengubah kedua opsi trailing_index dan trailing_html menjadi false .
Ada beberapa setelan lagi yang harus Anda aktifkan.
Ubah nilai default_layout variabel dari post ke draft . Ini akan membuat postingan baru sebagai draf sehingga Anda harus memublikasikannya sebelum muncul di blog.
Ubah nilai post_asset_folder variabel menjadi true . Ini akan memungkinkan Anda untuk memiliki folder gambar individual untuk setiap posting, bukan satu folder gambar untuk semua posting.
Simpan file dengan menekan Ctrl+X dan memasukkan Y saat diminta.
Memasang Tema
Hexo dikirimkan dengan tema default bernama Landscape. Anda dapat beralih ke tema lain dengan menginstal tema Hexo lain yang tersedia dari halaman Temanya.
Semua tema Hexo tersedia melalui Github sehingga Anda perlu mengkloning repositori Github tema.
Untuk tutorial kami, kami memasang tema Berikutnya. Beralih ke direktori Hexo dan Kloning repositori Github tema ke themes direktori.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Ubah /var/www/hexo/_config.yml file untuk mengubah tema dari Lansekap ke Berikutnya.
$ nano _config.yml
Buat perubahan pada variabel tema untuk mengganti tema.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Anda dapat mengubah pengaturan tema dengan memodifikasi /var/www/hexo/themes/next/_config.yml berkas.
Buat dan Publikasikan Postingan
Saatnya membuat postingan pertama kami.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
Buka postingan baru untuk diedit.
$ nano ./source/_drafts/first-post.md
Setiap postingan harus memiliki front-matter mendirikan. Front-matter adalah blok pendek JSON atau YAML yang mengonfigurasi detail penting seperti judul postingan, tanggal publikasi, kategori, tag, dll. Ganti data default dengan opsi yang benar.
title: Howtoforge's First Post
tags:
- test
categories:
- Hexo
comments: true
date: 2020-11-14 00:00:00
---
## Markdown goes here.
**This is our first post!**
Jika Anda ingin menyisipkan gambar di postingan Anda, tambahkan kode berikut di postingan Anda.
{% asset_img "example.jpg" "This is an example image" %}
Setelah itu, salin file example.jpg ke \source\_posts\first-post direktori tempat semua gambar untuk kiriman pertama Anda akan diambil.
Simpan file dengan menekan Ctrl+X dan memasukkan Y ketika diminta setelah Anda selesai menulis postingan.
Selanjutnya, publikasikan postingan tersebut.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
Postingan ini akan terlihat setelah kami menghosting blog.
Memasang Plugin
Hexo memiliki beberapa ratus plugin yang dapat Anda instal. Anda dapat menginstal satu atau lebih plugin tergantung pada penggunaan Anda.
Semua plugin Hexo adalah paket Node.js dan dihosting di Github tempat Anda dapat menemukan detail instalasi dan konfigurasinya.
Untuk tutorial kami, kami akan menginstal hexo-filter-nofollow pengaya.
Pastikan Anda berada di direktori hexo terlebih dahulu lalu instal plugin.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
Buka file konfigurasi Hexo untuk diedit.
$ sudo nano _config.yml
Tempelkan kode berikut di akhir file.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
enable opsi mengaktifkan Plugin. field option mendefinisikan ruang lingkup plugin di mana site menambahkan atribut nofollow ke tautan eksternal di seluruh situs dan post menambahkan atribut nofollow hanya ke tautan di kiriman. exclude option membuat daftar putih domain yang atribut nofollownya tidak akan ditambahkan.
Server Uji
Hexo dikirimkan dengan server web dasar. Sekarang setelah posting kami diterbitkan, sekarang saatnya untuk memulai server pengujian Hexo.
$ hexo server
Sekarang Anda dapat meluncurkan URL http://yourserverIP:4000 di browser Anda dan Anda akan melihat halaman berikut.
Keluar dari server dengan menekan Ctrl + C di terminal.
Buat file Hexo Statis
Server Uji Hexo dapat melayani blog secara dinamis maupun melalui file statis. Perintah di atas melayani blog secara dinamis.
Ada beberapa cara untuk melayani blog Hexo secara publik. Untuk tutorial kami, kami akan menyajikan file statis Hexo menggunakan server Nginx.
Jalankan perintah berikut untuk menghasilkan file statis.
$ hexo generate
Perintah di atas menghasilkan file statis yang disimpan di /var/www/hexo/public map. Kami akan menggunakan server Nginx untuk menyajikan file dari folder ini.
Instal dan Konfigurasi Nginx
Instal server Nginx.
$ sudo apt install nginx
Buat dan buka file konfigurasi Hexo untuk Nginx.
$ sudo nano /etc/nginx/sites-available/hexo.conf
Tempelkan kode berikut di dalamnya.
server {
server_name hexo.example.com;
root /var/www/hexo/public;
index index.html index.htm;
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m; # about 40000 sessions
ssl_session_tickets off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25> ssl_prefer_server_ciphers off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
try_files $uri $uri/ =404;
}
}
server {
if ($host = hexo.example.com) {
return 301 https://$host$request_uri;
}
server_name hexo.example.com;
listen 80;
listen [::]:80;
return 404;
}
Simpan file dengan menekan Ctrl+X dan memasukkan Y saat diminta.
Aktifkan konfigurasi.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Buka /etc/nginx/nginx.conf file untuk diedit.
$ sudo nano /etc/nginx/nginx.conf
Paste baris berikut sebelum baris include /etc/nginx/conf.d/*.conf
server_names_hash_bucket_size 64;
Ubah nilai variabel types_hash_max_size dari 2048 hingga 4096.
types_hash_max_size 4096;
Tekan Ctrl + X untuk menutup editor dan tekan Y saat diminta untuk menyimpan file.
Uji untuk memastikan tidak ada kesalahan sintaks dalam konfigurasi Anda.
$ sudo nginx -t
Jika tidak ada masalah, mulai ulang server Nginx.
$ sudo systemctl restart nginx
Instal SSL
Saatnya menginstal SSL menggunakan layanan Let's Encrypt untuk blog hexo kita.
Untuk itu, instal Certbot.
$ sudo apt install certbot
Hentikan Nginx karena akan mengganggu proses Certbot.
$ sudo systemctl stop nginx
Menghasilkan sertifikat. Kita juga perlu membuat sertifikat DHParams.
$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
Kami juga perlu menyiapkan tugas cron untuk memperbarui SSL secara otomatis. Untuk membuka editor crontab, jalankan perintah berikut.
$ sudo crontab -e
no crontab for root - using an empty one
Select an editor. To change later, run 'select-editor'.
1. /bin/nano <---- easiest
2. /usr/bin/vim.basic
3. /usr/bin/vim.tiny
4. /bin/ed
Choose 1-4 [1]: 1
Perintah di atas membuka editor Crontab. Jika Anda menjalankannya untuk pertama kali, Anda akan diminta untuk memilih editor untuk mengedit pekerjaan Cron. Pilih 1 untuk editor Nano.
Rekatkan baris berikut di bagian bawah.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
Pekerjaan cron di atas akan menjalankan certbot pada pukul 2:25 pagi setiap hari. Anda dapat mengubahnya menjadi apa pun yang Anda inginkan.
Simpan file dengan menekan Ctrl + X dan memasukkan Y saat diminta.
Perbarui Hexo
Beralih ke folder Hexo.
$ cd /var/www/hexo
Jika Anda beralih ke versi Hexo utama, Anda perlu memperbarui package.json mengajukan. Buka untuk mengedit. Anda dapat langsung melompat ke perintah update untuk memperbarui ke versi minor.
$ nano package.json
Ubah baris berikut di bawah dependencies bagian.
"hexo": "^5.0.0",
Ubah nilai 5.0.0 ke versi berikutnya setiap kali dirilis di masa mendatang. Misalnya, jika Hexo 6.0 keluar, maka ubah menjadi berikut.
"hexo": "^6.0.0",
Simpan file dengan menekan Ctrl + X dan memasukkan Y saat diminta.
Jalankan perintah berikut untuk memperbarui hexo.
$ npm update
Menyebarkan Hexo
Hexo tidak hanya dapat di-host langsung di server Anda tetapi juga dapat digunakan langsung di Git, Netlify, Vercel, Heroku, OpenShift, dan berbagai metode lainnya.
Sebagian besar plugin penerapan mengharuskan Anda menginstal plugin. Untuk tutorial kami, kami akan mengatur penyebaran Hexo ke Netlify. Jika Anda ingin menerapkan ke Netlify, maka Anda tidak perlu mengikuti langkah-langkah yang terkait dengan Nginx dan SSL karena Netlify hadir dengan SSL gratis.
Situs Netlify biasanya di-deploy dari repositori Git. Tetapi untuk tujuan kami, kami akan langsung mempublikasikan situs statis ke Netlify menggunakan alat CLI-nya.
Instal Netlify CLI.
$ sudo npm install netlify-cli -g
Anda dapat memverifikasi untuk melihat apakah alat CLI telah diinstal.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Masuk ke Netlify.
$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
Salin login dari terminal di browser Anda dan login ke akun Netlify Anda untuk mengautentikasi.
Anda dapat memeriksa apakah Anda login dengan menggunakan perintah berikut.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email: [email protected]
Teams:
Your Team's team: Collaborator
Beralih ke direktori publik Hexo.
$ cd /var/www/hexo/public
Terapkan situs ke Netlify.
$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge
Site Created
Admin URL: https://app.netlify.com/sites/Howtoforge
URL: https://Howtoforge.netlify.app
Site ID: 986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!
Logs: https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
Pilih dengan tombol panah untuk membuat situs baru dan masukkan nama untuk situs Anda. Masukkan . sebagai direktori yang akan digunakan yang merujuk ke direktori saat ini.
Anda akan diberikan draft URL. Salin URL dan muat ke browser. Jika semuanya terlihat baik-baik saja, jalankan perintah berikut untuk melakukan penerapan produksi.
$ netlify deploy --prod
Situs Anda sekarang seharusnya sudah aktif. Anda dapat menambahkan domain khusus di pengaturan Netlify untuk mengarahkannya ke situs nyata.
Setiap kali Anda memublikasikan postingan baru dan membuat file baru, jalankan perintah berikut dari direktori utama Hexo untuk menerapkan perubahan ke Netlify.
$ netlify deploy --dir ./public --prod
Kesimpulan
Ini menyimpulkan tutorial kami untuk menginstal dan membuat blog menggunakan kerangka Hexo Blog di server berbasis Ubuntu 20.04. Jika Anda memiliki pertanyaan, kirimkan di komentar di bawah.