Package:Ghost (Blogging Platform)

Ghost (Blogging Platform)

   Tip

We welcome improvements to this page. To edit this page, Create a Funtoo account. Then log in and then click here to edit this page. See our editing guidelines to becoming a wiki-editing pro.

Description

Ghost is an easy to use, quick, and light blogging platform that uses nodejs and is ready to go in minutes. You can configure it to do anything from a self hosted blog for yourself, a blog that uses multiple users with their own usernames and profile pages.

Configuring Ghost

To use Ghost in production (as opposed to development mode) you simply first run:

root # emerge ghost
root # npm install --production

Then configure your options in /usr/share/webapps/ghost/config.example.js and rename it to /usr/share/webapps/ghost/config.js:

   config.js (javascript source code) - ghost config

// # Ghost Configuration
// Setup your Ghost install for various environments
// Documentation can be found at http://support.ghost.org/config/

var path = require('path'),
    config;

config = {
    // ### Production
    // When running Ghost in the wild, use the production environment
    // Configure your URL and mail settings here
    production: {
        url: 'http://blog.somedomain.com',
        mail: {
            transport: 'SMTP',
            options: {
                service: 'Gmail',
                auth: {
                    user: 'user@gmail.com',
                    pass: 'password'
                }
            }
        },
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost.db')
            },
            debug: false
        },

        server: {
            // Host to be passed to node's `net.Server#listen()`
            host: '0.0.0.0',
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
            port: '2368'
        }
    }
};

// Export config
module.exports = config;

   Note

You don't need to use Gmail as your mail, just an example. E-mail is only used for when you add users to the blog, it sends a notice so they can set up their own username and their own password, or if you forget your password and need to reset.

After you've completed setting up your config.js, you can start Ghost from:

root # npm start --production

Once you confirm that it has started, you use the URL and port you provided in your browser: blog.somedomain.com:2368/ghost/signup

If you use Gravatar and use the e-mail used for that, it will automatically enable your Gravatar as your users avatar. You can disable this if you'd like by adding the following to your config.js

   config.js (javascript source code) - ghost config

privacy: {
    useGravatar: false
}

If you'd like to add SSL support for your blog, you can do so in config.js:

   config.js (javascript source code) - ghost config

...
        url: 'http://blog.somedomain.com',
        urlSSL: 'https://secure.myblog.com'
...

After this is all done, you can start using your blog. To use it you go to the domain your provided in config.js: blog.somedomain.com:2368/ghost and you will be able to publish, write drafts, and edit any posts.

Themes, adding Disqus and Google Analytics

   Important

After changing any of the *.hbs files you need to restart your blogs instance.

The default theme for Ghost is called Casper which is located in /usr/share/webapps/ghost/content/themes/. If you'd like to keep this them and edit it, it is recommended that you copy it to a different name, to change the name for picking in the theme section of the Ghost admin page, edit /usr/share/webapps/ghost/content/themes/my-theme/package.json:

   package.json - theme

{
  "name": "My Theme,
  "version": "1"
}

The file to edit for the CSS of your default theme would be in /usr/share/webapps/ghost/content/themes/my-theme/assets/css/.

   Note

This requires a basic knowledge of CSS

root # cp -r /usr/share/webapps/ghost/content/themes/casper/ /usr/share/webapps/ghost/content/themes/my-theme
root # nano -w /usr/share/webapps/ghost/content/themes/my-theme/assets/css/screen.css

   screen.css (css source code) - ghost theme

# Changing blockquotes:
blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left:5px;
    padding-top:10px;
    padding-bottom:10px;
    border-left: #fff 3px solid;
    margin:25px;
    line-height:1.3em;
}

# Changing preformatted text for source code:
pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 1.75em 0;
    border: #E3EDF3 1px solid;
    width: 100%;
    padding: 9.5px;
    font-family:'Source Code Pro', monospace;
    font-size: 13px;
    white-space: pre;
    overflow: auto;
    background: #000;
    border-radius: 6px;
    color:#ccc;
    word-break:break-all;
    word-wrap:break-word;
 }

You may edit as much as you'd like in this file, though if you add new a new div for the main page you'll have to make sure to add it in /usr/share/webapps/ghost/content/themes/my-theme/default.hbs.

You may also get some free themes from the Ghost Marketplace.

Adding Disqus

Disqus is a great way to keep in contact with your readers via comments. It is suggested that you add it to your blog if you'd like feedback on your posts, or just would like to stay in contact with your readers. This is not required, though.

In order to add Disqus, you'll need to sign up at their website, then grab the code. It will be labeled as 'Universal code' on your Disqus homepage. You must then add this code to /usr/share/webapps/ghost/content/themes/(theme name)/post.hbs. This will be pasted anywhere between {{/post}} and </article>.

   post.hbs (javascript source code) - adding Disqus

</footer>
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
    var disqus_identifier = '[[:Template:Post.id]]';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0]  | | document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</article>

After this, you'll have comments added to your blog!

Adding Google Analytics

If you track the traffic to your blog and use Google Analytics, you simply need to edit your /usr/share/webapps/ghost/content/(theme name)/default.hbs and add the code in between the <head> and </head>.

   default.hbs (javascript source code) - adding Google Analytics

<head>
...
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r] ||function(){
    (i[r].q=i[r].q ||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXXX-X', 'yourblog.ghost.io');
    ga('send', 'pageview');
...
</head>

This will activate Google Analytics for you to see your traffic!

Conclusion

The Ghost blogging platform is a great small, tool. This should be enough to get you well on your way to your new blog!