blob - /dev/null blob + b6f4dfa52ffd3a0c3159ce7f2c99f71e5a489147 (mode 644) --- /dev/null +++ _output/blog/community-patch.html @@ -0,0 +1,86 @@ + + + + + + + First Community Patch & Tweaks + + + + + + + + +

First Community Patch & Tweaks

Fri, 15 Jul 2022

+ +

pblog has received its first community patch! By “community” I mean someone other than myself has helped make this blog generator even better. So special thanks to Matthew Graybosch for contributing to this humble project and patching in some solid quality of life improvements.

This is why open source is great: smarter people can help fix your mashed-up spaghetti code!

The Changes

Both pages and posts now generated Table of Contents by default +
- You have the ability to disable this site-wide in the pblog config
Ability to disable Pandoc generated syntax highlighting
xsltproc will now generate HTML5 and include the RSS feed description under the title +
- See it live on the main RSS XML feed
New metadata variable (HTML_LANG) in the pblog.sh config
Generated pages and posts now have “Table of Contents” by default +
- This can be disabled in individual files with toc: false
Cleaned up redundant find statements

Some Features Left Behind…

Also suggested in this patch was the addition of more advanced image manipulation via ImageMagick. This additional feature was pretty great from my testing but I felt as though adding an extra dependency and slightly more complex settings to pblog was moving things further from simplicity.

BUT - that doesn’t mean you can’t take this great feature with you!

Introducing “Tweaks”

I feel that pblog should always remain as simple as possible at the core. Let people get something up-and-running with the least amount of friction as possible. But I know that some users might want to squeeze just a little bit more out of it. This is where the new Tweaks section comes in.

Feel free to check out the official Tweaks page and don’t be afraid to add your own by opening a patch-set!

That’s all for now, thanks for reading!

– Brad

+ + + + + blob - /dev/null blob + e207ff1b95f10b1b97cb51c045bebaeefac8b29d (mode 644) --- /dev/null +++ _output/blog/default-styles.html @@ -0,0 +1,162 @@ + + + + + + + New Default Styling and 2x Faster! + + + + + + + + +

New Default Styling and 2x Faster!

Wed, 27 Jul 2022

+ +

If it wasn’t already obvious, this project has received a minor styling overhaul. But looks weren’t the only thing updated with this latest patch.

The total build process time is now two times faster!

Keep reading for more details.

The Default “Theme”

The styling changes aren’t anything ground breaking. They simply center the main content and add a little more visual separation of the content and backdrop. Again, you can customize pblog as you see fit, but having a sane default is always nice.

New Config Setup

Since updates and performance fixes might continue to come through in the future, I didn’t want to make users play around with their default configuration every single time. Now, all main configuration is handled in the new _config.sh file.

#!/bin/sh
+
+# Site specific settings
+###################################################################################
+DOMAIN="https://pblog.bt.ht"
+TITLE="pblog"
+DESCRIPTION="Pandoc static blog generator"
+COPYRIGHT="Copyright 2022, Bradley Taunt"
+AUTHOR="brad@bt.ht (Bradley Taunt)"
+OS="Linux" # "Linux" for Linux, "BSD" for BSD Systems (including MacOS)
+HTML_LANG="en_US" # Your document (HTML) language setting
+
+# Blog structure settings (most users should use these defaults)
+###################################################################################
+TOC=true
+SYNTAX=true
+PAGES_DIR="pages/"
+POSTS_DIR="posts/"
+PAGES=$(find $PAGES_DIR -type f)
+POSTS=$(find $POSTS_DIR -type f)
+WEB_HTML="blog/"
+OUTPUT="_output/"
+TIME="01:00:00 EST"
+TTL="60"

Feels cleaner already, right?

Cutting the Build Time in Half

I must give big kudos to Matthew Graybosch for inspiring this pretty big improvement. After some discussion over emails we both agreed that it seemed overkill to render the blog content twice (once for the XML feed itself and then again for all posts listed under blog). Performance wasn’t the initial goal when I first launched this project, but now that the dust has settled it seemed appropriate to go back and fix some things.

pblog now only needs to render the blog posts found in the posts directory once. It still produces semantic XML and keeps the webview versions of the articles looking solid. Overall I’m pretty happy with this little improvement - it should pretty noticeable on projects rendering many posts.

Far From Perfect

This project is still very much in it’s infancy. So if you notice something odd or broken in your own testing, please don’t hesitate to open a patch or simply bring up the issue!

Thanks for reading,

– Brad

+ + + + + blob - /dev/null blob + dbf4f3d33ef0c436958e1953105158c2c8d49729 (mode 644) --- /dev/null +++ _output/blog/index.html @@ -0,0 +1,23 @@ + + +pblog

pblog

Pandoc static blog generator

Wed, 27 Jul 2022 01:00:00 ESTNew Default Styling and 2x Faster!Fri, 15 Jul 2022 01:00:00 ESTFirst Community Patch & TweaksFri, 08 Jul 2022 01:00:00 ESTIncludes, rsync and Variables - Oh My!Mon, 04 Jul 2022 01:00:00 ESTIntroducing pblogThu, 30 Jun 2022 01:00:00 ESTAnnouncing pblog blob - /dev/null blob + 86dea87cd9cd53c7fffd4dca1a91490a71f46eb3 (mode 644) --- /dev/null +++ _output/blog/pblog-intro.html @@ -0,0 +1,185 @@ + + + + + + + Introducing pblog + + + + + + + + +

Introducing pblog

Mon, 04 Jul 2022

+ +

This article is a living document. It will always have the most up-to-date information on getting started with pblog.

Last Updated: July 27, 2022

Although this project was already announced a couple days ago, I thought it might be best to actually breakdown pblog into greater detail.

Enough chit-chat, let’s get into it!

Main Goal

The entire purpose of pblog is to be as bare-bones as possible, while still maintaining a pleasant writing workflow. Users write their posts and pages in Markdown - pblog handles everything else:

