A super simple and minimal Ghost starter theme using Bootstrap.
Ghost is world's most popular modern open source publishing platform. This starter theme is developed in efforts to help organizations create customized blogs using Ghost and Bootstrap.
Get this theme from GitHub
This theme uses:
- Twitter Bootstrap - The most popular HTML, CSS, and JS library in the world.
- Font Awesome - The web's most popular icon set and toolkit.
- Animate.css - A great toolkit for CSS animations.
- Wow.js — The js counterpart to animate.css that reveals animations when scrolling
Using this theme:
This theme is intended as a starter kit to develop a customized site. It is recommended to start by using Ghost Local to develop the theme's front end as you like. Head over to the Ghost Local site for installation instructions.
Installing the theme for development
From the directory that you've installed ghost local, move into the themes folder:
cd conent/themes
Clone the repo:
git clone git@github.com:initialapps/ghost-bootstrap.git
Go back to the directory that you've installed ghost local, and restart ghost local:
cd - // if needed, or navigat to the main ghost directory however you please
ghost restart
Finally, navigate to the ghost local link provided in the terminal. When logged into ghost, click Settings > Design. Scroll to the bottom and activate the ghost-bootstrap theme.
Setting up your routes
This theme supports a home page, and separate blog page. In order to do this in ghost, you must upload a custom routes.yml file. You can download your current file, when logged into ghost local, by clicking Settings > Design in the left sidebar and scrolling to Routes at the bottom.
You should edit this file to look like this:
routes:
/:
controller: channel
template: home
collections:
/blog/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Once complete, upload back to your ghost local blog by clicking the upload button just above where you downloaded.
Developing
- You can add to the theme css by editing the css theme file at assets>css>screen.css
- You can add to the theme js by editing the js theme file at assets>js>main.js
- For further theme development visit the ghost theme building documentation (click here).
Deployment
Vendor css and js files are built using gulp and output as assets/css/build.css and assets/js/build.js. Feel free to add your custom scripts to the gulpfile (gulpfile.js) and use gulp.
The easiest way to deploy the theme is to just download the zip file from Settings > Design area when running ghost locally. Then uploading the theme to your live site. Be sure to add your routes.yml file as well.
See a demo of this theme
Disqus Recommendations
We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.
❮
- 2 years ago
An example for how to create custom theme color pallets in Bootstrap 5 …
- 3 years ago
After a month of coding on my new Pixelbook, I'm ready to share how this …
- 3 years ago
A tutorial for getting started with OpenAI's API, based on their quickstart guide, but …
- 3 years ago
A hackers introductory guide to using chrome developer tools to inspect, …
- 3 years ago
A simple example setup of Vue3 using Vite, with ExpressJS and NodeJS on …
- 2 years ago
After a month of coding on my new Pixelbook, I'm ready to share how this …
- 3 years ago
After a month of coding on my new Pixelbook, I'm ready to share how this …
- 3 years ago
This tutorial will teach you how to create signup and login functionality on an …
❯
Disqus Comments
We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.
G
Join the discussion…
Comment
Log in with
or sign up with Disqus or pick a name
Disqus is a discussion network
- Don't be a jerk or do anything illegal. Everything is easier that way.
Read full terms and conditions
This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:
- Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
- Contact me or enable others to contact me by email with offers for goods or services
- Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information
Acknowledge I am 18 or older
Discussion Favorited!
Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!
Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Quick question, in the article above, did you mean to write, to edit the theme JavaScript in `assets/js/main.js`? The path given is for the screen.css file.
see more
Great catch! Thanks, I fixed that.
see more
live.rezync.com
live.rezync.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
pippio.com
pippio.com is blocked
This page has been blocked by an extension
- Try disabling your extensions.
ERR_BLOCKED_BY_CLIENT
Reload
This page has been blocked by an extension
Initial Apps](/content/site-root.html)
—
Ghost Bootstrap Starter Theme
Share this