devblog
1.0.0
DevBlog adalah templat blog yang sepenuhnya dapat disesuaikan dan dirancang untuk pengembang (atau siapa pun) yang ingin terjun ke dunia blogging. Ini sudah siap untuk digunakan dan diterapkan (dengan mudah) atau dapat diedit dan diperluas sesuka Anda. Blog ini sepenuhnya dihasilkan secara statis melalui GatsbyJS, dilengkapi dengan penyorotan sintaksis (melalui PrismJS), dan memiliki rendering sisi server bawaan, antara lain.
Untuk melihat demo langsung, klik di sini.
config.js Langkah pertama adalah menginstal GatsbyJS CLI secara lokal. Hal ini dapat dilakukan dengan menjalankan perintah npm install --global gatsby-cli
Saat membuat situs Gatsby baru, CLI memungkinkan Anda menentukan starter, dalam hal ini cukup berikan URL untuk repo ini. Ini dapat dilakukan dengan menjalankan perintah gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
Sekarang Anda sudah siap, Anda cukup menggunakan blog atau melakukan pengeditan sesuai kebutuhan. Misalnya, jalankan gatsby develop untuk memulai lingkungan pengembangan hot-reload yang tersedia di localhost:8000 atau jalankan gatsby build untuk membangun build produksi yang dioptimalkan. Untuk daftar lengkap perintah CLI untuk Gatsby, lihat dokumentasinya.
Alternatifnya, jika Anda hanya ingin mem-fork repo ini atau mengkloningnya, maka Anda hanya perlu menjalankan npm install lalu gatsby develop setelahnya dan Anda akan siap menjalankannya.
Konfigurasi dasar dapat dilakukan melalui file config.js di root repo proyek. Melalui file ini Anda dapat melakukan pengeditan pada warna utama blog, menambahkan penulis dan deskripsi blog, dan masih banyak lagi. Standarnya adalah sebagai berikut:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;Catatan: Opsi konfigurasi apa pun yang diberi label "Wajib" diperlukan untuk tujuan presentasi dasar. Apa pun tanpa komentar "Wajib" dapat dihapus jika Anda tidak ingin komentar tersebut digunakan.
Variabel konfigurasi yang direferensikan di atas digunakan sebagai berikut:
| Variabel | Deskripsi Penggunaan |
|---|---|
| judul | Judul blognya. Ini terutama digunakan untuk judul halaman. |
| pengarang | Penulis blog. Ini digunakan untuk nama header dan judul halaman. |
| keterangan | Deskripsi penulis. Ini digunakan untuk header di bawah penulis. |
| warna utama | Warna utama blog. |
| tampilkanHeaderImage | Tandai untuk menampilkan gambar header atau tidak. |
| tampilkan Tombol Bagikan | Tandai untuk menampilkan tombol berbagi media sosial di setiap postingan blog atau tidak. |
| postingPerHalaman | Jumlah postingan per halaman di beranda blog. Ini digunakan untuk penomoran halaman. |
| sosial | Profil media sosial penulis blog. Saat ini hanya situs web pribadi, GitHub, Twitter, dan LinkedIn yang didukung. |
Untuk mengubah gambar header default, cukup ganti file main.jpg di folder /src .
Untuk mengubah favicon default, cukup ganti file favicon.ico di folder /src .
Semua postingan blog dapat ditemukan di /src/pages dan dibuat secara statis setelah perintah gatsby build dijalankan. Untuk membuat postingan baru, cukup buat folder baru di /src/pages dengan nama url yang ingin Anda miliki. Misalnya, jika Anda ingin urlnya muncul sebagai myblog.com/hello-world Anda harus membuat foldernya sebagai hello-world . Setelah folder dibuat, cukup buat file index.md di dalamnya.
Bagian atas halaman semuanya harus berisi penurunan harga yang sama yang memberi tahu Gatsby informasi yang diperlukan tentang postingan tertentu. Templat dasarnya adalah:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> Pada cuplikan kode di atas yang diperlukan hanyalah judul dan tanggal . Gambar unggulan bersifat opsional dan dapat ditambahkan hanya dengan menambahkan gambar ke folder halaman yang baru saja Anda buat dan merujuk seperti contoh di atas. Bagian kutipan juga bersifat opsional dan jika Anda tidak menggunakan penanda <!-- end --> , bit pertama postingan akan digunakan sebagai kutipan secara otomatis.
Templat ini dilengkapi dengan 3 contoh postingan blog yang berisi segala hal mulai dari penggunaan cuplikan kode, menyisipkan gambar, menggunakan gambar dan kutipan unggulan, dan banyak lagi.
Setelah Anda siap untuk menyebarkan blog dan menayangkannya, Anda memiliki beberapa opsi yang tersedia untuk Anda.
Menerapkan blog secara manual hanya mengharuskan Anda menjalankan gatsby build untuk membuat build produksi. Setelah itu, Anda dapat menggunakan server mana pun yang biasanya Anda gunakan untuk menggunakan aplikasi React, seperti tetesan Digital Ocean atau instans AWS. Yang diperlukan hanyalah cara untuk menyajikan file statis.
Jika Anda belum terbiasa menerapkan aplikasi React, ada sejumlah opsi lain.
Untuk menerapkan ke halaman GitHub, Anda harus terlebih dahulu menyetel awalan jalur Anda di gatsby-config.js . Standarnya adalah pathPrefix: '/devblog' namun ini harus diubah menjadi nama repo apa pun yang Anda pilih. Misalnya, jika Anda memiliki blog yang berlokasi di https://github.com/YOURUSERNAME/myblog dan ingin blog tersebut disebarkan ke https://YOURUSERNAME.github.io/myblog maka Anda akan menyetel awalan jalur ke pathPrefix: '/myblog' .
Selanjutnya, jalankan npm run deploy dan blog Anda akan di-deploy.
Alternatifnya, jika Anda ingin menyebarkannya ke https://YOURUSERNAME.github.io (yaitu situs pengguna/organisasi Anda dan bukan situs proyek), maka diperlukan beberapa perubahan tambahan. Dokumentasi resmi Gatsby telah menguraikannya dengan baik di sini.
Salah satu metode termudah untuk menyebarkan blog adalah dengan menggunakan Netlify. Untuk menerapkan ke Netlify, cukup klik tombol di bawah dan ikuti petunjuknya.
Opsi yang diuraikan di atas bukanlah satu-satunya opsi yang tersedia bagi Anda untuk menyebarkan blog. Dokumentasi resmi Gatsby menjelaskan secara rinci tentang sejumlah opsi lain. Untuk membaca lebih lanjut tentang opsi penerapan, klik di sini.
Berlisensi di bawah Lisensi MIT. Lihat LICENSE.md untuk informasi lebih lanjut.