Posts and pages generated via Pandoc with minimal CSS
RSS feed at feed.xml
Generated blog listing at blog/index.html
Browser-styled XML (in supported browsers)

Site Structure

After you’ve cloned the official pblog repo on sourcehut, the next thing you should do is edit the main _config.sh file in the root directory. This will give you a better understanding of how everything is built.

Once generated, pblog structures the final website files as such:

_output/
+    |__blog/
+        |__index.html
+        |__blog-post-example.html
+    |__media/
+    |__feed.xml
+    |__index.html
+    |__rss.xsl
+    |__style.css

This structure is completely customizable by simply editing the _config.sh file (if you so desire).

Headers and Footers

By default pblog will add the header and footer includes to every individual post and page. To edit these, simply open the _header.html and _footer.html files respectively.

Important: To avoid rendering issues DO NOT remove the included article opening and closing tags within those files. Everything else you can edit, remove, etc.

Posts and Pages

Posts and pages are written via Markdown inside the posts and pages folders respectively.

Individual posts require the following headers (take note of the date format):

---
+title: Blog Title
+date: Mon, 04 Jul 2022
+---

while individual pages only require a title:

---
+title: Page Title
+---

This makes for an easier switch over from other SSG platforms like Jekyll or Hugo.

The Build Process

The main variables at the top of the pblog.sh file need to edited with your own details before generating your website. Those variables are fairly self-explanatory and simple to edit.

All you need to do now is run make (or make serve if you’re looking to test locally) and you’re done. Your website should now be fully generated inside the include _output directory. For quick reference:

pblog converts your Markdown posts into two variations of HTML +
- One is used specifically for rendering itself inside the RSS feed
- The other is used for linking in a browser
Next, pblog converts your Markdown pages into HTML
All of these generated HTML files are then moved to the _output folder

pblog is also smart enough to automatically generate a main blog list directory for you. This index.html file is placed inside the _output/blog folder on build. You can see an example of the blog list on this very website.

Uploading to the WWW

Those with more experience will probably lean towards using a utility like rsync to sync the contents of their _output folder with their web server. For those with less experience, I recommend using something like Netlify Drop to make things as friction-less as possible.

Wrapping Up

There isn’t much else to say. pblog is as static or flexible as you chose it to be. If you have any ideas on how to improve things or come across any bugs, please open a ticket or PR on the official repo.

Thanks and happy blogging with pblog!

+ + + + + blob - /dev/null blob + 754aff0dfc9c654dbb6477f2d8e26e33a363fad0 (mode 644) --- /dev/null +++ _output/blog/pblog-launch.html @@ -0,0 +1,54 @@ + + + + + + + Announcing pblog + + + + + + + + +

Announcing pblog

Thu, 30 Jun 2022

It’s time to celebrate! The official launch of pblog happened today.

There isn’t much else to say. All details and instructions on how to start your own pblog can be found on the main homepage for this project.

Thanks for reading!

+ + + + + blob - /dev/null blob + e80c02abefb2aba3a01c33e9a9e1acb7a96a5b52 (mode 644) --- /dev/null +++ _output/blog/small-patch.html @@ -0,0 +1,72 @@ + + + + + + + Includes, rsync and Variables - Oh My! + + + + + + + + +

Includes, rsync and Variables - Oh My!

Fri, 08 Jul 2022

+ +

Even though pblog was just launched a week ago, it has since been updated with some nice quality-of-life improvements.

Default “header” & “footer” Includes

A new variable was added to the main pblog.sh configuration file called INC_HEAD_FOOT. By default this is set to true and simply pulls in two HTML files:

_header.html: all content within is placed directly after the opening body tag
_footer.html: all content within is placed directly before the closing body tag

These includes are added to every outputted file from inside both the posts and pages directories on build.

Syncing Changes with rsync

Although it adds another dependency to the project, I believe utilizing rsync for the generated files is far better then nuking the directory from orbit each time. This also provides a cleaner experience for users syncing their _output directory with their web server of choice.

On the Horizon…

My plan was to also tackle the issue of “auto rebuilds” when running pblog locally. This became more of a headache than I initially estimated - so it was dropped from this patch. My hope is to get something up-and-running in the near future, while avoiding the inclusion of yet another major dependency. Anyone more experienced than myself in the ways of “auto rebuilds” is free to open a patch if they so desire!

Thanks for your interest in these minor updates!

P.S. Don’t forget - if your website runs on pblog be sure to reach out and get it featured on the homepage!

+ + + + + blob - /dev/null blob + 2b0c5eb1ef11965542a7b18341478a8307bed345 (mode 644) --- /dev/null +++ _output/feed.xml @@ -0,0 +1,252 @@ + + + + + pblog + https://pblog.bt.ht + Pandoc static blog generator + Copyright 2022, Bradley Taunt + 60 + + Fri, 15 Jul 2022 01:00:00 EST + 2022/07/15/5 + First Community Patch & Tweaks + https://pblog.bt.ht/blog/community-patch.html + +

First Community Patch & Tweaks

Fri, 15 Jul 2022

+ + +

This is why open source is great: smarter people can help fix your mashed-up spaghetti code!

The Changes

Both pages and posts now generated Table of Contents by default +
- You have the ability to disable this site-wide in the pblog config
Ability to disable Pandoc generated syntax highlighting
xsltproc will now generate HTML5 and include the RSS feed description under the title +
- See it live on the main RSS XML feed
New metadata variable (HTML_LANG) in the pblog.sh config
Generated pages and posts now have “Table of Contents” by default +
- This can be disabled in individual files with toc: false
Cleaned up redundant find statements

Some Features Left Behind…

BUT - that doesn’t mean you can’t take this great feature with you!

Introducing “Tweaks”

Feel free to check out the official Tweaks page and don’t be afraid to add your own by opening a patch-set!

