Waypoint Theme based on Ghost Starter Theme

A starter framework for Ghost themes! Click Use this template to create a copy of this repo for everything you need to get started developing a custom Ghost theme.

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

Starter theme features

🔁 Livereload by default. See changes instantly in the browser whenever you save a file.

🔎 Optimized for VS Code. Find the files you're looking for more easily.

🗃️ Write modern JavaScript. Use ESM out of the box to write more manageable Javascript.

🗜️ Assets optimized automatically. JavaScript and CSS are minified and transpiled by default.

👟 Fast compile times, powered by Rollup.

🦋 Write next-gen CSS for today's browsers with PostCSS. Add the CSS tools you love via rollup.config.js.

🚢 Ghost's GH Deploy Action included by default. Learn more how to deploy your theme automatically

➕ Extensible by design. Rollup's configuration structure makes it easy to add any number of plugins easily.

Development guide

The Starter theme provides a first-class development experience out of the box.

Ghost setup quickstart install

If you want to run your own instance of Ghost, in most cases the best way is to use our CLI tool

npm install ghost-cli -g

Then, if installing locally add the local flag to get up and running in under a minute - Local install docs

ghost install local

Setup

To see realtime changes during development, symlink the Starter theme folder to the content/themes folder in your local Ghost install.

ln -s /path/to/starter /ghost/content/themes/starter

Upload the theme ZIP file

First, you must upload the theme ZIP file that you received and downloaded after purchase. Follow the steps below to upload and activate the theme:

• Login to Ghost admin at http://localhost:2368/ghost
• Go to the settings page by clicking on the settings icon in the bottom left corner
• Next, click on "Design"
• Then click on "Change theme" in the bottom left corner
• Next, click on "Upload theme" in the top right corner and select the theme ZIP file
• Once the upload is completed, click on "Activate" Upload the routes.yaml file

Configuring the routes.yaml file is required for the theme to work properly, follow the steps below to set it up:

• Go to the settings page by clicking on the settings icon in the bottom left corner
• Next, click on "Labs"
• Scroll to the "Routes" section and click on the "Upload routes YAML" button
• Select and upload the routes.yaml file that you find inside the theme root folder

This file defines the following routes and collections:

/ — the homepage and main documentation

/blog — the Blog page

/changelog — the Changelog page

/showcase — the Showcase page

Read more under the advanced setup section if you need to configure a landing page or configure multiple documentation.

Uploading the routes.yaml file is a required step, without it the theme will not work properly.

From the theme's root directory, install the dependencies:

npm install

If Node isn't installed, follow the official Node installation guide.

Start development mode

From the Starter theme folder, start development mode:

npm run dev

In different terminal make sure ghost is running

ghost start

Changes you make to your styles, scripts, and Handlebars files will show up automatically in the browser. CSS and Javascript will be compiled and output to the built folder.

Press ctrl + c in the terminal to exit development mode.

Build, zip, and test your theme

Compile your CSS and JavaScript assets for production with the following command:

npm run build

Create a zip archive:

npm run zip

Use gscan to test your theme for compatibility with Ghost:

npm run test