Org-mode publishing - Adding disqus code

Home

1. How to add disqus code to static pages generated with Emacs org mode?
2. Generate a template to include in the pages you want to display disqus comments:
3. Include the template in the pages where you want disqus comments to appear:
4. Install the org-mode filter function that will replace the variables:
5. Finally build the project and generate the output html files

1 How to add disqus code to static pages generated with Emacs org mode?

One option is to use org-mode MACRO REPLACEMENTS

http://orgmode.org/manual/Macro-replacement.html#Macro-replacement

Another option is to install a filter function.

In this example I will use a filter function.

2 Generate a template to include in the pages you want to display disqus comments:

I will call this template disqus_comments.inc

here is my template disqus_comments.inc:

#+BEGIN_HTML
<div id="disqus_thread"></div>
<script>

var disqus_config = function () {
  this.page.url = 'http://{{my_site_domain}}{{my_site_baseurl}}{{my_page_url}}';  //  page's canonical URL
  this.page.identifier = '{{my_site_baseurl}}{{my_page_url}}'; //  page's unique identifier variable
};

(function() {  // DON'T EDIT BELOW THIS LINE
   var d = document, s = d.createElement('script');

   s.src = '//{{my_disqus_shortname}}.disqus.com/embed.js';

   s.setAttribute('data-timestamp', +new Date());
   (d.head || d.body).appendChild(s);
})();

</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

#+END_HTML

Note that inside the template there are 4 variables that will be replaced by our org-mode filter:

{{my_site_domain}}

{{my_site_baseurl}}

{{my_page_url}}

{{my_disqus_shortname}}

Also note that we tell org-mode that the template is a literal html by enclosing the content between

#+BEGIN_HTML

#+END_HTML

3 Include the template in the pages where you want disqus comments to appear:

Now that we have a template, use the following code in your org-mode files to insert the template where you want the disqus comments block to appear:

#+INCLUDE: "disqus_comments.inc"

4 Install the org-mode filter function that will replace the variables:

Evaluate the following code inside emacs to set variables and install the filter function. The values of the variables will be replaced inside the disqus included template. The filter function simply takes the content as input, and returns the content after replacing the values.

ATTENTION: remember to replace site-domain, site-baseurl and disqus-shortname with your own values.

(setq site-domain "snarvaez.com.ar" )
;; configure site-baseurl to "/directory/" if the site is inside a subdirectory.  Otherwise set it to  "/"
(setq site-baseurl "/notes/" )
;; your disqus name
(setq disqus-shortname "snarvaez-com-ar-libertad")

(defun basename (path)
  (file-name-nondirectory (directory-file-name path)))


;; function to simply replace a regular expression in the output
(defun my-final-filter(output backend info)
  ;; inside org exports,  file variable containts a string with the full path of the output file
  (setq page-url  (basename file) )
  (setq output  (replace-regexp-in-string  "{{my_site_domain}}" site-domain output ))
  (setq output  (replace-regexp-in-string  "{{my_site_baseurl}}" site-baseurl output ))
  (setq output  (replace-regexp-in-string  "{{my_page_url}}" page-url  output ))
  (setq output (replace-regexp-in-string  "{{my_disqus_shortname}}" disqus-shortname  output ))
  output
)

(setq org-export-filter-final-output-functions  '(my-final-filter) )

5 Finally build the project and generate the output html files

Publishing a whole project in org-mode requires setting some org-mode variables. We can create an elisp configuration file per project. For example this is my build.el configuration file. When I want to build the project, I open the file build.el in emacs, and execute the buffer with M-x eval-buffer

To understand how to configure publishing projects with org-mode, please read the tutorial here:

Publishing Org-mode files to HTML

ATTENTION: Remember to replace :base-directory and :publishing-directory according to your local project path

(require 'ox-publish)
(setq org-publish-project-alist
      '(

       ;; ... add all the components here
        ("org-notes"
         :base-directory "~/c_workspace/sen-blog/snarvaez_com_ar_notes/org_notes/"
         :base-extension "org"
         :publishing-directory "~/c_workspace/sen-blog/snarvaez_com_ar_notes/_site/"
         :recursive t
         :publishing-function org-html-publish-to-html
         :headline-levels 4             ; Just the default for this project.
         :auto-preamble t
         :auto-sitemap t                ; Generate sitemap.org automagically...
         :sitemap-filename "sitemap.org"  ; ... call it sitemap.org (it's the default)...
         :sitemap-title "Sitemap"         ; ... with title 'Sitemap'.
         :language "en"
         :html-head  "<link rel='stylesheet' type='text/css' href='style.css' />"
         :html-head-extra "<meta name='viewport' content='width=device-width, initial-scale=1.0' />"
         :with-author "Sebastian Emilio Narvaez"
         :with-email nil
         ;; :html-preamble  my-preamble-format
         :exports code
         ;; :html-postamble my-postamble-format
         :htmlized-source t    ;; htmlized-source     non-nil means, publish htmlized source
         )

        ("org-static"
         :base-directory "~/c_workspace/sen-blog/snarvaez_com_ar_notes/org_notes/"
         :base-extension "html\\|css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
         :publishing-directory "~/c_workspace/sen-blog/snarvaez_com_ar_notes/_site/"
         :recursive t
         :publishing-function org-publish-attachment
         )

        ("org" :components ("org-notes" "org-static"))


      ))

(org-publish-project "org")

In this example, I keep my org-notes inside the folder:

~/c_workspace/sen-blog/snarvaez_com_ar_notes/org_notes/

and the final site will be saved inside the folder:

~/c_workspace/sen-blog/snarvaez_com_ar_notes/_site/

Remember to adjust according to your local folders.

The folder _site will contain the html files ready to be uploaded to a hosting server.

Finally, you can use a tool like rsync to syncrhonize the contents of your local folder with the remote hosting server.

This is my sync script, publish.sh

#!/bin/bash

rsync  -av  -e "ssh -l the_user -i /home/the_user/.ssh/id_rsa"    ./_site/    the_user@the_domain:/home/vhosts/my_site/public_html/notes/