102 lines
6.1 KiB
Markdown
102 lines
6.1 KiB
Markdown
|
---
|
||
|
|
title: "How I Made This Site"
|
||
|
|
date: 2022-08-31T20:38:09-06:00
|
||
|
|
draft: false
|
||
|
|
searchHidden: false
|
||
|
|
tags: ['self host', 'raspberry pi']
|
||
|
|
summary: 'This is the summary'
|
||
|
|
cover:
|
||
|
|
image: "/images/img.jpg"
|
||
|
|
# can also paste direct link from external site
|
||
|
|
# ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
|
||
|
|
alt: ""
|
||
|
|
caption: "Ocean"
|
||
|
|
relative: false
|
||
|
|
---
|
||
|
|
|
||
|
|
I've dreamed of this day but never imagined I'd actually stop playing league long enough to do it. Turns out, we each have a streak of awesome inside each of us just waiting to burst forth.
|
||
|
|
|
||
|
|
How do websites work?
|
||
|
|
===
|
||
|
|
Back in my senior year of highschool, my buddies and thought it would be funny to have our own blog / website. I didn't think there was much to it, so I turned to godaddy.com, the only website-buying marketplace around. Little did I know that they only sell domain names, and there aren't in a monopolistic market. Did I pay $20 for a domain name? Splashthetown.com says yes. Did I have a website? Nope. Two-thirds of a CS degree later and I think I am finally ready. Billions of webpages exist on the internet, so it can't be that difficult, right? I'm going to walk you through the steps I undertook to get this website to you, and how you are able to see the words you are reading on your screen right now.
|
||
|
|
|
||
|
|
Internet, I've Heard of That
|
||
|
|
---
|
||
|
|
I once heard the internet described as "the cloud", which is good to help people understand you know nothing about it. To give a marginally better explanation, imagine your brain, with all its neurons interconnected and whatnot. Lets call each neuron a "node". Each node holds information, and when it recieves a message it decides what to do with that information, modify it, store it, pass it on, sell it to the highest bidder for ad revenue, the possibilities are endless. In this way, the brain is much like the internet. These "nodes", or nuerons, are actually computers that make up the internet, a big web of interconnected, communicating devices. I know hardly anything about the brain.
|
||
|
|
|
||
|
|
How did I get Here
|
||
|
|
---
|
||
|
|
Here is the process when you type in or click on a link in your web browser:
|
||
|
|
- Your machine sends a **request** with the link info to the "node" or machine giving it internet, typically a router.
|
||
|
|
- The router _routes_ your request to an internet "phone book" of sorts to see what machine on the interwebs your url cooresponds to, much like an address on a package you send in the mail.
|
||
|
|
- With the machines (ip) **address** known, your package is sent to that machine
|
||
|
|
- The machine has some code running on it that opens your package, gives thanks, and as quickly as it can manage, sends a package back to the sender with some code.
|
||
|
|
- That package goes back down the pipes the way it came, your browser opens the package, and you see the package contents, `html`, Mark Zuckerburg pics, cat videos, etc.
|
||
|
|
|
||
|
|
How to create your own _Node_
|
||
|
|
===
|
||
|
|
If you want to put your stake on the great world wide web, then you need a few things:
|
||
|
|
|
||
|
|
- The _Address_ - a domain name, purchasing one lets you tell internet phone books where your computer is.
|
||
|
|
- The _Node_ - a computer that can run some internet code on it. Most people want this to be some computer AWS or other server farm controls so that it stays online 24/7 and can scale easily (your code can be copied to other machines if you get tons of visitors).
|
||
|
|
- Some internet code, typically called a web server
|
||
|
|
|
||
|
|
I will be walking you through the fairly unconventional steps I took to get you here on this web page. There are hundreds of ways to get something on the internet, but my way is certainly one of them. For reference, I am running Arch Linux btw.
|
||
|
|
|
||
|
|
Since I don't want to pay $5 a month for ease-of-use and stability and scalability, I will be using a rasperry pi zero w2 plugged into a charging brick behind my book shelf to be the node.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<img alt="imgage goes here" src="{{< baseurl >}}images/img.jpg">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Get a Domain
|
||
|
|
---
|
||
|
|
Any domain selling company online is eager for your money. I've used [Name](https://name.com) and [GoDaddy](https://godaddy.com), but any google result will do. Purchase one, that is all for now.
|
||
|
|
|
||
|
|
Write some Internet Code
|
||
|
|
---
|
||
|
|
Actually the goal for me with this site is to not have to write any code at all.
|
||
|
|
|
||
|
|
If you don't have a raspberry pi and instead coughed over $$$ to Jeff Bezos, then get the IP address of your machine and skip to step 4.
|
||
|
|
|
||
|
|
1. I used [rpi imager](https://github.com/raspberrypi/rpi-imager) to flash Raspberry Pi OS Lite to an SD card.
|
||
|
|
- You can use any flashing tool, but rpi imager is convenient when working with Pi's, and it lets you configure Wifi so the Pi connects automatically on boot.
|
||
|
|
2. Put the SD into the Pi and turn it on.
|
||
|
|
3. Verify it is connected to the internet:
|
||
|
|
- I use [nmap](https://nmap.org/) to scan my local network
|
||
|
|
|
||
|
|
{{< highlight go >}}
|
||
|
|
nmap -sn 192.168.<insert third octet from device ip here, like 27>.0/24
|
||
|
|
{{< / highlight >}}
|
||
|
|
This gives me output like
|
||
|
|
``` go {hl_lines=[4]}
|
||
|
|
Host is up (0.018s latency).
|
||
|
|
Nmap scan report for 192.168.27.169
|
||
|
|
Host is up (0.077s latency).
|
||
|
|
Nmap scan report for raspberrypi.lan (192.168.27.161)
|
||
|
|
```
|
||
|
|
4. Use ssh to connect to the device `ssh user@192.168.27.161`. Do _not_ forget to include the user name in the ssh command
|
||
|
|
- For this website, I'm using [Hugo](https://gohugo.io/), a static site generator written in [Go](https://go.dev/). Follow the instructions [here](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) to install and set up a simple site locally with Hugo.
|
||
|
|
- Once your site is built, run `hugo` in the base directory of your hugo site
|
||
|
|
```
|
||
|
|
user@raspberrypi:~/foss-cat $ hugo
|
||
|
|
Start building sites …
|
||
|
|
hugo v0.102.2-f104f7bc02f7d23d41f17c7353df1217cf25b2dc linux/arm BuildDate=2022-08-31T10:42:06Z VendorInfo=gohugoio
|
||
|
|
|
||
|
|
| EN
|
||
|
|
-------------------+-----
|
||
|
|
Pages | 10
|
||
|
|
Paginator pages | 0
|
||
|
|
Non-page files | 0
|
||
|
|
Static files | 0
|
||
|
|
Processed images | 0
|
||
|
|
Aliases | 2
|
||
|
|
Sitemaps | 1
|
||
|
|
Cleaned | 0
|
||
|
|
|
||
|
|
Total in 756 ms
|
||
|
|
```
|
||
|
|
|