(WIP) How I build pure html blog?

Published: 12 Apr 2021Updated: 29 Nov 2021

I had been working on developing some personal website with Gatsby, mid way through I said to myself, 'Your are not gonna need static website framework... probably'. Dont get me wrong, tools and frameworks like Gatsbyjs, Nextjs or remix_run are great tools and if you want more done in your personal blog like analytics, payment gateway, search, rss feed, these services are probably your best fit. They provide array of plugins and themes that's easily pluggable which I did not need. Also I am not a html purist carrying flame and pitchfork against javascript and frontend frameworks. We have come to an era of web apps where we have access to complex software solutions inside browser regardless of OS or device. And this can be mostly attributed to the progress in javascript and frontend eco system. I just had some free time in hand and wanted my website to be simple and fast.

You dont need static website framework
...probably

Bottom line, I wanted simple html website without too many javascript dependencies and configs. So I scraped what I had in progress with gatsby and started listing out what my requirements were.

Requirements

basic html and css blog
I write markdown and chugs out html blogs
It shows created date and last modified date
looks pretty decent
is responsive and accessible
seo optimized
lists latest blogs
builds fast

Libraries and tools

Through different improvements and iterations what I have right now can be found in my github repo. Please do raise an issue or leave a feedback.

Processes

Now lets break down how these requirements were met.

1. basic html and css blog

I started out with basic html builder using javascript string templates and html build from marked. I created a basic function createHtmlFrame that adds html wrappers to html generated from markdown file, which we will follow up on next point.

const createHtmlFrame = ({ content }) =>
  `
  <html>
  <head></head>
  <body>
    <header></header>
    <main>
      <article>
        ${content}
      </article>
    </main>
    <footer>
    </footer>
  </body>
  </html>
  `

So when I write following md:

# hello

world

Following would be output:

<html>
  <head></head>
  <body>
    <header></header>
    <main>
      <article>
        <h1>Hello</h1>
        <p>world</p>
      </article>
    </main>
    <footer></footer>
  </body>
</html>

2. I write markdown and chugs out html blogs

This section will cover two of my requirements:

I write in md and chugs out html blogs

const marked = require("marked")
marked.use({ renderer: createRenderer(setTitle) })
marked("### some title") // <h3>some title</h3>

3. It shows created date and last modified date

4. looks pretty decent

typography
code highlighting
quotes

5. is responsive and accessible

6. seo optimized

7. lists latest blogs

What I gained

This resulted in very little javascript dependencies.

My package.json:

{
  .
  .
  .
  "dependencies": {
    "highlight.js": "^10.7.2",
    "linkedom": "^0.7.1",
    "marked": "^2.0.1"
  },
  .
  .
  .
}

fast build ~ 30 seconds

Other workarounds

Use imgur for images

Currently images are hosted in imgur. I guess this can also be optimized to use WebP version instead of jpeg version. Also Picture html element is highly recommended to be used in the website. However for now I have opted to host some optimized image and imgur and link them as follows

![alt text](https://link-to-image)

How does it scale?

no idea. will see as we go. i dont plan to write blogs that often. maybe a blog per month or so. so it should be okay for 2-3 years. It was done as experiment anyways.

Lighthouse score

This website has excellent lighthouse score as shown in the screenshot below for this particular page.

screenshot for lighthouse score for link:https://www.pravinbashyal.com/blogs/how_i_built_pure_html_blog.html

Build time

Currently the build time is pretty fast. Most of the builds run under 30s. However as there are only couple of files to transform, this might increase with the number of blogs. I will have to keep an eye on how this scales over time.

screenshot for build time

Requirements#

Libraries and tools#

Processes#