diff options
Diffstat (limited to 'posts')
| -rw-r--r-- | posts/hello.html | 74 | ||||
| -rw-r--r-- | posts/jul_28_2025.html | 13 | ||||
| -rw-r--r-- | posts/june_08_2025.html | 6 | ||||
| -rw-r--r-- | posts/may_06_2025.html | 6 | ||||
| -rw-r--r-- | posts/sitemap.html | 12 |
5 files changed, 54 insertions, 57 deletions
diff --git a/posts/hello.html b/posts/hello.html index 071cec3..0017e02 100644 --- a/posts/hello.html +++ b/posts/hello.html @@ -26,9 +26,9 @@ </div> </div> <div id="content" class="content"> -<div id="outline-container-org55156fe" class="outline-2"> -<h2 id="org55156fe">TLDR</h2> -<div class="outline-text-2" id="text-org55156fe"> +<div id="outline-container-orgd53d495" class="outline-2"> +<h2 id="orgd53d495">TLDR</h2> +<div class="outline-text-2" id="text-orgd53d495"> <ul class="org-ul"> <li>Create a new folder</li> <li>Put <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/index.css">index.css</a>, <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/publish.el">publish.el</a>, and <a href="https://github.com/mattkae/matthewkosarek-xyz/blob/master/publish.sh">publish.sh</a> in the folder</li> @@ -42,9 +42,9 @@ </ul> </div> </div> -<div id="outline-container-org06dce95" class="outline-2"> -<h2 id="org06dce95">Introduction</h2> -<div class="outline-text-2" id="text-org06dce95"> +<div id="outline-container-orgb554240" class="outline-2"> +<h2 id="orgb554240">Introduction</h2> +<div class="outline-text-2" id="text-orgb554240"> <p> I've recently fallen in love with <code>org-mode</code>, specifically when I use it with <a href="https://www.orgroam.com/">org-roam</a>. I find the whole workflow of creating, tagging, and - later on - searching for information on my computer to be very elegant. On top of that, now that I have the time, I want to begin writing blog posts to better work out my thoughts. With both of these things in mind, I am again turning to the universal tool for human prospering: <code>org-mode</code>. This time, I want to see how it can help me turn a simple org file into a blog post on my website. My requirements are: </p> @@ -67,9 +67,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting </p> </div> </div> -<div id="outline-container-org665c62a" class="outline-2"> -<h2 id="org665c62a">Basic HTML File</h2> -<div class="outline-text-2" id="text-org665c62a"> +<div id="outline-container-org3844cb4" class="outline-2"> +<h2 id="org3844cb4">Basic HTML File</h2> +<div class="outline-text-2" id="text-org3844cb4"> <p> As a pilot, we are going to use this org file that I am currently writing (<code>hello.org</code>) as our guinea pig. The goal is to have this org file be our very first blog post. </p> @@ -109,9 +109,9 @@ We then do a <code>chmod +x publish.sh</code> to make it an executable and run i </p> </div> </div> -<div id="outline-container-org7476986" class="outline-2"> -<h2 id="org7476986">Disabling features that we don't want</h2> -<div class="outline-text-2" id="text-org7476986"> +<div id="outline-container-org1e8c199" class="outline-2"> +<h2 id="org1e8c199">Disabling features that we don't want</h2> +<div class="outline-text-2" id="text-org1e8c199"> <p> The next thing will be to remove some of the generated items that I didn't ask for, namely the table of contents, author, section numbers, creation time stamp, and the validation link. </p> @@ -140,9 +140,9 @@ The next thing will be to remove some of the generated items that I didn't ask f </div> </div> </div> -<div id="outline-container-org6f1669b" class="outline-2"> -<h2 id="org6f1669b">Styling & Code Highlighting</h2> -<div class="outline-text-2" id="text-org6f1669b"> +<div id="outline-container-orgdaa922d" class="outline-2"> +<h2 id="orgdaa922d">Styling & Code Highlighting</h2> +<div class="outline-text-2" id="text-orgdaa922d"> <p> Next thing on our list is custom styling. This can be achieved by first installing the <code>htmlize</code> package from <code>melpa</code> / <code>elpa</code>. The EmacsWiki describes this as "a package for exporting the contents of an Emacs buffer to HTML while respecting display properties such as colors, fonts, underlining, invisibility, etc" (<a href="https://www.emacswiki.org/emacs/Htmlize">reference</a>). If used "out-of-the-box", the buffer will be exported to HTML with all of the styles inlined (e.g. if you underline something in your org file, you will generate a <code><span style="text-decoration: underline">...</span></code>). However, we are more interested in styling everything by ourselves: we don't want <code>htmlize</code> making assumptions about what underlining means to us! Luckily, <code>htmlize</code> gives us the option to export with class names instead of inline styles so that we can specify each style for ourselves. </p> @@ -312,9 +312,9 @@ If we run the publish again, we can see that we have full styling on our code sn </p> </div> </div> -<div id="outline-container-org272c9e5" class="outline-2"> -<h2 id="org272c9e5">Images</h2> -<div class="outline-text-2" id="text-org272c9e5"> +<div id="outline-container-org1f1fbf3" class="outline-2"> +<h2 id="org1f1fbf3">Images</h2> +<div class="outline-text-2" id="text-org1f1fbf3"> <p> Our first two criteria have been met! Next on the list is solving images. As an example, let's use this <a href="file:///_posts/assets/squirrel.jpg">squirrel image</a> that I found online with an open source license. The ideal situation would be: </p> @@ -359,16 +359,16 @@ So what's the fix here? Well, we have two options, but I am going to go with the That's all there is to it! There are simpler ways as well, but that should do it: </p> -<div id="org82dcc19" class="figure"> +<div id="org3d13540" class="figure"> <p><img src="/_posts/assets/squirrel.jpg" alt="squirrel.jpg" width="300" /> </p> <p><span class="figure-number">Figure 1: </span>A Cute Squirrel</p> </div> </div> </div> -<div id="outline-container-org6f3b136" class="outline-2"> -<h2 id="org6f3b136">Creation Date</h2> -<div class="outline-text-2" id="text-org6f3b136"> +<div id="outline-container-org4f88abf" class="outline-2"> +<h2 id="org4f88abf">Creation Date</h2> +<div class="outline-text-2" id="text-org4f88abf"> <p> Let's add the creation date below the title next. To start, we will modify the publish command to remove the title (<code>:with-title nil</code>) and, in its place, show a preamble bit of HTML that contains a formatted <code>div</code> with the title and the "last modified" span.z </p> @@ -427,9 +427,9 @@ Note that the downside of this is that the created date will change whenever you </p> </div> </div> -<div id="outline-container-org67593f7" class="outline-2"> -<h2 id="org67593f7">Generating the Directory</h2> -<div class="outline-text-2" id="text-org67593f7"> +<div id="outline-container-orga8f5992" class="outline-2"> +<h2 id="orga8f5992">Generating the Directory</h2> +<div class="outline-text-2" id="text-orga8f5992"> <p> For every org file in my <code>_posts</code> folder, I would like to create a link to the generated HTML file at the <code>/posts.html</code> page of my website. You can think of this as the "directory" of all posts. My criteria is: </p> @@ -489,9 +489,9 @@ If you open the <code>sitemap.html</code> file in your browser, you will see a b From here, you may customize it however you like. The following are my customizations. </p> </div> -<div id="outline-container-org18f5be7" class="outline-3"> -<h3 id="org18f5be7">Sitemap Title</h3> -<div class="outline-text-3" id="text-org18f5be7"> +<div id="outline-container-orga5b4290" class="outline-3"> +<h3 id="orga5b4290">Sitemap Title</h3> +<div class="outline-text-3" id="text-orga5b4290"> <p> I changed the title to "Matthew's Blog Posts". </p> @@ -513,9 +513,9 @@ I changed the title to "Matthew's Blog Posts". </div> </div> </div> -<div id="outline-container-org3f3b8f1" class="outline-3"> -<h3 id="org3f3b8f1">Format blog entries in the list</h3> -<div class="outline-text-3" id="text-org3f3b8f1"> +<div id="outline-container-org2dd1911" class="outline-3"> +<h3 id="org2dd1911">Format blog entries in the list</h3> +<div class="outline-text-3" id="text-org2dd1911"> <p> I like to include the creation date on the blog posts. To do this, we can use <code>org-publish-find-property</code> to find the date property of the org file. Afterward, we can format a string that includes our formatted timestamp and the <code>org-publish-sitemap-default-entry</code>, which is just a link with the title of the post. </p> @@ -536,9 +536,9 @@ I like to include the creation date on the blog posts. To do this, we can use <c </div> </div> </div> -<div id="outline-container-orgff67792" class="outline-2"> -<h2 id="orgff67792">Tags & Filtering</h2> -<div class="outline-text-2" id="text-orgff67792"> +<div id="outline-container-org46d64fe" class="outline-2"> +<h2 id="org46d64fe">Tags & Filtering</h2> +<div class="outline-text-2" id="text-org46d64fe"> <p> I use <a href="https://www.orgroam.com/">Org-roam</a> for all of my note-taking and, in the next blog post, I plan to demonstrate how I will hook up my Org-roam note-taking workflow to my blogging. In the meantime, just know that we can add tags to the top of our org files like this: </p> @@ -758,9 +758,9 @@ Finally, let's append the following to <code>posts/posts.css</code> so that our </div> </div> </div> -<div id="outline-container-orge4fcefe" class="outline-2"> -<h2 id="orge4fcefe">Conclusion</h2> -<div class="outline-text-2" id="text-orge4fcefe"> +<div id="outline-container-org88c4aa7" class="outline-2"> +<h2 id="org88c4aa7">Conclusion</h2> +<div class="outline-text-2" id="text-org88c4aa7"> <p> There are many more customizations that I plan to do on this system in the future, but I plan to leave this for now so that I can actually get to some blogging. I will proofread and fix my mistakes as time goes on, but this should be a good jumping off point for anyone interested in using org for their own blogging system. </p> diff --git a/posts/jul_28_2025.html b/posts/jul_28_2025.html index b165948..41fdbf5 100644 --- a/posts/jul_28_2025.html +++ b/posts/jul_28_2025.html @@ -5,7 +5,7 @@ <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> -<title>‎</title> +<title>Update July 28, 2025</title> <meta name="generator" content="Org Mode" /> <link rel="stylesheet" href="/index.css" /> @@ -20,18 +20,15 @@ </div><div id="preamble" class="status"> <div class="org-article-title"> - <h1></h1> + <h1>Update July 28, 2025</h1> <span>Last modified: 2025-07-28 Mon 17:30</span> <span><a href="/posts/feed.xml">RSS Feed</a></span> </div> </div> <div id="content" class="content"> -<p> -TITLE: Update July 28, 2025 -</p> -<div id="outline-container-org669fac4" class="outline-2"> -<h2 id="org669fac4">What have I been up to?</h2> -<div class="outline-text-2" id="text-org669fac4"> +<div id="outline-container-orgb9814e7" class="outline-2"> +<h2 id="orgb9814e7">What have I been up to?</h2> +<div class="outline-text-2" id="text-orgb9814e7"> <p> Whoops! I missed this month's update by a <i>long</i> shot, but I still want to get it out there before the end of the month. </p> diff --git a/posts/june_08_2025.html b/posts/june_08_2025.html index 351d05c..f73ac59 100644 --- a/posts/june_08_2025.html +++ b/posts/june_08_2025.html @@ -26,9 +26,9 @@ </div> </div> <div id="content" class="content"> -<div id="outline-container-org870c8c2" class="outline-2"> -<h2 id="org870c8c2">What have I been up to?</h2> -<div class="outline-text-2" id="text-org870c8c2"> +<div id="outline-container-org248a2c5" class="outline-2"> +<h2 id="org248a2c5">What have I been up to?</h2> +<div class="outline-text-2" id="text-org248a2c5"> <p> Another month has gone by, so I guess it's time to see what I've been up to. </p> diff --git a/posts/may_06_2025.html b/posts/may_06_2025.html index 1af22d2..43d276b 100644 --- a/posts/may_06_2025.html +++ b/posts/may_06_2025.html @@ -26,9 +26,9 @@ </div> </div> <div id="content" class="content"> -<div id="outline-container-orgc766ac4" class="outline-2"> -<h2 id="orgc766ac4">What have I been up to?</h2> -<div class="outline-text-2" id="text-orgc766ac4"> +<div id="outline-container-org7dcd169" class="outline-2"> +<h2 id="org7dcd169">What have I been up to?</h2> +<div class="outline-text-2" id="text-org7dcd169"> <p> I've been meaning to do these little blog-post type updates for a while, and I figured now is as good a time as any. So let's start :) </p> diff --git a/posts/sitemap.html b/posts/sitemap.html index 6105f8d..669f389 100644 --- a/posts/sitemap.html +++ b/posts/sitemap.html @@ -21,16 +21,16 @@ <div class="org-article-title"> <h1>Matthew's Blog Posts</h1> - <span>Last modified: 2025-07-28 at 15:17</span> + <span>Last modified: 2025-07-28 at 15:19</span> <span><a href="/posts/feed.xml">RSS Feed</a></span> </div> </div> <div id="content" class="content"> <ul class="org-ul"> <li><p> -<a href="jul_28_2025.html">jul<sub>28</sub><sub>2025</sub></a> created on July 28, 2025 +<a href="jul_28_2025.html">Update July 28, 2025</a> created on July 28, 2025 </p> -<div class="sitemap_tag" id="org68a38ea"> +<div class="sitemap_tag" id="org80df368"> <p> update </p> @@ -39,7 +39,7 @@ update <li><p> <a href="june_08_2025.html">Update June 08, 2025</a> created on June 08, 2025 </p> -<div class="sitemap_tag" id="org2356e69"> +<div class="sitemap_tag" id="org93051c2"> <p> update </p> @@ -48,7 +48,7 @@ update <li><p> <a href="may_06_2025.html">Update May 06, 2025</a> created on May 06, 2025 </p> -<div class="sitemap_tag" id="orgf73f0d8"> +<div class="sitemap_tag" id="org18934f8"> <p> update </p> @@ -57,7 +57,7 @@ update <li><p> <a href="hello.html">Hello, Org</a> created on June 20, 2023 </p> -<div class="sitemap_tag" id="org0e8a4a3"> +<div class="sitemap_tag" id="orgb6f2931"> <p> technology,home </p> |