Isi kandungan:

Halaman Web Node.js Bahagian 2: 7 Langkah
Halaman Web Node.js Bahagian 2: 7 Langkah

Video: Halaman Web Node.js Bahagian 2: 7 Langkah

Video: Halaman Web Node.js Bahagian 2: 7 Langkah
Video: Build and Deploy Ecommerce Website With HTML CSS JavaScript | Full Responsive Ecommerce Course FREE 2024, November
Anonim
Halaman Web Node.js Bahagian 2
Halaman Web Node.js Bahagian 2

Selamat datang ke BAHAGIAN 2 !!

Ini adalah bahagian 2 dalam tutorial aplikasi laman web Node.js saya. Saya membahagikan tutorial ini kepada dua bahagian kerana ia memisahkan mereka yang hanya memerlukan pengenalan ringkas dan mereka yang mahukan tutorial lengkap di laman web.

Saya akan melalui pembuatan laman web saya. Anda mungkin berbeza, jadi ikuti saya dan pelajari teknik yang digunakan. Sebaik sahaja anda memilih templat HTML yang berbeza, alirannya akan sedikit berbeza. Ingatlah perkara ini.

Langkah 1: Struktur Aplikasi

Struktur Aplikasi
Struktur Aplikasi

Oleh itu, laman web saya mengikuti penjana ekspres, namun saya menggunakan hendal dan bukannya jade. Sekiranya anda suka jade, cari! Jade adalah HTML tangan pendek tanpa semua tanda kurung dan div. Sekiranya anda tidak faham bahawa anda mungkin ingin melawat youtube dan menonton beberapa tutorial HTML.

Saya lebih suka dan lebih selesa dengan HTML dan hendal jadi itulah yang saya gunakan. Untuk membuat projek ekspres dengan hendal jalankan perintah ekspres.

ungkapkan --hbs nameofmyapp

Kemudian terus ikuti langkah di Bahagian 1 untuk memasang semua alat tengah.

Express membuat struktur aplikasi yang sangat spesifik dan sangat berguna yang paling banyak aplikasi node.js mengikuti borang ini dengan beberapa variasi.

Dalam foto yang diambil anda dapat melihat folder dan fail yang berlainan, di bawah ini saya cuba menerangkan semua ini.

tong sampah

Ini adalah folder yang dijalankan terlebih dahulu semasa node.js memulakan pelayan anda. Ia melihat ke fail www dan mengikuti fail ini untuk pelaksanaan. Fail www memberitahu node.js untuk memulakan pelayan di port 3000 (ini boleh berubah menjadi apa sahaja) dan melakukan beberapa perkara lain seperti pendengar acara dan sebagainya. Perkara penting utama ialah port di mana aplikasi anda disediakan.

simpul_modul

Di folder ini adalah apa yang disebut middle-ware. Alat tengah saya ingin menerangkan sebagai perisian tambahan untuk memudahkan anda membuat kod. Theya pada dasarnya adalah perpustakaan lain dengan fungsi yang telah dibuat untuk anda gunakan. Beberapa alat tambahan yang saya gunakan untuk projek ini ialah Nodemailer, Passport, Nodemon, bycrypt, dan lain-lain.

awam

Di sinilah semua gambar, CSS, dan javascript untuk laman web anda akan pergi. Ini digunakan secara langsung oleh laman web.

laluan

Ini adalah menentukan laluan untuk laman web anda. Seperti laman utama, halaman log masuk, dan lain-lain.

pandangan

Seperti yang anda lihat, paparan adalah fail.hbs atau.handlebars, baik yang berfungsi akan memerlukan manipulasi fail app.js. Ini adalah halaman html hendal anda yang akan dipaparkan di penyemak imbas. Layout adalah fail susun atur utama anda dan kadang-kadang terdapat dalam sub folder susun aturnya sendiri. Fail susun atur utama memanggil fail hendal anda yang lain dan memaparkannya, ini akan lebih masuk akal apabila kami menyelidiki kod tersebut.

app.js

