Customizing Ghost

First Create a New Theme

πŸ’ƒ Do it just do it

Go into ./ghost/contents/themes/ duplicate the casper folder then rename it to whatever you want. Make sure the name is in lowercase without any spaces (hyphens are acceptable).

Bonus pointsπŸ… if you update the name field to match your theme name in the package.json file in the root of the theme folder.

Now, for safekeeping, create a Git repo for your new theme folder

Add Custom CSS

πŸ‘ Open this file

./ghost/content/themes/[theme name]/default.hbs

Look for this code

{{! Styles and Scripts }}
<link rel="stylesheet" type="text/css"  
      href="{{asset "css/[theme name].css"}}" />

...and add a reference to your custom.css file after all other css file includes.

{{! Styles and Scripts }}
<link rel="stylesheet" type="text/css"  
      href="{{asset "css/[theme name].css"}}" />
<link rel="stylesheet" type="text/css"  
      href="{{asset "css/custom.css"}}" />

Create the custom.css file

./ghost/content/themes/[theme name]/assets/css/custom.css

Reset Ghost

For me it's ./bin/stop && ./bin/start

Add Custom Font

πŸ‘† First pick a font from Google Fonts

Then add a <link> element for that font to ./ghost/content/themes/[theme name]/default.hbs. Make sure the element goes before custom.css.

<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />

<link rel="stylesheet" type="text/css" href="{{asset "css/custom.css"}}" />  

Then in the custom.css file you just created

body,  
h1, h2, h3, h4, h5, h6,  
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer {
    font-family: "Ubuntu", sans-serif;
}

/* This is necessary to not mess up share icons at bottom of posts */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "casper-icons", "Open Sans", sans-serif;
}

Add Prism Syntax Highlighting

πŸ’„ Create a Prism CSS File

Once you've created your custom file drop it in ./ghost/content/themes/[theme name]/assets/css. Now open ./ghost/content/themes/[theme name]/default.hbs and add the link element below to the head:

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

Add Comments

πŸ’¬ Create Disqus Account https://[sitename].disqus.com/admin/settings/install/

Go there select "Universal" then copy the given code and paste it into the "footer" text area under Ghost Admin Panel > Code Injection.

Setup Mailgun for RSS, Password Reset, & Team Invites

πŸ“ͺ Create a Mailgun Account http://mailgun.com

It’s free to use up to 10,000 emails per month.

Find this snippet in ./ghost/config.js and add your newly created Mailgun username/password under the appropriate fields.

mail: {  
transport: 'SMTP',  
    options: {
        service: 'Mailgun',
        auth: {
            user: '',
            pass: ''
        }
    }
}

Example:

mail: {  
transport: 'SMTP',  
    options: {
        service: 'Mailgun',
        auth: {
            user: 'postmaster@mysite.com',
            pass: '9be47c83cac1d117e0b5g7e91c821e1d'
        }
    }
}

Reset Ghost

For me it's ./bin/stop && ./bin/start

Reference http://support.ghost.org/mail

Resetting Password in Database

Ghost hashes it's passwords with BCrypt you can reset the password to "password" using this: $2a$10$BQToDNdBtBKCvnrTmMi5m.NK.7i6Qx7YASs.jTkE86I5zqxzE8klC

# Connect to your server
ssh myghostsite.com

# CD to the folder with your sqlite3 database
cd ./ghost/content/data

# Run the sqlite3 CLI tool
sqlite3 ghost.db

# Reset password hash to "password"
UPDATE users SET password="[BCrypt hash above]" WHERE email="[email]";

# Don't forget the semicolon!
# Ctrl-D if you get into trouble! (exit)

Useful sqlite3 Commands

# List user accounts
SELECT * FROM users;

# List column names
PRAGMA table_info('table_name');  

References