Blogging with Emacs and Org Mode

Let us learn the fundamentals first. I also made a video to show these basic commands.

Abbreviations use:

• C is Ctrl key
• M is Meta

Windows - Meta key is Alt Mac - Meta key is Esc

• Close the IDE: C-x C-c
• Save the file: C-x C-s
• Cut: C-w
• Paste: C-y
• Undo: C-_
• Copy: M-w
• Search: C-s
• Move header up and down: Esc-UP and Esc-Down
• Increment and decrement header level: Esc-LEFT and Esc-Right
• Zoom in: C-x C-+
• Zoom out: C-x C–
• Default zoom: C-x C-0
• After one combination of either C-x C-+, C-x C– or C-x C-0 you can press +, - or 0

• Vertical split: C-x-3
• Horizontal split: C-x-2
• Move between windows: C-x-b
• Closing the active window: C-x-0
• Full screen: M-M-M
• Make current window wider: C-x }
• Make current window narrower: C-x {
• Specify the size to make things simpler C-u 40 C-x } or M-40 C-x } ³
• Specify the default size of 4 by doing C-u C-x } ³
• Specify size before the split C-u 40 C-x-3 ³

• Insert a link C-c C-l
• Open existing link in the browser, move cursor to the link and pres C-c C-o
• Make the text fit in the window: visual-line-mode

Add this in your .emacs to enable it by default. (add-hook 'org-mode-hook 'visual-line-mode)

• Indentation based on the headers: org-indent-mode

Add this in your .emacs to enable it by default. (add-hook 'org-mode-hook 'org-indent-mode)

• Insert footnote: C-c C-x f
• Demoting a subtree: M-S-right
• Promoting a subtree: M-S-left

Enjoy

C-x ( - Start the macro C-x ) - end the macro C-x e - repeat the macro

If you do C-x b then you can type in the name of the buffer or you can press C-x C-b it will bring up the list of all the buffers. However there is another way. You can use C-x <left> and C-x <right> as well which is quicker.

You can record time you spent to work on a task.

• Start clock: C-c C-x C-i
• Stop clock: C-c C-x C-o
• Update time interval: C-c C-c (Do that while the cursor is on the time range. I do that a lot because I often add time lateraa)
• Reporting: Just insert these lines and press C-c C-c to generate a report anywhere in your file.

Things are self explanatory. For more details check this page.

When a task is done you can remove it from the org file by C-c C-x C-a

So you have been logging your time, great. What about reports?

Type M-x org-clock-report to insert a report.

To insert a template I use a short <s - <tab> and it will insert a source block but you can also insert your own block templates.

Insert this in your .emacs file

