~uglyduck/uglyduck.srht.site

ref: 494dcd504bd6ebb68b59e8a04057b0a087570d38 uglyduck.srht.site/_site/89-posts-one-file/index.html -rw-r--r-- 8.1 KiB
494dcd50 — Bradley Taunt tweaking overall design - still very much a WIP 6 months ago
                                                                                
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
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      89 Blog Posts in a Single HTML File &middot; Ugly Duck
    
  </title>
  <meta name="description" content="User interface designer, developer and hardware tinkerer">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>89 Blog Posts in a Single HTML File</h1>
      </header>
      <hr>
      <article class="">
        <p><em>Posted on <time datetime="2021-03-22T00:00:00-04:00">March 22, 2021</time></em></p>
        <hr>
        <p><br /></p>

<p><em>This is no longer the current setup of my blog</em>. I have switched back to Jekyll for performance reasons. I’ll be leaving this post up as a point of reference though :)</p>

<hr />

<p><br /></p>

<p>This is my personal blog (if that wasn’t already obvious). I currently have 89 blog posts living here. But I have done something magical today:</p>

<p>All of these articles are rendered inside a <em>single HTML file</em>. 🤯</p>

<h2 id="what-sorcery-is-this">What Sorcery is This?!</h2>

<p>No magic here - I’m just using my own personal static site generator called <a href="https://phpetite.org">PHPetite</a>. You can find all the code and more information about PHPetite on the <a href="https://github.com/bradleytaunt/phpetite">official Github repo page</a>. Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!</p>

<h2 id="pingdom-stats">Pingdom Stats</h2>

<p>Before we get into more details on how everything is built, let’s take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):</p>

<ul>
  <li>99 Performance Grade</li>
  <li>951 ms Load Time</li>
  <li>231.3 KB Page Size (thank you Netlify compression!)</li>
</ul>

<p><a href="https://tools.pingdom.com/#5e169d6a82000000">See all the Pingdom details for yourself</a></p>

<p>Now the <code class="language-plaintext highlighter-rouge">Page Size</code> will certainly change as more blog posts are added over time, but if the total webpage size is ~230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the <a href="https://1mb.club">1MB threshold</a></p>

<p>I’ll deal with how to load in the content more efficiently when that times comes…</p>

<h2 id="what-about-images">What About Images?</h2>

<p>Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML “website”?</p>

<p>Easy - I don’t load any images at all.</p>

<p><del>I set the default <code class="language-plaintext highlighter-rouge">img</code> source to point to <code class="language-plaintext highlighter-rouge">about:blank</code> and rely on the user to click/tap the image to load it in via the <code class="language-plaintext highlighter-rouge">onclick</code> attribute. For users with JavaScript disabled, I also include a link to the “full size image” in the <code class="language-plaintext highlighter-rouge">figcaption</code> below the image. No sweat.</del></p>

<p>I now simply set any images that are not included in the current, visible <code class="language-plaintext highlighter-rouge">section</code> to <code class="language-plaintext highlighter-rouge">display: none</code>. This avoids breaking things with the RSS feed.</p>

<p>Here is an image example of an old Dribbble shot I created years ago:</p>

<figure>
    <div class="img-parent">
    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons" />
    </div>
    <figcaption><b>Click the placeholder to load in the real image</b><br />Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
</figure>

<p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;figure&gt;
    &lt;div class="img-parent"&gt;
    &lt;img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons"&gt;
    &lt;/div&gt;
    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp"&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre></div></div>

<h2 id="hows-the-seo">How’s the SEO?</h2>

<p>Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it’s my personal blog so I don’t really give a shit.</p>

<h2 id="rss-feed">RSS Feed</h2>

<p>If you recently added my old RSS feed, I’m sorry, but you’ll have to update. The new feed is located at <a href="https://uglyduck.ca/feed.xml">uglyduck.ca/feed.xml</a>. I made this change to avoid spamming the current feed users.</p>

<h2 id="tasty-dog-food">Tasty Dog Food</h2>

<p>At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github.</p>

<p>I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉</p>

      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>