156 lines
7.4 KiB
HTML
156 lines
7.4 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Zaine Qayyum</title>
|
|
<meta name="generator" content="Org Mode" />
|
|
<script src="script.js" defer></script>
|
|
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="preamble" class="status">
|
|
<nav>
|
|
<a href="/">Home | </a>
|
|
<a href="/posts/post-lists.html">Posts | </a>
|
|
<a href="/contact.html">Contact</a>
|
|
</nav>
|
|
<div id="updated">Updated: 2025-08-06 Wed 22:50</div>
|
|
</div>
|
|
<div id="content" class="content">
|
|
<h1 class="title">Zaine Qayyum</h1>
|
|
<div id="outline-container-org56334fe" class="outline-2">
|
|
<h2 id="org56334fe">Welcome! 🌱</h2>
|
|
<div class="outline-text-2" id="text-org56334fe">
|
|
<p>
|
|
This is a website built using Emacs Org-mode and published using <code>org-publish</code>.
|
|
</p>
|
|
|
|
<p>
|
|
Feel free to explore:
|
|
</p>
|
|
|
|
<ul class="org-ul">
|
|
<li><a href="about.html">About Page</a></li>
|
|
<li><a href="posts/post-lists.html">Posts Page</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org2c4e688" class="outline-2">
|
|
<h2 id="org2c4e688">How to publish web pages using <code>org-publish</code></h2>
|
|
<div class="outline-text-2" id="text-org2c4e688">
|
|
<p>
|
|
This website is heavily inspired by some people who have decided to use <code>org-publish</code> as a way to convert <code>org</code> files into <code>html</code>. I came across a few that took the plunge and decided to migrate from platforms like Wordpress and instead opted for a more transparent, text-based workflow.
|
|
</p>
|
|
|
|
<p>
|
|
There is a <a href="https://en.wikipedia.org/wiki/Unix_philosophy">Unix philosophy</a> that emphasises building simple and compact code that can be easily maintainable, and following this approach (do one thing well) aligns with this philosophy.
|
|
</p>
|
|
|
|
<p>
|
|
So how does one go about publishing web pages through Emacs's <code>org-publish</code>? The answer is quite simple. You probably will need to have some familiarity with <code>elisp</code> although it's not a must.
|
|
</p>
|
|
|
|
<p>
|
|
The first thing we will want to do is edit our <code>init.el</code> file, which is the <b>initialization</b> file. In this file we want to add the following:
|
|
</p>
|
|
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp">
|
|
(<span style="font-weight: bold;">setq</span> org-publish-project-alist
|
|
'((<span style="font-style: italic;">"org-notes"</span>
|
|
<span style="font-weight: bold;">:base-directory</span> <span style="font-style: italic;">"~/web"</span>
|
|
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"org"</span>
|
|
<span style="font-weight: bold;">:publishing-directory</span> <span style="font-style: italic;">"~/web"</span>
|
|
<span style="font-weight: bold;">:recursive</span> t
|
|
<span style="font-weight: bold;">:publishing-function</span> org-html-publish-to-html
|
|
<span style="font-weight: bold;">:with-author</span> nil
|
|
<span style="font-weight: bold;">:with-creator</span> nil
|
|
<span style="font-weight: bold;">:html-validation-link</span> nil
|
|
<span style="font-weight: bold;">:with-toc</span> t
|
|
<span style="font-weight: bold;">:section-numbers</span> t
|
|
<span style="font-weight: bold;">:html-head</span> <span style="font-style: italic;">"<link rel=\"stylesheet\" href=\"style.css\" />"</span>
|
|
)
|
|
(<span style="font-style: italic;">"org-static"</span>
|
|
<span style="font-weight: bold;">:base-directory</span> <span style="font-style: italic;">"~/web"</span>
|
|
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"css</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">js</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">png</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">jpg</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">gif"</span>
|
|
<span style="font-weight: bold;">:publishing-directory</span> <span style="font-style: italic;">"~/web/output"</span>
|
|
<span style="font-weight: bold;">:recursive</span> t
|
|
<span style="font-weight: bold;">:publishing-function</span> org-publish-attachment)
|
|
(<span style="font-style: italic;">"website"</span> <span style="font-weight: bold;">:components</span> (<span style="font-style: italic;">"org-notes"</span> <span style="font-style: italic;">"org-static"</span>))))
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
What this snippet of code is doing is it is telling <code>org-publish</code> what <b><b>configurations</b></b> we want to use when we end up running the publish command. Under <code>~/web</code> is where we want to include our files. Let us take a simple example and create an <code>index.org</code> file:
|
|
</p>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp">
|
|
#+TITLE: Website Name
|
|
#+OPTIONS: toc:nil num:nil
|
|
#+HTML_HEAD: <link rel=<span style="font-style: italic;">"stylesheet"</span> href=<span style="font-style: italic;">"style.css"</span>>
|
|
|
|
* Welcome!
|
|
|
|
This is a simple website
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
There are some metadata at the very top as we can see, these help us customise each page the way we want to. Here I disabled the Table of Contents and section numbers just for this file. We can also create a simple <code>styles.css</code> file in the same directory.
|
|
After doing this, we can run the command:
|
|
</p>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp">
|
|
M-x org-publish RET website
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
This will generate a html file inside the <code>~/web/output/</code> directory, and we can serve this file using any static site generation tools; I recommend python due to it's simplicity:
|
|
</p>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-bash">
|
|
<span style="font-weight: bold;">cd</span> ~/web/output
|
|
python3 -m http.server 8000
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
And there we go! The files are now being hosted on <code>http://localhost:8000/</code> and we have a fully functioning workflow for converting org files into a static website.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgd69ff2a" class="outline-2">
|
|
<h2 id="orgd69ff2a">Contact</h2>
|
|
<div class="outline-text-2" id="text-orgd69ff2a">
|
|
<p>
|
|
Feel free to reach out on GitHub: <a href="https://github.com/zainezq">https://github.com/zainezq</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="postamble" class="status">
|
|
<footer>
|
|
<div class="copyright-container">
|
|
<div class="copyright">
|
|
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
|
<div class="generated">
|
|
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|