About Me
Table of Contents
1. About Me 👋
-About Me 👋
+I'm building a personal site using Emacs, Org-mode, and Cloudflare Pages.
@@ -220,9 +59,9 @@ I'm building a personal site using Emacs, Org-mode, and Cloudfl2. Interests
-Interests
+- Linux
- Open source @@ -231,13 +70,184 @@ I'm building a personal site using Emacs, Org-mode, and Cloudfl
3. Back to Home
+Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Interests
+-
+
- Linux +
- Open source +
- Org mode +
- Static sites +
Back to Home
Created: 2025-08-06 Wed 15:20
- +Contact
+Contact Using the Following:
++> LinkedIn: LinkedIn +
+ ++> GitHub: Github +
+ ++> Email: +
+ +-
+
- zaineulabideen (at) outlook (dot) com + +
- zaineulabideen@outlook.com +
+Thanks for visiting! +
+Welcome to My Org Website
-Table of Contents
- -1. Hello from Org Mode 🌱
-Zaine Qayyum
+Welcome! 🌱
+
-This is a simple homepage built with Emacs Org-mode and published using org-publish.
+This is a website built using Emacs Org-mode and published using org-publish.
@@ -221,33 +35,121 @@ Feel free to explore:
2. Blog Posts
-How to publish web pages using org-publish
+
-Here are some placeholder posts:
+This website is heavily inspired by some people who have decided to use org-publish as a way to convert org files into html. 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.
3. Contact
--Feel free to reach out on GitHub: https://github.com/yourusername +There is a Unix philosophy that emphasises building simple and compact code that can be easily maintainable, and following this approach (do one thing well) aligns with this philosophy. +
+ +
+So how does one go about publishing web pages through Emacs's org-publish? The answer is quite simple. You probably will need to have some familiarity with elisp although it's not a must.
+
+The first thing we will want to do is edit our init.el file, which is the initialization file. In this file we want to add the following:
+
+(setq org-publish-project-alist + '(("org-notes" + :base-directory "~/web" + :base-extension "org" + :publishing-directory "~/web" + :recursive t + :publishing-function org-html-publish-to-html + :with-author nil + :with-creator nil + :html-validation-link nil + :with-toc t + :section-numbers t + :html-head "<link rel=\"stylesheet\" href=\"style.css\" />" + ) + ("org-static" + :base-directory "~/web" + :base-extension "css\\|js\\|png\\|jpg\\|gif" + :publishing-directory "~/web/output" + :recursive t + :publishing-function org-publish-attachment) + ("website" :components ("org-notes" "org-static")))) + ++
+What this snippet of code is doing is it is telling org-publish what configurations we want to use when we end up running the publish command. Under ~/web is where we want to include our files. Let us take a simple example and create an index.org file:
+
+#+TITLE: Website Name +#+OPTIONS: toc:nil num:nil +#+HTML_HEAD: <link rel="stylesheet" href="style.css"> + +* Welcome! + +This is a simple website + ++
+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 styles.css file in the same directory.
+After doing this, we can run the command:
+
+M-x org-publish RET website + ++
+This will generate a html file inside the ~/web/output/ directory, and we can serve this file using any static site generation tools; I recommend python due to it's simplicity:
+
+cd ~/web/output
+python3 -m http.server 8000
+
+
+
+And there we go! The files are now being hosted on http://localhost:8000/ and we have a fully functioning workflow for converting org files into a static website.
+
Contact
++Feel free to reach out on GitHub: https://github.com/zainezq
Created: 2025-08-06 Wed 15:20
- +Posts
+ +Sitemap for project org-posts
+ +Posts Introduction
+Introduction
+
+In this section you will find posts related to both technical and non-technical topics. As Einstein said: “If you can’t explain it simply you don’t understand it well enough”, thus the goal with these posts is to develop the skill of being able to deliver habitual high quality explanations as well as reinforcing the topic learnt.
+
+Generally, for teachers, this is done by taking the time to develop their own capacity to explain key concepts simply. In some institutions, departmental CPD is well spent rehearsing ways to improve the ability to explain the more difficult material in a more simpler way. +
+ ++When we study a topic, we get a grasp of the thing we are trying to learn, and then later on one may realise that they didn't actually learn it. The context of this differs for every person, for some it may be in the field of medicine, others in the field of software development; we may find ourselves with a solution without knowing the why. +
+ ++Explaining topics is a fantastic method of learning, an article written by Juha-Matti Santala titled Explaining it helps you learn it says: +
+ +++ ++The act of teaching (and more accurately, the act of preparing to teach) forces us to discover the knowledge gaps, fill them and improve our communication skills to a level where we know enough to confidently, comfortably and successfully transfer that knowledge from our mind to another mind. +
+
+The article further quotes Henrik Jernevad in whose blog post writes: +
+ +++ ++I think the magic comes when you need to put words to things. It is quite easy to have a vague picture of something in your mind without realizing how vague it actually is. Putting things in words exposes that vagueness. +
+
+The final line Putting things in words exposes that vagueness is profound in the context of learning. In the pursuit of any academic discipline, we're often confronted with vagueness. Yet, it’s often through explaining a concept to someone else, using your own words, analogies, and diagrams, that one ends up actually understanding it. +
+ ++ +
+Zettelkasten Method
++Testing +
+
+ block.appendChild(button);
+
+ button.addEventListener("click", function () {
+ const text = block.innerText.replace(button.innerText, ""); // exclude button text
+ navigator.clipboard.writeText(text.trim()).then(() => {
+ button.innerText = "Copied!";
+ setTimeout(() => (button.innerText = "Copy"), 1500);
+ });
+ });
+ });
+});
+
diff --git a/output/style.css b/output/style.css
index 115bc83..f49d1bd 100644
--- a/output/style.css
+++ b/output/style.css
@@ -6,53 +6,92 @@
--code-bg: #f0f0f0;
}
-body.dark {
- --bg: #121212;
- --fg: #e0e0e0;
- --link: #8ab4f8;
- --heading: #7baaf7;
- --code-bg: #1e1e1e;
-}
body {
- font-family: sans-serif;
- max-width: 700px;
- margin: 2rem auto;
- padding: 1rem;
- line-height: 1.6;
background-color: var(--bg);
color: var(--fg);
transition: background-color 0.3s, color 0.3s;
}
+/* Headings (override org.css if needed) */
h1, h2, h3 {
color: var(--heading);
}
+/* Links */
a {
color: var(--link);
- text-decoration: none;
}
-
a:hover {
text-decoration: underline;
}
-pre, code {
- background: var(--code-bg);
- padding: 0.2em 0.4em;
+/* Copy button inside code blocks */
+.copy-btn {
+ position: absolute;
+ top: 0.4em;
+ right: 0.4em;
+ background-color: var(--code-bg);
+ color: var(--heading);
+ border: 1px solid var(--heading);
border-radius: 4px;
- font-family: monospace;
+ padding: 0.2em 0.6em;
+ font-size: 0.8rem;
+ cursor: pointer;
+ z-index: 10;
+ transition: background-color 0.3s;
}
-/* Toggle button */
-#theme-toggle {
- position: fixed;
- top: 1rem;
- right: 1rem;
- padding: 0.4em 0.8em;
- background: var(--code-bg);
- border: none;
- border-radius: 5px;
- cursor: pointer;
+.copy-btn:hover {
+ background-color: var(--heading);
+ color: var(--code-bg);
+}
+
+/* Nav styling */
+nav {
+ border-radius: 6px;
+ margin-bottom: 1rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+}
+
+nav a {
+ color: var(--link);
+ text-decoration: none;
+ font-weight: 600;
+}
+
+nav a:hover {
+ text-decoration: underline;
+}
+
+/* Footer styling */
+footer {
+ color: var(--fg);
+ padding: 1rem;
+ margin-top: 2rem;
+ border-radius: 6px;
+ text-align: center;
+ font-size: 0.9rem;
+ font-style: italic;
+
+}
+#updated {
+ font-size: 0.8rem;
+ color: var(--fg);
+ margin-bottom: 1rem;
+ font-style: italic;
+}
+pre.src::before {
+ content: none !important;
+}
+/* Container: */
+pre.src {
+ padding: 1.5em 1em 1em 1em; /* top padding leaves space for button */
+ font-family: "Fira Mono", "Courier New", monospace;
+ font-size: 0.9rem;
+ line-height: 1.4;
+ overflow-x: auto;
+ white-space: pre-wrap; /* wrap long lines */
+
}
diff --git a/output/theme-toggle.js b/output/theme-toggle.js
deleted file mode 100644
index 73632b1..0000000
--- a/output/theme-toggle.js
+++ /dev/null
@@ -1,35 +0,0 @@
-function setTheme(mode) {
- if (mode === 'dark') {
- document.body.classList.add('dark');
- localStorage.setItem('theme', 'dark');
- } else {
- document.body.classList.remove('dark');
- localStorage.setItem('theme', 'light');
- }
-}
-
-function toggleTheme() {
- const current = document.body.classList.contains('dark') ? 'dark' : 'light';
- setTheme(current === 'dark' ? 'light' : 'dark');
- console.log("Testing");
-}
-
-window.addEventListener('DOMContentLoaded', () => {
- const saved = localStorage.getItem('theme');
-
- // Auto-detect system preference if no saved preference
- if (!saved) {
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
- setTheme('dark');
- }
- } else if (saved === 'dark') {
- setTheme('dark');
- }
-
- // Add the toggle button
- const button = document.createElement('button');
- button.id = 'theme-toggle';
- button.innerText = 'Toggle Theme';
- button.onclick = toggleTheme;
- document.body.appendChild(button);
-});