ryosuke gatsby blog

Portofolio Pribadi dan Blog Ryosuke

Portofolio dan blog pribadi yang dibuat dengan kerangka kerja GatsByJS untuk menghasilkan situs web bertenaga reaksi statis. Ini Lightning Fast, SEO dan PWA Friendly, dan menyebarkan langsung ke CDN seperti halaman github atau netlify.

Ini adalah alternatif JavaScript untuk solusi generator situs statis yang ditulis dalam go atau ruby. Ini juga lebih disempurnakan daripada blog Starter Gatsby dengan fitur -fitur seperti arsip blog, penanganan gambar, optimasi SEO, dan beberapa lagi.

Struktur

• Rumah
• Proyek
• • Arsip pagination
• Blog
• • Arsip pagination
• Tag
• • Arsip Tag
• Tentang

Format Posting / Bidang

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• Bagian dapat berupa blog atau project .
• Tag harus array
• Konten tubuh dapat mencakup penurunan harga atau HTML.

Plugin

Codepen

Untuk menyematkan modul codepen, cukup salin kode sematan dan hapus skrip JS yang diimpor.

Twitter

Menyematkan tweet dengan mulus ke dalam posting dengan menyalin bagian blockquote dari kode embed ke file penurunan harga Anda. Jangan menyalin file JS tertaut, plugin menangani yang secara otomatis.

Tampak

Konfigurasikan di gatsby-config.js .

Feed RSS

Konfigurasikan di gatsby-config.js .

Perkembangan

Berjalan di GatsByJS, SSG yang membuat aplikasi reaksi statis.

1. npm install
2. npm run develop

Penyebaran

Halaman GitHub

Kami secara lokal membangun file, kemudian menggunakan menggunakan skrip NPM yang memperbarui cabang repo git spesifik yang disebut gh-pages .

Untuk mengaktifkan ini, cukup inisialisasi repo git dalam proyek, lakukan perubahan Anda, dan tambahkan repo GitHub Anda sebagai repo jarak jauh. Pastikan untuk memberi label remote sebagai origin , jika tidak, Deploy Gatsby tidak akan tahu repo mana yang harus didorong.

Menyebarkan Situs ke Repo Jarak Jauh origin :

npm run deploy

Membuat atau mengedit konten

1. git pull dari jarak jauh untuk memastikan Anda memiliki posting terbaru dan untuk menggabungkan konflik apa pun.
2. Tambahkan folder baru ke src/content/projects atau src/content/blog yang dinamai setelah posting Anda. Ini akan dikonversi ke siput artikel-Anda tidak perlu 'kasus kebab' judul Anda, tetapi ingatlah formatnya.
3. Buat file markdown di folder. Pastikan untuk menggunakan file sebelumnya sebagai templat untuk memasukkan semua bidang yang sesuai (tercantum di atas).
4. Isi pos, pastikan untuk menyertakan gambar penutup (lihat langkah selanjutnya untuk menangani gambar)
5. Untuk gambar apa pun, sertakan di folder yang sama dengan penurunan harga dan tautan pos secara lokal menggunakan <img src="./my-image.jpg" /> .
6. Jalankan npm run deploy di root proyek untuk digunakan ke halaman GitHub.

Netlify

Situs ini juga mampu menggunakan Netlify. Cukup masuk ke Netlify, buat aplikasi baru, dan arahkan ke repositori ini. Ikuti langkah -langkahnya, pastikan Netlify menjalankan gatsby build dan menunjuk ke direktori /public . Ini juga memungkinkan Anda untuk menggunakan Netlify CMS, karena memerlukan server untuk dukungan dan hosting OAuth2 di Netlify memungkinkan Anda membangun kembali pada setiap pengeditan (daripada membangun dari mesin pribadi Anda dan menyebarkan dari sana).

Kredit

• Gatsbyjs
• Reaksi
• Ikon oleh Davide Pacilio