Your first SAFE website – start to finish in just 20 minutes

Tip: Never believe anything called ‘Do blah in x time’ it’s always a lie. I once bought a book called Teach Yourself C++ in 24 Hours and I still can’t do it 20 years later. There are a few small porkies here too.

Lie number 1.

Before you can create a website you need an account and to get an account you need to get to Trust Level 1 on this forum, by reading a few posts for the total of one hour.

So I should have called this post: “Your first SAFE website – start to finish in just 1 hour and 20 minutes” but who’s going to click on that?

An hour later

OK, you’ve got yourself to Trust Level 1. You can tell because your name is now a dark grey colour and if you double click on the letter in the circle or your avatar you’ll see Trust level: Basic.

tl1

Now I can show you how to make a beautiful* pet website in just 20 minutes, start to finish. For real

0 mins: Get an invite code

invite1

Now you’re Level 1 you can go to invite.maidsafe.net and get yourself an Invite Code. Click the Icon then select Alpha 2.

Set your IP address and you’ll see your Invite Code below. Leave that page open so you can copy the invite code in a couple of minutes

3 mins: Get the SAFE browser

Go to Releases · maidsafe/sn_browser · GitHub and download the appropriate version of the SAFE Browser for your operating system. I’m using Windows 10. Don’t choose the one that ends in –dev.zip. Note: the pics show Peruse which was the old name for SAFE Browser. Everything else is the same.

Go to the downloaded Zip file and extract it using Windows Explorer, unzip, WinRAR, 7-Zip or similar.

download
Then inside the extracted folder find SAFE browser.exe (note: the pic shows Peruse, the previous name of the browser) and double-click on it.

peruse2

Click ‘allow access’ if Windows asks and SAFE Browser should open at safe-auth://home/#/login.

Click on Create Account then Continue …

peruse4

5 mins: Then paste in your Invite Code from before and click Continue

You now need to create two passwords: an Account Secret and a Password. They can be the same thing if you like as this is just a test network. They need to be more than 10 characters long. Click Next you should be logged in! Accept the request for authorisation and you’re ready to go.

7 mins: Get the Web Hosting Manager

Now we need to get the Web Hosting Manager so we can create an ID and upload our website. Download the correct version (not the dev version) from here Releases · maidsafe-archive/safe-web-hosting-manager-electron · GitHub , extract it in the same way as you did with SAFE Browser, navigate to the web-hosting-manager… folder and double click on web-hosting-manager.exe. Click through any warnings (“Run anyway”) and Web Hosting Manager will start. But first, you’ll need to authorise it in Peruse browser. So go to SAFE Browser and click Accept. Again you may need to tell Windows to allow the application.

All that done, you should now see a screen like this.

Now create an ID. I’ve already used jpl so rather imaginatively I’m going for jpl1. Click on Create Public ID. That done, it’s time to create our website. Wohooo!

10 mins: Create your website on your PC

Make a new empty folder somewhere on your PC and call it ‘safesite’ (or whatever you like).

Open new page in Notepad, copy and paste the following code and save it in the safesite folder as index.html.

<html>

<head>

<title>My Cat</title>

</head>

<body>

<h1>Here is my cat</h1>

<h2>The most beautiful cat on the SAFE Network</h2>

<img src="cat.jpg" alt="cat">

</body>

</html>

Now add save a pic of your pet. I’m using one of my cat, saved as cat.jpg.

Feel free to edit index.html, replacing the word ‘cat’ with dog, ant, badger, hamster, buffalo, giraffe or whatever pet you prefer and finding an image to match - making sure your image name matches the one in your code. Store the image in the safesite folder.

safesite

Lie number 2

I don’t have a cat. I’ve used one I found on the web. 125 Genius Tabby Cat Names You'll Love - Find Cat Names

Before uploading the site, just open index.html in a browser to check the picture is showing up OK.

15 mins: Upload it to SAFE Network

OK now it’s time to upload it to the SAFE Network.

Go to the web hosting manager, click Create Website.

Choose Start from Scratch.

Choose a name for your website (cat, dog, ant, etc) then Next

Click the plus sign then choose Upload Folder.

Navigate to the folder containing your index.html and image (safesite) and select it.

upload5a

You should see the files uploading.

