DEV Community

Minh Hang Nguyen
Minh Hang Nguyen

Posted on

Static Site Generator - Support static files

Throughout the previous week, I was exploring Docusaurus and found that they have a feature to support static files. I find this feature very useful for any static site generator since images, favicons, stylesheets, etc. are very common parts of a webpage. Therefore, I decided to add this feature in my tool.

Planning

To add this feature, I sketched out a few tasks to finish:

  1. Add markdown support for image syntax
  2. Create a folder inside the output folder to store all assets
  3. Save all static files from user input to assets folder
  4. Parse the saved assets to the html file

Implementation

  1. While finding a way to parse image syntax, I decided to fully implement support for markdown. I used markdown-it and highlight for this task.
  2. I added a new module - copyAssets and imported fs-extra to easily copy the assets from users' folder to the default assets in output folder.
  3. Since the process of generating HTML file is getting more and more complicated, I separated a part of the logic into the generateHTML module. Apart from the existing logic, I also added code to replace old image path to the new one that I just create.

The actual implementation turned out to be more complicated that expected. In step 1, 2, 3, my original plan was to code them myself but then I had to look for libraries to simplify the process, otherwise it would take too much time and there might be unnecessary errors.

Next step

The feature is currently working but there are still rooms for improvement.

  1. For now, t he tool only accepts static files through the config json file. It should accept the assets as an option. For example, users should be able to use mh-ssg -i file.md -a assets.
  2. Currently all files in user input folder are copied to the default assets folder. However, the tool should go through all the files and only filter out image files before copying so that the storage is not wasted.

Top comments (0)