static website
1.0.0
Selamat datang di Repositori CDNJS/Static-Website, rumah dari situs web CDNJS baru yang dibangun dengan Vue & Nuxt, mengikuti proposal branding CDNJS baru dari CDNJS/Brand.
Situs web ini sepenuhnya bergantung pada API CDNJS untuk beroperasi, menghasilkan penggunaan sumber daya yang sangat rendah untuk melayani situs dan logika aplikasi terbatas untuk memperbarui data yang digunakan (hanya sitemap yang harus diperbarui, semua yang lain menggunakan panggilan API ketika halaman dimuat).
Proyek ini berjalan di Node.js. Pastikan Anda memiliki versi yang diinstal yang sesuai dengan persyaratan pasti kami di file .nvmrc untuk proyek ini.
Termasuk dengan proyek ini adalah file kunci ketergantungan. Ini digunakan untuk memastikan bahwa semua instalasi proyek menggunakan versi dependensi yang sama untuk konsistensi.
Anda dapat menginstal dependensi simpul mengikuti file kunci ini dengan menjalankan:
npm ciSetelah dependensi diinstal, situs web siap dijalankan dalam mode pengembangan. Untuk memulai Nuxt dalam mode pengembangan (tanpa server khusus), jalankan:
npm run dev Sebelum menjalankan npm run dev , tambahkan paket NPM global untuk menyelesaikan 'NODE_ENV' is not recognized as an internal or external command :
npm install -g win-node-envSitus web ini dibangun menggunakan Nuxt dan bergantung pada webpack untuk menghasilkan bundel sisi klien yang digunakan untuk membuat situs dan memberikan interaktivitas. Karena ini, kita dapat menggunakan penganalisa Webpack untuk lebih memahami apa yang berkontribusi pada ukuran bundel akhir.
Untuk menjalankan penganalisa, gunakan skrip paket berikut:
npm run dev:analyze Saat bekerja dengan Situs dalam Pengembangan, menggunakan npm run dev atau npm run dev:analyze , variabel lingkungan SITE_HOST akan secara otomatis diatur untuk menjadi http://localhost:3000/ , karena di sinilah situs dapat diakses oleh skrip dev.
Saat menggunakan situs ini ke produksi menggunakan npm run build dan npm run start Script, variabel lingkungan SITE_HOST harus diatur dan harus menjadi basis kanonik di mana situs akan di -host. Dalam produksi untuk kami, ini diatur ke https://cdnjs.com/ .
Untuk mengaktifkan Google Analytics untuk penyebaran situs, Anda harus mengatur variabel lingkungan GA_ID . Ini harus diatur ke ID Google Analytics yang unik untuk properti Anda, dalam bentuk UA-xxxxxxxxx-x .
Google Analytics dibundel dengan situs menggunakan modul @nuxtjs/google-analytics . Jika variabel lingkungan tidak ditentukan, Google Analytics tidak akan dibundel dengan penyebaran.
Untuk mengaktifkan logging kesalahan penjaga dasar, variabel lingkungan SENTRY_DSN harus diatur dengan URL DSN yang valid dari Sentry.
Untuk mengaktifkan peta sumber & pelacakan rilis untuk pelaporan kesalahan dalam produksi, variabel lingkungan SENTRY_ORG dan SENTRY_PROJECT harus ditetapkan dengan informasi proyek Sentry yang benar, serta SENTRY_AUTH_TOKEN diatur ke token auth yang valid dari Sentry. Peta sumber digunakan seperti dalam produksi yang kami gunakan javascript yang lebih kecil dan dibundel, sehingga Sourcemaps memungkinkan penjaga untuk menunjukkan dari mana kesalahan berasal dari kode sumber.
Secara default, selama proses build, file robots.txt akan dihasilkan untuk situs yang memiliki User-agent: * dan Allow: * . Jika Anda ingin memiliki instance yang lebih pribadi dari situs atau ingin mencegah kontaminasi SEO potensial, Anda dapat mengatur ROBOTS_DISALLOW env var menjadi 1 . Ini akan mengubah aturan Allow: * untuk Disallow: / .
Untuk mengaktifkan pembuatan sitemap untuk Situs, NODE_ENV harus diatur ke production . Ini akan memungkinkan pembuatan sitemap awal selama build serta tugas latar belakang untuk meregenerasi sitemap selama npm run start , setiap 30 menit.
Lebih lanjut, dengan memiliki NODE_ENV=production , ini juga akan memberi tahu robots.txt skrip pembuatan, dirujuk di atas, untuk memasukkan aturan yang menunjuk ke file indeks sitemap, berdasarkan pada SITE_HOST env yang disediakan.
(Perhatikan bahwa untuk npm run dev:analyze , npm run build & npm run start , NODE_ENV akan secara otomatis diatur ke production ).
Untuk menggunakan situs web ini ke produksi, langkah -langkah berikut harus diambil:
npm cinpm run buildnpm run start Untuk penyebaran ke beberapa host PAAS, pemasangan dependensi dan membangun aplikasi akan secara otomatis dilakukan, dengan npm run start didefinisikan dalam Procfile .
Untuk mengubah port yang diikat aplikasi, atur lingkungan PORT var saat menjalankan skrip.
Server Custom Express digunakan untuk menangani sitemaps kami, karena kami memiliki terlalu banyak rute untuk penawaran Sitemap Nuxt untuk menangani dengan andal. Selama Situs Bangun Langkah ( npm run build ) Awal akan dihasilkan. Server Express kemudian akan meregenerasi ini setiap 30 menit menggunakan API CDNJS. Log yang berisi hasil dari generasi terakhir di Express tersedia di /sitemap-log.txt di situs web.
Tes lengkap kami untuk berbaris dapat dijalankan kapan saja dengan:
npm testTermasuk dalam repositori ini adalah file konfigurasi eslint serta file konfigurasi sass-lint untuk membantu memastikan gaya yang konsisten dalam basis kode untuk JS/VUE dan SCSS yang digunakan dalam aplikasi.
Untuk membantu menegakkan ini, kami menggunakan Eslint dan Sass-Lint dalam pengujian kami. Untuk menjalankan Eslint kapan saja, yang memeriksa gaya kode dari file JavaScript dan Vue, Anda dapat menggunakan:
npm run test:eslintEslint juga menyediakan kemampuan memperbaiki otomatis, ini dapat dijalankan terhadap basis kode dengan:
npm run test:eslint:fixDemikian pula, Sass-Lint dapat dijalankan kapan saja untuk memeriksa kualitas semua file SCSS yang digunakan dalam aplikasi, dengan menjalankan:
npm run test:scssPaket sekunder, sass-lint-auto-fix, tersedia untuk membantu secara otomatis memperbaiki beberapa kesalahan yang diangkat oleh sass-lint, yang dapat dijalankan dengan:
npm run test:scss:fix Seperti dengan npm test , yang menjalankan Eslint & Sass-Lint, skrip paket yang lebih pendek tersedia untuk secara otomatis mencoba memperbaiki masalah dari kedua paket linting, yang dapat digunakan dengan menjalankan:
npm run test:fix
