I just moved my site to use Ghost, and built my own theme for it. I want it to have a short catchy name that fits the theme, so I named it -- Bastard. It is available to download from GitHub for free. :)
The theme was built using Bootstrap 3, SASS, Font Awesome, and Gulp. Gulp is used to automate tasks for compiling and minifying the theme components and Bower to manage package dependencies. You can use the theme as is, or customize it by editing the
You can download the theme here:
- Developed using Bootstrap 3, SASS, Font Awesome, and Gulp
- Organized CSS3 stylesheets using SASS
- Fully responsive layout
- Retina display ready, looks great on any device or resolution
- Full screen cover page with parallax effect
- Syntax highlighting using Highlight.js
- One file css/js for performance optimization
- Automatic linting, compiling, and minification of SCSS and JS files using Gulp
- Automatic image file size optimization using IMGMin and SVGMin for jpeg, png, and svg images
- Easily update theme dependencies using Bower package manager
- Google Analytics integrated
- Includes FitVids.Js for fluid video embeds
- Clean and well-documented code
- It's free:)
Using Bastard Theme
- Copy the theme folder inside
- Restart Ghost and then go to Ghost's Settings (http://your.domain.com/ghost/settings/general/). Choose "Bastard" from the theme dropdown menu and save your changes.
- Optionally, you can update the background cover with your own image to replace the default cover image.
- Have fun :)
Customizing Bastard Theme
sass/* files. Run
gulp to compile your changes or use the
gulp watch while you build your own theme.
- Make sure you have Node.js v6.9.5 and Gulp installed on your system.
- Copy theme folder to Ghost themes directory
/content/themes. Open your terminal and make the theme's folder your current working directory.
bower installto install package dependencies.
npm installto install Gulp components.
- Restart Ghost and switch the theme to use
Bastardin the Ghost's Settings.
- Make your changes by updating
*.hbsfiles of the theme.
gulp watchto start watching for file changes or run
gulpto build your latest changes.
- If you have new images for the theme, just place them inside
image_sourcesfolder and Gulp will handle the optimisation automatically and store the optimized version inside
- Update the social media icon links by updating
Resources & Dependencies
- Bootstrap Sass
- Font Awesome Icons
- Gulp: The streaming build system
- Sass - Syntactically Awesome Stylesheets
- HighlightJs - Syntax highlighting for the Web
- FitVids.Js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds