gatsby ghost simply

Gatsby Starter Ghost dengan Tema Simply

Templat pemula untuk membangun situs web secepat kilat dengan Ghost (dalam hal ini sebagai CMS tanpa kepala) & Gatsby, menggunakan Simply Ghost Theme yang luar biasa. Ditulis ulang dari tema Handlebars ke React/Gatsby.

Demo: https://gatsby-ghost-simply.netlify.app/

Apa yang berhasil

• Mode Terang / Mode Gelap
• Fungsi pencarian cepat
• Tautan akun sosial
• Penyorotan sintaksis PrismJS - hanya dasar
• Varian Halaman Beranda dan format Posting yang berbeda
  • Format Posting (: peringatan: gunakan tag internal dan bukan bidang custom_template !)
    • Posting Default
    • Posting Penuh
    • Posting Lebar
    • Gambar Header Posting
    • Posting Gambar
    • Posting Gambar Benar
    • Bilah Sisi Posting
    • Posting bukan Gambar
  • Tajuk Tata Letak
    • Bawaan Tajuk
    • Tajuk dengan Menu DropDown
  • Tata Letak Kaki
    • Bawaan Catatan Kaki
    • Catatan Kaki Gelap
    • Footer Bukan Menu Sekunder
• Arsip (: peringatan: gunakan tag internal dan bukan kolom custom_template !)
  • Halaman Penulis
  • Halaman Tag
• Halaman
  • Kontak (: peringatan: gunakan tag internal dan bukan bidang custom_template !)
  • Kusi Doc untuk dokumentasi proyek Anda (: peringatan: gunakan tag internal dan bukan bidang custom_template !)
  • 404
  • Halaman Podcast (: peringatan: tidak perlu membuat halaman, cukup gunakan tag internal pada postingan)
  • Halaman Portofolio (: peringatan: tidak perlu membuat halaman, cukup gunakan tag internal pada postingan)
• Dukungan untuk berbagai Bahasa
• Artikel Terkait
• Tombol berbagi sosial mendukung postingan
• Postingan Sebelumnya dan Berikutnya
• Menu navigasi hamburger
• Transparansi Tajuk
• Pemuatan Lambat untuk gambar fitur (menggunakan gatsby-plugin-image)
• Video Responsif
  • YouTube
  • Vimeo
  • kickstarter
  • Dailymotion
• Ubah Ukuran Galeri Gambar
• Zoom gambar gaya sedang
• Persetujuan Cookie GDPR dan pelacakan Google/Facebook
• Kartu Ghost baru (GIF, tombol, NFT, info, matikan, kutipan, produk, audio, video, file, header)
• Anggota berlangganan melalui email

Apa yang belum berhasil

• Logo Mode Terang / Gelap
• Varian Halaman Beranda dan format Posting yang berbeda
  • Templat AMP
• Pagination Infinite Scroll - bukan untuk situs statis
• Komentar
• Semua fitur Keanggotaan

✏ Apa yang bisa ditingkatkan

• Pindahkan videoResponsive dan resizeImageGalleries untuk menambah waktu menggunakan beberapa plugin rehype
• Ubah ini dari tema pembuka menjadi tema yang tepat
• Ekstrak tanggal cantik dari GraphQL untuk menerapkan lokal pada tanggal tersebut

? Menginstal

 # With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git

 # From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply

Kemudian instal dependensi

yarn

?‍♂️ Berlari

Mulai server pengembangan. Anda sekarang memiliki situs Gatsby yang mengambil konten dari Ghost tanpa kepala. Anda tidak perlu menginstal Simply Ghost Theme asli di instance Ghost Anda, atau menyiapkan Rute tambahan di sana.

gatsby develop

Secara default, starter akan mengisi konten dari instalasi Ghost default yang terletak di https://gatsby.ghost.io.

Untuk menggunakan instalasi Anda sendiri, Anda perlu mengedit file konfigurasi .ghost.json dengan kredensial Anda. Ubah nilai apiUrl menjadi URL situs Hantu Anda. Untuk pelanggan Ghost(Pro), ini adalah URL Hantu yang diakhiri dengan .ghost.io , dan untuk orang yang menggunakan versi Ghost yang dihosting sendiri, ini adalah URL yang sama yang digunakan untuk mengakses situs Anda.

