DEV Community

Cover image for Screw it! I've Developed My Own Static Site Generator!

Screw it! I've Developed My Own Static Site Generator!

Shazin on August 15, 2024

Web development nowadays has become so complicated thanks to the creators of thousands of new ways to do the same thing. In the early days of web d...
Collapse
 
goodevilgenius profile image
Dan Jones

I've done this before too. I had an incredibly simple site that I wanted to quickly and easily modify from a config file, and some templates. A static-site generator intended for blogs or other content-heavy sites seemed heavy-handed, so I rolled my own SSG using a Makefile, a build script in node, some template files, and a config file in TOML.

Pretty easy, and much better than a more involved Hugo/Jekyll/whatever site.

Refs: site and repo.

Collapse
 
shazin profile image
Shazin

I've just checked that. It's cool

Collapse
 
michaelmior profile image
Michael Mior

Of course if you ask ChatGPT the opposite, it will give some good reasons: "React is a popular choice for static site generation (SSG) due to several key factors that leverage its component-based architecture and the growing ecosystem of tools around it." (It then listed 7 reasons I won't repeat here.)

Collapse
 
shazin profile image
Shazin

Try this prompt: Why React is Not Suitable for Content Driven Sites

Collapse
 
michaelmior profile image
Michael Mior

My point is, you can generally get ChatGPT to say what you want it to say when it comes to matters of opinion :) I have no doubt that it has plenty of negative things to say about using React in that scenario. I wasn't trying to suggest React is great. I just don't think argument by ChatGPT is particularly effective.

Thread Thread
 
shazin profile image
Shazin

Well, to be honest that's actually my opinion, this is just lazy writing. I used chatGPT to generate that portion of the article

Collapse
 
best_codes profile image
Best Codes

Try running a lighthouse report on your site. It can help you optimize performance. (Go to dev tools by pressing CTRL + SHIFT + I, this is available in Chromium-based browsers).
Lighthouse

Collapse
 
shazin profile image
Shazin

Thanks for the suggestion 😃

Collapse
 
rudolfolah profile image
Rudolf Olah

There's a list of projects that every developer has to create for themselves, back in the day one of those is a CMS with PHP, another is a game (or beginnings of an unfinished game engine 😅), and sometimes it's a static site generator.

The last time I made a static site generator, I used Jinja for the templates with gettext for generating translations.

😎 Very cool that you used GTK for the file uploading dialog.

If the site were built for other people to edit/review, it might be worth storing all those Markdown files in Firebase Storage; larger sites with more content writers/editors end up using Contentful or some other headless CMS.

The dynamic ambient background is a cool effect; I've used Unsplash (manually) selecting a random or slightly relevant cover image for posts. There's a lot of directions you can go in when you're writing the static site generator!

Collapse
 
shazin profile image
Shazin

Hey, appreciate it man. Since I don't write a lot that's why I didn't consider storing articles on Firestore. The posts are currently staying at my github. If they grow in number I'll definitely do it. Thanks for the suggestion 😃

Collapse
 
tythos profile image
Brian Kirkpatrick

Nice! I've seen a couple of different approaches to this problem lately, and they've all been pretty creative (in a good way). I'm particularly happy that this seems to be the trigger for more people to share their content! "Hey, I put all this work into a content system, I might as well start using it."

Collapse
 
shazin profile image
Shazin

Thanks

Collapse
 
ademagic profile image
Miko

Nice post, and your site looks great! I've tried this too, but I'm not as patient as you, and leaving the project alone for a while made me forget too much, it was more headache than it was worth. IMO the biggest value of doing this is what you learn.

My current site miko.ademagic.com is built on Astro and took me like 3 cli commands to set it live. Now i work on it slowly and continuously, it's great.

Collapse
 
best_codes profile image
Best Codes

Very neat. :)

I left a comment on your site.

Collapse
 
rebeccapeltz profile image
Rebeccca Peltz

Thanks for sharing. This is inspiring!

Collapse
 
shazin profile image
Shazin

Thank you for reading ☺️

Collapse
 
pierre profile image
Pierre-Henry Soria ✨

Good read! Thanks for sharing your journey here Shazin

Collapse
 
anna_lapushner profile image
ANNA LAPUSHNER