Ini adalah fail aplikasi utama anda, kadang-kadang ini dipanggil pelayan, hanya bergantung pada penyediaannya. Fail ini mempunyai semua konfigurasi untuk pelayan dan bahkan beberapa fungsi khas. Ia juga akan menjadi pengendali ralat.

pakej.json

Fail ini dibuat oleh express dan memberitahu npm semua middleware yang ingin anda gunakan dalam projek anda. Sebaik sahaja anda menjalankan pemasangan npm, semua perisian tengah yang dipanggil dalam fail ini, akan dipasang di folder node_modules.

Langkah 2: Susun templat Anda

Anda boleh membuat semua HTML anda dari awal atau menggunakan templat. Saya telah menggunakan templat untuk laman web ini. Laman web lain yang telah saya bantu dibangunkan telah saya kodkan dari awal. Pilihannya adalah milik anda, langkah ini menerangkan susun atur templat.

Aplikasi web saya menggunakan templat bootstrap yang hebat dalam membuat CSS yang luar biasa. Untuk mencari templat, lawati laman web ini. Seperti yang dinyatakan sebelumnya pada langkah sebelumnya, semua fail css, js, dan img yang diperlukan berada di bawah folder awam. Fail ini menjadikan laman web kelihatan lebih baik daripada teks biasa dan bagaimana gambar digunakan di laman web ini.

Untuk menjadikan gaya templat setang berfungsi dengan templat Halaman dibahagi kepada dua bahagian. Yang pertama adalah apa yang disebut sebagai "susun atur". Tata letak adalah sifat yang ingin anda tampilkan di setiap laman web di dalam laman web anda. Dalam kes saya, ini adalah header, yang mempunyai bar navigasi, dan footer, yang memegang bahagian navigasi dan paparan tambahan.

Fail susun atur dan fail hendal lain ada di folder paparan. Saya akan melihat susun atur yang lebih mudah dari penjana ekspres yang anda gunakan sebelumnya untuk memaparkan bagaimana konsep itu berfungsi, maka anda dapat melihat kod saya dan membandingkannya.

Fail susun atur.handlebars yang dihasilkan

{{tajuk}} {{{badan}}}

Keajaiban setang yang sebenarnya ada pada hendal {{title}} dan {{{body}}}. Jadi kedua-dua tindakan ini berbeza {{title}} adalah pemboleh ubah yang dilalui dari file index.js dalam laluan, setelah diteruskan ke templat itu dipaparkan. Tag {{{body}}} menggunakan apa yang dipanggil dalam fungsi rendering dalam fail js laluan anda. Dalam kes kami index.js mempunyai baris berikut:

res.render ('index', {title: 'Express', hitung: userCount});

Ini memanggil fail 'index' dari mesin yang pernah anda gunakan, jade, hendal, dan lain-lain, jadi dalam case index.handlebars kami.

Express.handlebars dihasilkan

{{tajuk}}

Selamat datang ke {{title}}

File index.handlebars diteruskan seperti pemboleh ubah ke tag {{{body}}} dan dipaparkan di laman web anda.

Ini membolehkan anda mempunyai bahagian statik dari laman web anda dan bahagian yang berubah-ubah. Ini menjadikan header dan footer bagus kerana anda tidak perlu membuat ulang keseluruhan halaman, ketika memuat halaman baru, hanya beberapa informasi yang diubah.

Langkah 3: Borang Hubungi

Borang hubungan
Borang hubungan
Borang hubungan
Borang hubungan
Borang hubungan
Borang hubungan

Saya memasukkan borang kenalan ke laman web saya supaya sesiapa sahaja boleh menghantar e-mel laman web saya, dengan pertanyaan atau komen.

Bentuk hubungan ini menggunakan alat tengah npm yang dipanggil Node Mailer.

Menyiapkan Node Mailer

Untuk memasang node-mailer, anda hanya perlu menjalankan kod di bawah ini dalam fail tingkat atas anda, dalam kes kami, myapp.

sudo npm pasang nodemailer

Setelah dipasang, anda perlu menyediakan beberapa perkara dalam fail app.js anda.

