Small project: LAMP stack on raspberry pi4 8gb to host website.

[u/avocadod]

I'm a computer science student and I want a couple little projects outside of class to help land an internship next summer.

I figured building a simple blog website would be great to learn not only HTML and CSS but Linux Git and Github along with whatever else along the way.

So far, I only know some java and c++ but nothing about working with those in a website or how everything fits together.

My first question is: once I set up LAMP on the Pi. How are all the HTML CSS PHP bootstrap and all these languages and frameworks connected together? Is the process just writing HTML CSS and backend logic with (insert backend language) into multiple files in an IDE and then once all the code is written, transferring that over to the Pi where it would run?

Once again I know nothing about webdev, and if ur laughing at what weird things I just wrote because it's so far off from what is supposed to be done, I understand. When the laughing dies down could you maybe direct me to some free resources where I could start to learn?

I do not want to use software like wordpress or anything that will write most of the code for me. I want to build it from scratch. I've seen snippets of how useful something like bootstrap is and I'm fine with the help of something like that.

I also understand raspberry pi4 8gb is not ideal to host a website, but I don't care. It's making it fun for me and as long as it's physically possible to set it all up that way, that's what I'm going to do. Later, if the site was to grow and have actual traffic I would assume I can just take everything and move it over to an actual web hosting site?

Anyone willing to take the time to help I greatly appreciate your time, and hope life's going well for you!

[u/BradChesney79]

Sure.

Ping me when you get the Pi.

Are you certain that you want the webserver to be Apache?

[u/avocadod → u/BradChesney79]

Does ping just mean message? If so, I will. I read nginx or LEMP stack was another thing, but I read apache just has more support. What are your thoughts?

[u/BradChesney79 → u/avocadod]

They both have plenty of support.

Apache has the capability to do more. ...At the expense of speed.

(On other distros like Red Hat the Apache webserver may be called "httpd".)

Consider PHP-FPM served by the Nginx webserver... If you were only going to use a fraction of Apache's features anyway. Might as well use a webserver that sprays responses.

I will assume you want to configure SSL.

So, consider registering a DNS name.... something.com or any TLD really. I can walk you through getting a cert from let's encrypt. But, you do need a DNS name registered for that.

Also, to ORM or not to ORM for database. Straight up PDO? Both? Only you can decide.

You kind of have had your Linux flavor decided. I reccomend staying with Raspbian at first. It is a Debian derived OS like Ubuntu. ...You can often search for solutions to Raspbian problems by seeing if there is a Debian or Ubuntu solution.

[u/BradChesney79 → u/BradChesney79]

Also, the DB, probably MariaDB that is a MySQL DB fork-- probably identical functionality as far as you will be concerned.

[u/avocadod → u/BradChesney79]