Thank you! I especially like the dynamic ambient background. It looks beautiful!

Collapse
 
shazin profile image
Shazin

I am glad you liked it.

Collapse
 
tbc1989 profile image
Thibaut TBC prospère

hello everyone! I'm new here👍

Collapse
 
bluedream0801 profile image
Declan

How are you
currently, we are going to build new coin marketplace similar pump.fun or base.fun.
If you have good experience with MERN Stack, I want to collaborate with you

Collapse
 
shazin profile image
Shazin

Hey, let's connect. @srshazin/x

Collapse
 
prakirth profile image
Prakirth Govardhanam

That's a really cool website! and an interesting journey to building your own SSG!
I am currently learning the MERN stack and building some fundamental applications. I am trying to get your project's tech-stack overview. Could you confirm if your tech stack was as follows :

  • NextJS and Node in the backend,
  • HTML,CSS, JS and python in the frontend,
  • Custom integration tool (fit),
  • Firebase for storage,
  • GitHub for hosting source code and
  • Cloudflare for deployment

If you feel comfortable, please do share the repo. Thanks! 😄

Collapse
 
shazin profile image
Shazin

Hello, I am actually interested in sharing my repo but it's not well organized currently. I'll put a link when it's ready.

My tech stack was fairly simple

  • HTML, CSS, JavaScript for production No backend
  • Firebase for storage
  • GitHub for hosting my codes and articles
  • Cloudflare for deployment
  • Python was the build tool for this SSG
Collapse
 
prakirth profile image
Prakirth Govardhanam

Thanks a lot for the detailed answer. 'Build tool' is something that I heard of, but never saw in implementation. That was insightful! Super cool!

Collapse
 
denys_bochko profile image
Denys Bochko

This made me think of the process and I have a question for you then, why render page on the server with Python every time page loads, instead of building html file during the deployment and having static content on the server already (going to be faster), you are building the content locally anyways. I know the speed difference is not going to be noticeable for people, but just out of curiosity.

I also built a custom blog some time ago, but I used php. now it is much easier to build it since there are good open-source text editors out there, which was my problem back in the days.

Collapse
 
shazin profile image
Shazin

why render page on the server with Python every time page loads, instead of building html file during the deployment and having static content on the server already (going to be faster)

I think you misunderstood the use of python here. I am doing exactly what you're suggesting. I am not using python on the server to generate page on the run time. I am using python to generate static HTML pages during deployment, I'm using BeautifulSoup to insert dynamic contents during build time. On the deployment I have only html css and JavaScript nothing else.

Collapse
 
heyeasley profile image
heyeasley 🍓🥭

What's SSG role ?

Collapse
 
shazin profile image
Shazin

I am quite not sure what you are asking about. Asking about what is SSG or role in my project?

Collapse
 
bh4skar profile image
Bhaskar Prajapati

Great article. Love it

Collapse
 
bh4skar profile image
Bhaskar Prajapati

I just enjoy it when people do something out of te box

Collapse
 
shazin profile image
Shazin

Thanks. Appreciate it

Thread Thread
 
jami_dave_9f388b1c1f069a5 profile image
jami dave • Edited

It sounds like you're excited about your new project! But just to clarify, **Lulubox Pro APK is a mobile application related to gaming mods and isn't directly related to web development or static site generators. If you meant to reference something related to that in a fun way, you might say:

"Congrats on building your own static site generator! It's like creating your own Lulubox Pro APK but for the web—unlocking new levels of customization and control over your site. Keep pushing those updates!"

Just be careful with using or sharing APKs related to gaming mods, as they often come with legal or security concerns.

Collapse
 
polipo_gio profile image
Giovanni Proietta

What if instead of uploading an image you would use any Figma design.
Let's connect Shazin and I show you how deep the rabbit hole goes.

Collapse
 
shazin profile image
Shazin

Drop you twitter/x

Collapse
 
polipo_gio profile image
Giovanni Proietta

@GiovanniOnX

Thread Thread
 
shazin profile image
Shazin

Let's connect @srshazin that's mine

Collapse
 
mohammadparsajavidi profile image
mohammadparsa-javidi

That's so useful 👌
Thanks for follow my Github accounts

github.com/Mohammadparsa1384