Difference between pages "Help:Funtoo Editing Guidelines" and "Package:Ghost (Blogging Platform)"

From Funtoo
(Difference between pages)
Jump to navigation Jump to search
 
 
Line 1: Line 1:
'''Thanks for your potential interest in contribution the the Funtoo wiki!'''
{{Ebuild
__NOTOC__
|Summary=Ghost allows you to write and publish your own blog, giving you the tools to make it easy and even fun to do.
== Types of Edits ==
|CatPkg=www-apps/ghost
|Maintainer=anak1n
|Homepage=https://ghost.org
}}
=== 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.


Before we get started, let's review what changes are okay to make, and what changes are not okay:
=== Configuring Ghost ===
To use Ghost in production (as opposed to development mode) you simply first run:  


{{TableStart}}
{{console|body=
<tr class="active"><th>Type of Change</th><th>Okay?</th></tr>
###i## emerge ghost
<tr><td>Grammar/spelling fixes</td><td>Yes</td></tr>
###i## npm install --production
<tr><td>New wiki content</td><td>Yes</td></tr>
}}
<tr><td>New package information</td><td>Yes</td></tr>
<tr><td>Adding to existing article</td><td>Maybe -- see below</td></tr>
<tr><td>Adding missing/incomplete information</td><td>Yes</td></tr>
<tr><td>Making corrections</td><td>Yes</td></tr>
<tr class="danger"><td>Adding work-arounds to problems experienced</td><td>No - open bug first on [http://bugs.funtoo.org bug tracker].</td></tr>
{{TableEnd}}


{{fancyimportant|Note that if you experience some problem with Funtoo Linux, during installation or otherwise, the proper course of action is to not add a work-around to our documentation, but to ''open a bug on our bug tracker.'' This is important because the problem you experienced may be a legitimate bug and the solution may be to fix the bug rather than add a work-around to our documentation. We may end up fixing a bug, making a documentation fix, or possibly both.}}
Then configure your options in {{f|/usr/share/webapps/ghost/config.example.js}} and rename it to {{f|/usr/share/webapps/ghost/config.js}}:
{{file|name=config.js|lang=javascript|desc=ghost config|body=
// # Ghost Configuration
// Setup your Ghost install for various environments
// Documentation can be found at http://support.ghost.org/config/


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


Here is a list of basic wiki information that you will need to know to get started:
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
        },


* First, to perform edits on the wiki, you must {{CreateAccount}} and log in.
        server: {
* You can create a new page by navigating to http://www.funtoo.org/New_Page_Name. Underscores are the equivalent of spaces. Then select "Create" under the "Actions" menu.
            // Host to be passed to node's `net.Server#listen()`
* Whether creating a new page or editing an existing page by clicking "Edit", you will be presented with Web-based text editor that allows you to modify the ''wikitext'' of the page. The wikitext is rendered to produce the document you see when you view the page normally.
            host: '0.0.0.0',
* This wiki uses the [http://www.mediawiki.org/wiki/Extension:Approved_Revs ApprovedRevs Extension], which means that any changes you make to a page will need to be approved by an Editor before they are displayed. Editors can visit the [[Special:ApprovedRevs]] page to approve edits made on pages (click "Pages whose approved revision is not their latest" or "Unapproved pages".)
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
* Until your edits are approved, you can continue to edit the page and your changes will be displayed in the page's History -- click "History" under the "Actions" menu to view the page's history. You will see that the approved version of a page has a star next to it.
            port: '2368'
* Another fun thing you can do is click on your name under the "Account" menu once you have logged in. This will bring you to your "User" page. Then click "Create with Form" unde the "Actions" menu and enter your geographic and other information. This will allow you to be displayed on our [[Usermap]] and will also allow your full name to be displayed on [[:Category:Ebuilds|Ebuild pages]] for which you are an author. It's generally a good idea to do this.
        }
    }
};


{{fancytip|The following sections document how to use wikitext and Funtoo templates on the Funtoo wiki.}}
// Export config
module.exports = config;
}}  


== Paragraphs ==
{{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.}}


