Permalink
Fetching contributors…
Cannot retrieve contributors at this time
198 lines (131 sloc) 7.15 KB

Writers' Guide

This guide will help you write your first blog post using basic AsciiDoc syntax. It also describes blog paramters used to control aspects of post sort order, and category tags. Read this guide if you are new to writing AsciiDoc mark-up, or have not used HubPress to create a blog post before.

Note
If you can write a text email, you can create great blog posts with AsciiDoc and HubPress.

1. About AsciiDoc

If you have never used AsciiDoc before to write content, the AsciiDoctor Writer’s Guide should be your first stop in your journey. The guide provides both basic and advanced mark-up examples for you to copy and use.

HubPress Editor displays the AsciiDoc code on the left, and the live preview on the right.

2. Blog Title and Headings

HubPress uses the Asciidoctor Article container to structure posts.

The blog title is always Level 1 in an AsciiDoc post. For example, = Blog Title sets the name of the Blog Post to Blog Title when published.

Important
A = Blog Title is required for the blog post to save. This is one of the most common support cases raised on the issue tracker.

If you want a first-level heading you use == First Level Heading, and so on to create other nested headings.

3. HubPress Parameters

HubPress allows you to alter characteristics of each blog post using attributes.

3.1. :hp-image: for Blog Post Cover Images

If you want to add a cover image to your Blog Post, set the hp-image attribute.

:hp-image: Example
= Blog Title
:hp-image: a-cover-image.jpg
Note
Because HubPress defaults the /images directory as the root for all images, you only need to declare the filename of the image. Because of this, you may want to consider creating a /covers directory in your repository to group the cover images together. Naming the cover images consistently will make it very easy to apply to every post. If you have a theme to your blog, this allows your readers to get a visual clue as to what the post is about.

The themes that currently support blog post cover images are:

  • Saga

3.2. :published_at: to Alter the Publication Date

By default, the publication date is the date you created the Blog Post. You can force the publication date by adding the :published_at: attribute.

:published_at: Example
= Blog Title
:published_at: 2015-01-31

3.3. :hp-tags: for Metadata Tags

Note
Categories are not supported.

Add tags by using the hp-tags attribute.

:hp-tags: Example
= Blog Title
:hp-tags: HubPress, Blog, Open Source,

3.4. :hp-alt-title: to Specify an Alternative Title

Specify an alternative title using the hp-alt-title attribute.

The alternative title is used instead of the HTML file name generated by HubPress.

:hp-alt-title: Example
= 大千世界
:hp-alt-title: My English Title

3.5. :compat-mode: to Control Legacy AsciiDoc Markup Patterns

Specify how code samples containing AsciiDoc markup patterns are processed. Some code samples may contain delimited asterix symbols that are interpreted like processing instructions by Asciidoctor.

If you find that your code samples are not displaying correctly, specify :compat-mode: true to disable processing in code blocks.

:compat-mode: Example
= Blog Title
:compat mode: true
    `egrep '\(\ *\)\ *\{' /var/log/nginx/*`

If :compat-mode: was not specified here, the code sample would render like this:

egrep '\(\ \)\ *\{' /var/log/nginx/

For more information about :compat-mode:, see the AsciiDoctor Migration Guide.

4. Adding Images

4.1. Use the /images Directory in Your Repository

You can use Git command line or a Git app to add images to your blog posts:

  1. Commit images to the /images directory.

  2. In your blog post, use the following basic AsciiDoc syntax:

    image::<filename>[]
  3. See http://asciidoctor.org/docs/asciidoc-writers-guide/ for complex examples of Image syntax.

If you are embedding images from a hosted source (such as instagram, another GitHub repository, or any photo hosting site) put the full URL to the image in place of the <filename>.

Hosted Image Embed
image::http://<full path to image>[]

4.2. Use GitHub Issues as an Image Hosting Container

You can use a single issue as an image container for a blog post containing many issues by uploading multiple images as comments. Alternatively, you can use multiple issues to store individual images.

Whatever works best for you, and your organization style.

Watch this five minute video for a demonstration about how to use GitHub Issues and Cloud Hosting services as embed targets, and some bonus tips on using the image AsciiDoc syntax.

5. Embedding Video

HubPress allows you to embed video and audio directly into your blog post by using a quick notation in your blog post.

You don’t need to declare the full URL: all you need is the unique video ID.

video::[unique_youtube_video_id][youtube | vimeo]
YouTube Video Embed
video::KCylB780zSM[youtube]
Vimeo Video Embed
video::67480300[vimeo]

6. Embedding Audio

While YouTube and Vimeo have pre-defined short notations in Asciidoctor, other services like BandCamp or SoundCloud require a block passthrough to be declared. Block passthroughs are described in detail in the Asciidoctor User Manual.

BandCamp Audio Embed
++++
<iframe style="border: 0; width: 350px; height: 470px;" src="//bandcamp.com/EmbeddedPlayer/album=2869458964/size=large/bgcol=333333/linkcol=0f91ff/tracklist=false/transparent=true/" seamless><a href="http://mocamborecords.bandcamp.com/album/showdown">SHOWDOWN by THE MIGHTY MOCAMBOS</a></iframe>
++++
Tip
The trick with block passthroughs (no matter the type) is to ensure any src value does not contain a mixed protocol. For example if the src link contained http and your blog uses a https protocol, the embed would fail.

Some <iframe> elements provided by these sites may include the protocol, and you will need to strip the protocol out when declaring passthrough blocks.

The source link is essentially an absolute target to the hosted file on the service. The // opens the pointer to the file. See this issue which describes the journey to discovering how to embed content other than Vimeo and YouTube content.

7. Donations

HubPress is now on Gratipay!

7b09da22 ceb9 11e5 93f7 16ab135b2e2e

It’s not the only way you can help us, but it is certainly a welcome one. Donations are a great way to show your appreciation for the platform: it inspires us to dedicate extra time away from our families and day jobs to make HubPress an awesome blogging platform for you.

cc5ee908 ceb9 11e5 9d8b c526f081f1e9