I added a step to the publish script that actually uploads the updated index.html file to the server. No more manual scp. I did this with the scp module. Super simple stuff:

    const sendToServer = () => {
        let options = {
            file: './public/index.html',
            user: '(it's a secrect)',
            host: 'sbgood.ca',
            path: '/var/www/sbgood.ca/html'
        scp.send(options, (err) => {
            if (err) {console.warn(err)}
            else (console.log('uploaded'))
I should really fix some basic styling to make this like responsive. /shrug
Woops. So I got busy and it's been a while. I think this is hilarious because this is exactly how blogs work except that the blog itself is incomplete. Anyways. I rebuilt my survivor pool website and I think that it is pretty slick. So go look at that: https://shbgm.ca/survivor :)


Jan 7, 2018

The first version of my publishing script is done! I can now run node publish.js and all of the posts in my posts folder are processed resulting in an index.html file with all of the posts. The next step with this script is going to be parsing markdown so I can stop writing in html. After that I’m going to look at having it publish to my server if I am ready to ship my new post.

Here’s what I did


So far the only thing I’m requiring is fs:

const fs = require('fs')  

fs uses callbacks, so I decided to promisify the two methods I needed.

 * Promisified fs.readdir()  
 * @param {string} directory the directory to read  
 * @returns {promise} promise resolves to array of files in directory  
const readdirPromise = (directory) => {  
    return new Promise((resolve, reject ) => {  
    fs.readdir(directory, (err, data) => {  
        if ( err ) reject(err)  

 * Promisified fs.readFile()  
 * @param {string} file the file to read  
 * @returns {promise} promise resolves to <Buffer>  
const readFilePromise = (file) => {  
    return new Promise((resolve, reject) => {  
        fs.readFile(file, (err, data) => {  
            if (err) reject(err)  
        } )  


I like to break down my work into tiny little functions. Sometimes I succeed in creating beautiful functional javascript. Other times I make a mess. The first thing I wanted to do is get all of the posts in the posts directory into an array.

 * reads the posts directory and outputs posts string  
 * @param {string} postsDirectory){ the directory where posts live  
 * @returns {array} array of promises that resolve into posts  
const readPosts = (postsDirectory) => {  
    return readdirPromise(postsDirectory)
        .then(data => 
            data.map(filePath => {  
                return readFilePromise(postsDirectory + '/' + filePath)
                    .then(buffer => 
                        `<div class='post'>${buffer.toString()}</div>`)  

Then I wanted to read the template file. I decided to try using a new async function for this. It made the code really simple and readable. I'll probably convert all these other functions to async at some point.

 * reads the template html file and outputs promise  
 * @param {string} templateFile path to template file  
 * @returns {promise} promise that resolves into template string  

async function readTemplate(templateFile) {  
    const template = await readFilePromise(templateFile)  
    return template.toString()  

Once I had thow two functions I picked up my pick-axe and got to work on my chain o’ promises.

Promises promises

    .then(posts => 
    .then(posts => {  
            .then(template => 
                addPosts(template, posts.reverse().join(' ')))  
            .then(index => 

A couple of small helper functions took care of adding the posts into the template file (the template has “$POSTS” so the posts know where to go) and to output the final index.html.

const addPosts = (template, posts) => {  
    return template.replace(/\$POSTS/, posts)  

const writeIndex = (index) => {  
    fs.writeFileSync('./public/index.html', index)  

And that took way too long to write in html. Taking a break and then looking into adding markdown support.

Including HTML Files inside other HTML files

Jan 7, 2018

So I left off wanting to separate my posts in different files so I wasn't writing everything directly into index.html. My basic idea was to create a 'posts' folder that had all the posts like: post1.html, post2.html etc.

This turned out to be more complicated than I had expected

This is pretty easy to accomplish in jquery. You can use `.load()` to load in another html file. The other common solution was to use an ajax request to fetch the other page and insert it into the current one. I don't like either of these options. I want to try and use vanilla js as much as possible and I want to be able to preview my content on local without having to sending it to the server first. I'm currently just `scp`-ing to my server.

Stack Overflow showed me the jQuery and ajax solutions, but there was also this interesting bit of vanillar js:

``` function load_home() { document.getElementById("content").innerHTML=''; } ```

(I'll eventually get syntax highlighting going).

So I tried this approach and... it worked! Kind of. I could embed another html document into my first one but it basically nested an entire second dom structure into the existing doc. Not what I had in mind. It also only showed up in a weird window about 1/3 the width of the browser window. I started preparing myself for banging my head against a wall until I could figure out how this worked.

Instead I abandoned that idea. Feels good to decide something is getting to complicated. There has to be a better way!Which leads me to my latest idea. I can compile an index.html file using node. Basically I have a template.html file and a bunch of post files. I'm going to write a node script that reads them all and output a final index.html file with all the posts. I can then preview this file locally before publishing. Because I'm doing this outside of the page rendering it actually keeps things much more lightweight. So, that is what I'm going to work on now.


Jan 6, 2018

I realised that there was nothing here telling folks who I am or what I do or anything like that. So I decided to create a kind-of about page. I see this being a blend of about and major life events/work stuff. Right now, it is a blank html page, just like this one.

Now that I've written three posts directly into the html document it is beginning to get kind of tiresome. I think the next thing I'll do is write a bit of javascript to read posts from a folder and append them to the page. That way I can create a separate file for each post. It will also let me write in markdown and convert it to html.

Some basic styling

Jan 6, 2018

Alright, so I added some pretty crappy css directly into my index.html file. Part of this challenge will be trying to see how long I can stay sane without breaking out my styling, scripts and html. I know this isn't how someone would typically approach this.

I've been using `create-react-app` for a lot of my side-projects and it seems pretty heavy for the things I'm doing. So that is what inspired this challenge. The idea is to start as simple as possible and add complexity as it is needed. Right now, this is just a single index.html file. I like the idea of building out a blog while blogging about the build. I don't know exactly where we'll end up and I could abandon this project tomorrow (I won't).

I should also point out that I have pretty much no design skills. So this is going to look ugly for a while to come. :)

Hello World,

Jan 6, 2018

I want to try something a little different with this site. I'm going to build a blog on it from scratch using as much vanilla html and js as possible. I'll be documenting my progress on here just like a blog.