devii
v0.5.0
Starter blog pengembang untuk tahun 2020.
Next.js
Bereaksi
Naskah
Penurunan harga
Sorot sintaks
Seo
Generasi RSS
Jika Anda bahagia dan Anda tahu, bintang repo ini
/md/blogMarkdown.tsx dengan dukungan untuk penyorotan sintaks gaya gitubBaca lebih lanjut tentang motivasi + desain di belakang Devii di https://colinhacks.com/blog/devii.
Repo ini berisi kode untuk https://devii.dev.
Devii.dev berfungsi sebagai dokumentasi dan demo kerja Devii. Setelah Anda mengkloning/garpu, Anda dapat melihat kode untuk mempelajari cara kerja Devii. Kemudian Anda dapat merobek semua yang tidak Anda sukai, menyesuaikan yang lainnya, dan membangun alat dan komponen Anda sendiri di atas fondasi yang disediakan Devii!
Situs web pribadi Anda adalah manifestasi online Anda. Devii tidak benar -benar menyediakan banyak di luar kotak. Ini memberikan beberapa gaya default gaya menengah yang bagus untuk posting blog Anda dan beberapa alat untuk memuat/rendering markdown. Tetapi Anda harus menerapkan beranda sendiri lebih atau kurang dari awal. Dan itulah intinya! Jangan puas dengan beberapa tema. Membangun sesuatu yang mewakili Anda.
Untuk memulai:
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev . Ini harus memulai server di http://localhost:3000 . Inti dari repo ini adalah Next.js. Kami memilih Next.js karena ini adalah cara paling sederhana, paling elegan untuk menghasilkan versi statis dari situs web berbasis reaksi. Dokumasinya sangat baik; Baca dulu: Dokumentasi Next.js.
Ini adalah versi singkat dari struktur proyek. File konfigurasi tertentu ( next.config.js , next-end.d.ts , .gitignore ) telah dihapus untuk kesederhanaan.
.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
| ├── index.tsx // the home page (which has access to the list of all blog posts)
| ├── blog
| ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
| ├── blog
| ├── devii.md // this page!
├── whatever.md // every MD file in this directory becomes a blog post
├── components
| ├── BlogPost.tsx
| ├── Code.tsx
| ├── Footer.tsx
| ├── Header.tsx
| ├── Markdown.tsx
| ├── Meta.tsx
| ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json
Next.js menghasilkan halaman web baru untuk setiap file di direktori pages . Jika Anda ingin menambahkan halaman Tentang ke blog Anda, cukup tambahkan about.tsx di dalam pages dan mulailah menulis halaman.
Secara default repo hanya berisi dua halaman: halaman beranda ( /pages/index.tsx ) dan halaman blog ( /pages/[blog].md ).
File [blog].ts mengikuti konvensi Next.js menggunakan tanda kurung persegi untuk menunjukkan rute dinamis.
Halaman beranda sengaja minim. Anda dapat menempatkan apa pun yang Anda inginkan di index.tsx ; Salah satu tujuan kami dalam merancang DevII adalah tidak ada batasan pada pengembang. Gunakan imajinasi Anda! Situs web Anda adalah manifestasi online Anda. Anda dapat menggunakan paket NPM apa pun atau perpustakaan penataan yang Anda sukai.
Devii tidak teropini tentang gaya. Karena situs DevII Anda adalah aplikasi React standar di bawah kap, Anda dapat menggunakan perpustakaan favorit Anda dari npm untuk melakukan gaya.
Devii menyediakan gaya tertentu secara default, terutama dalam penandaan Markdown ( /components/Markdown.tsx ). Gaya-gaya itu diimplementasikan menggunakan solusi gaya bawaan berikutnya styled-jsx . Sayangnya perlu untuk membuat gaya-gaya itu global, karena styled-jsx tidak bermain bagus dengan komponen pihak ketiga (dalam hal ini react-markdown ).
Jangan ragu untuk menerapkan kembali gaya bawaan dengan perpustakaan pilihan Anda jika Anda memilih untuk menggunakan perpustakaan styling yang terpisah (emosi cukup mulia) maka Anda dapat mengimplementasikan kembali gaya default
Cukup tambahkan file markdown di bawah md/blog/ untuk membuat posting blog baru:
foo.md dalam direktori /md/bloghttp://localhost:3000/blog/foo . Anda harus melihat posting baru. Setiap file markdown dapat menyertakan "blok frontmatter" yang berisi berbagai metadata. Devii menyediakan utilitas loadPost yang memuat file markdown, parse itu metadata frontmatter, dan mengembalikan objek PostData terstruktur:
type PostData = {
path : string ;
title ?: string ;
subtitle ?: string ;
description ?: string ; // used for SEO
canonicalUrl ?: string ; // used for SEO
datePublished ?: number ; // Unix timestamp
author ?: string ;
authorPhoto ?: string ;
authorHandle ?: string ; // twitter handle
tags ?: string [ ] ;
bannerPhoto ?: string ;
thumbnailPhoto ?: string ;
} ; Misalnya, berikut adalah blog frontmatter dari sampel posting blog ( md/blog/the-ultimate-tech-stack.md ):
---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
- Devii
- Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---
Lihat /loader.ts Untuk melihat cara kerjanya.
Cukup tambahkan ID Google Analytics Anda (misalnya UA-999999999-1 ') ke globals.ts dan Devii akan secara otomatis menambahkan cuplikan Google Analytics yang sesuai ke situs Anda. Pergi ke /pages/_app.ts untuk melihat bagaimana ini bekerja atau menyesuaikan perilaku ini.
Renderer Markdown ( Markdown.tsx ) menyediakan gaya default yang terinspirasi oleh media. Cukup modifikasi CSS di Markdown.tsx untuk menyesuaikan desain sesuai keinginan Anda.
Anda dapat dengan mudah memasukkan blok kode ke posting blog Anda menggunakan sintaks triple-backtick (seperti GitHub). Tidak ada lagi aframe kodepen yang menanamkan!
Bekerja di luar kotak untuk semua bahasa pemrograman. Tentukan bahasa Anda dengan "tag bahasa". Jadi ini:
`` `TS
// cukup rapi ya?
const test = (arg: string) => {
return arg.length> 5;
};
`` `berubah menjadi
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ; Lihat /components/Code.tsx Untuk melihat cara kerjanya atau menyesuaikan perilaku ini.
Anda tidak perlu memahami semua ini untuk menggunakan Devii. Pertimbangkan ini sebagai "panduan lanjutan" yang dapat Anda gunakan jika Anda ingin menyesuaikan struktur situs.
Tulisan Markdown dimuat selama Next.js Static Build Step. Lihatlah dokumentasi pengambilan data untuk mempelajari lebih lanjut tentang ini.
Berikut versi singkatnya: Jika mengekspor fungsi yang disebut getStaticProps dari salah satu komponen halaman Anda, Next.js akan menjalankan fungsi itu, mengambil hasilnya, dan meneruskan properti props (yang seharusnya menjadi objek lain) ke halaman Anda sebagai alat peraga.
Anda dapat secara dinamis memuat dan menguraikan file markdown menggunakan loadMarkdownFile , fungsi utilitas yang diimplementasikan di loader.ts . Ini adalah fungsi async yang mengembalikan objek naskah PostData yang berisi semua tombol metadata yang tercantum di atas:
Untuk contoh ini, lihat implementasi getStaticProps dari beranda. Fungsi ini memanggil loadBlogPosts - fungsi utilty yang memuat setiap posting blog di /md/blog/ direktori, parsing mereka, dan mengembalikan PostData[] .
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; Ada beberapa fungsi utilitas di loader.ts yang digunakan Devii. Semua fungsi adalah async ! Semua fungsi menerima jalur relatif yang diharapkan menjadi _relative ke md/ Direktori. Misalnya loadPost('blog/test.md' ) akan memuat /md/blog/test.md .
loadPost Loads/Parses File Markdown dan Mengembalikan PostDataloadBlogPosts : memuat/parse semua file di /md/blog/ . Mengembalikan PostData[] . Digunakan di index.tsx untuk memuat/membuat daftar semua posting blog yang diterbitkanloadMarkdownFile : Memuat file penurunan harga tetapi tidak menguraikannya. Mengembalikan konten string. Berguna jika Anda ingin mengimplementasikan beberapa bagian halaman dalam Markdown dan bagian lain di ReactloadMarkdownFiles : menerima pola glob dan memuat semua file di dalam /md/ yang namanya cocok dengan polanya. Digunakan secara internal oleh loadBlogPosts Anda dapat menghasilkan versi yang sepenuhnya statis dari situs Anda menggunakan yarn build && yarn export . Langkah ini sepenuhnya didukung oleh Next.js. Situs statis diekspor ke direktori out .
Setelah dihasilkan, gunakan layanan hosting file statis pilihan Anda (Vercel, Netlify, Firebase Hosting, Amazon S3) untuk menggunakan situs Anda.
Ada file globals.ts di root proyek yang berisi beberapa pengaturan/konfigurasi metadata tentang situs Anda:
yourName : Nama Anda, digunakan untuk tag hak cipta di footer dan feed RSS, misalnya Alyssa P. HackersiteName : judul blog Anda, misalnya Alyssa's Cool Blog ;siteDescription : Deskripsi singkat, digunakan dalam tag deskripsi meta , misalnya 'Saya menulis tentang kode' n stuff ';siteCreationDate : Digunakan dalam umpan RSS yang dihasilkan. Gunakan format ini: '3 Maret 2020 04:00:00 GMT';twitterHandle : Pegangan Twitter untuk Anda atau blog/perusahaan Anda, digunakan dalam tag meta Twitter. Sertakan @ simbol, misalnya '@alyssaphacker';email : Email Anda, digunakan sebagai bidang "Webmaster" dan "ManagingEditor" dari umpan RSS yang dihasilkan, misalnya [email protected] ;url : URL dasar situs web Anda, digunakan untuk "menghitung" tautan kanonik default dari jalur relatif, misalnya https://alyssaphacker.com ';accentColor : Warna latar belakang header dan footer, misalnya #4fc2b4 ; Umpan RSS dihasilkan secara otomatis dari feed posting blog Anda. Umpan ini dihasilkan menggunakan modul rss (untuk mengkonversi format JSON ke RSS) dan showdown untuk mengubah file penurunan harga menjadi HTML yang kompatibel dengan RSS.
Agar generasi RSS bekerja, semua posting Anda harus berisi cap waktu datePublished di metadata frontmatter mereka. Untuk memeriksa atau menyesuaikan generasi RSS, lihat file rssUtil.ts di direktori root.
Setiap halaman posting blog secara otomatis diisi meta tag berdasarkan metadata posting. Ini termasuk tag title , tag meta , og: tag, metadata Twitter, dan tag link yang berisi URL kanonik.
Nilai default URL kanonik dihitung dengan menggabungkan nilai konfigurasi url Anda (lihat konfigurasi global di atas) dan jalur relatif dari posting Anda. Pastikan URL kanonik persis setara dengan URL di browser saat mengunjungi situs langsung Anda, jika tidak, SEO situs Anda mungkin menderita.
Tidak ada "di bawah kap" di sini. Anda dapat melihat dan memodifikasi semua file yang menyediakan fungsionalitas yang tercantum di atas. Devii hanya menyediakan perancah proyek, beberapa utilitas pemuatan pemuatan penurunan harga (di loader.ts ), dan beberapa default gaya yang masuk akal (terutama di Markdown.tsx ).
Untuk mulai menyesuaikan, periksa kode sumber index.tsx (halaman beranda), BlogPost.tsx (templat posting blog), dan Markdown.tsx (renderer markdown).
Pergilah ke repo GitHub untuk memulai: https://github.com/colinhacks/devii. Jika Anda menyukai proyek ini, tinggalkan ️Star️ untuk membantu lebih banyak orang menemukan Devii?
yarn dev Mulai server pengembangan. Setara dengan next dev .
yarn build Membuat build yang dioptimalkan dari situs Anda. Setara dengan next build .
yarn export Mengekspor situs Anda ke file statis. Semua file ditulis /out . Gunakan layanan hosting file statis Anda pilihan (firebase hosting, Amazon S3, Vercel) untuk menggunakan situs Anda. Setara dengan next export .
