nemanjam.github.io
1.0.0
Ini adalah repositori untuk blog pengkodean saya nemanjamitic.com. Sumber gratis dan terbuka, jangan ragu untuk menggunakan kembali kode dan menyesuaikan untuk blog pengembang Anda sendiri. Posting blog (masa depan) membutuhkan atribusi.
| Metode | Url |
|---|---|
| Nginx | https://nemanjamitic.com |
| Halaman GitHub | https://nemanjam.github.io |
| Buruh pelabuhan | https://nmc-docker.arm1.nemanjamitic.com |
https://plaSible.arm1.nemanjamitic.com/nemanjamitic.com
Pada akhir tahun 2023. Saya mulai berpikir tentang menangkap wawasan dari karya pengkodean harian saya yang biasa ke artikel blog bulat, jadi saya mulai mencari template blog yang bersih, minimalis dan terstruktur dengan baik. Saya mulai meneliti dan mempertimbangkan Jekyll, Hugo, Next.js tetapi akhirnya menyadari bahwa saat ini Astro adalah alat terbaik untuk situs web pribadi yang statis.
Lalu saya meneliti dan meninjau semua contoh Astro open source yang dapat saya temukan dengan niat untuk menggunakannya kembali dan hanya menyesuaikan gaya tetapi tidak ada yang memenuhi preferensi saya untuk struktur kode dan fitur yang diinginkan, jadi saya memutuskan untuk menyusun bagian terbaik dari semuanya menjadi Struktur dan gaya pengkodean kesukaan saya sendiri. Lihat bagian kredit di bawah.
Saya bermaksud menggunakan situs web ini selama bertahun -tahun yang akan datang, jadi saya mempertimbangkan upaya ekstra yang dihabiskan dengan baik. Selain itu, ini membantu saya mendapatkan beberapa pengalaman praktis dengan Astro dalam prosesnya.
Dalam pengembangan Anda dapat melihat draft posting secara default.
# .env.development
# this var is always without trailing slash '/'
SITE_URL=http://localhost:3000 # .env.production
SITE_URL=https://nemanjamitic.com
# set to true to preview draft posts in production
PREVIEW_MODE= # install packages
yarn install
# copy and set environment variables
cp .env.development.example .env.development
# run development server and visit http://localhost:3000
yarn dev
# delete node_modules and yarn.lock
yarn clean # copy and set environment variables
cp .env.production.example .env.production
# build website
yarn build
# run website and visit http://localhost:3000
yarn startAda tiga metode penyebaran yang tersedia secara lokal dan dalam tindakan GitHub. Anda selalu dapat dengan mudah mengidentifikasi versi yang digunakan saat ini dengan memeriksa info komit terbaru di footer situs web yang digunakan.
Untuk Alur Kerja Tindakan GitHub, Anda perlu mengatur rahasia ini di pengaturan repositori GitHub Anda:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEUntuk penyebaran lokal Anda perlu mengatur alias SSH untuk server jarak jauh, di file konfigurasi SSH lokal Anda, misalnya:
# /home/username/.ssh/config
# arm1 ssh alias for remote server
Host arm1 123.123.13.123
HostName 123.123.13.123
IdentityFile ~ /.ssh/my-servers/arm1-ssh-private-key.key
User your-user Semua penyebaran Nginx turun untuk membangun situs web dan menyalin file yang dikompilasi dari folder /dist ke folder root web nginx di server jarak jauh.
# package.json
# set your SITE_URL
" build:nginx " : " SITE_URL='https://nemanjamitic.com' astro build " ,
# build the app
yarn build:nginx
# configure ssh for your own "arm1" remote server in /home/username/.ssh/config
# copy compiled app from local /dist folder to Nginx web root on the remote server
" deploy:nginx " : " bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' arm1 " ,
# run deploy
yarn deploy:nginxCukup memicu salah satu alur kerja berikut:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlHanya tersedia dalam tindakan GitHub. Cukup memicu salah satu alur kerja berikut:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml Untuk membangun gambar Docker linux/arm64 secara lokal jika Anda memiliki komputer X86, Anda harus menginstal QEMU dan BuildX secara lokal, lihat tutorial ini:
Gambar multi-arch dengan Docker Buildx dan QEMU
Jika Anda berada di Ubuntu, Anda mungkin perlu menjalankan ini juga.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesSetelah itu Anda dapat membangun dan mendorong gambar multi-platform secara lokal.
# package.json
# open terminal and login with your Dockerhub account, both locally and on remote server
docker login my-user my-pass
# replace "nemanjamitic/nemanjam.github.io" with your image name
# set ARG_SITE_URL_ARM64 to your production url
# set correct architecture for your production server --platform linux/arm64 or linux/amd64
" docker:build:push:arm " : " docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --progress=plain --push . " ,
# build and push Docker image, replace "arm" with your architecture
yarn docker:build:push:arm
# replace "~/traefik-proxy/apps/nmc-docker" with your path to docker-compose.yml
# replace "nemanjamitic/nemanjam.github.io" with your image name
" deploy:docker " : " bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io " ,
# pull and run latest image on your production server
yarn deploy:dockerCukup memicu alur kerja ini:
# .github/workflows
# build and push Docker image
default__build-push-docker.yml
# pull and run latest Docker image
# trigger one of the following:
bash__deploy-docker.yml
default__deploy-docker.ymlPerawatan besar dikhususkan untuk struktur kode yang solid, jelas, komprehensif, dapat dimengerti, dapat dipelihara dan dapat disesuaikan. Tujuan di balik ini adalah untuk menjaga hal -hal terpisah, jelas, mudah dibaca dan jelas dan untuk mengurangi kompleksitas dan kebisingan.
Di bawah ini adalah gambaran yang lebih rinci dari fitur dan implementasinya:
Situs web Astro terbaru yang dihasilkan secara statis ini. Ini memiliki koleksi konten posting dan proyek dengan file .mdx dan mereka berfungsi sebagai model utama aplikasi. Kedua tag (1: n) dan kategori (1: 1) didukung untuk hubungan antar pos. Tampilan transisi diaktifkan dan posting dianimasikan di semua halaman menggunakan transition:name alat peraga. Gambar dioptimalkan Astro dan semua ukuran gambar diekstraksi sebagai preset konstan yang dapat digunakan kembali untuk konsistensi dan mengurangi overhead. Pagination tersedia untuk halaman daftar pos dan proyek. Mode pratinjau tersedia baik dengan skrip astro preview atau dengan mengatur PREVIEW_MODE=true di .env.production . Feed RSS dan JSON diimplementasikan sebagai titik akhir API statis. Ada integrasi bereaksi untuk semua komponen yang membutuhkan interaktivitas sisi klien.
Konfigurasi untuk integrasi dan plugin diekstraksi untuk menjaga astro.config.ts bersih dan mudah dibaca. Semua rute situs web terpusat menjadi satu objek konstan tunggal, sama untuk jalur file. Lapisan dipisahkan dan terorganisir secara hierarkis dan mendukung tata letak yang terpusat dan lebar untuk semua jenis halaman: 1. .mdx halaman, 2. Koleksi halaman - pos dan proyek, dan 3. Daftar halaman - indeks dengan pagination. Model Aplikasi Utama Meminta - Koleksi Konten Posting dan Proyek diekstraksi ke folder /modules untuk getStaticPaths() .
Ada dukungan untuk mode tailwind terang/gelap dan tema warna dengan warna semantik. Tema disimpan ke dalam file terpisah sebagai variabel CSS yang diatur dalam dua tingkat. Styling responsif didukung untuk jarak dan tipografi. Semua kode CSS diatur ke dalam tiga lapisan tailwind (pangkalan/komponen/utilitas). Ada sistem yang berhasil untuk menjaga gaya tipografi dalam sinkronisasi antara konten markdown ( tailwindcss/typography plugin dan kelas prose ) dan komponen khusus. Gaya tipografi disesuaikan dan disarikan ke dalam kelas my-prose khusus. Sebagian besar gaya komponen diekstraksi ke dalam file CSS dan menggunakan class-variance-authority untuk varian. Nama kelas dinamis diimplementasikan menggunakan tailwind-merge dan clsx .
Metadata terpusat dan diketik atau semua jenis halaman ( .mdx , koleksi dan daftar) dengan default sebagai fallback. Ada titik akhir API untuk menghasilkan gambar grafik terbuka dengan gambar pahlawan dan gradien warna acak menggunakan template Satori dan HTML yang diterapkan pada setiap halaman. Sitemap dihasilkan pada waktu build menggunakan integrasi resmi. Halaman gaya 404 khusus disediakan.
Ada struktur aset terorganisir untuk gambar yang dioptimalkan ( /src ) dan tidak dioptimalkan ( /public ) dengan default yang disediakan. Untuk ikon digunakan paket astro-icon yang mendukung ikon desain material ( mdi ) dan SVG lokal. Untuk menyaring posting ada halaman paginasi berikut: dengan tag - /tags , berdasarkan kategori - /categories , oleh keduanya - /explore - explore (arsip) halaman. Navbar memiliki item yang disimpan sebagai array dan memiliki item aktif yang ditata untuk rute saat ini. Ada komponen untuk Daftar Isi untuk posting blog yang membaca hierarki sub-header dari konten Markdown. Sistem desain dengan halaman .mdx tersedia di jalur /design , memberikan pratinjau yang jelas dan debugging semua komponen visual. Bagikan komponen untuk berbagi posting mendukung Twitter, Facebook, Reddit, LinkedIn dan Hackernews.
Komentar dilakukan dengan Giscus dan memiliki mode gelap disinkronkan dengan tema utama. Menyematkan tweet, video YouTube dan Vimeo, dan tautan buka grafik dilakukan dengan astro-embed . Sorot sintaks untuk kode tertanam diimplementasikan menggunakan integrasi expressive-code .
Semua kode ditulis dalam TypeScript, tipe untuk seluruh aplikasi terletak di folder terpisah. Ada skema zod terpusat untuk model post, proyek, dan konfigurasi dengan default yang tepat untuk mencegah pengecualian runtime. Variabel konfigurasi dan lingkungan diketik dan waktu buildal divalidasi. Ada tipe yang diabstraksikan untuk model pengumpulan pos dan proyek yang dapat mencakup bidang tambahan seperti waktu membaca yang dihitung.
tsconfig.json telah mendefinisikan alias jalur untuk impor yang bersih dan terorganisir. Kode diformat menggunakan lebih cantik dengan impor yang diurutkan dan Eslint digunakan untuk pemeriksaan sintaksis.
Info Git Commit terbaru termasuk dalam footer situs web untuk identifikasi mudah dari versi yang saat ini digunakan. Ada tiga metode untuk penyebaran produksi: 1. Halaman GitHub, 2. Nginx dan 3. Gambar Docker dan semuanya didukung baik dalam tindakan GitHub maupun secara lokal. Aset Menyalin untuk Nginx dan Membangun Gambar Docker disarikan ke dalam skrip bash dan digunakan kembali dalam tindakan github dan penyebaran lokal untuk debugging lokal yang lebih mudah. Ada dukungan untuk membangun gambar Docker linux/amd64 dan linux/arm64 .
astro:env - selesai.mdx untuk rss menggunakan wadah komponenProyek, contoh, demo, sumber daya yang paling penting yang saya gunakan dan ulas:
Proyek lain, contoh, demo, sumber daya yang saya gunakan kembali dan tinjau:
