ayham
/
tilde
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add blogit-to-blog-it article

This commit is contained in:
ayham 2021-11-26 13:13:17 +03:00
parent 603fbd1a74
commit dcc1c61a0b
Signed by: ayham
GPG Key ID: EAB7F5A9DF503678
14 changed files with 501 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
articles/blogit-to-blog-it.md
View File

@ -1,53 +1,62 @@
blogit: A Complete Guide
Running a personal website should be an easy task. Unfortunately, a big
hindrance for that is that there aren't many "suckless" blogging system.
hindrance is that there aren't many "suckless" blogging system.
[blogit](https://pedantic.software/git/blogit) is the closest in terms of
simplicity and minimalism to perfection. This article would be an end-all be-all
guide to effectively install blogit into your own website.
# Installation
blogit advertises itself as a small static blog generator, and indeed the whole
project is comprises of a single script file. To install this file, first
navigate to your website's git directory then wget said script:
project is comprised of a single script file. To install this file, first
navigate to your website's git directory then ```wget``` said script:
```
$ cd proj/website/
$ wget https://pedantic.software/git/blogit/raw/27d3f06259e83df2fed6fec7bbe77ac6b917eee7/blogit
$ chmod +x blogit
```
This might seem weird having a script in the home directory of your website, but
I couldn't find a better place to put it, especially when editing the actual is
dependent on each website setup (as seen later on).
I couldn't find a better place to put it, especially when editing the actual
script is dependent on each website's setup (as seen later on).
blogit initializes the basic operational structure with the following command:
```
$ ./blogit init
```
It is useful to let blogit build automatically every git commit, so let's
It is useful to let blogit build automatically on every git commit, so let's
configure that:
```
$ touch .git/hooks/pre-commit
$ chmod +x .git/hooks/pre-commit
$ echo "$!/bin/sh" > .git/hooks/pre-commit
$ echo "./blogit build" > .git/hooks/pre-commit
```
Then, open the "blogit" script with a text editor, search for "exclude" and
delete the line where it output "blog" to git exclude. This functionality is
meant for systems where the website's root is not the same as blogit's root.
Then, open the ```blogit``` script with a text editor, search for ```exclude```
and delete the line where it outputs ```blog``` to git exclude. This
functionality is meant for systems where the website's root is not the same as
blogit's root.
# Configuration
blogit uses the file "config" in $(pwd) for its settings, so let's create it:
blogit uses the file ```config``` in ```$(website)``` for its settings, so let's create it:
```
$ touch config
```
To get the list of settings available, run:
```
$ head -n 18 blogit
```
For my use case, this is what I set it up as:
```
BLOG_DATE_FORMAT:=%Y/%m/%d %H:%M
BLOG_DATE_FORMAT_INDEX:=%Y/%m/%d
@ -58,43 +67,41 @@ BLOG_FEED_MAX:=20
BLOG_FEEDS:=rss atom
BLOG_SRC:=articles
```
Everything should be self explainatory, except probably for "BLOG_FEED*".
"BLOG_FEED_MAX" specifies the amount of rss and atom entries to generate,
whereas "BLOG_FEEDS" specify feed formats to generate.
The script can be molded for each case, exampels of doing this is explained
Everything should be self explainatory, except perhaps for ```BLOG_FEED*```.
```BLOG_FEED_MAX``` specifies the amount of rss and atom entries to generate,
whereas ```BLOG_FEEDS``` specify feed formats to generate.
The script can be molded for each case, examples of doing this is explained
later on.
# Building, and the Tag System
Setting tagging for each article is super easy in blogit. For every article,
let's say "first-article.md" in "$(website)/articles/" should have the adjacent
file in "$(website)/tags/" with the name "first-article" (notice, without the
file extension). For example the file contents of
"$(website)/tags/first-article" would be:
Setting tags for each article is super easy in blogit. For every article,
append this as a comment in the end of the file:
```
TAG1 TAG2 TAG3
[semicolon] Tags: TAG1 TAG2
```
It should be noted that with my testing I noticed that the tags are being
deleted when running "./blogit clean". This is probably a bug?
Finally, to build your blog:
```
$ ./blogit build
```
Now you should be able to navigate to "$(website)/blog/index.html". Congratz!
``` $ ./blogit build ```
Now you should be able to navigate to ```$(website)/blog/index.html```.
Congratz!
# Miscellaneous
Because blogit is a very small script, we can easily edit it to make add
features or to add complex styling functionality.
As done earlier, removing the git exclude is a basic recommended edit for the
script.
As done earlier, removing the git exclude is a basic recommended edit.
A more visible example is the order of HTML aggregation. For example, this
website has its "article_list_header.html" coming before the tag list. The
article list header file includes the big article seen on the [index
page](blog.ayham.xyz), which comes before the tag list. To do this you can edit
the "blog/index.html:" section in the blogit script.
website has its ```article_list_header.html``` coming before the tag list. The
article list header file includes the big "Articles" seen on the [index
page](https://blog.ayham.xyz), which comes before the tag list. To do this you can edit
the ```blog/index.html:``` section in the blogit script.
```
...
blog/index.html: $(ARTICLES) $(TAGFILES) $(addprefix templates/,$(addsuffix .html,header index_header tag_list_header tag_entry tag_separator tag_list_footer article_list_header article_entry article_separator article_list_footer index_footer footer))
@ -103,7 +110,7 @@ blog/index.html: $(ARTICLES) $(TAGFILES) $(addprefix templates/,$(addsuffix .htm
export TITLE; \
envsubst < templates/header.html > $@; \
envsubst < templates/index_header.html >> $@; \
envsubst < templates/article_list_header.html >> $@; \
+ envsubst < templates/article_list_header.html >> $@; \
envsubst < templates/tag_list_header.html >> $@; \
first=true; \
for t in $(shell cat $(TAGFILES) | sort -u); do \
@ -114,11 +121,62 @@ blog/index.html: $(ARTICLES) $(TAGFILES) $(addprefix templates/,$(addsuffix .htm
first=false; \
done >> $@; \
envsubst < templates/tag_list_footer.html >> $@; \
- envsubst < templates/article_list_header.html >> $@; \
first=true; \
for f in $(ARTICLES); do \
...
```
## Fixing Code Blocks
I have noticed that when using backticks (`) to annotate a code block, blogit
would add an extra newline at the start of each code piece. To solve this issue,
ensure that you have the program command "markdown" which converts markdown to
HTML. After that, substitute as following:
```
blog/%.html: $(BLOG_SRC)/%.md $(addprefix templates/,$(addsuffix .html,header article_header article_footer footer))
mkdir -p blog
TITLE="$(shell head -n1 $<)"; \
export TITLE; \
AUTHOR="$(shell git log -n 1 --reverse --format="%cn" -- "$<")"; \
export AUTHOR; \
DATE_POSTED="$(shell git log --diff-filter=A --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$<")"; \
export DATE_POSTED; \
DATE_EDITED="$(shell git log -n 1 --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$<")"; \
export DATE_EDITED; \
TAGS="$(shell grep -i '^; *tags:' "$<" | cut -d: -f2- | paste -sd ',')"; \
export TAGS; \
envsubst < templates/header.html > $@; \
envsubst < templates/article_header.html >> $@; \
- sed -e 1d \
- -e '/^;/d' \
- -e 's/&/\&amp;/g' \
- -e 's/</\&lt;/g' \
- -e 's/>/\&gt;/g' \
- -e '/^```$$/{s,.*,,;x;p;/^<\/code>/d;s,.*,<pre><code>,;bT}' \
- -e 'x;/<\/code>/{x;s,\$$,\&#36;,g;$$G;p;d};x' \
- -e 's,\\\$$,\&#36;,g' \
- -e '/^####/{s,^####,<h4>,;s,$$,</h4>,;H;s,.*,,;x;p;d}' \
- -e '/^###/{s,^###,<h3>,;s,$$,</h3>,;H;s,.*,,;x;p;d}' \
- -e '/^##/{s,^##,<h2>,;s,$$,</h2>,;H;s,.*,,;x;p;d}' \
- -e '/^#/{s,^#,<h1>,;s,$$,</h1>,;H;s,.*,,;x;p;d}' \
- -e 's,`\([^`]*\)`,<code>\1</code>,g' \
- -e 's,\*\*\(\([^*<>][^*<>]*\*\?\)*\)\*\*,<b>\1</b>,g' \
- -e 's,\*\([^*<>][^*<>]*\)\*,<i>\1</i>,g' \
- -e 's,!\[\([^]]*\)\](\([^)]*\)),<img src="\2" alt="\1"/>,g' \
- -e 's,\[\([^]]*\)\](\([^)]*\)),<a href="\2">\1</a>,g' \
- -e '/^- /{s,^- ,<li>,;s,$$,</li>,;x;/^<\/ul>/{x;bL};p;s,.*,<ul>,;bT}' \
- -e '/^[1-9][0-9]*\. /{s,^[0-9]*\. ,<li>,;s,$$,</li>,;x;/^<\/ol>/{x;bL};p;s,.*,<ol>,;bT}' \
- -e '/^$$/{x;/^$$/d;p;d}' \
- -e 'x;/^$$/{s,.*,<p>,;bT};x' \
- -e ':L;$$G;p;d' \
- -e ':T;p;:t;s,<\([^/>][^>]*\)>\(\(<[^/>][^>]*>\)*\),\2</\1>,;/<[^\/>]/bt;x;/^$$/{$${x;p};d};bL' \
- "$<" | envsubst >> $@; \
+ sed -e 1d -e '/^;/d' < $< | markdown -f fencedcode >> $@; \
```
# Conclusion
Go get a website, and set up blogit.
Contact me? [here](ayham.xyz/contact.htm)
[Go get a website](https://landchad.net), and set up blogit.
Want to contact me? [Here.](https://ayham.xyz/contact.htm)
;Tags: GUIDE WEBSITE

2
articles/first-article.md
View File

@ -4,3 +4,5 @@ This would be the beginning of my all-new article series. I would be writing
about software I make and use, with the occasional school essay turned article.
The story shall begin!
;Tags: UPDATE

28
blog/@GUIDE.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Articles tagged GUIDE</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>Articles</h1>
</center>
<div id=partial_header></div>
<main>
<li><a href="blogit-to-blog-it.html">2021/11/26 blogit: A Complete Guide</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>
</html>

28
blog/@TAG1.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Articles tagged TAG1</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>Articles</h1>
</center>
<div id=partial_header></div>
<main>
<li><a href="blogit-to-blog-it.html">2021/11/26 blogit: A Complete Guide</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>
</html>

28
blog/@TAG2.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Articles tagged TAG2</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>Articles</h1>
</center>
<div id=partial_header></div>
<main>
<li><a href="blogit-to-blog-it.html">2021/11/26 blogit: A Complete Guide</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>
</html>

28
blog/@UPDATE.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Articles tagged UPDATE</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>Articles</h1>
</center>
<div id=partial_header></div>
<main>
<li><a href="first-article.html">2021/10/01 The Beginning of a series!</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>
</html>

28
blog/@WEBSITE.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Articles tagged WEBSITE</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>Articles</h1>
</center>
<div id=partial_header></div>
<main>
<li><a href="blogit-to-blog-it.html">2021/11/26 blogit: A Complete Guide</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>
</html>

25
blog/atom.xml
View File

@ -2,14 +2,27 @@
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title type="text">ayham's blog</title>
<subtitle type="text">probably interesting stuff</subtitle>
<updated>2021-10-22T08:52:09Z</updated>
<link rel="alternate" type="text/html" href="https://tilde.team/~ayham/blog"/>
<id>https://tilde.team/~ayham/blog/atom.xml</id>
<link rel="self" type="application/atom+xml" href="https://tilde.team/~ayham/blog/atom.xml"/>
<updated>2021-11-26T13:03:09Z</updated>
<link rel="alternate" type="text/html" href="articles.ayham.xyz"/>
<id>articles.ayham.xyz/atom.xml</id>
<link rel="self" type="application/atom+xml" href="articles.ayham.xyz/atom.xml"/>
<entry>
<title type="text">blogit: A Complete Guide</title>
<link rel="alternate" type="text/html" href="articles.ayham.xyz/blogit-to-blog-it.html"/>
<id>articles.ayham.xyz/blogit-to-blog-it.html</id>
<published>2021-11-26T10:18:28Z</published>
<updated>2021-11-26T10:18:28Z</updated>
<author><name>ayham</name></author>
<summary type="text">Running a personal website should be an easy task. Unfortunately, a big
hindrance is that there aren't many "suckless" blogging system.
[blogit](https://pedantic.software/git/blogit) is the closest in terms of
simplicity and minimalism to perfection. This article would be an end-all be-all
guide to effectively install blogit into your own website.</summary>
</entry>
<entry>
<title type="text">The Beginning of a series!</title>
<link rel="alternate" type="text/html" href="https://tilde.team/~ayham/blog/first-article.html"/>
<id>https://tilde.team/~ayham/blog/first-article.html</id>
<link rel="alternate" type="text/html" href="articles.ayham.xyz/first-article.html"/>
<id>articles.ayham.xyz/first-article.html</id>
<published>2021-10-01T19:23:41Z</published>
<updated>2021-10-01T19:23:41Z</updated>
<author><name>ayham</name></author>

202
blog/blogit-to-blog-it.html Normal file
View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html>
<head>
<title>blogit: A Complete Guide</title>
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" type="image/jpg"
href="https://ayham.xyz/pix/pfp.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#partial_header").load("../partials/header.htm");
$("#partial_footer").load("../partials/footer.htm"); });
</script>
</head>
<body>
<center>
<h1 style=font-size:xxx-large>blogit: A Complete Guide</h1>
</center>
<div id=partial_header></div>
<main>
<p>Running a personal website should be an easy task. Unfortunately, a big
hindrance is that there aren&rsquo;t many &ldquo;suckless&rdquo; blogging system.
<a href="https://pedantic.software/git/blogit">blogit</a> is the closest in terms of
simplicity and minimalism to perfection. This article would be an end-all be-all
guide to effectively install blogit into your own website.</p>
<h1>Installation</h1>
<p>blogit advertises itself as a small static blog generator, and indeed the whole
project is comprised of a single script file. To install this file, first
navigate to your website&rsquo;s git directory then <code>wget</code> said script:</p>
<pre><code>$ cd proj/website/
$ wget https://pedantic.software/git/blogit/raw/27d3f06259e83df2fed6fec7bbe77ac6b917eee7/blogit
$ chmod +x blogit
</code></pre>
<p>This might seem weird having a script in the home directory of your website, but
I couldn&rsquo;t find a better place to put it, especially when editing the actual
script is dependent on each website&rsquo;s setup (as seen later on).</p>
<p>blogit initializes the basic operational structure with the following command:</p>
<pre><code>$ ./blogit init
</code></pre>
<p>It is useful to let blogit build automatically on every git commit, so let&rsquo;s
configure that:</p>
<pre><code>$ touch .git/hooks/pre-commit
$ chmod +x .git/hooks/pre-commit
$ echo "$!/bin/sh" &gt; .git/hooks/pre-commit
$ echo "./blogit build" &gt; .git/hooks/pre-commit
</code></pre>
<p>Then, open the <code>blogit</code> script with a text editor, search for <code>exclude</code>
and delete the line where it outputs <code>blog</code> to git exclude. This
functionality is meant for systems where the website&rsquo;s root is not the same as
blogit&rsquo;s root.</p>
<h1>Configuration</h1>
<p>blogit uses the file <code>config</code> in <code>$(website)</code> for its settings, so let&rsquo;s create it:</p>
<pre><code>$ touch config
</code></pre>
<p>To get the list of settings available, run:</p>
<pre><code>$ head -n 18 blogit
</code></pre>
<p>For my use case, this is what I set it up as:</p>
<pre><code>BLOG_DATE_FORMAT:=%Y/%m/%d %H:%M
BLOG_DATE_FORMAT_INDEX:=%Y/%m/%d
BLOG_TITLE:=ayham's blog
BLOG_DESCRIPTION:=probably interesting stuff
BLOG_URL_ROOT:=articles.ayham.xyz
BLOG_FEED_MAX:=20
BLOG_FEEDS:=rss atom
BLOG_SRC:=articles
</code></pre>
<p>Everything should be self explainatory, except perhaps for <code>BLOG_FEED*</code>.
<code>BLOG_FEED_MAX</code> specifies the amount of rss and atom entries to generate,
whereas <code>BLOG_FEEDS</code> specify feed formats to generate.</p>
<p>The script can be molded for each case, examples of doing this is explained
later on.</p>
<h1>Building, and the Tag System</h1>
<p>Setting tags for each article is super easy in blogit. For every article,
append this as a comment in the end of the file:</p>
<pre><code>[semicolon] Tags: TAG1 TAG2
</code></pre>
<p>Finally, to build your blog:</p>
<p><code>$ ./blogit build</code></p>
<p>Now you should be able to navigate to <code>$(website)/blog/index.html</code>.
Congratz!</p>
<h1>Miscellaneous</h1>
<p>Because blogit is a very small script, we can easily edit it to make add
features or to add complex styling functionality.</p>
<p>As done earlier, removing the git exclude is a basic recommended edit.</p>
<p>A more visible example is the order of HTML aggregation. For example, this
website has its <code>article_list_header.html</code> coming before the tag list. The
article list header file includes the big &ldquo;Articles&rdquo; seen on the <a href="https://blog.ayham.xyz">index
page</a>, which comes before the tag list. To do this you can edit
the <code>blog/index.html:</code> section in the blogit script.</p>
<pre><code>...
blog/index.html: $(ARTICLES) $(TAGFILES) $(addprefix templates/,$(addsuffix .html,header index_header tag_list_header tag_entry tag_separator tag_list_footer article_list_header article_entry article_separator article_list_footer index_footer footer))
mkdir -p blog
TITLE="$(BLOG_TITLE)"; \
export TITLE; \
envsubst &lt; templates/header.html &gt; $@; \
envsubst &lt; templates/index_header.html &gt;&gt; $@; \
+ envsubst &lt; templates/article_list_header.html &gt;&gt; $@; \
envsubst &lt; templates/tag_list_header.html &gt;&gt; $@; \
first=true; \
for t in $(shell cat $(TAGFILES) | sort -u); do \
"$$first" || envsubst &lt; templates/tag_separator.html; \
NAME="$$t" \
URL="@$$t.html" \
envsubst &lt; templates/tag_entry.html; \
first=false; \
done &gt;&gt; $@; \
envsubst &lt; templates/tag_list_footer.html &gt;&gt; $@; \
- envsubst &lt; templates/article_list_header.html &gt;&gt; $@; \
first=true; \
for f in $(ARTICLES); do \
...
</code></pre>
<h2>Fixing Code Blocks</h2>
<p>I have noticed that when using backticks (`) to annotate a code block, blogit
would add an extra newline at the start of each code piece. To solve this issue,
ensure that you have the program command &ldquo;markdown&rdquo; which converts markdown to
HTML. After that, substitute as following:</p>
<pre><code>blog/%.html: $(BLOG_SRC)/%.md $(addprefix templates/,$(addsuffix .html,header article_header article_footer footer))
mkdir -p blog
TITLE="$(shell head -n1 $&lt;)"; \
export TITLE; \
AUTHOR="$(shell git log -n 1 --reverse --format="%cn" -- "$&lt;")"; \
export AUTHOR; \
DATE_POSTED="$(shell git log --diff-filter=A --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$&lt;")"; \
export DATE_POSTED; \
DATE_EDITED="$(shell git log -n 1 --date="format:$(BLOG_DATE_FORMAT)" --pretty=format:'%ad' -- "$&lt;")"; \
export DATE_EDITED; \
TAGS="$(shell grep -i '^; *tags:' "$&lt;" | cut -d: -f2- | paste -sd ',')"; \
export TAGS; \
envsubst &lt; templates/header.html &gt; $@; \
envsubst &lt; templates/article_header.html &gt;&gt; $@; \
- sed -e 1d \
- -e '/^;/d' \
- -e 's/&amp;/\&amp;amp;/g' \
- -e 's/&lt;/\&amp;lt;/g' \
- -e 's/&gt;/\&amp;gt;/g' \
- -e '/^```$$/{s,.*,,;x;p;/^&lt;\/code&gt;/d;s,.*,&lt;pre&gt;&lt;code&gt;,;bT}' \
- -e 'x;/&lt;\/code&gt;/{x;s,\$$,\&amp;#36;,g;$$G;p;d};x' \
- -e 's,\\\$$,\&amp;#36;,g' \
- -e '/^####/{s,^####,&lt;h4&gt;,;s,$$,&lt;/h4&gt;,;H;s,.*,,;x;p;d}' \
- -e '/^###/{s,^###,&lt;h3&gt;,;s,$$,&lt;/h3&gt;,;H;s,.*,,;x;p;d}' \
- -e '/^##/{s,^##,&lt;h2&gt;,;s,$$,&lt;/h2&gt;,;H;s,.*,,;x;p;d}' \
- -e '/^#/{s,^#,&lt;h1&gt;,;s,$$,&lt;/h1&gt;,;H;s,.*,,;x;p;d}' \
- -e 's,`\([^`]*\)`,&lt;code&gt;\1&lt;/code&gt;,g' \
- -e 's,\*\*\(\([^*&lt;&gt;][^*&lt;&gt;]*\*\?\)*\)\*\*,&lt;b&gt;\1&lt;/b&gt;,g' \
- -e 's,\*\([^*&lt;&gt;][^*&lt;&gt;]*\)\*,&lt;i&gt;\1&lt;/i&gt;,g' \
- -e 's,!\[\([^]]*\)\](\([^)]*\)),&lt;img src="\2" alt="\1"/&gt;,g' \
- -e 's,\[\([^]]*\)\](\([^)]*\)),&lt;a href="\2"&gt;\1&lt;/a&gt;,g' \
- -e '/^- /{s,^- ,&lt;li&gt;,;s,$$,&lt;/li&gt;,;x;/^&lt;\/ul&gt;/{x;bL};p;s,.*,&lt;ul&gt;,;bT}' \
- -e '/^[1-9][0-9]*\. /{s,^[0-9]*\. ,&lt;li&gt;,;s,$$,&lt;/li&gt;,;x;/^&lt;\/ol&gt;/{x;bL};p;s,.*,&lt;ol&gt;,;bT}' \
- -e '/^$$/{x;/^$$/d;p;d}' \
- -e 'x;/^$$/{s,.*,&lt;p&gt;,;bT};x' \
- -e ':L;$$G;p;d' \
- -e ':T;p;:t;s,&lt;\([^/&gt;][^&gt;]*\)&gt;\(\(&lt;[^/&gt;][^&gt;]*&gt;\)*\),\2&lt;/\1&gt;,;/&lt;[^\/&gt;]/bt;x;/^$$/{$${x;p};d};bL' \
- "$&lt;" | envsubst &gt;&gt; $@; \
+ sed -e 1d -e '/^;/d' &lt; $&lt; | markdown -f fencedcode &gt;&gt; $@; \
</code></pre>
<h1>Conclusion</h1>
<p><a href="https://landchad.net">Go get a website</a>, and set up blogit.
Want to contact me? <a href="https://ayham.xyz/contact.htm">Here.</a></p>
</main>
<div align=center id=partial_footer></div>
</body>
</html>

2
blog/index.html
View File

@ -21,7 +21,7 @@
<div id=partial_header></div>
<main>
<p>Tags:<a href="@UPDATES.html">UPDATES</a></p><li><a href="first-article.html">2021/10/01 The Beginning of a series!</a></li></ul></main>
<p>Tags:<a href="@GUIDE.html">GUIDE</a>, <a href="@UPDATE.html">UPDATE</a>, <a href="@WEBSITE.html">WEBSITE</a></p><li><a href="blogit-to-blog-it.html">2021/11/26 blogit: A Complete Guide</a></li><li><a href="first-article.html">2021/10/01 The Beginning of a series!</a></li></ul></main>
<div align=center id=partial_footer></div>
</body>

17
blog/rss.xml
View File

@ -2,12 +2,23 @@
<rss version="2.0">
<channel>
<title>ayham's blog</title>
<link>https://tilde.team/~ayham/blog</link>
<link>articles.ayham.xyz</link>
<description>probably interesting stuff</description>
<item>
<title>blogit: A Complete Guide</title>
<link>articles.ayham.xyz/blogit-to-blog-it.html</link>
<guid>articles.ayham.xyz/blogit-to-blog-it.html</guid>
<pubDate>Fri, 26 Nov 2021 10:18:28 +0300</pubDate>
<description>Running a personal website should be an easy task. Unfortunately, a big
hindrance is that there aren't many "suckless" blogging system.
[blogit](https://pedantic.software/git/blogit) is the closest in terms of
simplicity and minimalism to perfection. This article would be an end-all be-all
guide to effectively install blogit into your own website.</description>
</item>
<item>
<title>The Beginning of a series!</title>
<link>https://tilde.team/~ayham/blog/first-article.html</link>
<guid>https://tilde.team/~ayham/blog/first-article.html</guid>
<link>articles.ayham.xyz/first-article.html</link>
<guid>articles.ayham.xyz/first-article.html</guid>
<pubDate>Fri, 01 Oct 2021 19:23:41 +0300</pubDate>
<description>This would be the beginning of my all-new article series. I would be writing
about software I make and use, with the occasional school essay turned article.</description>

51
blogit
View File

@ -41,6 +41,7 @@ init:
printf '' > templates/tag_index_header.html
printf '' > templates/tag_index_footer.html
printf '<h1>$$TITLE</h1>' > templates/article_header.html
#printf '' > templates/article_header.html
printf '' > templates/article_footer.html
#printf 'blog\n' > .git/info/exclude
@ -141,30 +142,32 @@ blog/%.html: $(BLOG_SRC)/%.md $(addprefix templates/,$(addsuffix .html,header ar
export TAGS; \
envsubst < templates/header.html > $@; \
envsubst < templates/article_header.html >> $@; \
sed -e 1d \
-e '/^;/d' \
-e 's/&/\&amp;/g' \
-e 's/</\&lt;/g' \
-e 's/>/\&gt;/g' \
-e '/^```$$/{s,.*,,;x;p;/^<\/code>/d;s,.*,<pre><code>,;bT}' \
-e 'x;/<\/code>/{x;s,\$$,\&#36;,g;$$G;p;d};x' \
-e 's,\\\$$,\&#36;,g' \
-e '/^####/{s,^####,<h4>,;s,$$,</h4>,;H;s,.*,,;x;p;d}' \
-e '/^###/{s,^###,<h3>,;s,$$,</h3>,;H;s,.*,,;x;p;d}' \
-e '/^##/{s,^##,<h2>,;s,$$,</h2>,;H;s,.*,,;x;p;d}' \
-e '/^#/{s,^#,<h1>,;s,$$,</h1>,;H;s,.*,,;x;p;d}' \
-e 's,`\([^`]*\)`,<code>\1</code>,g' \
-e 's,\*\*\(\([^*<>][^*<>]*\*\?\)*\)\*\*,<b>\1</b>,g' \
-e 's,\*\([^*<>][^*<>]*\)\*,<i>\1</i>,g' \
-e 's,!\[\([^]]*\)\](\([^)]*\)),<img src="\2" alt="\1"/>,g' \
-e 's,\[\([^]]*\)\](\([^)]*\)),<a href="\2">\1</a>,g' \
-e '/^- /{s,^- ,<li>,;s,$$,</li>,;x;/^<\/ul>/{x;bL};p;s,.*,<ul>,;bT}' \
-e '/^[1-9][0-9]*\. /{s,^[0-9]*\. ,<li>,;s,$$,</li>,;x;/^<\/ol>/{x;bL};p;s,.*,<ol>,;bT}' \
-e '/^$$/{x;/^$$/d;p;d}' \
-e 'x;/^$$/{s,.*,<p>,;bT};x' \
-e ':L;$$G;p;d' \
-e ':T;p;:t;s,<\([^/>][^>]*\)>\(\(<[^/>][^>]*>\)*\),\2</\1>,;/<[^\/>]/bt;x;/^$$/{$${x;p};d};bL' \
"$<" | envsubst >> $@; \
#sed -e 1d \
# -e '/^;/d' \
# -e 's/&/\&amp;/g' \
# -e 's/</\&lt;/g' \
# -e 's/>/\&gt;/g' \
# -e '/^```$$/{s,.*,,;x;p;/^<\/code>/d;s,.*,<pre><code>,;bT}' \
# -e 'x;/<\/code>/{x;s,\$$,\&#36;,g;$$G;p;d};x' \
# -e 's,\\\$$,\&#36;,g' \
# -e '/^####/{s,^####,<h4>,;s,$$,</h4>,;H;s,.*,,;x;p;d}' \
# -e '/^###/{s,^###,<h3>,;s,$$,</h3>,;H;s,.*,,;x;p;d}' \
# -e '/^##/{s,^##,<h2>,;s,$$,</h2>,;H;s,.*,,;x;p;d}' \
# -e '/^#/{s,^#,<h1>,;s,$$,</h1>,;H;s,.*,,;x;p;d}' \
# -e 's,`\([^`]*\)`,<code>\1</code>,g' \
# -e 's,\*\*\(\([^*<>][^*<>]*\*\?\)*\)\*\*,<b>\1</b>,g' \
# -e 's,\*\([^*<>][^*<>]*\)\*,<i>\1</i>,g' \
# -e 's,!\[\([^]]*\)\](\([^)]*\)),<img src="\2" alt="\1"/>,g' \
# -e 's,\[\([^]]*\)\](\([^)]*\)),<a href="\2">\1</a>,g' \
# -e '/^- /{s,^- ,<li>,;s,$$,</li>,;x;/^<\/ul>/{x;bL};p;s,.*,<ul>,;bT}' \
# -e '/^[1-9][0-9]*\. /{s,^[0-9]*\. ,<li>,;s,$$,</li>,;x;/^<\/ol>/{x;bL};p;s,.*,<ol>,;bT}' \
# -e '/^$$/{x;/^$$/d;p;d}' \
# -e 'x;/^$$/{s,.*,<p>,;bT};x' \
# -e ':L;$$G;p;d' \
# -e ':T;p;:t;s,<\([^/>][^>]*\)>\(\(<[^/>][^>]*>\)*\),\2</\1>,;/<[^\/>]/bt;x;/^$$/{$${x;p};d};bL' \
# "$<" | envsubst >> $@; \
sed -e 1d -e '/^;/d' < $< | markdown -f fencedcode >> $@; \
envsubst < templates/article_footer.html >> $@; \
envsubst < templates/footer.html >> $@; \

2
tags/blogit-to-blog-it Normal file
View File

@ -0,0 +1,2 @@
GUIDE
WEBSITE

2
tags/first-article
View File

@ -1 +1 @@
UPDATES
UPDATE