That’s all for now, thanks for reading!

– Brad

]]> + brad@bt.ht (Bradley Taunt) + https://pblog.bt.ht/blog/community-patch.html + + + Wed, 27 Jul 2022 01:00:00 EST + 2022/07/27/3 + New Default Styling and 2x Faster! + https://pblog.bt.ht/blog/default-styles.html + +

New Default Styling and 2x Faster!

Wed, 27 Jul 2022

+ + +

If it wasn’t already obvious, this project has received a minor styling overhaul. But looks weren’t the only thing updated with this latest patch.

The total build process time is now two times faster!

Keep reading for more details.

The Default “Theme”

New Config Setup

#!/bin/sh
+
+# Site specific settings
+###################################################################################
+DOMAIN="https://pblog.bt.ht"
+TITLE="pblog"
+DESCRIPTION="Pandoc static blog generator"
+COPYRIGHT="Copyright 2022, Bradley Taunt"
+AUTHOR="brad@bt.ht (Bradley Taunt)"
+OS="Linux" # "Linux" for Linux, "BSD" for BSD Systems (including MacOS)
+HTML_LANG="en_US" # Your document (HTML) language setting
+
+# Blog structure settings (most users should use these defaults)
+###################################################################################
+TOC=true
+SYNTAX=true
+PAGES_DIR="pages/"
+POSTS_DIR="posts/"
+PAGES=$(find $PAGES_DIR -type f)
+POSTS=$(find $POSTS_DIR -type f)
+WEB_HTML="blog/"
+OUTPUT="_output/"
+TIME="01:00:00 EST"
+TTL="60"

Feels cleaner already, right?

Cutting the Build Time in Half

Far From Perfect

This project is still very much in it’s infancy. So if you notice something odd or broken in your own testing, please don’t hesitate to open a patch or simply bring up the issue!

Thanks for reading,

– Brad

]]> + brad@bt.ht (Bradley Taunt) + https://pblog.bt.ht/blog/default-styles.html + + + Mon, 04 Jul 2022 01:00:00 EST + 2022/07/04/1 + Introducing pblog + https://pblog.bt.ht/blog/pblog-intro.html + +

Introducing pblog

Mon, 04 Jul 2022

+ + +

This article is a living document. It will always have the most up-to-date information on getting started with pblog.

Last Updated: July 27, 2022

Although this project was already announced a couple days ago, I thought it might be best to actually breakdown pblog into greater detail.

Enough chit-chat, let’s get into it!

Main Goal

The entire purpose of pblog is to be as bare-bones as possible, while still maintaining a pleasant writing workflow. Users write their posts and pages in Markdown - pblog handles everything else:

Posts and pages generated via Pandoc with minimal CSS
RSS feed at feed.xml
Generated blog listing at blog/index.html
Browser-styled XML (in supported browsers)

Site Structure

Once generated, pblog structures the final website files as such:

_output/
+    |__blog/
+        |__index.html
+        |__blog-post-example.html
+    |__media/
+    |__feed.xml
+    |__index.html
+    |__rss.xsl
+    |__style.css

This structure is completely customizable by simply editing the _config.sh file (if you so desire).

Headers and Footers

By default pblog will add the header and footer includes to every individual post and page. To edit these, simply open the _header.html and _footer.html files respectively.

Important: To avoid rendering issues DO NOT remove the included article opening and closing tags within those files. Everything else you can edit, remove, etc.

Posts and Pages

Posts and pages are written via Markdown inside the posts and pages folders respectively.

Individual posts require the following headers (take note of the date format):

---
+title: Blog Title
+date: Mon, 04 Jul 2022
+---

while individual pages only require a title:

---
+title: Page Title
+---

This makes for an easier switch over from other SSG platforms like Jekyll or Hugo.

The Build Process

The main variables at the top of the pblog.sh file need to edited with your own details before generating your website. Those variables are fairly self-explanatory and simple to edit.

pblog converts your Markdown posts into two variations of HTML +
- One is used specifically for rendering itself inside the RSS feed
- The other is used for linking in a browser
Next, pblog converts your Markdown pages into HTML
All of these generated HTML files are then moved to the _output folder

Uploading to the WWW

Wrapping Up

Thanks and happy blogging with pblog!

]]> + brad@bt.ht (Bradley Taunt) + https://pblog.bt.ht/blog/pblog-intro.html + + + Thu, 30 Jun 2022 01:00:00 EST + 2022/06/30/4 + Announcing pblog + https://pblog.bt.ht/blog/pblog-launch.html + +

Announcing pblog

Thu, 30 Jun 2022

+ +

It’s time to celebrate! The official launch of pblog happened today.

There isn’t much else to say. All details and instructions on how to start your own pblog can be found on the main homepage for this project.

Thanks for reading!

]]> + brad@bt.ht (Bradley Taunt) + https://pblog.bt.ht/blog/pblog-launch.html + + + Fri, 08 Jul 2022 01:00:00 EST + 2022/07/08/5 + Includes, rsync and Variables - Oh My! + https://pblog.bt.ht/blog/small-patch.html + +

Includes, rsync and Variables - Oh My!

Fri, 08 Jul 2022

+ + +

Even though pblog was just launched a week ago, it has since been updated with some nice quality-of-life improvements.

Default “header” & “footer” Includes

A new variable was added to the main pblog.sh configuration file called INC_HEAD_FOOT. By default this is set to true and simply pulls in two HTML files:

_header.html: all content within is placed directly after the opening body tag
_footer.html: all content within is placed directly before the closing body tag

These includes are added to every outputted file from inside both the posts and pages directories on build.

Syncing Changes with rsync

On the Horizon…

Thanks for your interest in these minor updates!

