<center>![](https://steemitimages.com/DQmQXTukxxnJ8xi3Z1JKPKZvUjRJh7Zd3KFYiZNCDwZK7cG/image.png)</center>

## Motivation -  I'm cheap when it comes to servers

I've been making slow progress on the **new shiny** <a href="https://steemvids.com">steemvids</a> beta , mostly because I'm throwing myself in the deep end learning nodejs, react, mongodb and everything else that goes with running a full modern web stack. 

The slow progress and high resource requirements are *super frustrating to me* because I prefer to keep things as minimalistic as possible. 

I'm not a witness, I have very little money to spare so it's been a conscious decision on all of my previous steem projects to simply use client-side javascript to do everything inside the users browser instead of server-side.

Keeping my requirements low and doing everything client-side has allowed me to launch and run everything I've made so far on **completely free static web hosting**. 

### Unfortunately the current solutions aren't that simple

I've seen a few projects appear with the general goal of allowing you to display your steemit content on your own domain. 

The most complete and professional imo has been @jesta's <a href="http://reprint.io/">reprint.io</a> <a href="https://en.wikipedia.org/wiki/Symfony">Symfony</a> based system - but it requires a server running PHP to use it.

I'm not trying to disparage @jesta's amazing work on this project - you can see a great example implementation on @charlieshrem's <a href="http://www.geekinprison.com/">geekinprison.com</a> that shows how polished this project already is.

Another option is @ontofractal's great looking <a href="https://github.com/cyberpunk-ventures/glasnost">glasnost project</a>, which is feature packed but requires a VPS or dedicated server to run its Elixir/Phoenix & Mnesia stack.

These are both far more mature, flexible options - but require a certain level of technical knowledge as well as resources to be able to configure and run them. Neither will work on free hosting.

<center>![](https://steemitimages.com/DQmfUp8BcrfDyE2buapGsHnaVLeRkcEzcK3a34tiWYZqDkK/image.png)</center>

### So I made a super simple version of my own

To even compare this to reprint.io is misleading , all I set out for here was the bare minimum code that will :

- Display steemit posts from a specific account
- Work with free static hosting (no nodejs, wordpress or database required)
- Allow direct linking to specific posts with tidy urls
- Work with your own domain name
- Have as few components as possible

## After about 24hrs, here's what I've got so far.

I have a system that currently loads the most recent posts for a specific username, converts the markdown to html and displays it. No comments, votes or extra information is displayed - this is just about the content.

I've put up an example implementation at <a href="https://steemdns.com">steemdns.com</a>, with the (temporary) domain disguising that the whole thing runs on free github pages hosting at https://ausbitbank.github.io .

#### Front page
`https://steemdns.com`
![](https://steemitimages.com/DQmVwQ75DP5KSfKPHdRAfpLQ5nYPAgrLxfFo3WU344ue5Y6/image.png)
#### Expanded post view
`https://steemdns.com/elon-musk-explains-chemtrails`
![](https://steemitimages.com/DQmbHt3tm8JsXjCPNADFChcyM82NxSea6JBFLproM9quScM/image.png)


### The whole system consists of these 4 files:
- **404.html** : Allows us to catch requests for any url, temporarily saving it to sessionstorage (to be retrieved by index.html). This file needed to be padded above 512bytes or it gets ignored by Internet Explorer (TIL)
![](https://steemitimages.com/DQmPrwyszrFrvZXiZWi3brWmftpA2B6iyypRLnxVmFnNuYy/image.png)

- **CNAME** : A plain text file containing "steemdns.com", enabling domain hosting on github pages
![](https://steemitimages.com/DQmbQBeoESTuH3vUrBJSPPVLMAqWTDXEUKTAiEE254GZscq/image.png)

- **Index.html** : Where all the magic happens
![](https://steemitimages.com/DQmbabUaPdSWEYv7tgnbGa616ovitWyGh11dBYaBvc63U62/image.png)
![](https://steemitimages.com/DQmPwUuPL8yJUea3QCnXSs352gfMPod2JusGFWn4mDj7GWV/image.png)
- **loader.js** : A small function to reliably load dependencies from CDN (<a href="http://steemjs.com/">steemjs</a> and <a href="https://github.com/jonschlinkert/remarkable/">remarkable</a>)
![](https://steemitimages.com/DQmXMHb7Zfs4wVbyG7Emw1zWmiBrkQconzDu53DivFMbwfT/image.png)
`function loadScript(url,callback){var script=document.createElement("script");script.type="text/javascript";if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;callback()}}}else{script.onload=function(){callback()}}script.src=url;document.getElementsByTagName("head")[0].appendChild(script)}`

## How you can clone this for yourself

The whole thing can be cloned and modified to show your posts, in moments with just your web browser.

- Signup to <a href="https://github.com/">github</a> (for free)
- Go to my <a href="http://github.com/ausbitbank/ausbitbank.github.io">github repository</a> and click "fork" in the top right corner
![](https://steemitimages.com/DQmbaRJXa12qCh3Bpx7dnejGLR8x2Jf3B9usBwpRKrJWnUm/image.png)
- In your newly created fork, click settings - and change the repo name to `yourgithubusername.github.io`
![](https://steemitimages.com/DQmd4UxKrbSga26rNyeXSPF5yFSpLJ4Ljx76G3MsMnaQia4/image.png)
- Save changes, click through to the index.html file and edit (pencil icon)
![](https://steemitimages.com/DQmU7sfVhTgcJUixNxgdaADyjfyQu229LJcEPNSmNGTJxuM/image.png)
- Change the "steemusername" variable on line 4 to your own steem username , and save the file.
![](https://steemitimages.com/DQmNWJCjUwtwGMnGXxAZj68ji72DTsxSDMYw41hZJoevvcJ/image.png)

**THATS IT!** Your steem posts are now already available at https://yourgithubusername.github.io !

You can also use your own custom domain by editing the CNAME file to your own domain name , and <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">following these instructions to change your dns settings</a> .

## What's missing

This project is only 24hrs old, and while I always intended to keep it minimalist and not show all of the available data I still want to make a few more tweaks.

- **CSS themes**: Very little time has been spent on presentation so far, I'd like to make a few basic swappable theme variants so people can have a presentable blog in a few colour schemes.
- **Pagination** : Currenly only the most recent blog entries are listed, but more should load when the bottom of the page is reached (or a link is clicked)
- **Error handling** : If the steem backend servers are down, the content will not display - there is no caching in this system but having some alternative content to display would probably be a good idea.
- **Display more embedded media** : Youtube videos are not yet auto-embedded , and not all image links are not converted to images yet.
- **Add voting ability** : The steemconnect voting widget would do the trick imo

## Feedback wanted

This post will eventually get tidied up from its current rambly mess, but I'd like some general feedback on the idea - am I the only one that thinks this is useful ? Is there a niche for an even-simpler drop in solution (possibly a single javascript embed?)

I should probably also mention I've been sick as a dog for the past few days and most of this code was written while feverish - please feel free to point out any stupid mistakes I've made or any other improvements you can think of :)

<center><a href="https://steemit.com/@ausbitbank"><img src="https://img1.steemit.com/0x0/https://www.steemimg.com/images/2016/09/21/ausbitbank4275c.png"></a><br /><strong>Lets connect !</strong><br /><a href="https://steemit.com/@ausbitbank">steemit</a> / <a href="https://twitter.com/ausbitbank">twitter</a> / <a href="http://gab.ai/ausbitbank">gab.ai</a> / <a href="https://keybase.io/ausbitbank">keybase</a><br /><strong>I also made :</strong><br /><a href="https://steemviz.com">steemviz</a> / <a href="https://steemvids.com">steemvids</a> / <a href="https://steemcap.com">steemcap</a> / <a href="https://steemit.com/@steemleak">steemleak</a> / <a href="https://steemviz.com/promo">promo</a></center>