Ghost & Astro
Это содержимое пока не доступно на вашем языке.
Ghost is an open-source, headless content management system built on Node.js.
Integrating with Astro
Section titled Integrating with AstroIn this section, we’ll use the Ghost content API to bring your data into your Astro project.
Prerequisites
Section titled PrerequisitesTo get started you will need to have the following:
-
An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
-
A Ghost site - It is assumed that you have a site set up with Ghost. If you don’t you can set one up on a local environment.
-
Content API Key - You can make an integration under your site’s
Settings > Integrations
. From there you can find yourContent API key
Setting up credentials
Section titled Setting up credentialsTo add your site’s credentials to Astro, create an .env
file in the root of your project with the following variable:
Now, you should be able to use this environment variable in your project.
If you would like to have IntelliSense for your environment variable, you can create a env.d.ts
file in the src/
directory and configure ImportMetaEnv
like this:
Read more about using environment variables and .env
files in Astro.
Your root directory should now include these new files:
Директорияsrc/
- env.d.ts
- .env
- astro.config.mjs
- package.json
Installing dependencies
Section titled Installing dependenciesTo connect with Ghost, install the official content API wrapper @tryghost/content-api
using the command below for your preferred package manager:
Making a blog with Astro and Ghost
Section titled Making a blog with Astro and GhostWith the setup above, you are now able to create a blog that uses Ghost as the CMS.
Prerequisites
Section titled Prerequisites- A Ghost blog
- An Astro project integrated with the Ghost content API - See integrating with Astro for more details on how to set up an Astro project with Ghost.
This example will create an index page that lists posts with links to dynamically-generated individual post pages.
Fetching Data
Section titled Fetching DataYou can fetch your site’s data with the Ghost content API package.
First, create a ghost.ts
file under a lib
directory.
Директорияsrc/
Директорияlib/
- ghost.ts
Директорияpages/
- index.astro
- astro.config.mjs
- package.json
Initialize an API instance with the Ghost API using the API key from the Ghost dashboard’s Integrations page.
Displaying a list of posts
Section titled Displaying a list of postsThe page src/pages/index.astro
will display a list of posts, each with a description and link to its own page.
Директорияsrc/
- …
Директорияlib/
- ghost.ts
Директорияpages/
- index.astro
- astro.config.mjs
- package.json
Import ghostClient()
in the Astro frontmatter to use the posts.browse()
method to access blog posts from Ghost. Set limit: all
to retrieve all posts.
Fetching via the content API returns an array of objects containing the properties for each post such as:
title
- the title of the posthtml
- the HTML rendering of the content of the postfeature_image
- the source URL of the featured image of the postslug
- the slug of the post
Use the posts
array returned from the fetch to display a list of blog posts on the page.
Generating pages
Section titled Generating pagesThe page src/pages/post/[slug].astro
dynamically generates a page for each post.
Директорияsrc/
- …
Директорияlib/
- ghost.ts
Директорияpages/
- index.astro
Директорияpost/
- [slug].astro
- astro.config.mjs
- package.json
Import ghostClient()
to access blog posts using posts.browse()
and return a post as props to each of your dynamic routes.
Create the template for each page using the properties of each post
object.
<Fragment />
is a built-in Astro component which allows you to avoid an unnecessary wrapper element. This can be especially useful when fetching HTML from a CMS (e.g. Ghost or WordPress).
Publishing your site
Section titled Publishing your siteTo deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.
Community Resources
Section titled Community Resources- You can get started with this Astro Ghost Starter.
- Astro + Ghost + Tailwind CSS by Andre Carrera
- Ghost CMS & Astro by Adam Matthiesen