Ghost theme wlog

A Ghost theme created for personal portfolio and blogging of developers.
This theme provides a seamless Single Page Application experience integrated with Swup.  

References for using Ghost themes for the first time

1. Ghost uses a simple template language called Handlebars for theme development.
2. Official theme documentation that contains all the information you need to know about Ghost theme development.
3. Various tutorials and resources such as the Ghost VS Code extension that assist in theme development.
4. This theme is open source, just like Ghost's official themes, and can be found on GitHub.  

Theme Features

• 🔁 Provides a local theme development environment based on Docker

• 🗃️ Separates vendor modules and app chunks through module bundling based on Rollup

• 🗜️ Optimizes assets during build and provides fast bundling speed through Rollup

• 🦋 Enables writing and extending CSS with PostCSS rollup.config.js

• 🚢 Automatically deploys the theme using Github Actions Learn more about how to automatically deploy themes

• 🚀 Integrates Swup library to enable Single Page Application behavior in Ghost environment.

TODO

• Related posts/pages
• Dedicated resume and JD category templates
• Single page pagination support
• SPA support
• Code highlight support
• Color theme custom field support
• Announcement bar support
• Comment support

 

Theme Structure

The main files are as follows:

• default.hbs - Main layout file
• index.hbs - Common file for blog pages and tag pages
• post.hbs - Detailed post file
• page.hbs - Detailed page file
• home.hbs - Main home page file

Additionally, you can create custom templates by adding the slug of the page to the template file. For example:

• page-about.hbs - Custom template for the /about/ page
• tag-news.hbs - Custom template for the /tag/news/ archive
• author-jamie.hbs - Custom template for the /author/jamie/ archive  

Development Guide

This theme is based on the Ghost Starter theme and integrates various development tools such as Docker to enhance development convenience.

Prerequisites before running

• Install Docker
• Install Node.js

Installing theme execution packages

Make sure Docker is running before executing.

yarn # or npm install

Start Development Mode

Enter the following command while Docker is running.

npm run docker:dev

When you modify the styles, scripts, and Handlebars files, the changes will be automatically displayed in the browser. CSS and JavaScript are compiled and outputted to the built folder.

To exit the development mode, press ctrl + c in the terminal.

 

Building, compressing, and testing the theme

To compile the CSS and JavaScript assets for production, use the following command:

npm run build

The following command generates a zip archive.

npm run zip

Use the following command to test the compatibility of the Ghost theme.

npm run test

 

Copyright & License

Copyright (c) 2023-2024 W-log - Released under the MIT license.