How I Built My New Site

Long ago, shortly after I had started hearing about React on Hacker News, I came across a post that suggested that it was fairly trivial to build a blog (or any website in general) with ReactJS and NodeJS, and that you could not only have dynamic routing and client-side rendering, but also render views statically server-side.

Architecture

For years, I had been hearing the outcry about Wordpress (usually related to it's unnecessary complexities and security faults), and had for the most part, agreed with them. So, for a while I fiddled around with NodeJS and ReactJS for a few months and finally reached a breakthrough point where I really felt I had the knowledge to build this site by hand, and hopefully, get a good introduction to this new ReactJS thing, and this old (but totally new to me) thing called NodeJS.

The stack I chose is fairly standard:

• expressjs for the routing
• express-react-views for displaying statically rendered ReactJS views
• ReactJS for the front-end views
• GulpJS for build and deployment

To reduce processing time in my release environment, most of the pages are rendered and built once in my GulpJS deploy task to an HTML file using ReactJS's React.renderToStaticMarkup method (this avoids a render method on every request, and allows browsers to cache more). This page is the exception, of course.

Development

Building the site was just a develop/refresh cycle, with what I would assume is fairly vanilla ReactJS, so I won't bore you with the details. GulpJS, along with a watch task, provided extroardinary amounts of help here.

Deployment

Once development was finished and it had a style that I enjoyed (simple does it!), I began focusing on deployment. I currently use nearlyfreespeech as my host provider, and I decided to stay with them if I could. Luckily, nearlyfreespeech hasn't stood still since I started hosting with them in 2012, and they have since enabled the usage of long-running processes, and proxies to connect them to. Of course they would also have the most recent version of NodeJS and NPM installed.

The downside to nearlyfreespeech's current pricing model with continuous running processes is that Node can tend to be fairly resource heavy.

For deployment, I fell back on GulpJS again. Unfortunately, there was not any first-hand support for SSH in GulpJS, so I used a plug-in called, aptly enough, gulp-ssh (notice the pattern here?). This plug-in competently handled connecting to SSH, however it was fairly limited in how it sent files - it only allowed files to be sent one at a time.

What I wanted was an SSH version of gulp.dest. I ended up adding a prototype method to gulp-ssh that did exactly that, called using gulpSsh.dest. I still have my doubts as to whether that functionality should exist independently in a separate plug-in, perhaps called gulp-ssh-dest, or something similar, operating in the spirit of Gulp. For now I will leave it as is, and perhaps come back to it later if I decide to make a separate plug-in which just covers that functionality.

You can view the source for the site on my github. My updates to the gulp-ssh plug-in can be reviewed and improved as well.