Selanjutnya, perbarui nilai contentApiKey ke kunci yang terkait dengan situs Hantu. Kunci dapat diberikan dengan membuat integrasi dalam Ghost Admin. Navigasikan ke Integrasi dan klik "Tambahkan integrasi baru". Beri nama integrasi dengan tepat dan klik buat.

{
    "apiUrl" : " https://gatsby.ghost.io " ,
    "contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}

Terakhir, konfigurasikan URL yang Anda inginkan di siteConfig.js , sehingga tautan (misalnya tautan kanonik) dibuat dengan benar. Anda juga harus memperbarui nilai-nilai lain yang diperlukan untuk menu, berbagi sosial, dan pencarian.

 {
    menuDropdown : [
        {
            label : `About` ,
            url : `/about` ,
        } ,
        .
        .
        .
    ] ,
    followSocialMedia : [
        {
            service : `youtube` ,
            title : `YOUR_TITLE` ,
            url : `YOUR_URL` ,
        } ,
        .
        .
        .
    ] ,
    searchSettings : {
        key : `YOUR_GHOST_API_KEY` ,
        url : `YOUR_GHOST_URL` ,
        /* This is optional */
        options : {
            keys : [ `title` , `plaintext` ] ,
            limit : 10 ,
        } ,
        /* This is optional to perform filtering of the ghost api */
        api : {
            resource : `posts` ,
            parameters : {
                limit : `all` ,
                fields : [ `title` , `slug` , `plaintext` ] ,
                filter : `` ,
                include : `` ,
                order : `` ,
                formats : `` ,
            } ,
        } ,
    } ,
}

Untuk menggunakan templat kiriman khusus, tambahkan tag internal tertentu ke kiriman (yaitu #custom-post-wide , #custom-kusi-doc , dll).

Demo dan repo adalah "versi maksimum" dengan semua kemungkinan jenis varian Halaman Beranda, Templat Posting, Portofolio, Dokumen, dll. Sesuaikan/hapus sesuai kebutuhan.

✈ Menerapkan dengan Netlify

Pemula berisi tiga file konfigurasi khusus untuk diterapkan dengan Netlify. File netlify.toml untuk pengaturan build, file /static/_headers dengan header keamanan default yang disetel untuk semua rute, dan /static/_redirects untuk menyetel pengalihan domain kustom Netlify.

Untuk menerapkan ke akun Netlify Anda, tekan tombol di bawah.

Kunci API Konten umumnya tidak dianggap sebagai informasi sensitif, kunci tersebut ada sehingga dapat diubah jika terjadi penyalahgunaan; jadi kebanyakan orang memasukkannya langsung ke file konfigurasi .ghost.json mereka. Jika Anda lebih memilih untuk menyimpan informasi ini dari repositori Anda, Anda dapat menghapus konfigurasi ini dan mengatur variabel Netlify ENV untuk build produksi.

Setelah diterapkan, Anda dapat menyiapkan Integrasi Ghost + Netlify untuk menggunakan kait penerapan dari Ghost untuk memicu pembangunan kembali Netlify. Dengan begitu, setiap kali data berubah di Ghost, situs Anda akan dibangun kembali di Netlify.

⚡ Mengoptimalkan

Anda dapat menonaktifkan front-end Tema Ghost Handlebars default dengan mengaktifkan tanda Make this site private dalam pengaturan Ghost Anda. Hal ini mengaktifkan perlindungan kata sandi di depan instalasi Ghost dan menyetel <meta name="robots" content="noindex" /> sehingga front-end Gatsby Anda menjadi sumber kebenaran untuk SEO.

? Opsi tambahan

 # Run a production build, locally
gatsby build

# Serve a production build, locally
gatsby serve

develop Gatsby menggunakan konfigurasi development di .ghost.json - sedangkan build Gatsby menggunakan konfigurasi production .

Hak Cipta & Lisensi

Hak Cipta (c) 2021 anarion80 - Dirilis di bawah lisensi GPLv3.