Write a blog with Org-mode and Jekll

The article is also posted on my GitHub blog: http://cheukyin.github.io/jekyll/emacs/2014-08/org2jekyll.html

1 Preface

Before this month, I have been vimmer, but the vimscript grammatical confusion and cotton-like weakness, let me distressed unceasingly, but the work study but to its a lot of dependence, always give up. Last month, however, I had no intention of glancing at my swollen, stinking, smelly, VIMRC, one-eyed ... Will lose the maintenance of confidence, give up vim, nature can only switch to Emacs. After one months of repeated tossing and in-depth research, I am increasingly feeling the divine charm of the editor of God. All kinds of operating methods that were previously felt but could not be imagined, and could not be done are presented.

Such artifacts, like miracles!

Since Chang Ying in hand, it is natural to play to the extreme. Coincides with the recent plan to use Jekyll to generate static site upload to GitHub build blog, so think of Org-mode.

2 Jekyll Deployment

You can refer to GitHub help.

Jekyllis a markdown program that publishes a document as an HTML static site ruby . Jekyll deployment refers to local deployment, which builds site tests locally.

2.1 Installation

ruby: version>=1.9.3

bundler: Ruby's Package Manager,gem install bundler

Jekyll: site根目录 under Add File Gemfile , and enter

' https://rubygems.org 'github-pages '

bundle install

2.2 Run

jekyll serve&Running the server

Access Blogs via http://localhost:4000

If the blog has changed, jekyll build regenerate the page.

2.3 Directory Structure

Directory structure:/home/**/repo_dir├── ... Other files in Repo├──assets (d) │├──images (d) │└──themes (d) ├──atom.xml├──config.rb├──_config.yml├──_includes (d) │├──custom (d) │├──jb (d) │└──themes (d) ├──index.html├──_layouts (d) │├──default.html│├──page.html│└──p Ost.html├──_org (d) │├──_drafts (d) │├──assets (d) │└──_posts (d) ├──_plugins (d) ├──_posts (d) ├──robots.txt├──rss.x Ml├──_site (D) ├──sitemap.xml

(D) for Directory

