ANNOUNCING: simultaneously deploy to Web and decentralised Web

dWeb Blog demonstrates simultaneous deployment of a blindingly fast website to both Web and SAFE Network.

It’s not pretty :stuck_out_tongue: but it works, and shows you how to do the same in minutes.

dWeb’s first article shows how to join the decentralised Web while continuing on the web. View it on the Web or SAFE now (links below). Start by cloning the code to make a simple blog, and then modify it to make it your own.

dWeb Blog uses React and React-static, so you can build full featured professional websites and have them live on both the web and SAFE Network, and both updated with a single command.

Web: https://dweb.happybeing.com
dWeb: safe://dweb

36 Likes

Awesome! Does this take over from Safe Press?

3 Likes

It may do, Safepress is the name of a vision and this is a step towards it.

7 Likes

Nice! How easy is it to add graphics and styles? I watched this video and didn’t find it particularly clear how you would do that (meaning how you might hack someone else’s site and make it your own).

2 Likes

I assume it is easy… once you get to know React, but I haven’t reached that level of web ecstacy myself.

I think some here know React and will be able to comment?

All hints welcome cos I’d like to get into that, and if anyone wants to write a guest dWeb post about this, get in touch.

4 Likes

So react syntax for creating HTML, is something called .jsx, basically it’s HTML written in the return function of some javascript (a component).

So while there’s a little bit of react to get your head around (‘what is a component’ eg), once you’ve done that, editing the code to add normal HTML elements is entirely possible, and shouldn’t be too far from what you’re familiar with, with good ole’ HTML.

6 Likes

@JPL to add to what Josh says, if you read the docs at reactjs.org I found they were very good at establishing the concepts and showing how to use and make components. I’ve read most of it twice and got the gist, although there is a new feature just released, React Hooks, that I’ve not seen in code, but which I understand are an advance that makes things simpler, cleaner and easier to write than components. Tanner Linsley who created React-static is very enthusiastic about Hooks, so I’m excited to learn!

What I’ve not had time to do yet is delve into the different ways to pull components all together into a site, or page structure, or looked into how this might vary with React-static. What I’ve seen looks fairly straightforward though as I start to read and write JSX. So far what I’ve tried ‘just works’ after a bit of tweaking.

Things like setting global styles, layouts etc I suspect are done with components, knitted together per site and per page template in the JSX files Josh mentioned.

So far I’m just poking around in other people’s code. Next step will probably be to look through some tutorials on building with React.

Maybe we can help each other in our learning.

4 Likes

going off on a react rabbit hole. But for a simple look at hooks @happybeing:

2 Likes

Rabbit hole navigation is a core skill these days. Having a look at React on Freecodecamp now https://learn.freecodecamp.org/front-end-libraries/react but I’ve tied some string to a tree at the top.

1 Like