DEV Community


Posted on • Updated on


Set up hyperdrive served site on vps

Set up hyperdrive served site on vps

(You can also read this on Hyper protocol here)

On your Dev system (Ubuntu/Mac)

  • open beakerbrowser

  • create a new hyperdrive where you can write pages in markdown format. You can instantly preview what you write and also distribute that URL in a P2P way with other peers using hyper protocol.

*NO setup needed for that.

  • add a new file/import your existing ones, open any one and press Ctrl + B, to get a blogging + preview view in your local setup. Make edits.

  • copy from the URL bar, the string starting with hyper:// also, main part is the long string which is your drive key like

You want to serve the same posts over http(s) too?

  • Let's setup your blogging locally 1st

  • git clone (A svelte powered app to read markdown based posts)- npm i && npm run dev

  • the app shall be running on http://localhost:3000- Also run npm run build (this will give us a __sapper__/build folder and we can do node __sapper__/build to serve the prod version)

  • Understand the code if you want (u shall) but important part is that your markdown files in src/routes/blog/posts will be treated as blog-posts.- We shall have these files connected to the beaker site we had earlier. Let's do that.

  • Let's get the existing posts folder disappear rm -rf src/routes/blog/posts/ src/routes/blog/posts - run npm run dev folder, and see it fail.- Let's bring it back by connecting it to a hyper connected new folder.
    DO NOT try beaker auto-sync.

Auto-sync is for bringing local fie system changes into hyperdrives. we want the reverse we want this \'gotobeakerandwriteyourblogsandseedautomaticallytohttpsite\''

  • You'll want to map the import of content you create with same location /src/routes/blog/posts.

  • This is how you'll do that

  • install hyperdrive-daemon (look below section)

  • from inside blog folder, run hyperdrive export faa2cf86ec101ad19dea21f47279a94cfdeaff347cd4c025d3e0394503349fdb posts - (replace the drive URL /drive key to yours to display your posts)

  • (right now this needs to be done in a scheduled fashion every X minutes with pm2/shell script or manualy to pull in changes when there are. I'm looking for a better option. Will update this space as i get that)

~/<xx>/blogmops/src/routes/blog$ hyperdrive export faa2cf86ec101ad19dea21f47279a94cfdeaff347cd4c025d3e0394503349fdb postsExporting | =====----------------------------------- | 12% | 4/31 Content Blocks | 1 Peers

(beaker browser or other daemon)

setup hyperdrive daemon globally

  1. npm i hyperdrive-daemon -g
  • in case of node-pre-gyp issues check the permissions This may help

npm config set user 0 npm config set unsafe-perm true

  • setup fuse. run hyperdrive fuse-setup
  1. hyperdrive start will give you Daemon started at http://localhost:3101

On a Server- get an Ubuntu droplet from digitalocean setup with plesk (3 sites u can play with and more, this my 4th)

  • set up asdf-vm and nodejs(v12.3.1) plugin on it (look up my other post)

  • setup plesk with a domain` and go to setup the above running app with that domainYou can use a nginx setup like this (Note that plesk generates these files automatically, so any plask change needs yopu to replace it again. keep it some place safe once it works)

Use PM2 and shell scripts

  • To manage the import of new posts to your server, you could use the below scripts`
cd /root/code/blog && npm run build 

cd /root/code/blog && node __sapper__/build

To start the sapper app do pm2 start blogmop-3000.
to restart pm2 start blogmop-3000.super

cd /root/code/blog/src/routes/bloghyperdrive 

export faa2cf86ec101ad19dea21f47279a94cfdeaff347cd4c025d3e0394503349fdb posts

pm2 restart blogmop-3000

To bring new content, maintain one seeder (atleast) and run pm2 start pull-scripts.

References & Thanks

Top comments (0)

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.