Scroll down and hit Publish.

Go to SAFE Browser and type in [your website].[your ID] e.g. cat.jpl1

20 mins: Taadaa!

Lie number 3 *

I promised you a beautiful website, but this is something so embarrassing and clunky that a five-year old would laugh at it. But hopefully it demonstrates the truth of just how easy it is to create your own site on SAFE. If you have web design skills now’s the time to put them to use and make a better one.

79 Likes

You didn’t know? They recalled that book for a misprint. It was Teach Yourself C++ in 24 Years

17 Likes

Ah good. I thought it was me being stupid. 4 years to go then!

9 Likes

That is one fine post btw @JPL

6 Likes

This would make a good article. You should post it to Medium or one of the other large article sites!

14 Likes

Alright, that’s it. you’ve gone too far!

10 Likes

Seriously, you got a good laugh out of me on that one John. :joy:

2 Likes

Great write up! For those looking to venture beyond the cat pic, take a look at Safe Network - DevHub or https://docs.maidsafe.net/beaker-plugin-safe-app/

7 Likes

That would be the cat vid wouldn’t it, the highest point one can reach in internet websites isn’t it

:stuck_out_tongue_closed_eyes: :rofl: :stuck_out_tongue_closed_eyes:

7 Likes

@JPL Superb work John on several levels. I’m still chuckling, a nice start to my day.

BTW, that’s my cat :stuck_out_tongue_winking_eye:

4 Likes

Thank you for the writeup!

Unfortunately, I get problems – don’t know if they’re in Peruse or web hosting manager (WHM):
My sites are safe://mysongs.fiee and safe://twiddly.fiee

  1. If I mark several files for upload in WHM, it gets confused. Seems like everything is getting uploaded, but the UI doesn’t show. Or mixes up different sites.
  2. I’m not sure WHM uploads all the files correctly, at least if I try one of my MP3s, Peruse gets into an endless loop of reloading. Might be a problem in peruse that can’t handle MP3s.
  3. The twiddly site contains a TiddlyWiki instance; seems like Peruse can’t handle some JS commands that it uses. Or maybe WHM didn’t upload the whole file?
  4. In previous versions, WHM could handle private folders. That seems to be gone, so “Choose Existing” is pointless. Or am I blind?

Any hints? (I’m on OSX.)

I find that WHM often messes things up and that the UI doesn’t behave as I expect when selecting files and folders - I always use the “Custom” option. I recommend you experiment with the options and find some workflows that work for you and keep a note of it.

One trick that I find helps is to only upload one file the first time, and then try multiple select. But it’s easy to confuse whether it is going to upload the contents of a folder, or the folder itself so I can still fall foul of that. It will be easier with SAFE Drive so I better get back to working on it!

5 Likes

Thank you!

Yes, the “upload folder” also got me several times.
Another issue is that WHM doesn’t follow symlinks, and I’d like to exclude dotfiles like .DS_Store

But of course it’s more a proof of concept than a real app…

2 Likes

Thanks for the post @JPL - hope you don’t mind but I’ve linked to it on twitter 'cause I think “it’s a cracker”, as Frank Carson would no doubt refer to it.

Crazy timing as well since I was taking notes yesterday when creating my little test site with exactly this kind of thing in mind. One less job for me… feet up!

DG

8 Likes

Thank you very much for this, @JPL!

I guess this is what gets me, as described in WebID/Public ID confusion. The Web Hosting Manager (WHM) says it “Looks like you don’t have a Public ID yet!” But you said you used “jpl” before, so how can it look like you don’t have one yet? I put a little something up on safe://nature.sascha2, but I can’t for the life of me figure out how to get that to go directly under “sascha” without me creating “sascha2”. safe://nature.sascha won’t display nicely in the Peruse browser. It just shows some code.

This post finally cleared things up for me a bit:

Thanks @bochaco!

3 Likes

Thanks @JPL !

Super helpful for creating the biggest collection of safememes on the safenetwork :stuck_out_tongue: safe://safememe.sam/

2 Likes

Why not post that site here: Safe Site Resources

2 Likes

Thanks for the write up, next time put your crypto address of choice and we will be sure to tip :slight_smile:

2 Likes

Thanks for sharing this interesting introductory piece.

1 Like