Yang pertama hanyalah kebergantungan, ini memberitahu bahawa kita merancang untuk menggunakan perisian tengah ini.

var nodemailer = memerlukan ('nodemailer');

Kedua adalah pengangkut kami, pengangkut digunakan untuk menyambung ke pelayan mel anda, dalam kes saya gmail.

// Pengangkut digunakan untuk mendapatkan akaun gmail

var transporter = nodemailer.createTransport ({service: 'gmail', auth: {type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontent.com, clientSercentent.com: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-fb2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

jika menggunakan nodemailer dengan pelayan mel yang berbeza sila cari di sini untuk dokumentasi dan bantuan.

Beberapa perkara akan berubah dari orang ke orang: pengguna, clientId, clientSecret. refreshToken, dan accessToken.

UserId anda adalah e-mel yang ingin anda gunakan, saya membuat yang baru dengan nama yang sama dengan laman web saya.

The clientId, clientSecret, refreshToken, dan accessToken perlu dijumpai melalui akaun google anda.

Sekiranya anda memerlukan lebih banyak pertolongan, anda boleh mengikuti video ini di sini.

Setelah semua bidang tersebut diisi, kami akan menambah butiran mesej kami.

Seterusnya kita perlu mengesahkan bahawa semua bidang dalam borang kita telah dimasukkan dan merupakan respons yang sah.

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('.'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + namespace.shift () + ']';} return {param: formParam, msg: msg, value: value};}})));

Kami sekarang perlu mendapatkan maklumat dari borang hubungan kami di laman web kami dan menghantar mesej.

// Pos dari butang hantar kenalan, perlu membuat laman utama dengan mesej kejayaan untuk borang yang dihantarapp.post ('/ contact_Form', function (req, res) {// Dapatkan maklumat dari borang kenalan, dari homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// mencipta maklumat yang digunakan semasa menghantar mesej dari: ' E-mel automatik ', ke:' [email protected] ', subjek:' Borang Hubungan Laman Web: '+ nama, teks:' Anda telah menerima mesej baru dari borang hubungan laman web anda. / N / n '+' Di sini adalah perinciannya: / n / nNama: '+ name +' / n / nEmail: '+ email +' / n / nPhone: '+ phone +' / n / nMesej: / n '+ message} transporter.sendMail (mailOptions, function (err, res) {if (err) {console.log ('Error');} other {console.log ('Email Sent');}}) res.render ('index'); // render laman utama baru, lihat bagaimana melakukannya dengan mesej kejayaan, seperti halaman log keluar})

Kilat

Flash digunakan untuk menunjukkan mesej setelah tindakan dilakukan. Anda dapat melihatnya semasa anda menghantar borang, atau tidak memasukkan medan dengan betul.

Pasang flash seperti perisian tengah npm yang lain.

sudo npm pasang sambung-kilat

var flash = memerlukan ('connect-flash'); // mempunyai fungsi kilat untuk ditunjukkan pada mesej skrin

// Sambungkan Flashapp.use (flash ());

Aktifkan flash yang mendorong dan mengemas kini mesej di halaman web. Ini adalah mesej yang mengatakan perkara seperti kejayaan, atau maklumat dimasukkan dengan tidak betul.

// Vars Global

app.use (fungsi (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('error'); res.locals.user = req.user || null; seterusnya ();});

Beberapa memerlukan pemboleh ubah yang berkaitan dengan denyar.

Ada ya borang hubungan yang dibuat.

Langkah 4: Halaman Log Masuk

Halaman Log Masuk
Halaman Log Masuk

Ini hanyalah sesuatu yang saya ingin lihat sekiranya saya dapat melakukannya dan mungkin saya akan menggunakannya pada masa akan datang. Saya hanya ingin menerangkan kodnya seperti di git repositori saya.

Oleh itu, bahagian ini menggunakan beberapa alat tengah npm. Pasang yang berikut menggunakan arahan di bawah.

npm pasangkan pasport & npm pasangkan pasport-tempatan & npm pasangkan bcryptjs

