The landing page for my newsletter is a super simple website consisting of a signup form, a navigation bar, and a list of past issues. So I initially created it in plain HTML and CSS and deployed it. Great!
As I created a few more pages and started to update the list of past issues I found myself having to update the same code in a few places and updating was already becoming a pain.
I made the decision when I started that I wanted a very simple site and had ruled out using products such as Gatsby, Jekyll, Hugo etc. as I felt they were overkill for a simple landing page. But I could do with a little assistance, so after a bit of Googling, I came across a project called Sergey.
Sergey allows me to break up my HTML files into smaller plain HTML components which I can then insert where needed. Sounds Perfect!
So after a little playing this 👇
Became this 👇
I did not have to change any code just cut and paste the code for each component into a new file and replace with a
<sergey-import src="component_name"/>
It really was as simple as it sounds.
I would say it took about an hour from discovering Sergey to redeploying the site.
I can now update my sidebar from one file, update issues in a single location etc, without losing much of the simplicity of the site, it is still just a bunch of HTML files which can easily be deployed to my hosting platform.
So if you are looking for a super simple solution to avoid some repetition I would recommend taking a look at Sergey they have a great walk through on the website.
Sign up to our free weekly newsletter and stay in the loop with the latest and greatest web development projects on GitHub at www.trendingprojects.com
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (1)
Like Jekyll
{% include ... %}