Techno Theme for Ghost
A free boilerplate responsive theme for Ghost blogging platform. The theme is easy to setup for non-technical bloggers. It also includes components to better support technical blogs (hence the name Techno). The theme uses hot technologies that many developers are interested in.
Techno was originally based on the work of Karlo Espiritu's Bastard theme. Thank you Karlo for starting this theme.
Here are the enhancements added to Bastard
- General refactor and cleanup (opinionated)
- Ghosthunter for blog search.
- Bootswatch allows easy integration of custom bootstrap themes.
- Navigation menu was changed to use a basic Bootstrap 3 fixed top navigation bar.
Techno theme was built using Bootstrap 3, SASS, Font Awesome, Bower, Knockout, and Grunt. Grunt 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
I'm using this theme for my personal site, mobilejedi.net
- Clean and well-documented code
- Developed using Bootstrap 3, SASS, Font Awesome, Grunt, and Bower ( popular technologies that many developers know )
- 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 Grunt
- Automatic image file size optimization using IMGMin and SVGMin
- Easily update theme dependencies using Bower package manager
- Google Analytics integrated
- Includes FitVids.Js for fluid video embeds
- Integration with Disqus
- Ghosthunter for blog searching
- Bootswatch themeable
- It's free:)
Using Techno Theme
- Copy the theme folder inside
- Customize the details in themes/techno/assets/js/config.js
- Update images/cover.jpg
- Update images/favicon.ico
- Restart Ghost and then go to Ghost's Settings (http://your.domain.com/ghost/settings/general/). Choose "Techno" from the theme dropdown menu and save your changes.
- Write some really awesome posts!
Customizing Techno Theme (Developers)
sass/* files. Run
grunt to compile your changes or use the
grunt watch while you build your own theme.
- Clone ghost to your machine.
- Do the basic setup above against your local copy of ghost.
bower installto install package dependencies.
npm installto install Grunt components.
grunt watchto start watching for file changes or run
gruntto build your latest changes.
- Make your changes by updating
*.hbsfiles of the theme.
- If you have new images for the theme, just place them inside
image_sourcesfolder and Grunt will handle the optimization automatically and store the optimized version inside
- npm start --development at ghost root will run a local server.
- Hack away! If you have a useful addition please contribute to the github repo.
To customize the bootswatch theme
- Copy the theme into sass/bootswatch/[theme name]
- Change the style.scss file to use the new theme
@import "bootswatch/[theme name]/variables"; @import "bootswatch/[theme name]/bootswatch";
Resources & Dependencies
- Bastard Theme
- Bootstrap Sass
- Font Awesome Icons
- Bower: A package manager for the web
- Sass - Syntactically Awesome Stylesheets
- HighlightJs - Syntax highlighting for the Web
- FitVids.Js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds