diff options
Diffstat (limited to '_site')
| -rw-r--r-- | _site/atom.xml | 183 | ||||
| -rw-r--r-- | _site/index.html | 251 |
2 files changed, 434 insertions, 0 deletions
diff --git a/_site/atom.xml b/_site/atom.xml new file mode 100644 index 0000000..9bc9ffe --- /dev/null +++ b/_site/atom.xml @@ -0,0 +1,183 @@ +<?xml version="1.0" encoding="utf-8"?> + <feed xmlns="http://www.w3.org/2005/Atom"> + <title>PHPetite</title> + <link href="https://phpetite.btxx.org/atom.xml" rel="self"/> + <link href="https://phpetite.btxx.org"/> + <updated>2024-02-02T18:05:24+00:00</updated> + <id>https://phpetite.btxx.org/</id> + <author> + <name>Bradley Taunt</name> + <email>bt@btxx.org</email> + </author> + <entry> + <title>Cleaning Things Up & Future PHPetite Updates</title> + <link href="https://phpetite.btxx.org#2022-06-28-cleaning-things-up-future-phpetite-updates"/> + <updated>2022-06-28T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2022-06-28-cleaning-things-up-future-phpetite-updates</id> + <content type="html"><h1>Cleaning Things Up &amp; Future PHPetite Updates</h1> +<p>It has been quite a long time since I've reviewed or updated this little project of mine. Since it's release, I've created another minimal blogging system (based on <code>bash</code> this time) called <a href="https://shinobi.website">Shinobi</a> and converted my personal website to use <em>that</em> instead.</p> +<p>But I still love this single file blogging concept. So, I thought it was time for some basic cleanup. That "cleanup" slowly turned into a TODO list of sorts and now there are extra features I plan to add.</p> +<h2>The Cleanup</h2> +<p>* I first started by including the specific <code>$_SERVER['DOCUMENT_ROOT'].</code> parameter in the main PHP includes. I noticed when pulling the project in a "fresh" instance that the build failed without this setup. Sorry for anyone who may have ran into this issue previously!</p> +<p>* The default build script has been moved into a proper <code>makefile</code>. Now, generating the website only requires you to run <code>make</code> from the main directory. Running <code>make serve</code> builds the website and also runs a local server for testing at <code>localhost:8000</code>. Nothing groundbreaking but pretty helpful.</p> +<p>* The original dark mode CSS styling has been removed in favor of using the browser supported <code>color scheme</code> meta tag.</p> +<p>* Post dates are now listed at the top of each blog article (see above for reference)</p> +<h2>What's to Come</h2> +<p>I keep a running list of features I plan to implement (in no particular order) on the main <a href="#about">about section</a>. Feel free to open an issue on the <a href="https://todo.sr.ht/~bt/phpetite">official sourcehut todo</a> if you have other features and suggestions. Don't be shy!</p> +<h2>Follow Along</h2> +<p>Rolling out any new updates for this project will take time. I'm in no <em>real</em> rush and I do have other projects that require my attention. That said, if you wish to stay up-to-date, I recommend following along via the <a href="/atom.xml">official RSS feed</a>.</p> +<p>Thanks for reading and happy single-file blogging!</p> +<p>-- Brad</p></content> + </entry> + + <entry> + <title>Converting Custom Fonts to Base64 Strings</title> + <link href="https://phpetite.btxx.org#2021-02-27-converting-custom-fonts-to-base64-strings"/> + <updated>2021-02-27T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-02-27-converting-custom-fonts-to-base64-strings</id> + <content type="html"><h1>Converting Custom Fonts to Base64 Strings</h1> +<p>There are currently no plans to automatically convert custom fonts to base64 strings within the project itself - <strong>but</strong> it is very easy to do so manually for Mac/Linux users.</p> +<p>Simply open a terminal window and navigate to where your custom font file is located. The enter the following command (replacing the font extension name with your appropriate file name):</p> +<pre><code class="bash">base64 your-custom-font.woff2 &gt; font-base64.txt</code></pre> +<p>Then in your <code>style.css</code> file, add the custom font as you normally would via the <code>@font-face</code> property but this time utilizing base64:</p> +<pre><code class="css">@font-face { + font-family: 'FontName; + src: url(data:font/woff2;base64,[BASE64 CODE]) format('woff2'); +}</code></pre> +<h2>Things to Keep in Mind</h2> +<p>Remember that by using base64 strings you are <em>significantly</em> increasing the overall size of your single file project. This should be used for extreme use cases where a single file website/blog isn't allowed access to 3rd party URLs or extra files on the root server. Hence why by default it isn't include in the PHPetite project itself.</p> +<h2>Live Example</h2> +<p>You can check out the <a href="https://thrifty.name">ThriftyName</a> project (built on PHPetite) to see base64 custom fonts in use.</p></content> + </entry> + + <entry> + <title>Disable Image to Base64 Conversion</title> + <link href="https://phpetite.btxx.org#2021-02-18-disable-image-to-base64-conversion"/> + <updated>2021-02-18T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-02-18-disable-image-to-base64-conversion</id> + <content type="html"><h1>Disable Image to Base64 Conversion</h1> +<p>Some users<sup><a href="#" class="footnote-ref">2</a></sup> may wish to host their imagery and media via a 3rd party source or simply want to avoid the heavy weight added with using base64 strings (~133%+ in size). </p> +<p>To disable this feature, open your <code>_phpetite/_config.php</code> file and change the <code>images_to_base64</code> variable to false.</p> +<pre><code class="php">// Activate or disable images to base64 strings +$images_to_base64 = false;</code></pre> +<div class="footnotes"> +<hr /> +<ol> +<li> +<p>Thanks to <a href="https://news.ycombinator.com/user?id=Minor49er">Minor49er</a> for suggesting this option on <a href="https://news.ycombinator.com/item?id=26175904">Hacker News</a>&#160;<a href="#" class="footnote-backref">&#8617;</a></p> +</li> +</ol> +</div></content> + </entry> + + <entry> + <title>Automatic RSS</title> + <link href="https://phpetite.btxx.org#2021-02-08-automatic-rss"/> + <updated>2021-02-08T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-02-08-automatic-rss</id> + <content type="html"><h1>Automatic RSS</h1> +<p>PHPetite ships with a very basic and crude auto-generated RSS feed. When you run the project's build script:</p> +<pre><code class="bash">bash build.sh</code></pre> +<p>it not only generates the single HTML blog file, but also creates an <code>atom.xml</code> file in the root directory. Simply share this with your followers or link it somewhere on your site itself (eg. <code>yourdomain.com/atom.xml</code>).</p> +<p>You can view this site's RSS feed here: </p> +<p><a href="https://phpetite.org/atom.xml">https://phpetite.org/atom.xml</a></p></content> + </entry> + + <entry> + <title>The Benefits of a Single File Blog</title> + <link href="https://phpetite.btxx.org#2021-02-07-the-benefits-of-a-single-file-blog"/> + <updated>2021-02-07T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-02-07-the-benefits-of-a-single-file-blog</id> + <content type="html"><h1>The Benefits of a Single File Blog</h1> +<p>Rendering your blog or website as a single file using PHPetite is pretty fantastic. It gives you the freedom to easily share, host or edit your site's content on almost any hosting provider. </p> +<p>Since the entire blog's content is generated inline on <code>build</code>, you don't need to fiddle around with external <code>CSS</code> and <code>JS</code> files. There is also no need to worry about broken <code>img</code> sources since PHPetite converts all images into proper base64 strings.</p> +<p>Using this website as an example: this blog weighs in at <strong>~21KB</strong><sup><a href="#" class="footnote-ref">2</a></sup>. </p> +<p>That is incredibly tiny in terms of website size. Some sections on other web pages are larger than that!</p> +<p>The portability of having a <em>single</em> <code>HTML</code> file as your blog is quite liberating. Though it should be noted, if your blog consists of high resolutions imagery or includes massive amounts of content, a single file might be a little impractical for you.</p> +<h2>Hosting for Newcomers</h2> +<p>I suggest using <a href="https://app.netlify.com/drop">Netlify Drop</a> if this is your first time setting up a hosting environment or you don't consider yourself too tech-savvy. Once you have your rendered <code>index.html</code> file, simply drag-and-drop the file into Netlify Drop - that's it!</p> +<p>From there you can always setup a permanent subdomain or use your own custom domain.</p> +<h2>Local Development</h2> +<p>Simply follow the instructions found on the <a href="#generating-this-blog">Generating This Blog</a> page and you'll be running a local version of your site in seconds.</p> +<div class="footnotes"> +<hr /> +<ol> +<li> +<p>At this time of writing (Feb 2021)&#160;<a href="#" class="footnote-backref">&#8617;</a></p> +</li> +</ol> +</div></content> + </entry> + + <entry> + <title>Converting from Jekyll</title> + <link href="https://phpetite.btxx.org#2021-02-06-converting-from-jekyll"/> + <updated>2021-02-06T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-02-06-converting-from-jekyll</id> + <content type="html"><h1>Converting from Jekyll</h1> +<p>This walkthrough is still being tweaked and optimized. Check back soon for the final version!</p></content> + </entry> + + <entry> + <title>Markdown examples</title> + <link href="https://phpetite.btxx.org#2021-01-09-markdown-examples"/> + <updated>2021-01-09T00:00:00+00:00</updated> + <id>https://phpetite.btxx.org/#2021-01-09-markdown-examples</id> + <content type="html"><h1><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> examples</h1> +<p>On top of plain <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr>, <a href="https://michelf.ca/projects/php-markdown/extra"><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> Extra</a> adds support for footnotes, abbreviations, definition lists, tables, <code>class</code> and <code>id</code> attributes, fenced code blocks, and <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> inside <abbr title="Hypertext Markup Language">HTML</abbr> blocks.</p> +<p>Additionally, images are properly enclosed in figure elements (with optional figcaption), and the <code>loading="lazy"</code> attribute is added.</p> +<hr /> +<p>This is <strong>bold</strong>, <em>italic</em>, this is an <a href="#2021-01-11-hello-world">internal link</a>, this is <del>not</del> <code>code</code>, press <kbd>alt</kbd>.</p> +<figure><img src="content/img/image.png" alt="This is the image alt text" title="This is the image title." width="1280" height="800" loading="lazy" /><figcaption>This is the image caption (line begins with a space). The image above is actually a rendered base64 encoding.</figcaption> +</figure> +<blockquote> +<p>This text is in a blockquote.</p> +</blockquote> +<h2>This is a level 2 heading</h2> +<h3>This is a level 3 heading</h3> +<ul> +<li>This</li> +<li>is</li> +<li>a list</li> +</ul> +<ol start="0"> +<li>This</li> +<li>is</li> +<li>an</li> +<li>ordered list</li> +</ol> +<pre><code class="txt">This is + preformatted + text.</code></pre> +<table> +<thead> +<tr> +<th>this is a table</th> +<th>header</th> +<th style="text-align: right;">this column is right-aligned</th> +</tr> +</thead> +<tbody> +<tr> +<td>these</td> +<td>content</td> +<td style="text-align: right;">1234</td> +</tr> +<tr> +<td>are</td> +<td>cells</td> +<td style="text-align: right;">56789</td> +</tr> +</tbody> +</table> +<p>This sentence has a footnote.<sup><a href="#" class="footnote-ref">2</a></sup></p> +<div class="footnotes"> +<hr /> +<ol> +<li> +<p>This is a footnote&#160;<a href="#" class="footnote-backref">&#8617;</a></p> +</li> +</ol> +</div></content> + </entry> + </feed>
\ No newline at end of file diff --git a/_site/index.html b/_site/index.html new file mode 100644 index 0000000..c286c76 --- /dev/null +++ b/_site/index.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <title>PHPetite</title> + <meta name="description" content="A single file, static blog generated from PHP"> + <meta name="color-scheme" content="dark light"> + <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAIElEQVR42mNgGAWDDfwnEo4aMGrAqAGjBowEA0bBwAAARraOgF2Dq4IAAAAASUVORK5CYII="> + <!-- og tags --> + <meta property="og:title" content="PHPetite"> + <meta property="og:description" content="A single file, static blog generated from PHP"> + <!-- other --> + <meta name="twitter:card" content="summary"> + <style>* {margin:0;padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:auto;}body {font:16px / 1.44 Lucida Grande, system-ui, "Segoe UI", sans-serif;position:relative;max-width:45em; margin:0 auto;}pre {background:rgba(255,255,255,0.1);border:1px solid;}section, section:target ~ section:last-of-type {height:0;overflow:hidden;padding:0;}section:target, section:last-of-type {height:auto;overflow:visible;padding:calc(5vw + 2.6em) 4vw 1.6em;}section:focus {outline:0;}section {overflow-wrap:break-word;width:100%;}section .posted-on {display:block;font-size:80%;margin-bottom:-0.8em;padding-top:1em;}section * + * {margin-top:.7em;}header {padding:5vw 4vw 0 4vw;position:absolute;width:100%;z-index:1;}footer {display:flex;flex-wrap:wrap;justify-content:space-between;padding:1em 4vw 5vw 4vw;}footer .footer-links {display:block;width:100%;}footer .footer-links a {display:inline-block;}footer .footer-links span.divider {display:inline-block;margin:0 5px;}footer .footer-links span.divider:last-of-type {display:none;}footer .footer-links a.home-content, footer .footer-links a.home-content + span.divider {display:none;}footer * + * {margin-top:0;}ul.toc {overflow:hidden;}ul.toc * + * {margin:0;}ul.toc li {line-height:1.5;position:relative;display:flex;align-items:flex-end;margin:0;}ul.toc li a {flex:1;}ul.toc li a span {padding-right:.3em;}ul.toc li time {font-variant-numeric:tabular-nums;padding-left:.3em;z-index:1;}ul.toc li:after {width:100%;font-size:.55em;position:absolute;bottom:.3em;white-space:nowrap;opacity:0.3;pointer-events:none;content:' . . . . . . . . . . . . . . . . . . . . . .'' . . . . . . . . . . . . . . . . . . . . . .'' . . . . . . . . . . . . . . . . . . . . . .'' . . . . . . . . . . . . . . . . . . . . . .'' . . . . . . . . . . . . . . . . . . . . . .'' . . . . . . . . . . . . . . . . . . . . . .';}a {text-decoration:none;overflow-wrap:break-word;}@media (hover:hover) and (pointer:fine) {a:hover {text-decoration:underline;}}a[href*="//"]:after {font-size:.65em;content:"\2197";display:inline-block;}a[href*="//"]:hover:after {color:inherit;}header h1 {margin-bottom:1em;}header h1 a {font-weight:normal;display:block;}section h1 {font-size:1.4em;line-height:1.5;padding-top:0;}header h1, h2, h3, h4, strong, b, dt {font-size:1em;}* + h2, * + h3, * + h4 {margin-top:1.4em;}h2.cute, h3 {text-transform:uppercase;letter-spacing:.06em;font-size:.9em;font-weight:400;}li, dd {margin-left:1.5em;}li + li, li ol, li ul {margin-top:.1em;}.footnotes li {margin-top:.5em;max-width:95%;}img {display:block;max-width:100%;min-height:6em;height:auto;position:relative;}img:after { align-content:center;border:1px dashed;content:attr(alt);display:grid;font-size:.8em;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:2;}figure {padding:1em;}figcaption, small, .footnotes {font-size:.865em;}blockquote {padding:0 1em;}cite {font-style:normal;}abbr[title] {text-decoration:none;cursor:help;}a abbr[title] {cursor:pointer;color:inherit;}hr {border:0;height:0;border-bottom:1px solid;opacity:.1;margin:1.4em 0;}sup {line-height:1;font-size:.75em;margin-left:.05em;}code, kbd {font-family:ui-monospace, SF Mono, SFMono-Regular, Menlo, Andale Mono, monospace;font-size:.9em;overflow-wrap:break-word;}kbd {box-shadow:0 .5px 1px;border-radius:2px;padding:.05em .325em;font-size:.85em;margin:0 .1em;}pre {line-height:1.55;overflow:auto;background:rgba(0,0,0,.03);padding:.5em .85em .6em .85em;border-radius:4px;}pre code {font-size:.9em;position:relative;display:block;overflow-wrap:normal;}pre code:after {content:attr(class);position:absolute;right:-.6em;top:-.3em;text-transform:uppercase;font-size:.7em;opacity:.45;}input, select, textarea, button {font:inherit;font-size:.85em;line-height:inherit;border:0;box-shadow:0 0 .05em;padding:.2em .4em;width:100%;}table {border-collapse:collapse;min-width:100%;margin:1em 0;}thead {text-align:left;border-bottom:1px solid;}tr + tr {border-top:1px solid;}th, td {padding:.4em .3em .2em;}sup a {color:currentColor;pointer-events:none;}a.footnote-backref {display:none;}@media print {header {position:relative;}section {height:auto;overflow:visible;page-break-after:always;page-break-inside:avoid;break-inside:avoid;display:block;padding:2em 4vw;}section * {page-break-inside:avoid;break-inside:avoid;}}@media only screen and (max-width:500px) {footer .footer-links a { display:block; margin:0.2em 0; }footer .footer-links span.divider { display:none; }blockquote, figure { padding-left:4vw; padding-right:4vw; }ul.toc li {align-items:flex-start;flex-direction:column-reverse;}ul.toc li a { padding-bottom:1em; }ul.toc li time { font-size:.8em; padding-left:0; }ul.toc li a:after {height:0;overflow:hidden;position:absolute;}}@supports (color-scheme:dark light) {@media screen and (prefers-color-scheme:dark) {a:link {color:#9e9eff;}a:visited {color:#d0adf0;}a:active {color:red;}}}</style> +</head> +<body> + <header> + <h1> + <a href="#home">PHPetite</a> + </h1> + </header> + <main> + <section tabindex="0" role="document" aria-label=" Cleaning Things Up & Future PHPetite Updates +" id="2022-06-28-cleaning-things-up-future-phpetite-updates"><time class="posted-on" datetime="2022-06-28">2022-06-28</time><h1>Cleaning Things Up & Future PHPetite Updates</h1> +<p>It has been quite a long time since I've reviewed or updated this little project of mine. Since it's release, I've created another minimal blogging system (based on <code>bash</code> this time) called <a href="https://shinobi.website">Shinobi</a> and converted my personal website to use <em>that</em> instead.</p> +<p>But I still love this single file blogging concept. So, I thought it was time for some basic cleanup. That "cleanup" slowly turned into a TODO list of sorts and now there are extra features I plan to add.</p> +<h2>The Cleanup</h2> +<p>* I first started by including the specific <code>$_SERVER['DOCUMENT_ROOT'].</code> parameter in the main PHP includes. I noticed when pulling the project in a "fresh" instance that the build failed without this setup. Sorry for anyone who may have ran into this issue previously!</p> +<p>* The default build script has been moved into a proper <code>makefile</code>. Now, generating the website only requires you to run <code>make</code> from the main directory. Running <code>make serve</code> builds the website and also runs a local server for testing at <code>localhost:8000</code>. Nothing groundbreaking but pretty helpful.</p> +<p>* The original dark mode CSS styling has been removed in favor of using the browser supported <code>color scheme</code> meta tag.</p> +<p>* Post dates are now listed at the top of each blog article (see above for reference)</p> +<h2>What's to Come</h2> +<p>I keep a running list of features I plan to implement (in no particular order) on the main <a href="#about">about section</a>. Feel free to open an issue on the <a href="https://todo.sr.ht/~bt/phpetite">official sourcehut todo</a> if you have other features and suggestions. Don't be shy!</p> +<h2>Follow Along</h2> +<p>Rolling out any new updates for this project will take time. I'm in no <em>real</em> rush and I do have other projects that require my attention. That said, if you wish to stay up-to-date, I recommend following along via the <a href="/atom.xml">official RSS feed</a>.</p> +<p>Thanks for reading and happy single-file blogging!</p> +<p>-- Brad</p><hr></section><section tabindex="0" role="document" aria-label=" Converting Custom Fonts to Base64 Strings +" id="2021-02-27-converting-custom-fonts-to-base64-strings"><time class="posted-on" datetime="2021-02-27">2021-02-27</time><h1>Converting Custom Fonts to Base64 Strings</h1> +<p>There are currently no plans to automatically convert custom fonts to base64 strings within the project itself - <strong>but</strong> it is very easy to do so manually for Mac/Linux users.</p> +<p>Simply open a terminal window and navigate to where your custom font file is located. The enter the following command (replacing the font extension name with your appropriate file name):</p> +<pre><code class="bash">base64 your-custom-font.woff2 > font-base64.txt</code></pre> +<p>Then in your <code>style.css</code> file, add the custom font as you normally would via the <code>@font-face</code> property but this time utilizing base64:</p> +<pre><code class="css">@font-face { + font-family: 'FontName; + src: url(data:font/woff2;base64,[BASE64 CODE]) format('woff2'); +}</code></pre> +<h2>Things to Keep in Mind</h2> +<p>Remember that by using base64 strings you are <em>significantly</em> increasing the overall size of your single file project. This should be used for extreme use cases where a single file website/blog isn't allowed access to 3rd party URLs or extra files on the root server. Hence why by default it isn't include in the PHPetite project itself.</p> +<h2>Live Example</h2> +<p>You can check out the <a href="https://thrifty.name">ThriftyName</a> project (built on PHPetite) to see base64 custom fonts in use.</p><hr></section><section tabindex="0" role="document" aria-label=" Disable Image to Base64 Conversion +" id="2021-02-18-disable-image-to-base64-conversion"><time class="posted-on" datetime="2021-02-18">2021-02-18</time><h1>Disable Image to Base64 Conversion</h1> +<p>Some users<sup><a href="#" class="footnote-ref">1</a></sup> may wish to host their imagery and media via a 3rd party source or simply want to avoid the heavy weight added with using base64 strings (~133%+ in size). </p> +<p>To disable this feature, open your <code>_phpetite/_config.php</code> file and change the <code>images_to_base64</code> variable to false.</p> +<pre><code class="php">// Activate or disable images to base64 strings +$images_to_base64 = false;</code></pre> +<div class="footnotes"> +<hr> +<ol> +<li> +<p>Thanks to <a href="https://news.ycombinator.com/user?id=Minor49er">Minor49er</a> for suggesting this option on <a href="https://news.ycombinator.com/item?id=26175904">Hacker News</a> <a href="#" class="footnote-backref">↩</a></p> +</li> +</ol> +</div><hr></section><section tabindex="0" role="document" aria-label=" Automatic RSS +" id="2021-02-08-automatic-rss"><time class="posted-on" datetime="2021-02-08">2021-02-08</time><h1>Automatic RSS</h1> +<p>PHPetite ships with a very basic and crude auto-generated RSS feed. When you run the project's build script:</p> +<pre><code class="bash">bash build.sh</code></pre> +<p>it not only generates the single HTML blog file, but also creates an <code>atom.xml</code> file in the root directory. Simply share this with your followers or link it somewhere on your site itself (eg. <code>yourdomain.com/atom.xml</code>).</p> +<p>You can view this site's RSS feed here: </p> +<p><a href="https://phpetite.org/atom.xml">https://phpetite.org/atom.xml</a></p><hr></section><section tabindex="0" role="document" aria-label=" The Benefits of a Single File Blog +" id="2021-02-07-the-benefits-of-a-single-file-blog"><time class="posted-on" datetime="2021-02-07">2021-02-07</time><h1>The Benefits of a Single File Blog</h1> +<p>Rendering your blog or website as a single file using PHPetite is pretty fantastic. It gives you the freedom to easily share, host or edit your site's content on almost any hosting provider. </p> +<p>Since the entire blog's content is generated inline on <code>build</code>, you don't need to fiddle around with external <code>CSS</code> and <code>JS</code> files. There is also no need to worry about broken <code>img</code> sources since PHPetite converts all images into proper base64 strings.</p> +<p>Using this website as an example: this blog weighs in at <strong>~21KB</strong><sup><a href="#" class="footnote-ref">1</a></sup>. </p> +<p>That is incredibly tiny in terms of website size. Some sections on other web pages are larger than that!</p> +<p>The portability of having a <em>single</em> <code>HTML</code> file as your blog is quite liberating. Though it should be noted, if your blog consists of high resolutions imagery or includes massive amounts of content, a single file might be a little impractical for you.</p> +<h2>Hosting for Newcomers</h2> +<p>I suggest using <a href="https://app.netlify.com/drop">Netlify Drop</a> if this is your first time setting up a hosting environment or you don't consider yourself too tech-savvy. Once you have your rendered <code>index.html</code> file, simply drag-and-drop the file into Netlify Drop - that's it!</p> +<p>From there you can always setup a permanent subdomain or use your own custom domain.</p> +<h2>Local Development</h2> +<p>Simply follow the instructions found on the <a href="#generating-this-blog">Generating This Blog</a> page and you'll be running a local version of your site in seconds.</p> +<div class="footnotes"> +<hr> +<ol> +<li> +<p>At this time of writing (Feb 2021) <a href="#" class="footnote-backref">↩</a></p> +</li> +</ol> +</div><hr></section><section tabindex="0" role="document" aria-label=" Converting from Jekyll +" id="2021-02-06-converting-from-jekyll"><time class="posted-on" datetime="2021-02-06">2021-02-06</time><h1>Converting from Jekyll</h1> +<p>This walkthrough is still being tweaked and optimized. Check back soon for the final version!</p><hr></section><section tabindex="0" role="document" aria-label=" Markdown examples +" id="2021-01-09-markdown-examples"><time class="posted-on" datetime="2021-01-09">2021-01-09</time><h1><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> examples</h1> +<p>On top of plain <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr>, <a href="https://michelf.ca/projects/php-markdown/extra"><abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> Extra</a> adds support for footnotes, abbreviations, definition lists, tables, <code>class</code> and <code>id</code> attributes, fenced code blocks, and <abbr title="Markdown is a lightweight markup language for creating formatted text using a plain-text editor">Markdown</abbr> inside <abbr title="Hypertext Markup Language">HTML</abbr> blocks.</p> +<p>Additionally, images are properly enclosed in figure elements (with optional figcaption), and the <code>loading="lazy"</code> attribute is added.</p> +<hr> +<p>This is <strong>bold</strong>, <em>italic</em>, this is an <a href="#2021-01-11-hello-world">internal link</a>, this is <del>not</del> <code>code</code>, press <kbd>alt</kbd>.</p> +<figure><img src="data:image/png;base64,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" alt="This is the image alt text" title="This is the image title." width="1280" height="800" loading="lazy"><figcaption>This is the image caption (line begins with a space). The image above is actually a rendered base64 encoding.</figcaption> +</figure> +<blockquote> +<p>This text is in a blockquote.</p> +</blockquote> +<h2>This is a level 2 heading</h2> +<h3>This is a level 3 heading</h3> +<ul> +<li>This</li> +<li>is</li> +<li>a list</li> +</ul> +<ol start="0"> +<li>This</li> +<li>is</li> +<li>an</li> +<li>ordered list</li> +</ol> +<pre><code class="txt">This is + preformatted + text.</code></pre> +<table> +<thead> +<tr> +<th>this is a table</th> +<th>header</th> +<th style="text-align: right;">this column is right-aligned</th> +</tr> +</thead> +<tbody> +<tr> +<td>these</td> +<td>content</td> +<td style="text-align: right;">1234</td> +</tr> +<tr> +<td>are</td> +<td>cells</td> +<td style="text-align: right;">56789</td> +</tr> +</tbody> +</table> +<p>This sentence has a footnote.<sup><a href="#" class="footnote-ref">1</a></sup></p> +<div class="footnotes"> +<hr> +<ol> +<li> +<p>This is a footnote <a href="#" class="footnote-backref">↩</a></p> +</li> +</ol> +</div><hr></section> + <section tabindex="0" role="document" aria-label="Structuring Blog Posts +" id="structure"><h1>Structuring Blog Posts</h1> +<p>Blog posts should be placed into the <code>/content</code> directory and be named based only on their post date. See an example here:</p> +<pre><code class="markdown">2048-01-01.md</code></pre> +<p>PHPetite will create a <code>target</code> by appending the page title inside the article to the file's date name. So a markdown file with the following content:</p> +<pre><code class="markdown"># Bladerunner Rocks + +Bladerunner is amazing because blah blah blah...</code></pre> +<p>will render out the <code>target</code> link as:</p> +<pre><code class="markdown">example.com/#2048-01-01-bladerunner-rocks</code></pre></section><section tabindex="0" role="document" aria-label="Requirements +" id="requirements"><h1>Requirements</h1> +<ol> +<li><code>PHP 7.3</code> or higher</li> +<li>If using Linux, you will require the following packages in order to convert your images to base64 encoding:<ul> +<li>PHP XML -> <code>sudo apt-get install php-xml</code></li> +<li>PHP mbstring -> <code>sudo apt-get install php-mbstring</code></li> +</ul> +</li> +</ol> +<p>That's really it!</p></section><section tabindex="0" role="document" aria-label="Generating This Blog +" id="generating-this-blog"><h1>Generating This Blog</h1> +<p><strong>Important</strong>: Before building and uploading your single file blog, be sure to edit all the proper details found inside the <code>_phpetite/_config.php</code> file. This includes your domain, site title, author name, etc. </p> +<p>Most users won't ever need to fiddle with the other files inside the <code>_phpetite</code> directory.</p> +<hr> +<p>Get <a href="https://git.btxx.org/phpetite" title="PHPetite">PHPetite</a> in order to convert a collection of Markdown files into a single <abbr title="Hyper Text Markup Language">HTML</abbr> file with inline <abbr title="Cascading Style Sheets">CSS</abbr>.</p> +<ol> +<li>Make proper edits to the <code>/_phpetite/_config.php</code> file</li> +<li>Write posts in <code>/content</code></li> +<li>(Optional) include any images under the <code>/content/img/</code> directory</li> +<li>From the command-line run:</li> +</ol> +<pre><code class="shell">make</code></pre> +<p>This will generate both the single file <abbr title="Hyper Text Markup Language">HTML</abbr> page, along with an <code>atom.xml</code> file for the use of an optional RSS feed.</p> +<p>These two files are output into the <code>_site</code> directory.</p> +<h2>Looking for more advanced options?</h2> +<ul> +<li><a href="#adding-pages">Adding Custom Pages</a></li> +<li><a href="#2021-02-07-converting-from-jekyll">Converting from Jekyll</a></li> +</ul></section><section tabindex="0" role="document" aria-label="Adding Custom Pages +" id="adding-pages"><h1>Adding Custom Pages</h1> +<p>To add your own custom pages, simply create a Markdown file under the <code>content/_pages</code> directory. PHPetite will take it from there!</p> +<h2>Some Caveats</h2> +<p>Any page you create will be automatically added to the <code>footer</code> navigation section. If you wish to hide individual pages from showing in the <code>footer</code>, do so via CSS:</p> +<pre><code class="css">footer a.slug-name-of-your-page { + display: none; +}</code></pre> +<p>If you want to remove the <code>footer</code> navigation altogether, add the following to your <code>style.css</code> file:</p> +<pre><code class="css">footer .footer-links { + display: none; +}</code></pre></section><section tabindex="0" role="document" aria-label="About PHPetite +" id="about"><h1>About PHPetite</h1> +<p>This entire website is a single <abbr title="Hyper Text Markup Language">HTML</abbr> file. It was generated by <a href="https://git.btxx.org/phpetite">PHPetite</a>.</p> +<p>If you notice any issues or want to help make this project even better, <a href="https://git.btxx.org/phpetite">check it out on cgit</a>.</p> +<h2>Feature Wishlist</h2> +<p>☐ Implement a "watch" system for local development (auto-rebuilds)<br> +☐ Detailed documentation for converting existing static sites to PHPetite<br> +☐ More theme / styling options!<br> +☐ Proper accessibility audit<br> +☑ <del>Allow custom fonts to be set as Base64 strings</del> (<a href="#2021-02-27-converting-custom-fonts-to-base64-strings">details here</a>)<br> +☑ <del>Set images as inline Base64 strings</del><br> +☑ <del>Basic RSS feed</del><br> +☑ <del>Automatically add new pages to footer nav</del><br> +☑ <del>Compress inline CSS</del></p></section> + <section tabindex="0" role="document" aria-label="Home" id="home"> + <div class="site-info"><h1>A Single File Blog</h1> +<p>PHPetite (/p/h/pəˈtēt/) is a single file, static blog generated from PHP. Based off the very minimal and awesome <a target="_blank" href="https://github.com/cadars/portable-php">portable-php</a></p> +<h2>Key Features</h2> +<ul> +<li>Entire blog is rendered in a single HTML file</li> +<li>Inline, compressed CSS</li> +<li>All images converted into base64 encoding</li> +<li>Minimal requirements / no heavy build tools</li> +</ul> +<hr> +<p>Feel free to look through the documentation found posted on this site or directly in the github repo.</p> +<h2>Getting Started</h2> +<ul> +<li><a href="#requirements">Requirements</a></li> +<li><a href="#generating-this-blog">Generating This Blog</a></li> +<li><a href="#structure">Structuring Blog Posts</a></li> +<li><a href="#adding-pages">Adding Custom Pages</a></li> +</ul></div><hr> + <nav> + <ul class="toc"> + <li><a href="#2022-06-28-cleaning-things-up-future-phpetite-updates"><span> Cleaning Things Up & Future PHPetite Updates +</span></a> <time datetime="2022-06-28">2022-06-28</time></li><li><a href="#2021-02-27-converting-custom-fonts-to-base64-strings"><span> Converting Custom Fonts to Base64 Strings +</span></a> <time datetime="2021-02-27">2021-02-27</time></li><li><a href="#2021-02-18-disable-image-to-base64-conversion"><span> Disable Image to Base64 Conversion +</span></a> <time datetime="2021-02-18">2021-02-18</time></li><li><a href="#2021-02-08-automatic-rss"><span> Automatic RSS +</span></a> <time datetime="2021-02-08">2021-02-08</time></li><li><a href="#2021-02-07-the-benefits-of-a-single-file-blog"><span> The Benefits of a Single File Blog +</span></a> <time datetime="2021-02-07">2021-02-07</time></li><li><a href="#2021-02-06-converting-from-jekyll"><span> Converting from Jekyll +</span></a> <time datetime="2021-02-06">2021-02-06</time></li><li><a href="#2021-01-09-markdown-examples"><span> Markdown examples +</span></a> <time datetime="2021-01-09">2021-01-09</time></li> + </ul> + </nav> + </section> + </main> + <footer> + <small>Last updated on February 2, 2024</small> + <div class="footer-links"> + <small><a class="structure" href="#structure">Structuring Blog Posts</a><span class="divider">/</span><a class="requirements" href="#requirements">Requirements</a><span class="divider">/</span><a class="home-content" href="#home-content">A Single File Blog</a><span class="divider">/</span><a class="generating-this-blog" href="#generating-this-blog">Generating This Blog</a><span class="divider">/</span><a class="adding-pages" href="#adding-pages">Adding Custom Pages</a><span class="divider">/</span><a class="about" href="#about">About PHPetite</a><span class="divider">/</span></small> + </div> + </footer> +</body> +</html> |