To create a new paragraph, insert a blank line between two lines of text. If a blank line doesn't exist between two lines of wikitext, they will be combined into a single flowing paragraph.
After you've completed setting up your {{f|config.js}}, you can start Ghost from:


If you leave leading whitespace at the beginning of a line, MediaWiki will render it as pre-formatted text. Beware of this. Here's an example:
{{console|body=
###i## npm start --production
}}


  foobar
Once you confirm that it has started, you use the URL and port you provided in your browser: {{c|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


This can rear its ugly head when specifying template parameters, so you will get this:
{{file|name=config.js|lang=javascript|desc=ghost config|body=
 
privacy: {
{{fancynote| ugh!}}
    useGravatar: false
 
}
...instead of this:
}}
 
{{fancynote|This looks much better!}}
 
== Page and Section Capitalization ==
 
In general, capitalize all words in page names and section heading except:
* Articles: a, an, the
* Coordinating Conjunctions: and, but, or, for, nor, etc.
* Prepositions (fewer than five letters): on, at, to, from, by, etc.
 
== Document Heirarchy ==
 
Use section headings to create a document heirarchy for your page. These will define the table of contents that appears at the top of the wiki page. Create chapters, sections and sub-sections as follows:
 
<pre>= Page Title =
 
== Chapter Title ==
 
=== Section Title ===
 
==== SubSection Title ====
 
</pre>
 
== Links ==
 
Internal links to other wiki pages can be specified as <tt><nowiki>[[pagename]]</nowiki></tt>. To specify an alternate name for the link, use <tt><nowiki>[[pagename|my link name]]</nowiki></tt>.
 
For external links, use <tt><nowiki>[http://funtoo.org my link]</nowiki></tt> to specify a URL. If you want the URL to appear in the wikitext, you can specify it without brackets: http://forums.funtoo.org.
 
== Lists ==
 
MediaWiki supports a number of list formats:
 
* Unordered List
* Unordered Item 2
** Unordered sub-item
 
# Ordered List
# Ordered Item 2
## Ordered sub-item
 
;Term: This is called a "definition list". It is used when defining various terms.
 
If you need to quote a portion of text from another site, use <tt><nowiki><blockquote></nowiki></tt> as follows:
 
<blockquote>
Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access, free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google, the largest with 1.2 billion unique visitors."[10]
</blockquote>
 
== Literal Text and HTML Symbols ==
 
Here is wikitext for the section above, which I am displaying by placing the literal wikitext between a &#60;pre&#62; and &#60;/pre&#62; tag. If you want to disable wikitext processing for an inline span of text, use &#60;nowiki&#62; and &#60;/nowiki&#62;. If you want to print out a tag literally, use &amp;#60; and &amp;#62; (In the wikitext, I used &amp;amp;#60; and &amp;amp;#62 to display these!)
 
<pre>
* Unordered List
* Unordered Item 2
** Unordered sub-item
 
# Ordered List
# Ordered Item 2
## Ordered sub-item
 
;Term: This is called a "definition list". It is used when defining various terms.
 
If you need to quote a portion of text from another site, use <tt><nowiki><blockquote></nowiki></tt> as follows:
 
<blockquote>
Wikipedia (ˌwɪkɨˈpiːdiə/ or wɪkiˈpiːdiə/ wik-i-pee-dee-ə) is a collaboratively edited, multilingual, free-access,
free content Internet encyclopedia that is supported and hosted by the non-profit Wikimedia Foundation. Volunteers
worldwide collaboratively write Wikipedia's 30 million articles in 287 languages, including over 4.5 million in the
English Wikipedia. Anyone who can access the site can edit almost any of its articles, which on the Internet
comprise[4] the largest and most popular general reference work.[5][6][7][8][9] In February 2014, The New York
Times reported that Wikipedia is ranked fifth globally among all websites stating, "With 18 billion page views
and nearly 500 million unique visitors a month..., Wikipedia trails just Yahoo, Facebook, Microsoft and Google,
the largest with 1.2 billion unique visitors."[10]
</blockquote>
</pre>
 
== Linking to Packages ==
 
To link to a package page, use the <code>Package</code> template:
 
<pre><nowiki>
{{Package|sys-apps/portage}}
</nowiki></pre>
 
This template will create a link to the official wiki page for sys-apps/portage, and render using the official "English" page name, as follows:
 
{{Package|sys-apps/portage}}
 
If you specify a yet-to-be-documented ebuild, it will render like this (which is okay -- it will encourage people to document it):
 
{{Package|sys-foo/undocumented-ebuild}}
 
== Tables ==
 
Instead of using traditional MediaWiki table wikitext, use the following format:
 
<pre>
{{TableStart}}
<tr class="info"><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Value 1</td><td>Value 2</td></tr>
<tr><td>Value 3</td><td>Value 4</td></tr>
{{TableEnd}}
</pre>
 
This wil render as follows:
 
{{TableStart}}
<tr class="info"><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Value 1</td><td>Value 2</td></tr>
<tr><td>Value 3</td><td>Value 4</td></tr>
{{TableEnd}}
 
{{fancytip|This table syntax has an added benefit of creating a responsive table that renders properly on mobile devices.}}
 
It is possible to use the following CSS classes with <code>tr</code> (rows) and <code>td/th</code> elements to color them as desired:
 
{{TableStart}}
<tr class="active"><td>Class Name</td></tr>
<tr class="success"><td>success</td></tr>
<tr class="info"><td>info</td></tr>
<tr class="warning"><td>warning</td></tr>
<tr class="active"><td>active</td></tr>
<tr class="danger"><td>danger</td></tr>
{{TableEnd}}
 
== Displaying Source Code ==
 
To display source code, use the <tt>&#60;syntaxhighlight&#62;</tt> tag, which has the ability to perform syntax highlighting on the source code for easier reading:
<pre>
<syntaxhighlight lang="python">
import system
</syntaxhighlight>
</pre>
 
This will produce the following output:
 
<syntaxhighlight lang="python">
import system
</syntaxhighlight>
 
Alternatively, if you need a caption, use can use the file template, specifying a <tt>lang=</tt> parameter:


<pre>
If you'd like to add SSL support for your blog, you can do so in {{f|config.js}}:
{{file|name=foobar|lang=python|desc=foobarosity|body=
{{file|name=config.js|lang=javascript|desc=ghost config|body=
import system
...
        url: 'http://blog.somedomain.com',
        urlSSL: 'https://secure.myblog.com'
...
}}
}}
</pre>


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


{{file|name=foobar|lang=python|desc=foobarosity|body=
=== Themes, adding Disqus and Google Analytics ===
import system
{{important|After changing any of the {{c|*.hbs}} files you need to restart your blogs instance.}}
The default theme for Ghost is called {{c|Casper}} which is located in {{f|/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 {{f|/usr/share/webapps/ghost/content/themes/my-theme/package.json}}:
{{file|name=package.json|desc=theme|body=
{
  "name": "My Theme,
  "version": "1"
}
}}
}}


{{fancyimportant|If you need to display the pipe ("{{!}}") character within the body of a file template, replace each "{{!}}" with <nowiki>{{!}}</nowiki> -- otherwise your file contents will not display properly. This is necessary because <nowiki>{{file}}</nowiki> is a template and the "{{!}}" character is used as a delimiter for arguments to the template.}}
The file to edit for the CSS of your default theme would be in {{f|/usr/share/webapps/ghost/content/themes/my-theme/assets/css/}}.
 
{{note|This requires a basic knowledge of CSS}}
Note that the language should be specified in the <tt>lang</tt> attribute. For a list of supported languages, see [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi#Supported_languages this list].
{{console|body=
 
###i## cp -r /usr/share/webapps/ghost/content/themes/casper/ /usr/share/webapps/ghost/content/themes/my-theme
== Displaying Text File Contents ==
###i## nano -w /usr/share/webapps/ghost/content/themes/my-theme/assets/css/screen.css
 
For displaying the contents of non-programming language text files (like config files), you have two options. You can enclose your lines within <tt>&#60;pre&#62;</tt> tags, or use the new [[Template:File|file template]]. The file template is used like so:
 
<pre>
{{file|name=/etc/foo.conf|desc=My foo.conf file|body=
# /etc/host.conf:
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29
}}
}}
</pre>


This will produce:
{{file|name=screen.css|lang=css|desc=ghost theme|body=
# 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;
}


{{file|name=/etc/foo.conf|desc=My foo.conf file|body=
# Changing preformatted text for source code:
# /etc/host.conf:
pre {
# $Header: /var/cvsroot/gentoo/src/patchsets/glibc/extra/etc/host.conf,v 1.1 2006/09/29
    -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 {{c|div}} for the main page you'll have to make sure to add it in {{f|/usr/share/webapps/ghost/content/themes/my-theme/default.hbs}}.


== Console ==
You may also get some free themes from the [http://marketplace.ghost.org/themes/free/ Ghost Marketplace].
To display console output, use the <tt>&#60;console&#62;</tt> tag:


For a root console:
==== Adding Disqus ====
<pre>
[https://disqus.com/ 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.
<console>
###i## run a command as root
</console>
</pre>
Produces:
<console>
###i## run a command as root
</console>


For a non-root console:
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 {{f|/usr/share/webapps/ghost/content/themes/(theme name)/post.hbs}}. This will be pasted anywhere between {{c|<nowiki>{{/post}}</nowiki>}} and {{c|</article>}}.
<pre>
{{file|name=post.hbs|lang=javascript|desc=adding Disqus|body=
<console>
  </footer>
$ ##i##run a command as user
  <div id="disqus_thread"></div>
</console>
  <script type="text/javascript">
</pre>
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
Produces:
    var disqus_identifier = '{{post.id}}';
<console>
$ ##i##run a command as user
</console>


{{fancyimportant|1=
    /* * * DON'T EDIT BELOW THIS LINE * * */
Note that we use a <tt>#</tt> prompt for <tt>root</tt> and a <tt>$</tt> prompt to denote a non-root user.}}
    (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!


{{Fancyimportant|The <tt>##i##</tt> text tags the rest of the line as being ''user input'' ("i" is for "input"). It is then highlighted in a noticeable color so it stands out from text that is not typed in by the user.}}
==== Adding Google Analytics ====
If you track the traffic to your blog and use Google Analytics, you simply need to edit your {{f|/usr/share/webapps/ghost/content/(theme name)/default.hbs}} and add the code in between the {{c|<head>}} and {{c|</head>}}.
{{file|name=default.hbs|lang=javascript|desc=adding Google Analytics|body=
<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');


If you need to end highlighting of user input prior to the end of a line, use <code>##!i##</code> to mark the end of the highlighted area.
    ga('create', 'UA-XXXXXXXX-X', 'yourblog.ghost.io');
 
    ga('send', 'pageview');
The following special character sequences are also available:
...
* <code>##g##</code> - Green
</head>
* <code>##y##</code> - Yellow
* <code>##bl##</code> - Blue
* <code>##r##</code> - Red
* <code>##b##</code> - Bold
 
Please use the above coloring options sparingly. It is sometimes nice to use them to get wiki console output to match the colors that are displayed on a Linux console. Also note that for every color above, there is a matching <code>##!(colorcode)##</code> option to turn color off prior to end of line.
 
Here is an example of its use:<console>
# ##i##bluetoothctl
[##g##NEW##!g##] Controller 00:02:72:C9:62:65 antec [default]
##bl##[bluetooth]##!bl###power on
Changing power on succeeded
##bl##[bluetooth]##!bl### ##i##agent on
Agent registered
##bl##[bluetooth]##!bl### ##i##scan on
Discovery started
##bl##[bluetooth]##!bl### ##i##devices
Device 00:1F:20:3D:1E:75 Logitech K760
##bl##[bluetooth]##!bl### ##i##pair 00:1F:20:3D:1E:75
Attempting to pair with 00:1F:20:3D:1E:75
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
##r##[agent]##!r## Passkey: 454358
##r##[agent]##!r## Passkey: ##i##4##!i##54358
##r##[agent]##!r## Passkey: ##i##45##!i##4358
##r##[agent]##!r## Passkey: ##i##454##!i##358
##r##[agent]##!r## Passkey: ##i##4543##!i##58
##r##[agent]##!r## Passkey: ##i##45435##!i##8
##r##[agent]##!r## Passkey: ##i##454358##!i##
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Paired: yes
Pairing successful
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: no
##bl##[bluetooth]##!bl### ##i##connect 00:1F:20:3D:1E:75
Attempting to connect to 00:1F:20:3D:1E:75
[##y##CHG##!y##] Device 00:1F:20:3D:1E:75 Connected: yes
Connection successful
##bl##[bluetooth]##!bl### ##i##quit
[##r##DEL##!r##] Controller 00:02:72:C9:62:65 antec [default]
#
</console>
 
== Fancy Notes ==
notes, warnings, tips, and important templates will help bring emphasis to articles drawn up.
<pre>{{fancynote|this is a fancy note}}</pre>
{{fancynote|this is a fancy note}}
 
<pre>{{fancyimportant|this is a fancy important}}</pre>
{{fancyimportant|this is a fancy important}}
 
<pre>{{fancywarning|this is a fancy warning}}</pre>
{{fancywarning|this is a fancy warning}}
 
<pre>{{fancytip|this is a fancy tip}}</pre>
{{fancytip|this is a fancy tip}}
 
== Kernelop ==
To display kernel configuration options, we encourage you to use the <tt>kernelop</tt> template. To use the <tt>kernelop</tt> template, create an entry similar to the following example:
<pre>
{{kernelop|title=foo,bar|desc=
kernel options pasted from "make menuconfig"
}}
</pre>
 
{{fancynote|Kernelop is colored blue to slightly resemble the blueish background from <tt>make menuconfig</tt>.}}
 
Adding this entry will give you the following output:
{{kernelop|title=foo,bar|desc=
kernel options
}}
}}
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!


Here's a more concrete example:
  {{EbuildFooter}}
{{kernelop|title=File systems|desc=
<M> Second extended fs support         
[ ]  Ext2 extended attributes         
[ ]  Ext2 execute in place support   
<M> Ext3 journalling file system support
}}
 
Examples of usage:
* [[Package:AMD Catalyst Video Drivers]]
* [[Package:ACPI Daemon]]
* [[Microcode]]
 
 
== Marking Pages as Needing Updates ==
 
If you find outdated wiki content, but you don't have the time or ability to update it, add one of the following templates to the wikitext of the page. This will add the page to the [[:Category:Needs Updates|Needs Updates Category]] so we can identify pages that need updating:
 
<pre>
{{PageNeedsUpdates}}
{{SectionNeedsUpdates}}
</pre>
 
 
Examples of usage:
* [[UEFI Install Guide]]
* [[Package:MediaWiki]]
* [[Clang]]
 
== Inline Code ==
 
To emphasize filenames, commands, and other technical jargon when they appear inline in a paragraph, use the <tt>&#60;code&#62;</tt> element. Follow the example below:
 
<pre>
The <code>/etc/fstab</code> file is an important one. Another important file is <code>/boot/grub/grub.cfg</code>.
</pre>
 
This example produces the following output:
 
The <code>/etc/fstab</code> file is an important one. Another important file is <code>/boot/grub/grub.cfg</code>.
 
{{fancyimportant|1=
The &#60;tt&#62; tag has been deprecated for the purpose of tagging inline code, to conform with HTML5.}}
 
== Screencasting ==
screencasting is an easy method to explain complex tasks. take for instance youtu.be/5KDei5mBfSg we chop off the id and insert it into the following syntax to produce a video example.<br />
tiny:
<pre>{{#widget:YouTube|id=5KDei5mBfSg|width=320|height=180}}</pre>
standard:
<pre>{{#widget:YouTube|id=5KDei5mBfSg|width=700|height=420}}</pre>
{{#widget:YouTube|id=5KDei5mBfSg|width=700|height=420}}
 
[[Category:Wiki Development]]

Revision as of 09:48, January 19, 2015

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!


Retrieved from "https://www.funtoo.org/index.php?title=Help:Funtoo_Editing_Guidelines&oldid=8713"