This showcases how to use Ghost Content API as a headless CMS, using Astro as the frontend framework.
Check out the article on how this site was created here.
You should have a Ghost instance up and ready to get the API Credentials.
Clone .env.example to .env.local in the same directory, and add the following:
GHOST_CONTENT_API_URL=your_ghost_content_api_url
GHOST_CONTENT_API_KEY=your_ghost_content_api_key
SITE_URL=http://localhost:3000
Add your production url in Astro config under the site key.
export default defineConfig({
site: 'https://my-website.com',
...
});Theme settings are not exposed by Ghost Content API. You will have to manually set options for our Casper theme in utils/theme.config.ts. These should mirror your settings in your Ghost instance, under Settings > Design. Refer to the interface CasperThemeOptions for the values.
const customOptions: Partial<CasperThemeOptions> = {
body_font: 'Modern sans-serif',
show_publication_cover: false,
feed_layout: 'Classic',
color_scheme: 'Dark',
};This project prefers the yarn package manager. All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
yarn install |
Installs dependencies |
yarn start |
Starts local dev server at localhost:3000 |
yarn build |
Build your production site to ./dist/ |
yarn preview |
Preview your build locally, before deploying |
yarn astro ... |
Run CLI commands like astro add, astro preview |
yarn astro --help |
Get help using the Astro CLI |
In this showcase, the design is based on the Casper theme, and is converted into js/ts from the theme's handlebars templates, which might not reflect the changes in the latest version.
It is recommended that you implement your own design for your site. If you wish to continue using the Casper theme for production, you should update the markup by referencing the latest source code at https://github.com/TryGhost/Casper.