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)
- Disqus
- 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 default.js
and /assets/sass/*.scss
files.
I'm using this theme for my personal site, ronemous.com
- 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:)
- Copy the theme folder inside
/content/themes
of Ghost. - 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!
Techno theme uses Grunt to lint, compile, and concatenate the javascript and SASS components. Customize the theme by editing the assets/js/default.js
and 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.
- Run
bower install
to install package dependencies. - Run
npm install
to install Grunt components. - Run
grunt watch
to start watching for file changes or rungrunt
to build your latest changes. - Make your changes by updating
/sass/*
,/assets/*
, and*.hbs
files of the theme. - If you have new images for the theme, just place them inside
image_sources
folder and Grunt will handle the optimization automatically and store the optimized version insideassets/images/
. - 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";
- Bastard Theme
- Bootstrap Sass
- Knockout
- Bootswatch
- Font Awesome Icons
- Grunt: The JavaScript Task Runner
- 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
- Disqus
- Ghosthunter