Step 1: Setting up Astro
-
Create a new Astro project:
npm init astro cd your-astro-project
-
Install the necessary dependencies:
npm install
Step 2: Integrating Ghost CMS
-
Set up Ghost CMS:
- You can set up Ghost CMS locally or use Ghost(Pro) for a hosted solution. For a local setup, follow the official Ghost local installation guide.
- If you’re using Ghost(Pro), create your site and get the API details.
-
Get your Content API Key from Ghost:
- In the Ghost admin area, go to
Integrations
. - Create a new custom integration called "Astro Blog" and copy your Content API Key and API URL.
- In the Ghost admin area, go to
-
Install Ghost Content API Client in Astro:
npm install @tryghost/content-api
-
Create a
ghost.js
file in yoursrc
directory:const GhostContentAPI = require('@tryghost/content-api'); // Configure the API to point to your Ghost blog const api = new GhostContentAPI({ url: 'YOUR_GHOST_CMS_URL', key: 'YOUR_CONTENT_API_KEY', version: "v3" }); module.exports = api;
Step 3: Fetching and Displaying Posts
-
Create a new Astro component to fetch posts:
- In your
src/components
directory, createPosts.astro
:--- const api = require('../ghost.js'); let posts = []; try { posts = await api.posts.browse({limit: "all"}); } catch (error) { console.error(error); } --- <section> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p>{post.excerpt}</p> </article> ))} </section>
- In your
-
Use the Posts component in your pages:
- In your
src/pages/index.astro
, include the Posts component:--- import Posts from '../components/Posts.astro'; --- <main> <h1>Welcome to My Astro Blog</h1> <Posts /> </main>
- In your
Step 4: Deploying on Vercel
-
Push your Astro project to a GitHub repository.
-
Deploy with Vercel:
- Sign up or log in to Vercel.
- Connect your GitHub repository to Vercel.
- During the setup, Vercel will automatically detect that it’s an Astro project.
- Set the environment variables (
YOUR_GHOST_CMS_URL
andYOUR_CONTENT_API_KEY
) in your Vercel project settings.
-
Launch your site:
- Vercel will build and deploy your Astro site.
- Once deployed, your site will be live with content from your Ghost CMS.
Conclusion
You’ve now created a website using Astro for the frontend, managed content with Ghost CMS, and deployed it using Vercel. This setup provides a modern, static site with a powerful headless CMS, allowing for easy content management and efficient, scalable hosting.