_site/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
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 &amp; 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 &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><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 &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><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>&nbsp;<a href="#" class="footnote-backref">&#8617;</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)&nbsp;<a href="#" class="footnote-backref">&#8617;</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&nbsp;<a href="#" class="footnote-backref">&#8617;</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 -&gt; <code>sudo apt-get install php-xml</code></li>
<li>PHP mbstring -&gt; <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>&#9744; Implement a "watch" system for local development (auto-rebuilds)<br>
&#9744; Detailed documentation for converting existing static sites to PHPetite<br>
&#9744; More theme / styling options!<br>
&#9744; Proper accessibility audit<br>
&#9745; <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>
&#9745; <del>Set images as inline Base64 strings</del><br>
&#9745; <del>Basic RSS feed</del><br>
&#9745; <del>Automatically add new pages to footer nav</del><br>
&#9745; <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&#601;&#712;t&#275;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 &amp; 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>