Official website for Linux User & Developer
FOLLOW US ON:
Jul
12

Raspberry Pi web server tutorial

by Rob Zwetsloot

Use Google Coder to turn your Raspberry Pi into a tiny, low-powered web server and web host

We’re teaching you how to code in many different ways on the Raspberry Pi this issue, so it only seems fitting that we look at the web too.

There’s a new way to use the web on the Raspberry Pi as well: internet giant Google has recently released Coder specifically for the tiny computer. It’s a Raspbian-based image that turns your Pi into a web server and web development kit. Accessible easily over a local network and with support for jQuery out of the box, it’s an easy and great way to further your web development skills.

Create your own webserver on your Raspberry Pi
Create your own webserver on your Raspberry Pi

What you’ll need

Internet connectivity
Web browser
Google Coder

Step-by-step

Step 01 Get Google Coder

Head to the Google Coder website, and download the compressed version of the image. Unpack it wherever you wish, and install it using dd, like any other Raspberry Pi image:

$ dd if=[path to]/raspi.img of=/dev/[path to SD card] bs=1M

Step 02 Plug in your Pi

For this tutorial, you’ll only need to connect a network cable into the Pi. Pop in your newly written SD card, plug in the power and wait a few moments. If you’ve got a display plugged in anyway, you’ll notice a Raspbian startup sequence leading to the command-line login screen.

Step 03 Connect to Coder

Open up the browser on your main system, and go to http://coder.local. You may have to manually accept the licence. It will ask you to set up your password, and then you’ll be in and ready to code.

Step 04 Language of the web

Now it’s time to create your own app or website. Click on the ‘+’ box next to the examples, give your app a name and then click Create. You’ll be taken to the HTML section of the app. Change the Hello World lines to:

<h1> This is a HTML header</h1> 
<p> This is a new block of default text</p>

Step 05 Styled to impress

Click on the CSS tab. This changes the look and style of the webpage without having to make the changes each time in the main code. You can change the background colour and font with:

body {
   background-color: #000000;
   color: #ffffff;
}

Step 06 Querying your Java

The third tab allows you to edit the jQuery, making the site more interactive. We can make it create a message on click with:

$(document).click(function()
   { alert(‘You clicked the website!’);
   }
);

Full code listing

HTML

<h1>Welcome to the internet...</h1> 
<h2></h2> 
<p><a href=”http://www.linuxuser.co.uk”>Linux User & Developer</p> 
<p><a href=”http://www.reddit.com/”>Reddit</p>
<p><a href=”http://www.linuxfoundation.org/”>The Linux Foundation</p> 
<p><a href=”http://www.fsf.org/”>Free Software Foundation</p>

Java

var d = new Date;
   var hours = d.getHours();
   var mins = d.getMinutes();
   if (hours > 12) {
      var hour = (hours - 12);
      var ampm = “PM”;
   }
   else {
      var hour = hours;
      var ampm = “AM”;
   }

   if (hours == 12) {
      var ampm = “PM”;
   }

   if (mins > 9){
      var min = mins;
   }
   else {
      var min = “0” + mins;
   }
   var time = “The time is “ + hour + “:” + min +““ + ampm;
   $(“h2”).html(time);

  • Tell a Friend
  • Follow our Twitter to find out about all the latest Linux news, reviews, previews, interviews, features and a whole more.
    • Gordon Chiam

      Javascript, not Java