P.S. Don’t forget - if your website runs on pblog be sure to reach out and get it featured on the homepage!

]]> + brad@bt.ht (Bradley Taunt) + https://pblog.bt.ht/blog/small-patch.html + + + blob - /dev/null blob + ce823c60e07f8444c22b5ceaa39f9f77f47e68fe (mode 644) --- /dev/null +++ _output/index.html @@ -0,0 +1,178 @@ + + + + + + + pblog + + + + + + + + +

pblog

Peanut butter sandwich

Pandoc static blog generator

pblog comes packed with an incredible list of features:

5-second configuration
Write all your posts and pages in Markdown
Valid RSS 2.0 feed (customized design too!)

and it also doesn’t ship with a lot of other features:

No advanced template layouts
No themes
No categories / tagging systems
No comments
No auto rebuilds for local testing

But you can add these things yourself with a little know-how and patience! The goal of pblog is to remain as bare-bones as possible, so these “extras” are left out intentionally.

Live Demo

This very website is a live demo! Mind blowing, right? Take a look at the automated blog list to see some blog posts.

Requirements

On MacOS / BSD Systems

On Linux

Getting Started

Clone the project repo: https://git.sr.ht/~bt/pblog
Edit the variables at the top of the pblog.sh file
!! Pay close attention to the OS variable to set your correct operating system !!
Edit the posts in posts and pages in pages to your own
Run make from the root directory
Upload the contents of the _output folder to your server
Profit!!!

For a more in-depth look, take a look at the article Introducing pblog

Base Settings

By default pblog ships with TOC (Table of Contents) enabled. You can disable this on each individual page or post by editing the TOCvariable in pblog.sh to false:

TOC: false

Code Highlighting

pblog uses the standard syntax highlighting provided with Pandoc. To disable this, set the SYNTAX variable to false in pblog.sh:

SYNTAX: false

Extras

Add all media files (images, videos, etc.) under the media folder
Customize the look of your blog by editing the included style.css
Looking for fancier image manipulation? Take a look at this detailed post to get setup

You can share your pblog websites by emailing me at the address listed below and I’ll add them here.

brad at bt {dot} ht

Websites Using `pblog`

pblog.bt.ht (this site!)
ng5p.com

+ + + + + blob - /dev/null blob + c1331178ee3d78f035da98c4935604ae8784d17d (mode 644) --- /dev/null +++ _output/media/pb-sandwich.svg @@ -0,0 +1,14 @@ + + \ No newline at end of file blob - /dev/null blob + 1714983202dfe19abb38faa428007ab0e885f129 (mode 644) --- /dev/null +++ _output/media/pbj.svg @@ -0,0 +1,173 @@ + \ No newline at end of file blob - /dev/null blob + 2b54fe5aefeffde886a8421f18f2c1e0f6b577b4 (mode 644) --- /dev/null +++ _output/rss.xsl @@ -0,0 +1,66 @@ + + + + + + + + <xsl:value-of select="/rss/channel/title" /> + + + + + + + + + + + + + +