• _config.yml : The entire site's configuration file, storing global variables (such as plug-in information, CDN node or author information, etc.), can be   Liquid   Language site.xxx   access.
• _layouts : Store page layout template
• _posts : Store with   markdown   blog post
• _org : Store and use   org-mode   write articles, use   Emacs   Generate MD files to   _posts   directories, which are described in more detail later.
• _includes : Store the page plug-in, the so-called plug-in is a reusable HTML or JS code (such as theme templates, comment interface, etc.), using the {% include **/**%}   can be embedded in the page
• _assets : Storage of images, theme Css,js and other static resources
• _plugins : Store Jekyll Plugins, General Ruby script
• _index.html : blog site home
• _site : Run   Jekyll Build   All static pages generated, final product

Jekyllis a template to generate HTML program, itself there is nothing to study, at most is to understand the liquid language, because the automation work is through the liquid implementation. The rest of the blog building is the normal front-end work, so write good CSS and is the King JS .

2.4 Uploading to GitHub

Apply for a warehouse named on GitHub Username.github.io , and then upload the blog site directory.

Then visit Username.github.io the homepage (more than 20 minutes before you can see it for the first upload).

Note: Username for your Github account name

2.5 SEO

• Baidu: to Baidu Webmaster Platform registration, and apply 百度统计 , according to its requirements to install code, my installation code put in _include/custom/baidu-analytics , and installed in the _include/theme/havee/default.html bottom
• Ping service: See blog sends a python implementation of a ping service request

2.6 Code highlighting

You can use the _pygment-html.py script I wrote to org-mode highlight the generated html files, see blog: Highlighting org-mode code blocks with Python

3 Org-mode

Originally Jekyll used markdown to write a blog, but the individual is not familiar with the language, and its function is too concise, can not adapt to the technical blog a variety of special needs, so I choose Org-Mode .

Org-Modeis an Emacs editing mode, with a variety of powerful to unimaginable, moving to cry function, especially suitable for writing articles and notes, in short, where miracle happens.

The following explanations are based on Org-Mode 8.2 , can be checked in the emacs M-x org-version version, Ubuntu can be apt-get updated Org-Mode to the latest version.

3.1 Configuration

For Jekyll, you can only _post work with files in the directory, and to markdown use it Org-Mode , you need to convert the file to a org html file. And because MD files allow embedded HTML, you can take advantage of Org-mode's HTML publishing capabilities:

• Create a new directory in the Site Directory _org and build three subdirectories under it: _assest , _posts_drafts
• Add to my Profile: Init-org-jekyll.el, change some of org-publish-project-alist the parameters in them (change the directory to your own)

3.2 WorkFlow

• Open, press the prompt to enter a title, and the file will be Emacs M-x jekyll-draft-post created in Emacs _org/_drafts , and the file edited in will _org/_drafts not be published.
• When the article is written, M-x jekyll-publish-post Emacs will transfer the article to _org/_posts the
• M-x org-publish, select jekyll-cheukyin-github-io (depending on the name you changed in the configuration), will Emacs _org/_posts convert all the files in the file to org coexist in md _posts , and the _org/_assest pictures and other static resources to copy all to _assest the

3.3 Basic Operations

Org-ModeIt is also a kind of markup language, designed to separate the structure and performance of text, writing only focus on the content. It uses a series of labels to identify the classification of the text, and the style of each layer of text is handed over to the CSS management.

• Title: Input * , there are several, represent a few levels * of title
• Paragraph: Press once Enter , publish only a space, press two times to Enter calculate the re-open a paragraph
• Internal Post Link: If I want to link to 2014-08-04-ping-service.html this article, then write

• Anchor
  • Add anchor

    <<anchor>>

  • Link to anchor

    [[Anchor]]

• Font
  • Bold: Clip in two * rooms
  • Italic: Clamped in two / rooms
  • Underline: Clamp in two _ rooms
  • Superscript: ^ or _{} , {} put text between, need M-x customize-variable , will be org-use-sub-superscript set to{}
  • Emphasis: Sandwiched ~ between two or two = , when published into HTML, it is converted to a<code></code>
• List
  • Unordered list to - , + or start with
  • A sequence table with 1. or 1) beginning
  • Description list with::
• Form
  • Create and manipulate: Enter the position of a line shelf | , then enter the contents of the first column in the first row of the table, and then enter|
  • Title: #+caption: Title of Table
  • Column length limit, as below, limit column length to 6

    |   | <6>    | | 1 | one    | | 2 | | |    | 3 | this=> | | 4 | Four   |

  • Calculation: One 3*3 table, entered in the third column of the second row =$1*$2 . $1and $2 represents the first and second columns, C-u C-c C-c forcing org-mode calculations for the entire table, and if you only want to perform calculations on a particular item, add one before the equal sign:
• Shortcut keys
  • Indent:C-q TAB
  • Link:C-c C-l
  • Folded

    S-tab	Cycle through the outline state of an entire document
    TAB	Cycle through the outline state where the cursor is located

  • Move between outlines or lists

    C-c c-n/p	Move to the next heading (which level is the title)
    C-c c-f/b	Move to the bottom/top heading of the same level
    C-c C-u	Skip to the top level heading
    C-c C-j	Switch to outline preview state

  • Edit based on outline/title

    M-ret	Insert a title of the same level
    M-s-ret	Insert a same-level todo heading
    M-left/right	Raise/Demote the current title
    M-s-left/right	To raise/demote sub-trees
    M-s-up/down	Move sub-tree up/down
    C-C *	Set the bank as a title or text
    C-c c-w	Move a subtree or area to another heading (across buffers)
    C-c C-x b	Show current branch in new buffer
    C-C/	Only outlines that contain search results are listed and highlighted to support multiple search methods
    -or +	Change the list ordinal style

  • Form
    • Overall area

      c-c vertical bar	created or converted to Table
      c-c c-c	adjust table, do not move cursor, and calculate formula
      tab
      s-tab	move to previous area
      ret	move to the next line, create a new line if necessary

    • Edit Rows and columns

      M-left/right	Move columns
      M-up/down	Move Line
      M-s-left/right	Delete/Insert Columns
      M-s-up/down	Delete/Insert Row
      C-c-	Add a horizontal split line
      C-c RET	Add a horizontal split line and jump to the next line
      c-c ^	Sort by the current column, you can choose how to sort

3.4 Org-babel

Babel, that is, Babel, the Bible, the tower to complete, need to communicate in various languages. Therefore, Org-Babel the role of the various programming languages in harmony and coordinated operation in the same document, that is Literate Programming (literary programming).

Org-babelThe way it works is simple, Org-Mode embed the code in the appropriate language, and then C-c C-c Emacs calls the relevant interpreter execution code and generates the results in the format required by the user, and the execution results of code in different languages can be input to each other, which is to write reports, write documents, A must-have for home travel and arson.

Therefore, God forbid that the tower was built, in the Org-mode!

As the above directory structure is embedded in the blog's org file shell command tree , specify that the publishing HTML is output only the results obtained.

#+begin_src sh:results output:eval no-export:exports result echo "Directory structure:" Tree  -L 2 ~/cheukyin.github. Io#+end_src

Org-babel supported languages can be /usr/share/emacs/site-lisp/org-mode/ob-* seen below.

To add a language, you can modify the variableorg-babel-load-languages

Common parameters:

• :exportsResult | Code | both | None
• :varVariables available in the Varname=value code
• :evalNo-export | Not set
• :resultOutput | Value

4 needs to be delved

• [ ]Picture insertion
• [ ]Formula insertion
• [ ]Seo
• [ ]Fixed side bar catorgories, etc.
• [ ]Add a table of Contents that follows the page move, which can be ejected
• [ ]Find a better Input method
• [ ]code block output HTML color improvements

Write a blog with Org-mode and Jekll