Building a Polymer Static Site Generator
Note that chrisostrouchov.com
no longer uses polymer for generating
the static site. The reason for this is that dynamically generated
sites do not fare well with search engines. Otherwise I would say that
using polymer for “on the fly” page generation worked quite well. Page
load speeds were fast with the help of cloudflare and using the PRPL
pattern. Full source code is available on Gitlab and the website is
viewable at polymer.chrisostrouchov.com.
There are many static site generation frameworks out there such as
Jekyll and Hugo. Previously my site was written using Jekyll but I
often ran into limitations using the framework. I have also tried
using Hugo by helping a friend Alex set up a personal website. I have
created a compiling free static site generator that doesn’t even
deserve to be called a framework. This is because the 60 line python
script with no dependencies is used to create a robots.txt
,
sitemap.xml
, and index the blog. That’s it! The rest of the heavy
lifting is done with Polymer and a few custom elements that run on the
website. All site content is written in markdown just like traditional
static site generators but is instantly viewable. Feel free to view
the code.
I love Polymer. I have already created two websites material toolkit, University of Tennessee EggDrop using Polymer and wanted to finally use it to make my own personal site. This requirement alone restricted using traditional static site generators since they were not designed for single page app where each view does not necessarily correspond to an html file.
Additionally I wanted to go one step futher and try to re-imagine what
a static site could look like when using web components. For instance,
I have <code-highlight>
, <markdown-it>
, <google-analytics>
and
<math-tex>
elements. These elements alone provide features that are
often hard to get working with a blog. Since all pages are markdown
files rendered with the custom element <markdown-it>
, I have support
for code and math throughout the entire site. Also no compiling is
necessary to view the markdown files on the website!
Adding a page to the website is as simple as adding a markdown
file to the page/
directory and adding the page to
<app-route>
. For example, if you wanted a new page about
with
route polymer.chrisostrouchov.com/about
you would create
pages/about.md
and modify src/my-app.html
as such.
|
|
Making blog posts easy was the main goal of this framework. Each
blog post is a markdown file placed in the blog/
directory with some
additional json
front matter. A detailed description on json
front
matter can be found on the Hugo front matter documentation. An example
of the front matter is shown bellow. The resulting blog post url is
polymer.chrisostrouchov.com/blog/<filename>
.
|
|
To summarize I hope I’ve shown a neat way of simplifying static site
generators by not requiring them to generate the html pages
themselves. In theory any language could be used to create the
robots.txt
, sitemap.xml
and index the blog to an index.json
file. This is my first blog post but am hoping to do many more!