+ +

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file blob - /dev/null blob + 6c1cca6850b0bf6c9a7c6b635d6cbd5ba775e85c (mode 644) --- /dev/null +++ _output/style.css @@ -0,0 +1,50 @@ +html { + background:#f9f9f9; +} + +body { + background: #fff; + border: 1px solid lightgrey; + margin: 1em auto; + max-width: 75ch; + padding: 10px; + line-height: 1.4; +} + +p code, li code { + border: 1px solid brown; + border-radius: 2px; + color: brown; + padding: 1px 2px; +} +.sourceCode { + overflow: auto; +} + +img { + height: auto; + max-width: 100%; +} + +pre { + background: #f9f9f9; + border: 1px solid lightgrey; + padding: 5px; +} + +#TOC { + border: 1px solid; + position: relative; +} +#TOC:before { + border-bottom: 1px solid; + content: 'Table of Contents'; + display: block; + font-weight: bold; + padding: 5px; + position: relative; +} + +.date { + color: grey; +} blob - /dev/null blob + 0d61f8842d0a468f365e97845b5864f2e6806910 (mode 644) --- /dev/null +++ _output/tweaks.html @@ -0,0 +1,191 @@ + + + + + + + Tweaks + + + + + + + + +

Tweaks

+ +

Tweaks Explained

“Tweaks” are extra features that are not packaged within the default pblog project. If you have your own tweaks you would like to include, be sure to open a patch.

Magick Images

by: Matthew Graybosch

This tweak gives you the ability to automatically convert PNG and JPG images to WEBP and AVIF files when used with the picture HTML element.

Requirements:

Download and install ImageMagick

Then change your base makefile to reflect the following:

.SUFFIXES: .png .jpg .webp .avif
+
+.jpg.webp:
+    magick -quality 80 "$<" "$@"
+
+.jpg.avif:
+    magick -quality 80 "$<" "$@"
+
+.png.webp:
+    magick -quality 80 "$<" "$@"
+
+.png.avif:
+    magick -quality 80 "$<" "$@"
+
+JPEGS!=find media/ -name '*.jpg'
+PNGS!=find media/ -name '*.png'
+
+JPEG_WEBP=${JPEGS:.jpg=.webp}
+JPEG_AVIF=${JPEGS:.jpg=.avif}
+
+PNG_WEBP=${PNGS:.png=.webp}
+PNG_AVIF=${PNGS:.png=.avif}
+
+.DEFAULT: build
+
+.PHONY: build
+build: $(JPEG_WEBP) $(JPEG_AVIF) $(PNG_WEBP) $(PNG_AVIF)
+    bash pblog.sh > _output/feed.xml
+    xsltproc _output/feed.xml | tail -n +2 > _output/blog/index.html
+
+serve: build
+    python3 -m http.server --directory _output/
+
+clean:
+    rm _output/* rss/* $(JPEG_WEBP) $(JPEG_AVIF) $(PNG_WEBP) $(PNG_AVIF)

That’s it. Enjoy!

Hiding Table of Contents “Heading”

by Bradley Taunt

By default the include Table of Contents displays a title and styled section. To disable this, simply edit the style.css file and comment out or delete the following:

#TOC {
+    border: 1px solid;
+    position: relative;
+}
+#TOC:before {
+    border-bottom: 1px solid;
+    content: 'Table of Contents';
+    display: block;
+    font-weight: bold;
+    padding: 5px;
+    position: relative;
+}

+ +

In order to include any main navigation (or other custom elements for that matter) on the main blog index page and RSS feed.xml, simply edit the rss.xml file in the root directory. Be sure to add your elements / content inside the body tag near the bottom of the page.

+ + + + + blob - /dev/null blob + 3e8feee0e32061d6b27013cec9317cd0fdfebea9 (mode 644) --- /dev/null +++ makefile @@ -0,0 +1,12 @@ +.DEFAULT: build + +.PHONY: build +build: + bash pblog.sh > _output/feed.xml + xsltproc _output/feed.xml > _output/blog/index.html + +serve: build + python3 -m http.server --directory _output/ + +clean: + rm _output/* blob - /dev/null blob + c1331178ee3d78f035da98c4935604ae8784d17d (mode 644) --- /dev/null +++ media/pb-sandwich.svg @@ -0,0 +1,14 @@ + + \ No newline at end of file blob - /dev/null blob + 1714983202dfe19abb38faa428007ab0e885f129 (mode 644) --- /dev/null +++ media/pbj.svg @@ -0,0 +1,173 @@ + \ No newline at end of file blob - /dev/null blob + c8b5eb2ca1e632d18181b5b411679c48b5376c2f (mode 644) --- /dev/null +++ pages/index.md @@ -0,0 +1,88 @@ +--- +title: pblog +toc: false +--- + + Peanut butter sandwich

+ +## Pandoc static blog generator + +`pblog` comes packed with an incredible list of features: + +- 5-second configuration +- Write all your posts and pages in Markdown +- Valid RSS 2.0 feed (customized design too!) + +and it also *doesn't* ship with a lot of other features: + +- No advanced template layouts +- No themes +- No categories / tagging systems +- No comments +- No auto rebuilds for local testing + +But you can add these things yourself with a little know-how and patience! The goal of `pblog` is to remain as bare-bones as possible, so these "extras" are left out intentionally. + +## Live Demo + +This very website is a live demo! Mind blowing, right? Take a look at the [automated blog list](/blog) to see some blog posts. + +## Requirements + +#### On MacOS / BSD Systems + +- [rsync](https://linux.die.net/man/1/rsync) +- [coreutils](https://www.gnu.org/software/coreutils/) +- [xsltproc](http://xmlsoft.org/xslt/xsltproc.html) +- [Pandoc](https://pandoc.org/installing.html) + +#### On Linux + +- [rsync](https://linux.die.net/man/1/rsync) +- [xsltproc](http://xmlsoft.org/xslt/xsltproc.html) +- [Pandoc](https://pandoc.org/installing.html) + +## Getting Started + +1. Clone the project repo: [https://git.sr.ht/~bt/pblog](https://git.sr.ht/~bt/pblog) +2. Edit the variables at the top of the `pblog.sh` file +3. **!! Pay close attention to the `OS` variable to set your correct operating system !!** +4. Edit the posts in `posts` and pages in `pages` to your own +5. Run `make` from the root directory +6. Upload the contents of the `_output` folder to your server +7. Profit!!! + +For a more in-depth look, take a look at the article [Introducing pblog](/blog/pblog-intro.html) + +## Base Settings + +#### Table of Contents + +By default `pblog` ships with TOC (Table of Contents) enabled. You can disable this on each individual page or post by editing the `TOC `variable in `pblog.sh` to `false`: + +```yaml +TOC: false +``` + +#### Code Highlighting + +`pblog` uses the standard syntax highlighting provided with Pandoc. To disable this, set the `SYNTAX` variable to `false` in `pblog.sh`: + +```yaml +SYNTAX: false +``` + +## Extras + +- Add all media files (images, videos, etc.) under the `media` folder +- Customize the look of your blog by editing the included `style.css` +- Looking for fancier *image manipulation*? Take a look at [this detailed post to get setup](/tweaks.html) + +You can share your **pblog** websites by emailing me at the address listed below and I'll add them here. + +brad at bt {dot} ht + +## Websites Using `pblog` + +- [pblog.bt.ht](https://pblog.bt.ht) (this site!) +- [ng5p.com](https://www.ng5p.com) blob - /dev/null blob + a83e90d83da8f8b31d103d4f8a1df9eda52f0fe8 (mode 644) --- /dev/null +++ pages/tweaks.md @@ -0,0 +1,97 @@ +--- +title: Tweaks +toc: true +--- + +## Tweaks Explained + +"Tweaks" are extra features that are not packaged within the default `pblog` project. If you have your own tweaks you would like to include, be sure to [open a patch](https://git.sr.ht/~bt/pblog). + +--- + +
+ +## Magick Images + +#### by: [Matthew Graybosch](https://matthewgraybosch.com) + +This tweak gives you the ability to automatically convert PNG and JPG images to WEBP and AVIF files when used with the `picture` HTML element. + +**Requirements**: + +- Download and install [ImageMagick](https://imagemagick.org/script/download.php) + +Then change your base `makefile` to reflect the following: + +```bash +.SUFFIXES: .png .jpg .webp .avif + +.jpg.webp: + magick -quality 80 "$<" "$@" + +.jpg.avif: + magick -quality 80 "$<" "$@" + +.png.webp: + magick -quality 80 "$<" "$@" + +.png.avif: + magick -quality 80 "$<" "$@" + +JPEGS!=find media/ -name '*.jpg' +PNGS!=find media/ -name '*.png' + +JPEG_WEBP=${JPEGS:.jpg=.webp} +JPEG_AVIF=${JPEGS:.jpg=.avif} + +PNG_WEBP=${PNGS:.png=.webp} +PNG_AVIF=${PNGS:.png=.avif} + +.DEFAULT: build + +.PHONY: build +build: $(JPEG_WEBP) $(JPEG_AVIF) $(PNG_WEBP) $(PNG_AVIF) + bash pblog.sh > _output/feed.xml + xsltproc _output/feed.xml | tail -n +2 > _output/blog/index.html + +serve: build + python3 -m http.server --directory _output/ + +clean: + rm _output/* rss/* $(JPEG_WEBP) $(JPEG_AVIF) $(PNG_WEBP) $(PNG_AVIF) +``` + +That's it. Enjoy! + +--- + +
+ +## Hiding Table of Contents "Heading" + +#### by [Bradley Taunt](https://tdarb.org) + +By default the include *Table of Contents* displays a title and styled section. To disable this, simply edit the `style.css` file and comment out or delete the following: + +```css +#TOC { + border: 1px solid; + position: relative; +} +#TOC:before { + border-bottom: 1px solid; + content: 'Table of Contents'; + display: block; + font-weight: bold; + padding: 5px; + position: relative; +} +``` + +--- + +
+ +## Adding navigation to blog index and RSS feed + +In order to include any main navigation (or other custom elements for that matter) on the main blog index page and RSS `feed.xml`, simply edit the `rss.xml` file in the root directory. Be sure to add your elements / content inside the `body` tag near the bottom of the page. blob - /dev/null blob + 26d163c65b43d3d87d57107c3e357f1bb67868cd (mode 644) --- /dev/null +++ pblog.sh @@ -0,0 +1,84 @@ +#!/bin/sh + +source _config.sh + +################################################################################### +# !WARNING! +# You probably don't need to tweak anything below this line. Edit at your own risk! +################################################################################### + +# Create the $OUTPUT directory if it does not exist yet +mkdir -p $OUTPUT + +if [[ $TOC = true ]] + then + TOC_TOGGLE="--toc"; + else + TOC_TOGGLE=""; +fi + +if [[ $SYNTAX = true ]] + then + SYNTAX_TOGGLE=""; + else + SYNTAX_TOGGLE="--no-highlight"; +fi + +# Create the web browser-focused HTML versions for all posts +for i in $POSTS; do pandoc --css=../style.css --ascii --metadata lang="$HTML_LANG" $TOC_TOGGLE $SYNTAX_TOGGLE --wrap=none -A _footer.html -B _header.html -s $i -o ${i%.*}.html; done; + +rsync $POSTS_DIR*.html $OUTPUT$WEB_HTML; +rm $POSTS_DIR*.html + +# Create the web browser-focused HTML versions for all pages +for i in $PAGES; do pandoc --css=style.css --ascii --metadata lang="$HTML_LANG" $TOC_TOGGLE $SYNTAX_TOGGLE --wrap=none -A _footer.html -B _header.html -s $i -o ${i%.*}.html; done; + +rsync $PAGES_DIR*.html $OUTPUT; +rm $PAGES_DIR*.html + +# Copy XSLT, stylesheet, and media files +rsync rss.xsl $OUTPUT; +rsync style.css $OUTPUT; +rsync -r media $OUTPUT; + +# Remove the default blog index to avoid pulling into the XML feed +rm $OUTPUT$WEB_HTML/index.html + +echo " + + + + $TITLE + $DOMAIN + $DESCRIPTION + $COPYRIGHT + $TTL"; + +for file in $OUTPUT$WEB_HTML*; do + +POST_DATE=$(sed -n 's|^

$[^<]*$

$|\1|p' $file) +POST_TITLE=$(sed -n 's|^

$[^<]*$

$|\1|p' $file) +POST_CONTENT=$(sed -n '/

/,/<\/article>/p' $file | sed -e '1s/.*

//' -e '$s/<\/article>.*//') + +if [[ $OS = "BSD" ]] +then + CAT_DATE=$(gdate -d "$(sed -n 's|^

$[^<]*$

$|\1|p' $file)" +"%Y/%m/%d/%u") + POST_DATE=$(gdate -d "$(sed -n 's|^

$[^<]*$

$|\1|p' $file)" +"%a, %d %b %Y") +else + CAT_DATE=$(date -d "$(sed -n 's|^

$[^<]*$

$|\1|p' $file)" +"%Y/%m/%d/%u") + POST_DATE=$(date -d "$(sed -n 's|^

$[^<]*$

$|\1|p' $file)" +"%a, %d %b %Y") +fi + +echo " + $POST_DATE $TIME + $CAT_DATE + $POST_TITLE + $DOMAIN/$WEB_HTML$(basename ${file}) + + $AUTHOR + $DOMAIN/$WEB_HTML$(basename ${file}) + "; +done + +echo " +"; blob - /dev/null blob + 2a25b190b3cdf5b804a0e314f5519db44f786617 (mode 644) --- /dev/null +++ posts/community-patch.md @@ -0,0 +1,36 @@ +--- +title: 'First Community Patch & Tweaks' +date: Fri, 15 Jul 2022 +--- + +`pblog` has received its first community patch! By "community" I mean someone other than myself has helped make this blog generator even better. So special thanks to [Matthew Graybosch](https://matthewgraybosch.com/) for contributing to this humble project and patching in some solid quality of life improvements. + +This is why open source is great: smarter people can help fix your mashed-up spaghetti code! + +### The Changes + +1. Both pages and posts now generated *Table of Contents* by default + - You have the ability to disable this site-wide in the `pblog` config +2. Ability to disable Pandoc generated syntax highlighting +3. `xsltproc` will now generate HTML5 and include the RSS feed description under the title + - See it live on the [main RSS XML feed](/feed.xml) +4. New metadata variable (`HTML_LANG`) in the `pblog.sh` config +5. Generated pages and posts now have "Table of Contents" by default + - This can be disabled in individual files with `toc: false` +6. Cleaned up redundant find statements + +### Some Features Left Behind... + +Also suggested in this patch was the addition of more advanced image manipulation via `ImageMagick`. This additional feature was pretty great from my testing but I felt as though adding an extra dependency and *slightly* more complex settings to `pblog` was moving things further from simplicity. + +**BUT** - that doesn't mean you can't take this great feature with you! + +### Introducing "Tweaks" + +I feel that `pblog` should always remain as simple as possible at the core. Let people get something up-and-running with the least amount of friction as possible. But I know that some users might want to squeeze just a *little* bit more out of it. This is where the new **Tweaks** section comes in. + +Feel free to check out the [official Tweaks page](/tweaks.html) and don't be afraid to add your own by opening a patch-set! + +That's all for now, thanks for reading! + +-- Brad \ No newline at end of file blob - /dev/null blob + 1a09ca75dd9efae70b68f47f57786a28740f86a6 (mode 644) --- /dev/null +++ posts/default-styles.md @@ -0,0 +1,61 @@ +--- +title: New Default Styling and 2x Faster! +date: Wed, 27 Jul 2022 +--- + +If it wasn't already obvious, this project has received a minor styling overhaul. But looks weren't the only thing updated with this latest patch. + +The total build process time is now *two times faster*! + +Keep reading for more details. + +## The Default "Theme" + +The styling changes aren't anything ground breaking. They simply center the main content and add a little more visual separation of the content and backdrop. Again, you can customize `pblog` as you see fit, but having a sane default is always nice. + +## New Config Setup + +Since updates and performance fixes might continue to come through in the future, I didn't want to make users play around with their default configuration every single time. Now, all main configuration is handled in the new `_config.sh` file. + +```sh +#!/bin/sh + +# Site specific settings +################################################################################### +DOMAIN="https://pblog.bt.ht" +TITLE="pblog" +DESCRIPTION="Pandoc static blog generator" +COPYRIGHT="Copyright 2022, Bradley Taunt" +AUTHOR="brad@bt.ht (Bradley Taunt)" +OS="Linux" # "Linux" for Linux, "BSD" for BSD Systems (including MacOS) +HTML_LANG="en_US" # Your document (HTML) language setting + +# Blog structure settings (most users should use these defaults) +################################################################################### +TOC=true +SYNTAX=true +PAGES_DIR="pages/" +POSTS_DIR="posts/" +PAGES=$(find $PAGES_DIR -type f) +POSTS=$(find $POSTS_DIR -type f) +WEB_HTML="blog/" +OUTPUT="_output/" +TIME="01:00:00 EST" +TTL="60" +``` + +Feels cleaner already, right? + +## Cutting the Build Time in Half + +I must give big kudos to [Matthew Graybosch](https://matthewgraybosch.com) for inspiring this pretty big improvement. After some discussion over emails we both agreed that it seemed overkill to render the blog content twice (once for the XML feed itself and then again for all posts listed under `blog`). Performance wasn't the initial goal when I first launched this project, but now that the dust has settled it seemed appropriate to go back and fix some things. + +`pblog` now only needs to render the blog posts found in the `posts` directory *once*. It still produces semantic XML and keeps the webview versions of the articles looking solid. Overall I'm pretty happy with this *little* improvement - it should pretty noticeable on projects rendering many posts. + +## Far From Perfect + +This project is still very much in it's infancy. So if you notice something odd or broken in your own testing, please don't hesitate to open a patch or simply bring up the issue! + +Thanks for reading, + +-- Brad \ No newline at end of file blob - /dev/null blob + e86272b2ed0d89d259ff55099e90f451652af262 (mode 644) --- /dev/null +++ posts/pblog-intro.md @@ -0,0 +1,96 @@ +--- +title: Introducing pblog +date: Mon, 04 Jul 2022 +--- + +This article is a *living document*. It will always have the most up-to-date information on getting started with `pblog`. + +**Last Updated**: July 27, 2022 + +--- + +Although this project was already [announced](/blog/pblog-launch.html) a couple days ago, I thought it might be best to actually breakdown `pblog` into greater detail. + +Enough chit-chat, let's get into it! + +### Main Goal + +The entire purpose of `pblog` is to be as bare-bones as possible, while still maintaining a pleasant writing workflow. Users write their posts and pages in Markdown - *pblog* handles everything else: + +- Posts and pages generated via Pandoc with minimal CSS +- RSS feed at `feed.xml` +- Generated blog listing at `blog/index.html` +- Browser-styled XML (in supported browsers) + +### Site Structure + +After you've cloned the [official pblog repo on sourcehut](https://git.btxx.org/pblog), the next thing you should do is edit the main `_config.sh` file in the root directory. This will give you a better understanding of how everything is built. + +Once generated, *pblog* structures the final website files as such: + +```shell +_output/ + |__blog/ + |__index.html + |__blog-post-example.html + |__media/ + |__feed.xml + |__index.html + |__rss.xsl + |__style.css +``` + +This structure is completely customizable by simply editing the `_config.sh` file (if you so desire). + +### Headers and Footers + +By default `pblog` will add the header and footer includes to every individual post and page. To edit these, simply open the `_header.html` and `_footer.html` files respectively. + +**Important**: To avoid rendering issues DO NOT remove the included `article` opening and closing tags within those files. Everything else you can edit, remove, etc. + +### Posts and Pages + +Posts and pages are written via Markdown inside the `posts` and `pages` folders respectively. + +Individual posts require the following headers (take note of the date format): + +```yaml +--- +title: Blog Title +date: Mon, 04 Jul 2022 +--- +``` + +while individual pages only require a `title`: + +```yaml +--- +title: Page Title +--- +``` + +This makes for an easier switch over from other SSG platforms like Jekyll or Hugo. + +### The Build Process + +The main variables at the top of the `pblog.sh` file need to edited with your own details before generating your website. Those variables are fairly self-explanatory and simple to edit. + +All you need to do now is run `make` (or `make serve` if you're looking to test locally) and you're done. Your website should now be fully generated inside the include `_output` directory. For quick reference: + +1. *pblog* converts your Markdown posts into two variations of HTML + - One is used specifically for rendering itself inside the RSS feed + - The other is used for linking in a browser +2. Next, *pblog* converts your Markdown pages into HTML +3. All of these generated HTML files are then moved to the `_output` folder + +*pblog* is also smart enough to automatically generate a main blog list directory for you. This `index.html` file is placed inside the `_output/blog` folder on build. You can see an example of the blog list [on this very website](/blog). + +### Uploading to the WWW + +Those with more experience will probably lean towards using a utility like `rsync` to sync the contents of their `_output` folder with their web server. For those with less experience, I recommend using something like [Netlify Drop](https://app.netlify.com/drop) to make things as friction-less as possible. + +### Wrapping Up + +There isn't much else to say. `pblog` is as static or flexible as you chose it to be. If you have any ideas on how to improve things or come across any bugs, please [open a ticket or PR on the official repo](https://git.sr.ht/~bt/pblog). + +Thanks and happy blogging with *pblog*! blob - /dev/null blob + 3c9b472d4dba480691c0f8a968ea1baa04bcfa26 (mode 644) --- /dev/null +++ posts/pblog-launch.md @@ -0,0 +1,11 @@ +--- +title: Announcing pblog +date: Thu, 30 Jun 2022 +--- + +It's time to celebrate! The official launch of `pblog` happened today. + +There isn't much else to say. All details and instructions on how to start your own pblog can be found on the [main homepage for this project](https://pblog.btxx.org). + +Thanks for reading! + blob - /dev/null blob + d6c1507850c137ddca856cc3cdd3506cc3154260 (mode 644) --- /dev/null +++ posts/small-patch.md @@ -0,0 +1,27 @@ +--- +title: Includes, rsync and Variables - Oh My! +date: Fri, 08 Jul 2022 +--- + +Even though `pblog` was just launched a week ago, it has since been updated with some nice quality-of-life improvements. + +### Default "header" & "footer" Includes + +A new variable was added to the main `pblog.sh` configuration file called `INC_HEAD_FOOT`. By default this is set to `true` and simply pulls in two HTML files: + +- `_header.html`: all content within is placed directly after the opening `body` tag +- `_footer.html`: all content within is placed directly before the closing `body` tag + +These includes are added to every outputted file from inside both the `posts` and `pages` directories on build. + +### Syncing Changes with rsync + +Although it adds another dependency to the project, I believe utilizing `rsync` for the generated files is far better then nuking the directory from orbit each time. This also provides a cleaner experience for users syncing their `_output` directory with their web server of choice. + +### On the Horizon... + +My plan was to also tackle the issue of "auto rebuilds" when running `pblog` locally. This became more of a headache than I initially estimated - so it was dropped from this patch. My hope is to get something up-and-running in the near future, while avoiding the inclusion of yet another major dependency. Anyone more experienced than myself in the ways of "auto rebuilds" is free to open a patch if they so desire! + +Thanks for your interest in these minor updates! + +P.S. Don't forget - if your website runs on `pblog` be sure to reach out and get it featured on the [homepage](/)! blob - /dev/null blob + 2b54fe5aefeffde886a8421f18f2c1e0f6b577b4 (mode 644) --- /dev/null +++ rss.xsl @@ -0,0 +1,66 @@ + + + + + + + + <xsl:value-of select="/rss/channel/title" /> + + + + + + + + + + + + + +

+ +

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file blob - /dev/null blob + 6c1cca6850b0bf6c9a7c6b635d6cbd5ba775e85c (mode 644) --- /dev/null +++ style.css @@ -0,0 +1,50 @@ +html { + background:#f9f9f9; +} + +body { + background: #fff; + border: 1px solid lightgrey; + margin: 1em auto; + max-width: 75ch; + padding: 10px; + line-height: 1.4; +} + +p code, li code { + border: 1px solid brown; + border-radius: 2px; + color: brown; + padding: 1px 2px; +} +.sourceCode { + overflow: auto; +} + +img { + height: auto; + max-width: 100%; +} + +pre { + background: #f9f9f9; + border: 1px solid lightgrey; + padding: 5px; +} + +#TOC { + border: 1px solid; + position: relative; +} +#TOC:before { + border-bottom: 1px solid; + content: 'Table of Contents'; + display: block; + font-weight: bold; + padding: 5px; + position: relative; +} + +.date { + color: grey; +}

The Changes

Some Features Left Behind…

Introducing “Tweaks”

The Default “Theme”

New Config Setup

Cutting the Build Time in Half

Far From Perfect

Main Goal

Site Structure

Headers and Footers

Posts and Pages

The Build Process

Uploading to the WWW

Wrapping Up

Default “header” & “footer” Includes

Syncing Changes with rsync

On the Horizon…

First Community Patch & Tweaks

The Changes

Some Features Left Behind…

Introducing “Tweaks”

New Default Styling and 2x Faster!

The Default “Theme”

New Config Setup

Cutting the Build Time in Half

Far From Perfect

Introducing pblog

Main Goal

Site Structure

Headers and Footers

Posts and Pages

The Build Process

Uploading to the WWW

Wrapping Up

Announcing pblog

Includes, rsync and Variables - Oh My!

Default “header” & “footer” Includes

Syncing Changes with rsync

On the Horizon…

Pandoc static blog generator

Live Demo

Requirements

On MacOS / BSD Systems

On Linux

Getting Started

Base Settings

Table of Contents

Code Highlighting

Extras

Websites Using pblog

Tweaks Explained

Magick Images

by: Matthew Graybosch

Hiding Table of Contents “Heading”

by Bradley Taunt

Adding navigation to blog index and RSS feed

\([^<]*\)

Websites Using `pblog`