Saya mula menggunakan Jekyll untuk menerbitkan blog saya, tetapi kemudian beralih ke Gatsby, menggunakan templat lumen. Saya telah menggunakan Gatsby sejak versi 0, sekitar Mei 2017.
Saya akan pergi dari Hello, World! Projek Gatsby melalui ke blog pengekodan dengan sintaks kod sintaks dan tema bertukar -tukar untuk kebaikan mod gelap itu.
Terdapat ekosistem yang kaya dengan plugin, permulaan dan tema yang tersedia untuk Gatsby untuk mendapatkan anda dan berjalan dengan cepat, tetapi saya ingin mengambil pendekatan pendedahan progresif untuk menyampaikan Gatsby, yang memberi tumpuan kepada asas -asas bagaimana projek Gatsby berfungsi.
mengapa Gatsby?
Gatsby boleh menggunakan fail markdown untuk membuat halaman dalam projek tapak. Gatsby akan membaca fail markdown ke dalam sistem fail Gatsby dan mengubah markdown ke HTML dan kemudian apabila membina tapak membuat halaman statik.
Hasil akhir adalah tapak super cepat dengan latensi kecil ketika meminta halaman.
markdown dan mdx
MDX (atau Markdown JSX) adalah alat yang membolehkan anda menulis JSX dalam dokumen Markdown anda, seperti ini:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>apa yang saya perlukan?
Saya akan menggunakan kod VS sebagai editor teks saya dan benang sebagai pengurus pakej pilihan saya dalam contoh di bawah. Jika anda lebih suka NPM, itu sejuk. ?
anda juga boleh mencari kod lengkap untuk tutorial ini di GitHub.
Baiklah, sudah tiba masanya untuk memulakan!
hello, dunia!
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>sejuk. Sekarang, sebelum pergi ke tempat lain dengan ini, saya perlu menambah fail .gitignore sebelum memasang modul NPM:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Sekarang saya boleh memasang semua kebaikan npm yang saya perlukan tanpa vs kod git menjerit kepada saya tentang terlalu banyak perubahan aktif. Mari kita pasang beberapa kebergantungan untuk bangun dan berjalan dengan Gatsby:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Seterusnya, kami akan menambah komponen React pertama (banyak) untuk projek itu. Saya akan menambah yang berikut ke fail index.js yang saya buat:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Saya kini bersedia untuk menjalankan arahan Gatsby dari baris arahan:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Ini akan berputar Gatsby Dev Sever dan mengatakan bahawa projek saya tersedia untuk dilihat di pelayar di port 8000 (port Gatsby lalai). URL adalah http: // localhost: 8000/.
Menggunakan perintah binari Gatsby secara langsung dari antara muka baris perintah (CLI) benar-benar boleh dilakukan, tetapi kebanyakan orang akan menambah arahan yang tersedia ke bahagian skrip pada fail pakej.json, seperti ini:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Sebagai bonus tambahan, terdapat beberapa tambahan yang boleh ditambah ke skrip Gatsby di sini.
Jika kita tidak mahu menjalankan projek pada port yang sama setiap kali, ia boleh diubah dengan bendera -p, dan dan pelabuhan yang dinyatakan selepas itu. Sebagai contoh, Gatsby Develop -p 8945.
Jika kita mahu membuka tab penyemak imbas sebaik sahaja projek sudah siap, kita boleh menambah -o ke skrip.
Saya akan melakukan perkara yang sama dengan skrip servis, jadi saya tahu apabila saya telah membina projek ia berada di pelabuhan yang berbeza untuk pembangunan satu:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Dan dengan itu, mandatori "Hello, World!" Selamat datang selesai dan saya boleh meneruskan dengan sisa jawatan ini! ?
Akhirnya saya akan melakukan perubahan yang telah saya buat setakat ini:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Okay, tidak ada banyak perkara yang berlaku dengan projek sekarang, jadi pertama saya akan menambah beberapa kandungan, dari baris arahan sekali lagi:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Saya akan menggunakan ini sepanjang contoh yang saya buat.
Anda akan melihat lanjutan fail .mdx. Ini adalah fail MDX.
Sebelum saya menambah beberapa kandungan untuk blog, saya perlu bercakap mengenai perkara depan.
perkara depan adalah cara untuk menyimpan maklumat mengenai fail yang boleh digunakan oleh Gatsby ketika membina halaman dari mereka. Buat masa ini, saya akan menambah tajuk jawatan dan tarikh. Saya juga akan menambah beberapa kandungan kepada mereka. Inilah jawatan pertama kami:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>Inilah jawatan kedua kami:
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
jawatan ketiga:
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
itu untuk jawatan sekarang, kerana jawatan -jawatan ini belum diiktiraf oleh Gatsby sebagai halaman. Saya perlu membiarkan Gatsby tahu di mana untuk mencari kandungan untuk menambah projek. Untuk melakukan ini, saya akan menambah fail konfigurasi ke Gatsby.
mari kita lakukan perubahan yang saya buat untuk git:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Gatsby Config adalah apa yang digunakan untuk menentukan dan mengkonfigurasi banyak plugin Gatsby yang boleh anda gunakan. Lebih banyak mengenai sistem eko plugin Gatsby sedikit. Buat masa ini, saya akan membuat fail, sekali lagi di terminal:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Ini mewujudkan gatsby-config.js di akar projek supaya saya dapat mengkonfigurasi Gatsby untuk membaca fail .mdx yang saya buat sebelum ini.
Sekarang saya boleh memasang dan mengkonfigurasi plugin Gatsby perlu sumber dan memaparkan fail yang saya buat. Saya akan memasang semuanya sekarang dan secara ringkas terperinci apa yang mereka ada untuk:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
melihat cepat pada pakej.json sekarang menunjukkan bahawa saya mempunyai versi ketergantungan berikut yang dipasang:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Satu perkara yang perlu diperhatikan ialah, di Gatsby, tidak perlu mengimport React dalam komponen anda dengan React 17. Tetapi demi kesempurnaan, dan untuk mengelakkan sebarang kekeliruan, saya akan memasukkannya dalam contoh -contoh ini.
Sekarang saya perlu mengkonfigurasi Gatsby-Plugin-MDX dan Gatsby-Plugin-MDX. Dalam fail gatsby-config.js, saya akan menambah ini:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>melakukan perubahan sehingga sekarang:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Sekarang sudah tiba masanya untuk melihat di mana saya berada dengan fail di Gatsby dengan menggunakan klien Gatsby Graphql, GraphIQL. Anda mungkin perasan, jika anda mengikuti, bahawa CLI menunjukkan dua lokasi URL untuk melihat projek:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Saya akan menggunakan laluan ___graphql (tiga garis bawah) sekarang untuk melihat fail dalam sistem fail.
Jika ini kelihatan agak menakutkan, saya akan cuba menutup semua bahagian yang mungkin tidak masuk akal. Sekiranya anda mengikuti, anda harus menyalin contoh -contoh ke dalam Explorer GraphIQL.
Apabila saya membuka Explorer GraphIQL, saya mempunyai beberapa panel Explorer. Ini semua data yang tersedia untuk diterokai dalam projek ini dan bergantung kepada apa yang saya telah dikonfigurasikan dalam fail Gatsby-Config.js.
Panel pertanyaan GraphIQL dan hasilnya bersebelahan dengan itu. Di sinilah saya akan menulis pertanyaan GraphQL untuk mendapatkan data yang saya perlukan. Terdapat juga bahagian pembolehubah pertanyaan di bahagian bawah panel pertanyaan, dan saya akan datang ke sana kemudian.
di sebelah kanan adalah Explorer Dokumentasi GraphQL. Kerana menaip ketat GraphQL, ini bermakna ia dapat menghasilkan dokumentasi sendiri pada datanya. Tetapi itu di luar skop jawatan ini.
Seterusnya, saya akan bertanya kepada fail yang saya tambah sebelum ini dalam panel pertanyaan GraphIQL. Dalam pertanyaan ini, saya menanyakan tajuk dan tarikh yang ditakrifkan dalam perkara fon fail:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Jika kita memasuki panel pertanyaan tekan butang main besar, kita dapat kembali beberapa data dalam panel hasil. Kami juga boleh menggunakan penjelajah di panel kiri untuk memilih data. Inilah yang saya dapatkan selepas menjalankan pertanyaan:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Ini adalah objek JSON yang besar dengan maklumat yang relevan yang kami minta dalam pertanyaan. Kami akan melihat cara menggunakannya tidak lama lagi. Buat masa ini, ini bermakna kita boleh menggunakan data ini dalam projek Gatsby untuk membuat halaman.
Dalam fail gatsby-config.js, terdapat juga pilihan untuk menentukan metadata tapak. Metadata tapak adalah untuk apabila saya ingin menggunakan semula data biasa seperti tajuk dan keterangan laman web.
Ini akan berguna lagi di jalan apabila saya ingin menambah tag meta ke laman web untuk pengoptimuman enjin carian (SEO). (Sekali lagi, lebih lanjut mengenai itu kemudian.) Buat masa ini, saya akan menentukan beberapa maklumat asas mengenai laman web ini di Gatsby-Config.js dengan objek SiteMetadata.
imenentukan metada tapak secara langsung dalam modul.exports seperti SO:
Objek metadata tapak boleh menjadi sedikit besar, dan saya dapati menyimpannya dalam objeknya sendiri boleh menjadikannya lebih mudah untuk alasan, jadi saya akan menentukannya secara berasingan:<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
kemudian tambahkan objek SiteMetadata ke fail konfigurasi Gatsby:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
sekarang saya boleh melompat ke Explorer Graphiql sekali lagi dan menanyakan metadata tapak dengan pertanyaan berikut:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Adalah idea yang baik untuk menghentikan dan memulakan semula pelayan pembangunan jika anda membuat perubahan pada fail gatsby-config.js, jadi saya akan lakukan itu (
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>c , kemudian benang berkembang), kemudian dalam Explorer GraphIQL menyegarkan halaman dan jalankan pertanyaan sekali lagi untuk mendapatkan data kembali:
Buat cangkuk metadata tapak<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Nota cepat pada beberapa notasi di sana: const {site: {SiteMetadata},} adalah cara cepat untuk mendapatkan data dalam pertanyaan tapak, di mana saya menarik sitemetadata dari objek tapak. Ini dirujuk sebagai pemusnahan.
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Sekarang, selepas saya memulakan pelayan dev sekali lagi, saya boleh pergi ke konsol penyemak imbas (
kawalanshift j di Windows/Linux, command pilihan j pada macOS) dan lihat objek SiteMetadata dalam output konsol. saya mendapat output konsol berikut:
Jangan bimbang tentang amaran konsol untuk halaman 404 yang hilang tidak dijumpai (bersih :: err_aborted 404 (tidak dijumpai)). Saya akan membuatnya kemudian.
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Untuk mengelakkan menulis pertanyaan ini setiap kali, saya mahu menggunakannya dalam komponen. Saya akan abstrak ini ke dalam cangkuk sendiri:
3
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Ini untuk menamakan pertanyaan. Kerana saya akan menggunakan banyak pertanyaan dalam projek itu, masuk akal untuk memberi mereka nama yang bermakna.
Sekarang saya akan melaksanakan cangkuk baru ke dalam fail SRC/PAGES/INDEX.JS:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Itu jauh lebih kurang verbose, dan saya dapat memilih dan memilih item yang saya mahukan dari tapak_metadata_query.
Sudah tiba masanya untuk merangka perubahan yang dibuat setakat ini:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Untuk gaya projek ini, saya akan menggunakan Tema UI, kerana kelajuannya dengan melaksanakan susun atur dan ciri -ciri seperti Mod Dark. Saya akan memperincikan apa yang berkaitan dengan apa yang saya lakukan dan alasan untuk itu, walaupun ini tidak akan menjadi panduan cara menggunakan tema UI.
Terdapat beberapa kebergantungan tambahan untuk menambah tema UI, iaitu:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Dengan yang dipasang, saya perlu menambah Gatsby-Plugin-Theme-UI ke Array Plugin Gatsby-Config.js:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Sekarang, jika saya berhenti dan memulakan semula pelayan dev saya mempunyai laman web yang sedikit berbeza! Semuanya agak biru - atau periwinkle, tepat! Ini adalah Gatsby-Plugin-Theme-UI melakukan perkara itu dan warna itu adalah lalai.
Plugin Gatsby untuk Tema UI menawarkan banyak pilihan konfigurasi, beberapa yang saya akan tutup dengan lebih terperinci apabila diperlukan. Buat masa ini, saya akan membuat folder dan menentukan objek tema untuk UI tema untuk digunakan:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
Dalam fail SRC/GATSBY-PLUGIN-THEME-UI/INDEX.JS, saya akan menambah beberapa pratetap UI tema, menentukan objek tema, dan tersebar di pratetap Switzerland ke tema, kepada warna tema, dan kepada gaya.
Untuk mod gelap, saya menggunakan pratetap UI tema yang mendalam dan menyebarkannya ke dalam objek mod untuk gelap. (Lebih banyak lagi pada masa ini.) Buat masa ini, ketahui bahawa ini akan menjaga banyak perkara untuk saya:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Sekarang jika saya memulakan semula pelayan dev (sekali lagi, ya, anda akan belajar untuk berurusan dengannya) ia akan kelihatan sedikit lebih diterima dengan tema Switzerland yang digunakan. Pada masa penulisan, Tema UI kadang -kadang tidak menyegarkan halaman localhost, jadi perlu melakukan penyiaran halaman penyemak imbas.
melakukan perubahan setakat ini:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>masa untuk menambah beberapa komponen React!
Gatsby tidak mempunyai susun atur tertentu, memberikan tanggungjawab itu kepada pemaju. Dalam kes ini, saya membuat susun atur untuk seluruh tapak. Ada kemungkinan untuk memasukkan banyak susun atur untuk digunakan dalam projek Gatsby, tetapi untuk contoh ini saya akan menggunakan hanya satu.
Sekarang saya akan refactor apa yang saya ada sekarang supaya segala -galanya dibalut dengan komponen susun atur. Apa yang saya ada di Src/Pages/Index.js boleh digunakan untuk komponen header, jadi saya akan membuat beberapa fail sekarang untuk susun atur dan header:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Sekarang untuk memindahkan tajuk dan keterangan dari Src/Pages/Index.js ke komponen Src/Components/Header.js yang baru dibuat.
Daripada mempunyai penggunaan yang digunakan dalam komponen header, saya akan lulus propsitemetadata props yang saya perlukan untuk tajuk dari komponen susun atur, di mana tajuk akan hidup. (Lebih banyak lagi.) Mula -mula, inilah komponen header, yang tinggal di Src/Components/Header.js:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Saya telah menambah dalam beberapa gaya asas menggunakan elemen susun atur UI tema. Ini kelihatan sedikit berbeza dari sebelumnya: kotak, pautan, tajuk ... apa? Ini semua komponen UI tema yang boleh digunakan untuk susun atur, elemen bentuk dan banyak lagi.
anda mungkin melihat as = {gatsbylink} pautan prop ditambah ke komponen pautan. Ini menggunakan sebagai prop dalam UI Tema dan membolehkan komponen diluluskan dalam mengambil gaya UI Tema.
Terdapat jawatan yang hebat dari Paul Scanlon yang menerangkan dengan lebih terperinci bagaimana ini dilakukan dalam UI Tema. Untuk penjelasan yang benar -benar komprehensif mengenai UI tema, terdapat juga "pemahaman tema UI" oleh pengarang yang sama.
Terdapat juga SX dan Variant Props dari Tema UI. SX membolehkan gaya tambahan dihantar ke komponen. Fikirkannya sebagai setara dengan gaya JSX = {{}} prop. Prop variasi membolehkan sekumpulan gaya yang telah ditetapkan untuk digunakan dari tema ke komponen yang digunakan.
sekarang untuk komponen susun atur, yang terletak di Src/Components/Layout.js:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
di sini saya menyimpan hook useitemetadata dan lulus props keperluan komponen header, sekali lagi dengan prop SX untuk menambah beberapa gaya asas untuk penjajaran ke bahagian utama yang mengandungi div. Kemudian saya membuat pembungkus utama untuk kanak -kanak.
Prop kanak -kanak adalah untuk mengembalikan apa -apa komponen susun atur yang dikemas, yang akan merangkumi apa sahaja yang saya mahu memohon susun atur. Contohnya:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Sebagai contoh, saya akan kembali ke halaman indeks (src/pages.index.js) dan tambahkan yang berikut:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Halaman Indeks Posts Query
Untuk mendapatkan maklumat pos, saya akan mencipta semula pertanyaan yang saya buat di bahagian mengenai pertanyaan fail tempatan dengan GraphQL dengan beberapa bit tambahan:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Petikan menggunakan fungsi Gatsby untuk mendapatkan 250 aksara pertama dari badan pos, juga menambah beberapa pemformatan kepada tarikh dengan fungsi Gatsby terbina dalam yang lain.
Kemudian sebagai cara untuk memerintahkan jawatan dalam perintah menurun tarikh, saya telah menambah sejenis: allMdx (sort: {fields: [frontMatter___date], perintah: desc}) {. Ini menyusun tarikh dalam perkara depan jawatan.
Menambahnya kepada Explorer Graphiql memberi saya hasil ini:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Sekarang saya boleh menggunakan pertanyaan itu dalam fail SRC/PAGES/INDEX.JS untuk mendapatkan data tersebut untuk digunakan di halaman indeks. Dalam fungsi indeks, saya akan merosakkan data dari alat yang diberikan kepada komponen melalui pertanyaan GraphQL:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Ini menggunakan komponen yang terperinci sebelum ini. Perhatikan bahawa petikan, frontmatter, dan slug sedang dimusnahkan dari data.allmdx.nodes:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Klik pada pautan akan membawa saya ke halaman Gatsby.js Development 404. Itu kerana saya belum membuat halaman untuk fail .mxd lagi. Itu seterusnya.
Saya akan melakukan apa yang telah saya lakukan setakat ini sebelum bergerak:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Pendekatan ini mempunyai notasi fail khas untuk halaman yang akan disasarkan apabila Gatsby menghasilkan data sistem fail pada masa binaan. Fail menunjukkan nod dan slug. Saya akan membuat fail terlebih dahulu, kemudian terperinci di mana data datang dari:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Jika saya mengambil pertanyaan itu dan tampalkannya ke Explorer Graphiql saya dan tekan butang Play, saya dapatkan ini:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>Dalam fail ini, anda mungkin melihat saya telah merosakkan badan dari data yang dikembalikan, dan kemudian tajuk dari frontmatter, dalam pemusnahan dua peringkat:
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
Satu perkara terakhir yang perlu diperhatikan ialah mdxrenderer membungkus badan jawatan. Ini adalah segala -galanya yang termasuk dalam fail .mdx selepas blok perkara depan. MDX yang disusun dari pertanyaan GraphIQL, yang dikomentari, adalah apa yang perlu dibungkus dalam mdxrenderer:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Saya akan melakukan perubahan sekarang:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Sekarang mengklik pada salah satu pautan pada halaman indeks akan membawa saya ke halaman .mdx yang dikehendaki, tetapi kelihatan sedikit berbeza dari halaman indeks, betul?
Itu kerana tidak ada susun atur membungkusnya lagi. Di sinilah saya boleh menggunakan API Pelayar Gatsby dan menggunakan fungsi WrappageElement untuk membungkus semua elemen halaman. Ia juga disyorkan bahawa saya menggunakan fungsi yang sama di Gatsby SSR.
Untuk mengelakkan pendua kod yang sama dalam dua fail, saya akan membuat fail ketiga dengan kod sebenar yang saya akan gunakan dan mengimportnya ke dalam dua fail Gatsby-* yang disebutkan.
Pertama, saya akan membuat fail yang diperlukan:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>masa untuk menghentikan dan memulakan semula pelayan dev sekali lagi untuk melihat perubahan berkuatkuasa!
Oleh kerana komponen susun atur digunakan di sini untuk membungkus semua elemen halaman di laman web ini, tidak perlu menyimpannya di halaman indeks lagi, jadi saya akan mengeluarkannya dari src/halaman/index.js:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Perhatikan bahawa, apabila membangunkan menggunakan Gatsby berkembang, Gatsby akan terus menggunakan halaman 404 lalai yang mengatasi halaman 404 adat anda.
melakukan ini dan beralih ke bahagian seterusnya:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>
<span><span>--- </span></span><span><span><span>title: Hello World - from mdx! </span></span></span><span><span><span>date: 2021-03-06</span> </span></span><span><span>---</span> </span> My first post!! <span><span>## h2 Heading</span> </span> Some meaningful prose <span><span>### h3 Heading</span> </span> Some other meaningful prose
<span><span>--- </span></span><span><span><span>title: Second Post! </span></span></span><span><span><span>date: 2021-03-07</span> </span></span><span><span>---</span> </span> This is my second post!
<span><span>--- </span></span><span><span><span>title: Third Post! </span></span></span><span><span><span>date: 2021-03-08</span> </span></span><span><span>---</span> </span> This is my third post! <span>> with a block quote! </span> And a code block: <span><span>```js </span></span><span><span><span>const wheeeeee = true;</span> </span></span><span><span>```</span> </span>
Saya perlu memasang pakej dan membuat komponen dalam folder Gatsby-Plugin-Theme-UI yang dipanggil Components.js:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Dalam fail itu, saya perlu menentukan di mana saya mahu menggunakan gaya prisma, yang semuanya pra dan tag kod:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Dengan yang ditakrifkan, saya juga perlu menentukan dalam objek tema yang tema prisma yang saya mahu gunakan:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Perhentian lain dan permulaan pelayan dev diperlukan untuk melihat perubahan berkuatkuasa!
melakukan perubahan dan bergerak ke bahagian seterusnya:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
Bit seterusnya ini adalah pilihan. Markdown JSX membolehkan komponen Reacts (JSX) dimasukkan ke dalam markdown. Untuk menunjukkan ini, saya akan menambah komponen Rainbowtext yang akan menghidupkan beberapa warna pada kitaran animasi. Terdapat kebergantungan tambahan yang saya perlukan untuk animasi: kerangka utama dari @emosi/reaksi. Saya akan memasangnya sekarang:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Ini mungkin akan membuang pelayan dev jika ia berjalan, jadi saya akan menghentikannya sekarang.
Dalam fail SRC/COMPONENTS/RAINBOW-TEXT.JS, saya akan menambah komponen ini:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
kerana ini adalah pilihan, saya tidak akan terperinci mengenai apa yang berlaku di sini. Hanya tahu bahawa ia adalah kesan CSS yang bagus untuk hover.
Dengan komponen yang dibuat, saya boleh mengimportnya ke dalam mana-mana fail .mdx yang saya mahu menggunakannya. Berikut adalah perbezaan fail sekarang yang saya telah menambah komponen:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span> Selepas memulakan pelayan dev sekali lagi, saya boleh pergi ke jawatan di mana komponen itu telah ditambah, dan apabila saya melayang ke atas teks yang dibalut
Anda mungkin akan mengerikan pada import itu: ../../../. Pada dan seterusnya! Ada cara untuk mengelilingi ini, bagaimanapun, menggunakan konsep pembalut akar yang saya terperinci sebelum ini dan menggunakan mdxprovider yang akan - ahem! - Sediakan MDX dengan mana -mana komponen yang anda lalui.
kembali ke pembungkus akar (root-wrapper.js), saya boleh membungkus elemen halaman dengan mdxprovider dan lulus komponen rainbowtext ke mdxprovider:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>sekarang saya boleh mengeluarkan import dari fail .mdx:
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Selepas berhenti dan memulakan semula pelayan dev, saya boleh pergi ke jawatan ini dan masih melihat Rainbowtext berfungsi. Kelebihan tambahan untuk menambahkan komponen terus ke MDXProvider adalah bahawa tidak perlu mengimport komponen ke dalam dokumen .mdx apabila anda ingin menggunakannya. Ia boleh didapati melalui pembekal untuk semua dokumen MDX.
Saya akan melakukan ini sekarang:
<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>Jika saya mahu menambah imej ke catatan blog saya, saya boleh memasukkannya ke dalam fail MDX, seperti ini:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>./mdx-logo.png adalah fail yang saya tambahkan ke folder kandungan/2021/03/06/hello-world, dan saya merujuknya sebagai fail relatif. Itu bukan untuk ini, walaupun. Sekiranya saya pergi ke Hello World Post, imej yang dipaparkan dipecahkan. Saya perlu menambah imej Gatsby-Remark sebagai plugin ke Gatsby-Plugin-MDX supaya ia tahu apa yang perlu dilakukan dengan fail imej:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Saya kemudian perlu mengkonfigurasi plugin di gatsby-config.js:
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Objek Gatsby-Source-Filesystem tambahan membiarkan Gatsby tahu di mana untuk mencari imej yang diproses.
melakukan ini sekarang:
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
SEO adalah sangat penting jika saya ingin mempunyai kandungan saya yang terdapat di internet oleh enjin carian, jadi saya perlu menambah tag meta yang berkaitan ke blog saya di sini. Ia boleh menjadi proses yang terlibat yang menentukan semua tag yang relevan yang diperlukan, jadi untuk menjimatkan masa, saya telah membuat komponen React SEO untuk digunakan di Gatsby untuk menghasilkan semua tag meta yang diperlukan.
Saya akan benang menambah komponen bersama -sama dengan kebergantungan yang diperlukan untuk berfungsi:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Saya perlu menambah Gatsby-Plugin-React-Helmet ke Array Plugin Gatsby-Config.js:
<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
maka ia adalah kes menggunakan komponen SEO di seluruh laman web di mana saya perlu mempunyai tag meta.
Komponen mengambil beberapa alat, yang banyak ditakrifkan sekali di seluruh laman web, jadi tempat terbaik untuk menambah ini akan berada di objek SiteMetadata. Kemudian saya dapat mengeluarkan apa yang saya perlukan dengan hook UseItemetadata.
Saya akan menambah beberapa lagi sifat ke objek SiteMetadata:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Jika anda mengikuti, anda boleh mengubahnya seperti yang diperlukan. Siteurl boleh menjadi URL dummy buat masa ini. Itu untuk membantu menunjuk kepada mana -mana imej yang diperlukan untuk digunakan dalam protokol graf terbuka, dan ia adalah imej yang anda lihat ketika berkongsi siaran yang telah anda buat di Twitter, Facebook, LinkedIn dan Reddit.
Sekarang bahawa sifat -sifat tambahan itu berada di objek SiteMetadata, saya perlu dapat menanyakannya. Pada masa ini, hook UseItemetadata hanya mempunyai tajuk dan keterangan, jadi saya akan menambah selebihnya sekarang:
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop -p 8945 -o",
</span> <span>"serve": "gatsby serve -p 9854 -o",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>
<span># add everything for committing </span><span>git add . </span><span># commit to repo </span><span>git commit -m 'init project' </span>
Saya menggunakan cangkuk sitemetadata untuk mendapatkan maklumat yang diperlukan oleh komponen. Tajuk dan titleTemplate digunakan untuk membuat apa yang anda lihat dalam tab penyemak imbas.
artikel Boolean adalah untuk komponen, jadi ia boleh membuat senarai breadcrumb dalam format jsonld. Selebihnya alat peraga adalah untuk membantu mengenal pasti pengarang dan tarikh yang diterbitkan. ?
itu banyak. Saya berharap beberapa itu masuk akal! Untuk skop jawatan ini, saya akan meninggalkannya di sana, tetapi ada lebih banyak lagi untuk menggali subjek ini, dan maksud saya banyak !
Syukurlah halaman Src/Pages/Index.js sedikit lebih mudah!
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Saya sengaja meninggalkan imej dari kedua -dua contoh. Jika anda berminat untuk membuat imej graf terbuka anda sendiri untuk digunakan dalam komponen ini, lihat siaran "Imej Graf Terbuka dengan Gatsby dan Vercel" untuk melakukannya dengan fungsi tanpa pelayan. ?
3Apabila binaan selesai, saya boleh menggunakan benang yang berkhidmat untuk mempunyai tapak yang dibina yang disajikan secara tempatan di localhost: 9000. Dalam penyemak imbas, saya dapat melihat sumber halaman dengan pintasan papan kekunci
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
u . Dari sini, saya boleh menyemak tag meta kanonik, yang akan menjadi url dummy yang digunakan dalam metadata. Alrighty! Lakukan ini untuk git dan teruskan:
tolak ke github
<span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>
Saya akan log masuk ke akaun github saya dan pilih ikon plus di sebelah imej avatar saya di sudut kanan atas dan pilih repositori baru.
Dalam nama repositori, saya akan menambah nama projek My-Gatsby-Blog tetapi meninggalkan selebihnya lalai dan klik Buat Repositori.
Skrin seterusnya memberi saya arahan terminal yang saya perlukan untuk menolak projek tempatan saya ke GitHub:
Sebaik sahaja anda meletakkan semua orang ke dalam terminal dan tekan
<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>
, muat semula halaman github untuk melihat projek baru! Deploy
Terdapat banyak perkhidmatan di luar sana yang menawarkan hosting pada CDN, banyak secara percuma! Perkhidmatan seperti Netlify, Vercel dan Render akan membolehkan anda menolak tapak anda yang dibina ke CDN mereka melalui CLI, integrasi GitHub, atau, dalam hal Netlify, seret lurus dan drop!
vercelUntuk menggunakan Vercel, anda memerlukan akaun github, gitlab atau bitbucket untuk mengesahkannya. Kemudian anda akan diminta untuk memasang Vercel CLI:
Saya sudah memasangnya, jadi sekarang ia adalah kes menjalankan arahan CLI:
<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span> <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>Saya kemudiannya diminta untuk menubuhkan dan menggunakan projek baru. Saya akan menjawab lalai kepada semua soalan dengan
enter<span># if you're using npm ? </span><span># $(npm bin)/gatsby develop </span><span>yarn gatsby develop </span>
itu sahaja. Saya kemudian diberi URL penempatan di mana saya dapat menonton pembentukan tapak di Vercel.
<span>"scripts": {
</span> <span>"build": "gatsby build",
</span> <span>"dev": "gatsby develop",
</span> <span>"serve": "gatsby serve",
</span> <span>"clean": "gatsby clean"
</span><span>},
</span>Menggunakan dengan Netlify melalui CLI adalah sama dengan Vercel, tetapi saya akan melakukan penciptaan drag-and-drop.
Untuk pengesahan, saya perlukan salah satu akaun GitHub, GitLab, Bitbucket atau e -mel. Sebaik sahaja saya telah mengesahkan dan log masuk, saya boleh memilih tapak di bar menu, maka ada kawasan drop yang ingin menggunakan tapak baru tanpa menyambung ke Git? Seret dan lepaskan folder output tapak anda di sini. Saya akan menavigasi dalam penjelajah fail saya ke akar projek saya dan menyeret dan menjatuhkan folder awam ke kawasan drop.
Netlify akan membina fail dan menggunakannya ke URL yang dihasilkan untuk pemeriksaan. Sama seperti dengan Vercel, Netlify akan membolehkan anda membeli domain di sana dan menggunakannya.
Render tidak mempunyai pilihan CLI atau Drop dan sebaliknya menggunakan integrasi GitHub. Untuk mengesahkan, saya memerlukan akaun GitHub, GitLab atau Google. Sebaik sahaja saya telah mengesahkan dan log masuk, saya berada di bahagian Perkhidmatan. Dari sini, saya boleh memilih laman statik baru kemudian masukkan URL Github saya untuk projek yang saya tolak ke GitHub lebih awal.
Di halaman seterusnya, saya akan memberikan tetapan berikut:
kemudian klik Buat Tapak Statik.
tunggu untuk membuat perkara itu, dan kemudian klik pautan di bawah nama projek untuk melihat laman web secara langsung.
Render juga mempunyai pilihan untuk menetapkan domain tersuai anda sendiri untuk laman web ini!
Terdapat banyak lebih banyak plugin Gatsby untuk dipilih untuk menambah fungsi tambahan. Saya akan meninggalkan ini kepada anda jika anda mahu menambah lebih banyak. Contohnya:
alternatif lain adalah munasabah, yang saya juga mendengar perkara yang baik.
Untuk melaksanakan Fathom Analytics di laman Gatsby, saya perlu menambah tag skrip tambahan ke kepala laman web saya. Apa maksudnya? Nah, pertama saya perlu membuat laman web ini di papan pemuka fathom saya, kemudian pergi ke https://app.usefathom.com/#/settings/sites, tatal ke bahagian bawah senarai, tambahkan di laman web baru saya ( My-Gatsby-Blog), kemudian klik Dapatkan Kod Situs. Saya kemudian mendapat modal pop timbul dengan kod tapak. Saya memerlukannya untuk skrip yang saya akan tambah ke kepala projek Gatsby saya. Inilah skrip yang kelihatan seperti:
<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>Berikut adalah diff root-wrapper.js:
<span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>
Itu dari saya. Terima kasih banyak kerana membuatnya sampai akhir. ?
saya harap anda mendapat apa yang anda perlukan dari panduan yang agak luas ini untuk menubuhkan projek Gatsby dari awal!
Jika anda ingin menjangkau dan bertanya khabar, tempat terbaik untuk mendapatkan saya berada di Twitter.
<code> Kod anda di sini </code>
Jadual kandungan boleh membuat catatan blog anda lebih dilayari. Gatsby MDX menyokong penciptaan jadual kandungan. Anda boleh menggunakan medan 'TableOfContents' dalam pertanyaan GraphQL anda untuk menghasilkan jadual kandungan. Bidang ini mengembalikan pelbagai tajuk dan kedalaman masing -masing yang boleh anda gunakan untuk membuat senarai bersarang untuk jadual kandungan anda.
SEO adalah penting untuk meningkatkan penglihatan blog anda. Gatsby MDX membolehkan anda menambah SEO ke catatan blog anda. Anda boleh menggunakan 'Gatsby-Plugin-React-Helmet' untuk menguruskan ketua dokumen jawatan blog anda. Plugin ini membolehkan anda menambah elemen seperti tajuk, keterangan, dan tag meta yang penting untuk SEO. dari blog anda dengan memudahkan untuk menavigasi siaran anda. Gatsby MDX menyokong penomboran. Anda boleh menggunakan plugin 'Gatsby-Awesome-Pagination' untuk membuat halaman paginated. Plugin ini mencipta indeks paginated dan juga konteks paginated untuk halaman anda. Gatsby MDX membolehkan anda menambah komen ke catatan blog anda. Anda boleh menggunakan perkhidmatan pihak ketiga seperti Disqus atau Commento. Perkhidmatan ini memberikan skrip yang boleh anda sertakan dalam komponen susun atur anda untuk membolehkan komen. dari catatan blog anda. Gatsby MDX membolehkan anda menambah butang perkongsian sosial. Anda boleh menggunakan plugin seperti 'gatsby-plugin-react-share' untuk menambah butang perkongsian sosial. Plugin ini menyokong pelbagai platform media sosial seperti Facebook, Twitter, dan LinkedIn. Blog dengan menjadikannya lebih mudah untuk mencari jawatan tertentu. Gatsby MDX menyokong penambahan fungsi carian. Anda boleh menggunakan plugin seperti 'gatsby-plugin-elasticlunr-search' untuk menambah fungsi carian. Plugin ini mewujudkan indeks catatan anda yang boleh dicari menggunakan kata kunci. Senarai e -mel dan pastikan pembaca anda dikemas kini. Gatsby MDX membolehkan anda menambah borang langganan surat berita. Anda boleh menggunakan perkhidmatan seperti MailChimp atau SendInBlue. Perkhidmatan ini menyediakan borang yang boleh anda benamkan dalam komponen susun atur anda untuk membolehkan langganan surat berita.
Atas ialah kandungan terperinci Cara Membina Blog Pemaju dengan Gatsby dan MDX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tahap pengasingan transaksi lalai mysql
Apakah itu mata wang digital
Perbezaan antara fungsi anak panah dan fungsi biasa
Bersihkan sampah dalam win10
titik simbol khas
Apakah kekunci yang dirujuk oleh anak panah dalam komputer?
Cara menggunakan fungsi Print() dalam Python
Terdapat halaman kosong tambahan dalam Word dan saya tidak boleh memadamkannya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
