Coding Journal

Jordan Vidrine

Daily Coding Journal

A Self-taught coder from the Cajun Prairie in rural Louisiana, currently working as a designer for Discourse.

I am always trying to better myself, and do so through learning new skills, trying out new routines, traveling, and pouring energy into hobbies. Since 2014, I have been recording, editing, and producing my own music under the name Skies Speak.

August 27th & 28th

Awhile back, a friend of mine suggested that to get deeper with my learning, I should attempt to build my own static site generator. I had this in the back of my head for the past couple of months and decided to take a break from my course work to dive into this project.

Coding the project

I was able to create the code to get the basic version of this site working properly. I dove into some new concepts getting this project to work, working mainly with how NodeJs’ fs module works and using that to parse, create, and delete files was challenging but highly enjoyable. After this project, I would like to go deeper with the fs module and create more programs that can work with the users file system directly.

The code can be viewed in its current state at my repository here: https://github.com/jordanvidrine/InGen

Structure

The current folder structure for the site builder will look like this.

project
|___content
|   |___assetts
|   |___sections
|   |   |   sections.md (one .md per section)
|   |   index.md (+ more .md if you want other pages)       
|___templates
|   |___css
|   |   |   styles.css (any css files you want to use)
|   |   base.html (one .html file for each template)

How it works

To use the site builder, you would first install node, install the project dependencies, and run node buildScripts/buildMultiple.js

This script will run, and parse any of the .md files a user has created in the content folder. Any .md files inside of sections will be parsed and converted to HTML and saved in an object for handlebars to use.

Each .md file inside of the main content section will be parsed and converted to HTML using the data stored in front matter as options letting the script know how to process the file. (The markdown files inside of the sections area do not need to use front matter as they are only converted to HTML to be injected using handlebars)

Here is a basic example of how the files should be created.

content/index.md

---
title: Jordan's Page // to be used as the page title
style: splendor // defines the stylesheet in /templates/css to use
template: base // defines the template file iside of /templates to us
---
### Index content
Index page content here. (This could be left blank if you plan on injecting data from the section files to build your site.)

content/sections/about.md

### About Section
About section text.

templates/base.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href=''>
  </head>
  <body>
  </body>
</html>
<!-- templating using handlebars would be inserted wherever needed-->

After these files are created running node buildScripts/buildMultiple.js will build a _site folder in your project directory and store all of the converted files, as well as assetts like css, and imgs that are used.

The project is currently a work in progress and will allow for more complex uses as it comes along. Currently, only one main page is supported, but multiple section files are supported.

I will continue my work on this code, adding the ability for multiple pages to be created.

Back to blog...