org-publish Tips & Tricks

1 Setting up the environment

(add-to-list 'package-archives
    '("org" . "") t)
(add-to-list 'package-archives
    '("org-plus-contrib" . "") t)

(unless (package-installed-p 'org-plus-contrib)
  (package-install 'org-plus-contrib))
(require 'org-plus-contrib)

2 TODO Template Publicación


3.1 Initial Problem

The elements wrapping the headline content were not contained inside a parent div/section, making it pretty hard to organize the content in the page since they kept overlapping each other using grid and flexbox was impossible due to them not having a parent html element. The TOC needed to grow in size in relation to the content of the page. The logical solution would be to use flexbox but since we already discarded that as an option I wah stuck with traditional “box” manipulation or css grid.

|       |    header    |
|       +--------------+
|       |  headline-1  |
|  toc  |  headline-2  |
|       |     ....     |
|       |              |
|       |  headline-N  |
|        footer        |

3.2 The Solution

The template needs to have three rows and two columns but the content at [1][1] is forced into position so we don’t need to reference it by name.

#content {
    display: inline-grid;
    grid-template-areas: 'toc header'
        'toc _'
        'toc footer';

The header is positioned using the grid-area name

header {
    grid-area: header;
    width: auto;
} /* document title */

The content within the headlines in the org file has to be forced into position with the grid-column attribute and since the amount of headlines that each page has is variable we need to use the grid-row attribute and set it to “auto”.

[class^="outline-"] {
    grid-row: auto;
    grid-column: 2;

The TOC can be positioned in the traditional way but the bottom of it should reach the footer section which can be done by manipulating the grid-row-end attribut and setting it to an absurdly high number.

#table-of-contents {
    grid-area: toc;
    grid-row-end: 999;

The syntax highlighting capabilities are available once you install the htmlize package. Link to StackOverflow answer.

(use-package htmlize
  :ensure t)

4 SEO Improvements

4.1 Capturing links

Linking to a website or piece of content would normally increase that website’s domain authority. But with a nofollow tag, it won’t.

Unfortunately using the #+ATTRHTML tag would wrap the hyperlink in a <p> element, as it’s described in this old reddit thread however in the org manual I found out that you can quote HTML tags

Once we set up a way for capturing our templates in place the next way is to set up the template using the inline html trick and template expansion alongside macro replacement.

;; marcos are pre-processed... dah!
#+MACRO: a @@html:<a href='$2' rel='external nofollow'>$1</a>@@

(defun org-capture-at-point ()
  "Insert an org capture template at point."
  (org-capture 0))

(global-set-key (kbd "C-c c") #'org-capture-at-point)

(setq org-capture-templates
      '(("l" "Link nofollow" plain (file "") "{{{a(%?,%x)}}}")))

Another crucial part is to set up the Open Graph Tags so your content gets shared in a beautiful way in social media.

#+HTML_HEAD: <meta property="og:title" content="Title" />
#+HTML_HEAD: <meta property="og:description" content="My Site Description" />
#+HTML_HEAD: <meta property="og:type" content="website" />

Author: John Doe

Created: 2020-06-11 Thu 04:17