(add-to-list 'org-structure-template-alist
             '("g" "#+NAME: fileName ?\n#+BEGIN_SRC groovy :exports code :results output :tangle directory/fileName.groovy \n\n#+END_SRC"))

Now using <g - <tab> you can quickly insert this groovy specific template. ? mark is the place where your cursor will be when you insert the template.

For more than one template use the following code.

(add-to-list 'org-structure-template-alist
             '("g" "#+NAME: fileName ?\n#+BEGIN_SRC groovy :exports code :results output :tangle directory/fileName.groovy \n\n#+END_SRC"))
(add-to-list 'org-structure-template-alist
             '("t" "#+TITLE: ?\n#+DATE: \n#+AUTHOR: "))

Week-agenda (W17): Monday 20 April 2020 W17 misc: Sched.65x: TODO Update Expense sheet spx: Sched.41x: How to un-exclude the issues from a plan? :video::t17₁₉: spx: Sched.41x: Blog about why I like Jira :blog::t17₁₉: spx: Sched.40x: Create a project using a Groovy script: link :video::p9₁₂: spx: Sched.40x: Video Create a project using a Groovy script: link :p9₁₂:video: spx: Sched.40x: Write a script to create linked issue :video::p9₁₂:

Now when you are looking at the agenda you may want to display it for the next 10 days. You can do that by M-10 C-c a a.

To scheduled multiple tasks you can simple insert 2 days like this.

M-$ on the word and it will give you suggestions with numbers. Just press the number if you want to use the suggestion.

You can store additional information related to an entry and you can do that with the help of drawer.

You can insert then using org-insert-drawer. The format is like this.

:DRAWERNAME:
This is a drawer
:END:

This is my drawer where I keep my documents.

Store your important but kind of hidden.

To avoid this drawer text from getting exported you can add this in this in your document.

#+OPTIONS: num:nil d:(not "DRAWERNAME")

It is possible that there are certain headings in your document that you don't want to be exported. You can add this on top of your document.

#+EXCLUDE_TAGS: noexport

Now any heading with noexport will not get exported but will still be there in your document for you to finish.

Let us say you are working on a big document but you want to focus on a specific heading. It may be useful when you are presenting a document as a presentation but within Emacs.

• Narrow: C-x n s
• Widen: C-x n w

If you want to know if a key binding is used somewhere then simply do C-h k

I use the following configurations to hide/disable to menu bar, scroll bar and tool bar. You don't have to but I like it.

(menu-bar-mode -1)
(toggle-scroll-bar -1)
(tool-bar-mode -1)

There is a command window-swap-states to swap the buffer. Which of course you can bind to a key in your init file.

(global-set-key (kbd "<C-return>") 'window-swap-states)

Nice isn't it?

When showing how emacs or org mode works to someone you may want to show your commands in a buffer. This is super useful and can be done using a mode.

• M-x package-install command-log-mode: To install the package.
• M-x command-log-mode: To turn on the mode in the current buffer
• M-x global-command-log-mode: To turn on the mode in all the buffers
• M-x clm/open-command-log-buffer: To open the buffer

While your .emacs is open simple run M-x eval-buffer. You can actually do it in any buffer where you want to evaluate the code.

The following code make sure that it will read the *.org files in a specific directory and it will generate HTML out of it and also add few other things like header, footer and css.

; Publishing using Org-mode
;(add-to-list 'load-path "~/.emacs.d/ox-rss.el")
(require 'ox-rss)

(defvar ravipro-html-head
  "<link rel='stylesheet' href='css/style.css' type='text/css'/>")

(defvar ravipro-html-blog-head
  "<link rel='stylesheet' href='../css/style.css' type='text/css'/>")

(defvar ravipro-html-preamble "<div class='preamble'><a href='/'>Ravi Sagar</a> | <a href='/'>Home</a> | <a href='blog/blog.html'>Blog</a></div>")
(defvar ravipro-html-blog-preamble "<div class='preamble'><a href='/'>Ravi Sagar</a> | <a href='/'>Home</a> | <a href='../blog/blog.html'>Blog</a></div>")

(defvar ravipro-html-postamble
  "<div class='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='sitemap.html'>Sitemap</a></li>
<li><a href='blog/blog.html'>Blogs</a></li>
<li><a href='http://twitter.com/ravisagar'>Twitter</a></li>
</ul>
</div>
<div class='footer'>Copyright © 2020. Last updated: %C, built with %c</div>"
  )

(defvar ravipro-html-blog-postamble
  "<div class='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='../sitemap.html'>Sitemap</a></li>
<li><a href='../blog/blog.html'>Blogs</a></li>
<li><a href='http://twitter.com/ravisagar'>Twitter</a></li>
</ul>
</div>
<div class='footer'>Copyright © 2020. Created %d, Last updated %C, built with %c</div>"
  )

(defun ravipro-format-entry (entry style project)
    (format "[[file:%s][%s]] --- %s"
            entry
            (org-publish-find-title entry project)
            (format-time-string "%Y-%m-%d" (org-publish-find-date entry project))))

(setq org-publish-project-alist
      `(
        ("home"
         :base-directory "~/ravi.pro/"
          :publishing-directory "/Users/spareuser/projects/ravi.pro/"
          :recursive t
          :exclude "level-.*\\|.*\.draft\.org"
          :publishing-function org-html-publish-to-html
          :auto-sitemap t
          :sitemap-filename "sitemap.org"
          :sitemap-title "Sitemap"
          :sitemap-sort-files anti-chronologically
          :with-toc nil
          :html-head ,ravipro-html-head
          :html-link-up "/"
          :html-link-home "/"
          :html-preamble ,ravipro-html-preamble
          :html-postamble ,ravipro-html-postamble
         )

        ("blog"
          :base-directory "~/ravi.pro/blog/"
          :publishing-directory "/Users/spareuser/projects/ravi.pro/blog/"
          :exclude "level-.*\\|.*\.draft\.org"
          :publishing-function org-html-publish-to-html
          :auto-sitemap t
          :sitemap-filename "blog.org"
          :sitemap-title "All Blogs"
          :sitemap-sort-files anti-chronologically
          :sitemap-format-entry ravipro-format-entry
          :html-head ,ravipro-html-blog-head
          :html-link-up "/"
          :html-link-home "/"
          :html-preamble ,ravipro-html-blog-preamble
          :html-postamble ,ravipro-html-blog-postamble

          )

         ("images"
          :base-directory "~/ravi.pro/images/"
          :base-extension "png\\|jpg"
          :publishing-directory "/Users/spareuser/projects/ravi.pro/images/"
          :recursive t
          :publishing-function org-publish-attachment
          )

         ("css"
          :base-directory "~/ravi.pro/css/"
          :base-extension "css"
          :publishing-directory "/Users/spareuser/projects/ravi.pro/css/"
          :recursive t
          :publishing-function org-publish-attachment
          )

         ("rss"
          :base-directory "~/ravi.pro/"
          :publishing-directory "/Users/spareuser/projects/ravi.pro/"
          :base-extension "org"
          :html-link-home "https://www.ravi.pro/"
          :html-link-use-abs-url t
          :rss-extension "xml"
          :publishing-function (org-rss-publish-to-rss)
          :recursive t

          )

         ("website" :components ("home" "blog" "images" "css"))

         ))

These commands will be used to publish the site into HTML format to a specific location that you set above in the .emacs file.

• Publish: M-x org-publish
• Shortcut: C-c C-e P x PROJECTNAME
• Force publish (all files): C-u M-x org-publish

Here are the steps.

1. First setup the repository with the correct name.

There are 2 main ways of doing it on GitLab.com. Refer to this page.

• Under your username user create a project user.gitlab.io and enable the GitLab pages and your website will be published under https://user.gitlab.io
• Under your group group create a project group.gitlab.io and enable the GitLab pages and your website will be published under https://group.gitlab.io

Make sure pages can be viewed by everyone.

1. Create a file called .gitlab-ci.yml in your repository root with the following content.

pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
  artifacts:
    paths:
      - public
  only:
    - master

I use GitLab.com to host my site. I manage the directory where I publish my HTML in my Git repository on GitLab. I also made a video about it.

1. Add CNAME record that points to user.gitlab.io
2. Verify your domain

Go to your repository settings and add both example.com and www.example.com. You will then get a TXT record that you need to add for your domain. Wait for the verification to finish and you now have a site hosted for free on GitLab. Cool isn't it?

Now earlier in this document we talked about Narrowing and Widening which is great and works wonderfully well but not only focussed work but also for presentations.

We discussed briefly how to create a table but we can do more with them like some calculations. Let us take a look at a simple example. Track days until

You have to use this #+END_SRC $3=(date($1) - date(now())), you can do lot of other things but I wanted to give you a quick idea about how to get started with calculations.

Press C-c ^ on the column and select the sort type.

; You can write a function that check if an entry has "tag1" and if so change it to "tag11":
(defun change-tag (old new)
  (when (member old (org-get-tags))
    (org-toggle-tag new 'on)
    (org-toggle-tag old 'off)
    ))
; Now all you have to do is apply that function to each entry that has "tag1". You can do this with org-map-entries:
(defun org-rename-tag (old new)
  (interactive "scurrent tag: \nsnew name: ")
  (org-map-entries
   (lambda () (change-tag old new))
   (format "+%s" old)
   nil
   ))

Call this with M-x org-rename-tag and it will prompt for the old and new tag names and proceed to change the tags everywhere in the current buffer.

To ensure that the images are shown globally add this code in your init file.

(setq org-startup-with-inline-images t)

I personally prefer showing the images per file. This can be done by adding on of this in your file.

#+STARTUP: inlineimages
#+STARTUP: noinlineimages

You may also want to toggle the display of inline images. You can do that using org-toggle-inline-images.

Details here: https://www.gnu.org/software/emacs/manual/html_node/elisp/ImageMagick-Images.html

To check imagemagick support evaluate this express. M-x eval-expression RET (image-type-available-p 'imagemagick) RET

(image-type-available-p 'imagemagick)

(getenv "PATH")

Find imagemagick path

Well it is usually /usr/bin/convert

Tell emacs where imagemagick is if it is not already in the PATH.

(setenv "PATH" (concat (getenv "PATH") ":/usr/bin"))

So imagemagick is deprecated but emacs can handle image manipulation, at least basic things. To increase/decrease the size of an image place the cursor on the image and run image-increase-size and image-decrease-size. It won't make images responsive but works for now. Now I can use Emacs to present with images if I want.