Solar Protocol

A naturally intelligent network.

This website is hosted across a network of solar powered servers and is sent to you from whichever server is in the most sunshine.

Presently you are on a server called Solar-Power for Hackers that is located in Kiambu Road, Nairobi, Kenya.

Server Battery:
84.0%
SERVER INFORMATION
PLACE
City: Nairobi
Country: Kenya
Local time: 10:09 AM
Weather: overcast clouds
Temp: -2.2 ° C
Feels like: -5.4 ° C
Sunrise: 09:38 AM
Sunset: 05:54 PM
ENERGY
Last update: 10:09 AM in TZ n/a
Battery Level: 84.0%
Battery Voltage: 13.41 volts
PV Power: 7.91 watts
PV Voltage: 14.83 volts
PV Current: 0.53 amps
Load Power: 2.01 watts
Load Voltage: 13.41 volts
Load Current: 0.15 amps

GUIDE: Developing Projects and Hosting Sites

Hosting a Website on Solar Protocol

There are two ways to host a site on Solar Protocol:

1: On a specific server

If you are a steward of a server, you can host a site on your specific server. This means that your site may be intermittant, where if your server runs out of power or gets disconnected from the internet, your website will go down.

2: On the Solar Protocol Platform

You can also publish a website on the Solar Protocol platform, even if you aren’t stewarding a server. The platform is served from different servers in the network depending on which is generating the most energy at the time. This gives the platform more uptime than if it were hosted on a single server.

Intro to coding a website

Tools needed:

  • An editor like VSCode
  • How to set up your workspace in VSCode editor

Basics

Files

Create a file called index.html. This is the file that will contain the structure and content of your webpage. Create a file and call is style.css. This file will define the style (color, font, size) of the elements on your page.

HTML Tags

HTML is a markup language that tells a browser how to structure a webpage. HTML is written with tags that look like this: <h1>This is an h1 element, enclosed in opening and closing p tags.</h1>
<p>This is a paragraph element, enclosed in opening and closing p tags.</p>

HTML Document

HTML pages are defined as is shown below. The <!DOCTYPE html> and <html> tags tell the browser it is reading at html page. Everything in the head tags is metadata and won’t show up on the page. The title element will show up on the tabs in the browser. This is also where to link the css file.

Everything in the body tag will show up on the page itself.

<!DOCTYPE html>
     <html>
         <head>
             <title>My new website.</title>
             <link rel="stylesheet" href="style.css" />
         </head>
         <body>
             <p>This is a paragraph element, enclosed in opening and closing p tags.</p>
         </body>
     </html>

CSS

CSS stands for cascading style sheet and this a file where the style of the page is defined. This is where you set things like color, fonts and size of elements on the page.

HTML defines the structure and css defines the style. The block of code below, sets the text in the h1 element to be black and the p element to be red.

h1 { color: black; }
p { color: red; }

Further tutorials on web dev:
Back to guides