& Membolehkan anda menjalankan beberapa arahan dengan satu baris.

Log masuk dan Pengguna

Anda perlu membuat fail login.js dan user.js di bawah folder laluan anda. Ini akan digunakan untuk memungkinkan penciptaan pengguna, yang akan disimpan di pangkalan data kami, dan memungkinkan pengguna untuk masuk dengan memeriksa pangkalan data.

pengguna.js

var express = memerlukan ('express'); var router = express. Router (); var passport = memerlukan ('pasport'); var LocalStrategy = memerlukan ('passport-local'). Strategi; var Pengguna = memerlukan ('../ model / pengguna'); // Daftar router.get ('/ register', function (req, res) {res.render ('register');}); // Daftar Pengguna router.post ('/ register', function (req, res) {var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Pengesahan req.checkBody ('name', 'Name is required'). notEmpty (); req.checkBody ('email', 'Email diperlukan')).notEmpty (); req.checkBody ('email', 'Email tidak sah'). isEmail (); req.checkBody ('nama pengguna', 'Nama pengguna diperlukan'). notEmpty (); req.checkBody (' kata laluan ',' Kata Laluan diperlukan '). notEmpty (); req.checkBody (' password2 ',' Kata laluan tidak sepadan '). sama (req.body.password); var error = req.validationErrors (); if (ralat) {res.render ('register', {error: error});} lain-lain {var newUser = pengguna baru ({nama: nama, e-mel: e-mel, nama pengguna: nama pengguna, kata laluan: kata laluan}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'Anda telah didaftarkan dan kini boleh log masuk'); res.redirect (' /log masuk'); } });

Memecahkan bahagian ini demi satu

Mula-mula kami memasukkan semua alat tengah yang diperlukan, kemudian kami memasukkan fail model kami yang dijelaskan di bawah. Kami membuat laluan dari tag daftar dan memaparkan teks hendal daftar kami. Kemudian fungsi penting datang. Ini membolehkan kami mendaftarkan pengguna baru dalam pangkalan data kami. Fungsi memeriksa untuk memastikan semua bidang sah dan disertakan dalam borang, jika tidak, ia akan meminta mereka. Selanjutnya ia memeriksa kesilapan, dan jika tidak ada kesalahan, ia akan membuat pengguna baru dengan maklumat yang diberikan. Ia kemudian kembali ke halaman masuk, yang membolehkan anda masuk.

log masuk.js

var express = memerlukan ('express');

var router = express. Router (); var passport = memerlukan ('passport'); var LocalStrategy = memerlukan ('passport-local'). Strategi; var Pengguna = memerlukan ('../ model / pengguna'); / * DAPATKAN senarai pengguna. * / // Homepage router.get ('/', function (req, res) {res.render ('login');}); passport.use (LocalStrategy baru (fungsi (nama pengguna, kata laluan, selesai) {User.getUserByUsername (nama pengguna, fungsi (err, pengguna) {if (err) throw err; if (! user) {return done (null, false, { message: 'Pengguna Tidak Dikenal'});} User.comparePassword (kata laluan, user.password, function (err, isMatch) {if (err) throw err; if (isMatch) {return selesai (null, user);} lain { pengembalian selesai (null, false, {message: 'Kata laluan tidak sah'});}});});})); passport.serializeUser (fungsi (pengguna, selesai) {selesai (null, user.id);}); passport.deserializeUser (fungsi (id, selesai) {User.getUserById (id, function (err, user) {done (err, user);});}); router.post ('/ login', passport.authenticate ('local', {successRedirect: '/', FailRedirect: '/ login', failFlash: true}), fungsi (req, res) {res.redirect ('/ papan pemuka ');}); router.get ('/ logout', function (req, res) {req.logout (); req.flash ('success_msg', 'You log out'); res.redirect ('/ homepage');});

module.exports = penghala;