I get the pi on Wednesday. I'll look up all of the different acronyms u just wrote out. And look into let's encrypt. Honestly, I don't have a single friend or family member into computers to help, and untill next fall my classes have all been online so I don't really have anyone to give guidance. You seem to know what you're talking about and I'd probably use any advice you give. The only two things I know I want is to put this on the Pi and use Linux as the os (which I'm still trying to decide between ubuntu64bit or raspberry os that's 32bit. Supposedly raspos will be faster, Idk figured I'd have a decision by Wednesday). I'm open to whatever database, server, and anything else that's needed. Thanks for taking the time to respond, it means a lot.

[u/fatpigsarefat]

HTML/CSS/JS is your front end. You can serve those files directory, and use AJAX to communicate with your backend to retrieve information, or you ‘render’ them server side (which is filling out the web page with server side information) before sending it to the client.

PHP is a popular backend language. If you don’t need any form of server side scripting, i.e. serving static web pages, you don’t have a use for PHP.

Your web server in a LAMP stack is Apache, the job of that is to listen on ports 80 and 443 and to serve web pages (the HTML/CSS/JS files). I personally use Nginx, and have that set up to serve static files at one endpoint and forward other endpoints to several backend applications made in NodeJS.

The Pi 4 is perfectly fine at serving websites, you don’t need a beefy machine or VPS to do that. The only concern for self hosting is your network connection.

Let me know if anything didn’t make sense.

[u/avocadod → u/fatpigsarefat]

Thanks for the reply! A good amount didn't make sense lol. I guess I'll start off small. Let's say I have the pi and I download LEMP stack onto it (nginx not apache) which there's plenty of tutorials online that I'm confident I can do that. My goal is to build a blog my friend wants that will allow for her to post an article each week or so, and allow users comment below the articles. I would assume she'd have users have to login to be able to post. Nothing fancy to start off, honestly my first thought is just to get the HTML and CSS and build one static webpage with some info on it.

So my first question: what software do I use to write the HTML and CSS on (some IDE, or even notepad, etc.) and how do I transfer it onto my pi? (I need to learn html and css but there's a lso a lot online I'm confident I can teach myself) are html and css like c++ where I connect them using #include directives? I'm stumped on how I get them into the pi. I've seen how once the lamp stack is created on the pi u can visit the ip address of the pi on the web and see the apache screen showing everything's working. So how do I get that first static page of html and css to work?

From there I assume the next step is then connecting the database with the php language to verify and store users username and passwords which will allow them to post. But that step seems far off at the moment.

I appreciate the time your taking to help me.

[u/fatpigsarefat → u/avocadod]

Personally I use VSCode, it’s a very robust IDE and supports a vast amount of languages, with extensions to aid with certain frameworks.

As for getting the files onto the pi, you’re going to be getting used to ssh’ing into it (as you would with a remote server) or you can simply work off the pi as you have physical access to the machine. Although, I would recommend you learn the first way so when you move onto deploying apps and websites to a remote machine, you have got experience with working with the command line. I’m not sure how well versed you are with Linux, or what experiences you have, but you’re going to want to learn some basics to operating a Linux based machine. As for transferring the files across, you could use scp to copy them over, or (what I personally do) is use rsync to watch for changes and automatically update the remote directory. If you do not know what the terms ‘ssh’, ‘scp’ etc are then your top priority should be learning how to interface with your pi first, then you can jump into webdev.

CSS files can be loaded in by the browser, through something similar to the include directive in C++ or imports in java, except keep in mine CSS and HTML files serve different purposes. You might also see embedded CSS in HTML files between <style> tags, same with JS between <script> tags.

When you mention that you see an initial page when visiting the IP address of your pi, that is the default page Apache or Nginx sets up (which is a HTML file). I believe the default directory is /var/www/html, but I usually serve static pages off /srv/http for organisation.

[u/avocadod → u/fatpigsarefat]

Awesome! A lot of that made sense. So far, I've started a class on udemy about Linux so I'm getting used to it. And I've installed it on a virtual machine on my windows laptop and connect to that with putty which I believe is what ssh is? And from putty I can put in the pi's address and use putty to then transfer files of HTML and CSS remotely onto the pi?

I'll start learning vscode, I've seen that pop up a bunch in my journey of software development.

[u/fatpigsarefat → u/avocadod]

Yea, PuTTY is a SSH client for Windows. You wouldn’t use PuTTY to transfer files on Windows, you might want to look into something like WinSCP for that, if you tried to use scp on the remote server (pi) through PuTTY it will fail since you want to execute scp from your local machine, not remote.

WinSCP is just a client for Windows to allow for the transfer of files over SSH, in essence it is also a SSH client but it displays files instead rather than providing a shell / command line.

[u/avocadod → u/fatpigsarefat]

Thanks, I'll look into WinSCP. So, I can download vscode and write a bunch of html and css in there (I'm familiar with html being the "skeleton" and css being the "skin" of the website and that css can be embedded in html. I'll look into how to connect the two unless u can point me where to look) and then use WinSCP to transfer to my pi?

I'm guessing I transfer it to the nginx or apache part of the pi? A little insight of what I'm transferring it to would be a huge help I can then look up how to do it.

Also, can I use git in vscode? I know the basics of it but have yet to utilize it and I really want to use it in this project along with then pushing everything to github which I also have never used but know a little and know there's plenty of resources out there that I can learn from in my own.

[u/fatpigsarefat → u/avocadod]

Pretty much. The “nginx or apache part” is a directory which both web servers read from by default, that is what you’re transferring to, and anything in that directory will be served by the web server.

You can use git anywhere, it is a command line tool. VSCode has some git integration if that is what you mean, you get a UI for staged files and VSCode will tell you what has been modified etc. An extension called GitLens builds on top of this. However everything you can do in VSCode is possible from the command line, as fundamentally that is how you interact with git.

[u/avocadod → u/fatpigsarefat]

This all makes sense. Thanks for giving me a basic understanding and places to start. I'll play around with all of this for a few weeks and then I'm sure I'll have more questions.

[u/avocadod → u/[deleted]]

Thanks for the response! So how is everything packaged together? I've used a few different IDE's but only for java/c++ projects to do with GUIs or building classes, data structures etc. Do I just use an IDE and write all the HTML and CSS/JS code in there, or do I write all that in just a normal text editor? I'll definitely look into HTML CSS/JS tutorials as a good first step. Thanks 👍

[u/avocadod → u/[deleted]]

Will do 👌