Dec 5, 2025: The website has been ported over to Obsidian and is more of a digital garden Apr 25, 2025: The website is now [fieldrf.com](http://fieldrf.com) is now developed on and hosted by Notion. The gitlab code was becoming hard to manage. Mar 27, 2022: The website is now hosted by Github. Feb 21, 2022: The webiste [davidmcphee.ca](http://davidmcphee.ca) is accessible by the public. # Introduction There is more to creating a website than just buying a cool domain name, as I have found out. This project used a raspberry pi to host the files of this website, _meta_. This was a very low cost way to experiment with web hosting, one of the driving factors for this project. I originally wanted to have a personal website that would contain my CV and other interesting topics. I thought it was going to be as cheap as just buying a domain, however I discovered there are a lot more steps. To develop even the most basic website, you need: 1. A place to host the website files 2. A domain name 3. A connection to the World Wide Web 4. Website files (the content) ## Place to Store the Website Websites are stored on servers, or computers. I created a experiment where I locally hosted some example files on my computer, and then connected over the exposed port to get those files. This works for local networks but is unsafe if exposed to the entire internet. Welcome the raspberry pi. The rpi is a small computer that can do almost anything a normal computer can do… like host a website. The raspberry pi OS was installed on an SD card (the sole memory of the rpi) and installed using the raspberry pi imager. I needed to connect a Keyboard, Video, and Mouse to the rpi to be able to do some intial setup, such as enabling SSH to be able to access it from my computer. Here is a photo of my setup, the rpi dangling from my router, and the KVM connected. ![[4 - Attachments/image 24.png|image 24.png]] The rpi is connected to a power cable, ethernet, and a KVM. This was only temporary as I just needed it for SSH setup (wife was relived). I changed the default username and password, as I have heard stories before about hackers simply searching for these types of devices and attempting the default login. Once this was set up I could tear down the mess, keeping only the power and ethernet. Note: I did mess up some software later on and had to redo this entire setup, lol ## Domain Name While not strictly required, nobody wants to click on a random IP address so a domain is required. This is more or less cosmetic but people would much rather go to [davidmcphee.ca](http://davidmcphee.ca) instead of 204.83.45.209. I spent $24 CAD to lease the davidmcphee.ca for 2 years, not bad. There was one work-around to get a free domain but it would look something like [davidmcphee.scammy.tk](http://davidmcphee.scammy.tk) (gross). On GoDaddy I just needed to tell the service to point any traffic to [davidmcphee.ca](http://davidmcphee.ca) to my routers IP address. ![[4 - Attachments/image 1 12.png|image 1 12.png]] ## Connection to the World Wide Web The moment every computer dreams of, turning into a server. Every website is hosted on a computer, well, server. When another computer, you, wants to visit a website, you actually request the webpage data. You ask the server for a webpage and the server sends you over the files that make up the said webpage. A web browser does all of this for you but cannot act as a server. Therefore the rpi needs a different tool to serve the web files when someone connects. The tool used is called Apache and is open source for my use case. ### The Birth of a Webpage Apache is capable of serving HTML files over HTTP and HTTPS web protocols. The files on the rpi server .html and a browser connects via HTTP(S). After the installation, a default landing page was made in the /var/www/html/ directory. If a computer makes a HTTP connection, they will get this page: ![[4 - Attachments/image 2 7.png|image 2 7.png]] ### My website for Everyone The IP in the above figure is a local address. This means that only people on my wifi could access it. To allow public computer access, the router needs to be reconfigured. The rpi is connected via ethernet and given a static IP to avoid DHCP configuration issues. The router then needed to be configured with a server service in the Port Forwarding section. The service opened port 80 for the TCP to the rpi. Now when someone connects to the public IP assigned to the router, they are directed to the rpi which in turns sends them the HTML _this website_. ## The Website Files A website is actually a directory with many files within. This website was made from scratch, so no online website builders like Wix or SquareSpace (edit: we now use Notion). Is is the first time that I have ever used HTML or CSS which meant a ton of small victories and a ton of frustration. ### Welcome to my Domain It is best to start with a breakdown of the domain: > [!important] http:// www .davidmcphee .ca Starting from the back: **.ca** is a top-level domain in Canada. The Canadian Internet Registration Authority (CIRA) operates the domain name registry. Canadians, like me, can register their domain with the CIRA to get a human-readable name for their server (website). The CIRA only registers domains through a certified registrar like GoDaddy. Other examples of top-level domains are _.com, .org, .scam_. **.davidmcphee** is a domain and is pointed to the server hosting these web files. **www** is a sub-domain of the domain. Many websites don’t even include this sub-domain anymore. The reason for this is because when computers were invented, hosting websites were not their primary objective. The functions of the older computers required different types of information for different types of tasks. Thus engineers added sub-domains for the type of files served with each function with one of them being the World Wide Web. The internet has become by far the most popular way for people to connect to servers and so engineers dropped the www and made it the default sub-domain for the server. **http://** is the protocol used to connect the computers together. In this case it is HyperText Transfer Protocol. The user’s computer is requesting HTML files from the host server i.e. the user is attempting to view a webpage. **Putting it all together** a user is requesting HTML files from the server that [davidmcphee.ca](http://davidmcphee.ca) is pointing to. ### Server Structure When a user requests an HTML file, they are sent the file at the default location of the raspberry pi /var/www/html/. The html/ directory has a file named index.html which is sent to the user. There are other html files in this directory that a user can access if they type the path or click the navigation bar. Each page has it’s own HTML that include paths to .png, .jpg, and .pdf files. There is another very important file on the webserver, _main.css**.**_ A CSS file adds all the beauty to the website. HTML is the foundation and CSS is the paint. Another typical file that can be found on the server is a javascript file (however I am not skilled enough to attempt to write in javascript). With all of this together, it is clear why most people use a website builder, but not this website (edit: yes this website). This project gave me the opportunity to learn HTML, CSS and its real world applications. It was a try-and-fail approach most of the time, but sometimes it just worked. ### HTML The HTML for this server is very basic. It includes a header where the CSS is linked, and a body. The HTML is a bunch of code blocks placed on top of one another to create the website. The two tricky aspects of the HTML was the embedded tweet and the comment box. Each of these were iframes and placed directly into the HTML code. A block is placed around he twitter iframe so that it can be moved and sized. The comment box did not work with this approach so it is all by itself in another main block. Any website HTML can be viewed by right-clicking and selecting “view page source”. This was the first HTML written for this server: ![[4 - Attachments/image 3 5.png|image 3 5.png]] ### CSS The previous image was OK, but can be vastly improved with some coloring and maneuvering of blocks. - Why is the background white - Why is the text so small (and serifed) - Why is there no navigation ![[4 - Attachments/image 4 5.png|image 4 5.png]] As seen above, the webpage is now gray with a light-grey box to hold all the text and nav bar. The text and nav bar are defined in the HTML, but it is the CSS that places them in the right spot. The ‘photo of me’ is missing because it has not been uploaded to the rpi yet. I found that the quickest way to check changes with the CSS or HTML was to connect them to a local IP rather than the domain during development. Chrome would cache the CSS making it appear as though none of the changes had be made, so I had to mostly work in private browsers. ### A note from 2025 It is humbling to look back on this journey of creating a website using a raspberry pi and basic html/css knowledge. This was even prior to AI so all of the research and code was done on stack overflow, rpi forums, etc. This website is now [fieldrf.com](http://fieldrf.com) and “developed” and hosted on Notion. The drive to develop in Notion is to limit the amount of time required to build the webpage to focus more time on actually creating the content. ![[Connect#Connect]]