Mula-mula kami memasukkan semua alat tengah yang diperlukan, kemudian kami memasukkan fail model kami yang dijelaskan di bawah. Kami membuat laluan dari tag masuk dan memaparkan teks hendal masuk kami. Kami kemudian menggunakan beberapa fungsi pasport untuk mengambil nama pengguna dan kata laluan yang dimasukkan dan menyemaknya pada pangkalan data kami. Kami juga akan menggunakan kata laluan yang dienkripsi yang boleh membuat log masuk sedikit lambat pada raspberry pi. Saya menerangkan perkara ini seterusnya. Setelah mengesahkan nama pengguna dan kata laluan, anda akan diarahkan ke halaman utama yang akan menunjukkan papan pemuka ketika kami menyiapkannya dalam fail indeks kami. Kami juga menambah kemampuan log keluar.

Seperti yang saya nyatakan sebelumnya, kami juga perlu membuat model untuk memeriksa pangkalan data.

Ini dilakukan dengan membuat folder di bawah folder aplikasi utama anda yang disebut model. Dalam folder ini, fail user.js juga diperlukan.

model / pengguna.js

var mongoose = memerlukan ('mongoose');

var bcrypt = memerlukan ('bcryptjs'); // Skema Pengguna var UserSchema = mongoose. Schema ({nama pengguna: {type: String, index: true}, kata laluan: {type: String}, e-mel: {type: String}, nama: {type: String}}); var Pengguna = module.exports = mongoose.model ('User', UserSchema);

