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
To do this while clearing the cache,
use rm -r ~/.org-timestamps
.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