Set up hyperdrive served site on vps
Published: 2020-07-27 06:43:28

# Set up hyperdrive served site on vps

(You can also read this on Hyper protocol [here](hyper://05f442956e402a70e8839aa12beb2470cc8de76ac52e7024902aae390d44bffe/blog/set-up-beaker-served-site%20on-vps.md))

### On your Dev system (Ubuntu/Mac)

- open [beakerbrowser](https://beakerbrowser.com)

- 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 
`hyper://05f442956e402a70e8839aa12beb2470cc8de76ac52e7024902aae390d44bffe`

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

- Let's setup your blogging locally 1st 

- `git clone https://gitlab.com/saurshaz/blogmops` (A svelte powered app to read markdown based posts)- `npm i && npm run dev` 

- the app shall be running on [`http://localhost:3000`](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```

*MAKE SURE YOU HAVE ATLEAST ONE SEEDER WHEN YOU ARE RUNNING THIS COMMAND* 
(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`  

2. `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 say `example.com` and go to setup the above running app with that domainYou can use a nginx setup like [this](https://gist.github.com/saurshaz/ca097dd5d94f46c5530360b21f280dc4) (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`blogmop-3000.sh

```
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 quick.`pull-scripts.sh`

```
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

- Super thanks to [jsbase](https://github.com/jsbase/blogmops)

- [Svelte & Sapper](https://svelte.dev)

- and `Hyper` & `beaker` browser, for their guts 

- [Paul  Frazee & entire Beaker team](https://pfrazee.hashbase.io/`)