How to publish Org mode blog to HTML

Backlinks: 2024-07-09 | Org mode | Website

First, run the python script create_blog_page.py with:

python3 create_blog_page.py

which will

  • make the blog.org file,
  • make all of the tag_ files,
  • clean up all links that have extra brackets
  • reformat the backlinks tray.

Next, use C-c C-e P p and publish the "website" project. If the cache needs to be cleared, do so by running rm -r ~/.org-timestamps. To do this while clearing the cache, use C-u M-x org-publish-current-project.

Copy the presentations and teaching folders in whole cloth along with our customer index page (and we'll re-copy the images and other while we're at it):

rsync -av --delete teaching presentations static index.html ~/public_html/

Run the clearing script

python3 process_html.py

Preview by launching a web server python3 -m http.server from that public html folder and going to http://localhost:8000.

cd ~/public_html
python3 -m http.server

Publish online:

rsync -avz --delete --exclude="@eaDir" ~/public_html/ [email protected]:/volume1/web/

That's the internal network IP, if I'm home. The tailscale IP is 100.120.245.106.

Before org mode, there was Pelican + GH pages, see Github pages with Pelican and the archived repo.

Before Pelican, there was Wordpress (it's still online…).

How to write a new blog post

Start a file with the format YYYY-MM-DD-[short-name].org, write and save, and then follow the above How to publish Org mode blog to HTML. You can double check the format for the filename in the create_blog_page.py script.

Add a line with [random] at the end for the navigation links to get created.

Notes

These are some notes while I was still developing the process with org mode.

notes.org -> this one is special (all notes in one big file) -> blow out all the headers under Areas as their own pages -> slugify the headers into page names in publichtml/notes/[slug].html -> copy in images/etc -> have a special viewer? that would js only YYYY-DD-MM-slug.org -> these are posts, put into posts pages -> [filename].org -> [filename].html *.org -> these are "pages" -> some can be linked from header -> everything is in the root of the publichtml

how different is this from standard publish html command? not super different?

here's the complex example.

looks pretty fine. changes needed: (1) blow out my single-file notes (2) create the "blog" pages that reference posts.

Moved over the pages in content/pages from .md files to .org files here. Only a few: about, vis, papers, etc.

\[\(.*\)\](\(.*\)) → {[}[\2][\1]{]}

Note I had to add the curly braces for org to not style the output!

\[\(.*\)\](\(.*\)) → [[\2][\1]

Better yet, just add a ] to the end.

Now to convert all of the blog posts. Let's preview our output site.

My concern about blowing out the main file into many smaller files is that the links will be broken from within emacs unless we delete all of smaller files again? Will we be messing with emacs?

Backlinks should go at the bottom of blog posts? Linking by time doesn't seem like the best, would be nice to have the name of the headline. Could also save out the links to the related from the linker?

Let's try adding the header to make the thing closer to reality before messing with details.

Okay it's looking pretty darn close.

I haven't removed org-modes default stying entirely, so the colors don't match (text blogs aren't in the "paper" box and the background isn't orange).

Now I need to think about how I want to explode the notes here.

  • Need to preserve emacs experience of linking and such (this is the core software to use the tool).
  • Need to pull in drafts pages into these notes.
  • Want a copy of these notes (with links!) to persist into the publish step.
  • Make the vis page work as well by pulling in JS into the page.

If we do explode the whole thing into separate files, we need to preserve the ability to search! Already this may be strained with blog pages.

  • Beyond this piece, think about how/when/where we need to integrate a database.
  • Maybe it makes sense just to have plain text files for everything.

Including html

#+HTML: <span class="inline-html">Inline HTML content</span>

or #+BEGINHTML:

#+BEGIN_EXPORT html
<div class="example">
  <p>Your HTML content here</p>
</div>
#+END_EXPORT

Converting images

HEIC files don't display inline in emacs or on the web. Using imagemagick to convert (brew install imagemagick).

magick IMG_1440.HEIC IMG_1440.JPG