module.exports.createUser = fungsi (newUser, callback) {

bcrypt.genSalt (10, function (err, salt) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = function (nama pengguna, panggilan balik) {var query = {username: username}; User.findOne (pertanyaan, panggilan balik); } module.exports.getUserById = fungsi (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (اميدوارPassword, hash, callback) {bcrypt.compare (اميدوارPassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

Model ini menggariskan bagaimana parameter pengguna kami dan bagaimana kami akan mengaksesnya. Saya sebutkan sebelum ini bahawa kami akan menyulitkan kata laluan kami. ini supaya tidak ada kata laluan yang disimpan dalam pangkalan data sekiranya berlaku pelanggaran. Kata laluan dicincang menggunakan bcrypt perisian tengah.

Langkah 5: Kaunter Lalu Lintas

Kaunter Lalu Lintas
Kaunter Lalu Lintas

Saya ingin melihat berapa banyak pengguna unik yang mengunjungi laman web saya dan mengira jumlah "klik". Terdapat banyak cara untuk melakukan ini, saya akan menerangkan bagaimana saya melakukannya.

Ini menggunakan koleksi mongodb untuk mengesan berapa banyak pengguna telah mengunjungi halaman saya dan berapa kali setiap pelawat unik dikunjungi.

Oleh kerana kita sudah membincangkan tentang menyediakan mongoDB, saya tidak akan mengatasinya lagi.

Anda mungkin perlu menambahkan dua koleksi ke pangkalan data anda untuk menyusunnya. Untuk melakukan ini, anda boleh memasang RoboMongo jika menggunakan UI, namun jika anda menggunakan pi raspberry tanpa kepala seperti saya, anda akan menyukai perintah berikut.

Cengkerang Mongo

Untuk mengedit db, mendapatkan maklumat, atau membuat koleksi, anda memerlukan shell mongo pada unit tanpa kepala.

Lari

mongo

Ini akan membuka cengkerang.

Tambahkan koleksi

Dalam kes saya, pangkalan data dipanggil loginapp, anda boleh menamakannya apa sahaja yang anda mahukan.

gunakan nameofyourdb

Kami memerlukan koleksi untuk menyimpan semua alamat ip pengguna yang melayari laman web kami.

db.creatCollection ("ip")

Seterusnya kami membuat koleksi untuk mengira hits unik di laman web kami. Ini dimulakan dengan id dan kiraan bermula pada 0.

db.createCollection ("count", {id: "hit counter", count: 0})

Jejak Alamat IP

Untuk melakukan ini, kami akan menarik pengguna Ip ketika mereka mengunjungi laman utama kami, menambah jumlah kami, dan menyimpannya untuk membandingkannya kemudian.

Kami perlu membuat beberapa model untuk menyimpan skema mongoose kami, dan menambahkan beberapa kod ke fail homepage.js kami.

Kami membuat count.js dan ip.js dan menyimpannya dalam folder model kami.

Fail ip.js hanyalah skema untuk alamat ip kami

var mongoose = memerlukan ('mongoose'); // pengendali pakej untuk mongo

// Count Schema var IpSchema = mongoose. Schema ({ip: {type: String,}, hitung: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

count.js akan dipanggil oleh laman utama kami untuk memulakan penjejakan hit. Ini dilakukan seperti di bawah.

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 (). Kemudian (ip => {Public_ip = ip; console.log ("ipv4:" + Public_ip); // =>' 46.5.21.123 '}); publicIp.v6 (). Kemudian (ip => {console.log ("ipv6" + ip); Public_ip = ip; // =>' fe80:: 200: f8ff: fe21: 67cf ' });

Count.getCount (koleksi, ipc, Public_ip, fungsi (kiraan) {

}); hitung = db.collection ('count'). findOne ({id: "hit counter"}, function (err, count) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

Ini berlaku setiap kali seseorang pergi ke laman utama kami, dalam kes ini theinternet.onthewifi.com/homepage.

Ia memeriksa IP pengguna, ip4 atau ip6, dan kemudian menyimpan nilai di mana ia menghantarnya ke count.get.collection yang merupakan fungsi yang tersimpan dalam fail count.js kami.

Setelah memeriksa keunikan pengguna, ia kemudian mengembalikan dan menghantar nilai kiraan ke halaman utama sebagai pemboleh ubah setang.

Fail count.js adalah seperti berikut.

//count.jsvar mongo = memerlukan ('mongodb'); // menyokong pangkalan data var mongoose = memerlukan ('mongoose'); // pengendali pakej untuk mongo mongoose.connect ('mongodb: // localhost / loginapp'); var db = mongoose.connection; var Ip = memerlukan ('../ models / ip'); // Count Schema var CountSchema = mongoose. Schema ({id: {type: String,}, hitung: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count adalah ujian, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // tambah ip baru jika tidak ada di dalam pangkalan data, dan kemas kini kaunter {var new_ip = new Ip ({ip: Public_ip, count: 1}); db.collection ('ip'). save (new_ip); // tambahkan ip baru ke pangkalan data count.update (// kemas kini hit counter {id: "hit counter"}, {$ inc: {count: 1}})} lain // kemas kini ip counter tertentu, untuk melihat siapa yang paling banyak mengunjungi {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

Ini membuat skema kiraan, dan fungsi.getCount kami. Fungsi.getCount memeriksa DB untuk pengguna ip dan jika menemuinya, fungsi menambah jumlah pengguna itu, bukan hit counter. Tetapi jika pengguna ip tidak dijumpai, ia akan membuat objek koleksi baru dengan pengguna ip dan menambah hit counter dengan 1.

Ini kemudian dikembalikan dan dipaparkan ke laman web.

Di sana anda mempunyai kaunter pelacakan ip.

Langkah 6: Blog

Blog
Blog

Pada masa ini saya sedang berusaha untuk mengembangkan blog yang berpusat pada minat saya mengenai perisian, rumah pintar, dan Polaroid. Oleh itu, saya membuat bahagian blog. Blog menggunakan halaman html statik dan rangka hendal. Setelah mencari teknologi yang lebih baik untuk menjadikan blog lebih mudah, saya telah merancang semula laman web saya menggunakan hugo. Hugo adalah penjana html statik. Saya bercakap lebih banyak mengenai perkara ini dalam tutorial yang disebutkan di bawah.

Langkah 7: Selesai

Di sana anda mengikuti tutorial mendalam di laman web node.js saya yang dihoskan secara tempatan di raspberry pi saya. Sekiranya anda mempunyai soalan atau komen sila tinggalkan di bawah.

Saya harap ini dapat membantu orang lain di luar sana.

Untuk pendekatan yang berbeza ke laman web ini menggunakan hugo, penjana halaman web statik melihat tutorial saya yang lain (akan datang).

Disyorkan: