Motivation - I'm cheap when it comes to servers
I've been making slow progress on the new shiny steemvids 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 reprint.io Symfony 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 geekinprison.com that shows how polished this project already is.
Another option is @ontofractal's great looking glasnost project, 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.
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 steemdns.com, 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
Expanded post view
https://steemdns.com/elon-musk-explains-chemtrails
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)
CNAME : A plain text file containing "steemdns.com", enabling domain hosting on github pages
Index.html : Where all the magic happens
loader.js : A small function to reliably load dependencies from CDN (steemjs and remarkable)
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 github (for free)
- Go to my github repository and click "fork" in the top right corner
- In your newly created fork, click settings - and change the repo name to
yourgithubusername.github.io
- Save changes, click through to the index.html file and edit (pencil icon)
- Change the "steemusername" variable on line 4 to your own steem username , and save the file.
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 following these instructions to change your dns settings .
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 :)
Lets connect !
steemit / twitter / gab.ai / keybase
I also made :
steemviz / steemvids / steemcap / steemleak / promo
This is great! Although I do believe this doesn't bode well with SEO considering the content discovered is 'duplicate' (both on Steemit and your own domain). The best solution would be for Steemit to start offering support for custom domains. Links to user's personal Steemit blogs should point to the custom domain name. This ensures that articles don't actually count double on search engines et al.
I've proposed in the past a
custom_jsonparameter that could define the canonical URL to avoid any SEO headaches. Without it being set, the default could go to steemit.com, but if set, all clients should listen and display whatever it's set to.This sounds like a very decent solution. The only problem I see is domain expiration. Perhaps check the location for a certain HTTP response before using a specific domain? In the case the domain is expired or not available, the anchors could revert back to steemit.
https://j-stuhlman.github.io/
If you update, all of your images will work now :)
Wow, this is a fantastic post. It pushed me to creating an account on github and the associated gubbins that goes along with it. Something I have been meaning to do for a while. The page itself is displaying blank for me (apart from the header: Recent posts by meesterboom) but I am in work and it could be the browser being locked down. I can check it at home later.
I love a post that you actually really learn something from. Thanks again dude!
Thankyou, im glad someone found it useful :)
Your site works for me from mobile too
Aargh, I was being a doofus. I should have checked my mobile! All working splendidly well! Again, a great walkthrough!
amazing job!
This is a great solution for bloggersandgrandmas.life, thanks! :)
Ahaha that's a random domain, happy to help :)
Nice work! Look forward to checking the code out and giving it a whirl. These types of projects are going to be critical (IMHO) in the growth of the network.
I also just wanted to set the record straight - Reprint (the project I previously worked on like this) doesn't use Wordpress, it's written using Symphony/PHP and is designed to work on any system that could run wordpress.
I've mentioned wordpress a couple times in our posts, but only that it's designed to be a replacement for for it. I avoid touching anything wordpress related like the plague :)
Awesome stuff! @ausbitbank AND @jesta. Both your efforts are greatly appreciated!
Thanks mate, will update the post to correct this in a bit :)
I wish the functions of steemit could show up there also like upvoting, RS etc., etc.
Give it time, ill get back into coding later tonight and should be able to get voting going at least
Cool man! I'll be watching this. If it works , I'm going to build out my http://thedailysteemit.com/ website with it.
What do you want that site to do?
As a critic of steem's interfaces, I want to say that @ausbitbank has built the best solution yet, by MILES. It's a way bigger deal than it is getting attention for.
the idea is truly awesome. It really does allow bloggers that want their posts on their own link.
I'm thinking if a wordpress plugin is also possible, as much of today's web is powered by WP and it could also take advantage of the theme designs.
I actually thought jesta's repress.io was based off wordpress (since I think it was rebranded from steempress originally) but it may be a completely independant beasty now..
https://wordpress.org/plugins/steemit-feed/ <-- This exists but I haven't tested and its now 7 months old so I'm not sure if it'll still work
If there really isn't a working wordpress option available maybe I'll look into that next, but the point of this was to be as lightweight and independent as possible and let the user style the content how they want.
didn't know about it either but yea, I don't think it's fully compatible now and also, not sure how it looks.
For some reasons I had missed that post. This is really awesome work!
I am so happy to see this!
The other projects that are syndicating steemit posts look amazing and surely build excitement in the average reader until they read the instructions and realize that an average reader can not easily follow them. If those sites offered a simple click-to-launch-your-own solution that could be paid for in STEEM or SBD then I think new people could be enticed to join steem just to use this service (especially if the fee was pegged to the initial STEEM received at signup).
Your solution is the closest to one-click yet and completely free!
Even better would be a simple one line JavaScript embed like Ecwid.com does for e-commerce or Sumo does for web analytics and engagement. And, what if the embed also let us post without going to steemit?
Alternatively, steemit.com should allow the creation of custom domains with custom css.
Anything that would let people keep using their own blogs/websites with the added functionality of votes for pay on posts on their own sites would be the fire that keeps the steem steeming!
I think the ability to add a "like" button anywhere that generates an income for the content associated with it could be more easily marketed than trying to get users to change platforms. The Steem Button can be the first step in onboarding users to Steemit.com. Steemit.com could be an optional element the way actually using Google+ is to having all the other benefits of a Google account...
These are ideas that people would invest in, and products that people would purchase... I think?
Thank You for Being You and Doing what Do!
Thankyou for the great comment :)
I really like the idea of reducing the whole thing down to a single pasted in
<script>tag that automagically turns into a custom steemit blog, just to make installation as hassle free as possible.. Some great ideas here :)Have you tried @ontofractal solution with glastnot?
I haven't, because it requires a dedicated server or VPS and docker to run its Elixir, Phoenix & Mnesia stack. It looks amazing, but heavy.
My solution is purely javascript and usable almost anywhere. Will update the post to mention it though, I couldn't remember the name earlier thanks
That got my increasingly weak upvote.
THANKYOUTHANKYOUTHANKYOUTHANKYOU!
I owe you a review, and will comment on the source.
Great work! I'm also on my path for learning modern web dev stuff. Why should one learn MongoDB?
MongoDB seems to be the go-to modern JSON-based database these days - it feels way faster and more flexible then MySQL ever was.
I was prompted to go for mongodb for the steemvids backend for a few reasons :
Great job! I love seeing simple solutions like this.
https://decentraal.github.io/
Works fine for me :) ... thanks!
If you update all of your post images will work now :)
Update ok! Have done some modification myself...
This is how it looks now... https://decentraal.github.io/
Nice work that looks great :)
Wow, this was too technical for me. I usually just tell hubby what I want and he does it when it comes to stuff like this. But thanks for taking the time to make this post, I'm sure many people will benefit.
Bonus feature: You can lookup the permlink of a comment, and then view that comment directly on the site - eg : http://steemdns.com/re-igster-re-ausbitbank-display-your-steem-posts-on-your-domain-free-code-and-guide-20170406t125118559z