SSH back in to your Raspberry Pi and in the terminal type
cd /var/www/html
This will move you in to the folder where all the files for your web server are stored.
In the terminal type
ls
This will list all the files in your current folder.
We can see here that there are two files.
The original index.html is the web page that will be displayed if you go to the Raspberry Pi 3`s IP address in a browser using a device on your local network.
There is also the file phpinfo.php that we created in the last post.
We want to change the page displayed when we go to our web server, so lets try and remove the original file - index.html
In the terminal type
rm index.html
We will be asked if we want to remove this file and then told Permission denied!
Permissions
This is due to permissions, the user 'pi' currently does not have the right permissions to perform this task in this folder.
By default the user 'root' current owns the directory here, we are going to change the owner/group to 'www-data' and give some permissions, then add the user 'pi' to the group also.
Setting our required permissions is easy enough to do with the commands below but be aware that allowing these permissions below does decrease your security. If somebody really wanted to they could take advantage of the permissions we are about to set. Saying that it is necessary for what we intend to do so I am going ahead with it.
To change the ownership of the directory, type in to the terminal
sudo chown -R www-data:www-data /var/www/html
When you press enter it will seems as though nothing as happened, this is the expected result.
Next we will grant permission to the www-data group to be able to read, write and execute within this directory.
In the terminal type
sudo chmod -R 755 /var/www/html
Pressing enter on this command will again look like nothing happened, all good.
Finally lets add the user 'pi' to the group www-data to give our user account the same permissions.
In the terminal type
sudo usermod -a -G www-data pi
For good measure a reboot is now performed, in the terminal simply type
sudo reboot
You will lose your SSH connection as the Raspberry Pi 3 reboots.
Reconnect to your Raspberry Pi 3.
Using the terminal, navigate back to the web server directory.
cd /var/www/html
I have then listed the files again, notice the change of colour! (See screenshot below) we have permission to do stuff here now. In the terminal type
ls
Now this time if we try and remove the file we will be successful, in the terminal type
rm index.html
If we then list the directory contents again we can see that index.html has been removed!
Lets replace it with something very simple, in the terminal type
cat > index.html
Press enter, type the text you want to see on your web page and press enter again.
Press Ctrl+c key combination to save your new file, In the screenshot below I have then used the cat command to view what I just created (notice the mistake here I meant to type Hello world!)
cat index.html
My typing error is not a problem here, we are going to replace this file very soon any way.
If we now navigate to the Raspberry Pi 3`s IP address using a browser on any device connected to our local network we will see the file we just created!
Success! the text I entered in to the file shows up!
Back to Windows...
Creating a webpage using the method above is not really user friendly, chances are you want to use a proper text editor for the task. Saying that the nano text editor on the Raspberry Pi 3 is fully capable if you want do everything on the Raspberry its self.
I use Sublime Text 3 as my text editor of choice, another popular one is Notepad++.
But I do not have Sublime text on my Raspberry Pi 3, I have it on my Windows machine, so what if I want to do the editing on my Windows machine and just upload the web site files straight on to the Raspberry Pi 3?
Well we are going to need to download a small program named WinSCP, it is quite simple to use and can be downloaded from here.
WinSCP
Once you have downloaded and installed WinSCP, Open the program up and you will be presented with something similar to below.
We need to enter our Raspberry Pi 3`s IP address in to the host name section, for the user name enter pi and if you want your password. Seems to me it will ask you for your password no matter what so I usually leave this blank. You will end up with something like below.
Your choice here, you can choose to save your connection or just connect, I am going to just choose to connect by clicking the Login button.
As I entered no password I must now enter the user pi`s password. You may get a pop up about keys show up when connecting the first time just accept it. I also ticked the Remember Password for this session checkbox here.
We will then be shown the main program window like in the screenshot below.
The files on the left our on your current machine and the files on the right are on the Raspberry Pi 3.
We can drag and drop and do all sorts of different stuff using this program.
Now lets navigate to the /var/www folder in the right pane.
From the drop down above the right pane choose / <root>
This will change the folders that show in the right pane, scroll down until you find the 'var' folder
Navigate to the /var/www/html folder by double clicking on the 'var' folder and then double clicking on the 'www' folder followed by the 'html' folder. You should see your index.html file here and the phpinfo file like the screenshot below.
Right click on index.html and choose delete, confirm you want to do it when asked.
We are deleting the file because we are going to replace it, also if we were allowed to delete this file then it shows our permissions are working. It is not necessary to delete this we are going to replace the file with a file of the same name anyway, but it is what I did.
Basic HTML
The file I am going to upload is a very basic html "hello world!" web page (with no spelling mistake this time)
The code for the file I am going to upload looks like this
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
I quickly typed this up in my text editor of choice - Sublime text 3 and saved the file as index.html on my desktop. Screenshot below of the code in Sublime text 3.
Navigate to where the new index.html you just created is on your Windows machine in the left pane of WinSCP, for me it is just on my desktop.
Now it is as simple as dragging your index.html file from the left pane to the right pane. You will be asked to confirm you want to do this.
Click OK and you should now see the index.html has moved over to the Raspberry Pi 3!
Test!
Great we are all done, lets test it! Open your browser and go to the Raspberry Pi 3`s IP address.
Fantastic, it worked! Our Hello World! HTML example webpage is shown.
From here on in we can upload anything we like including any python scripts or images, whatever!
Again bear in mind that our Raspberry Pi 3 is still not open to the internet yet so you will only be able to access your web server from within your own local network. We are getting there ;)
Thanks for reading all that, anything extra to add here? Any Questions? Leave a comment below, Thanks!
Show support for aquaponicpi and like the Facebook page!
Click on the icon below to be taken to aquaponicpi on Facebook!
No comments:
Post a Comment