tom/fosscat-site
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated the contents of how-i-made-this, added footer styles, updated config, added images

Browse Source
This commit is contained in:
Nathan Anderson 2022-09-01 21:19:55 -06:00
parent 7bf3569750
commit 47d10f3e4d
9 changed files with 164 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
archetypes/default.md
View File

@ -4,6 +4,7 @@ date: {{ .Date }}
draft: true
tags:
summary:
tocOpen: true
cover:
image: "/images/img.jpg"
# can also paste direct link from external site

10
config.yml
View File

@ -7,12 +7,13 @@ params:
defaultTheme: dark
homeInfoParams:
Title: Hello weary traveler
Content: This is my personal blog. I write about open source, technology, philosophy, digital privacy, and whatever else is pressing on my mind
Content: This is my personal blog. I write about open source, technology, philosophy, digital privacy, and whatever else is pressing on my mind. Feel free to reach out over email, tom@fosscat.com
ShowShareButtons: false
ShowReadingTime: true
ShowToc: true
ShowToc: true # Table of Contents
ShowBreadCrumbs: true
ShowCodeCopyButtons: true
ShowPostNavLinks: true
author: Tom Cat
fuseOpts: # This modifies search params
isCaseSensitive: false
@ -26,6 +27,11 @@ params:
disableHLJS: true
cover:
responsiveImages: true # disable to speed up build times at cost of responsive sizes
editPost:
URL: "https://gitlab.com/foss-cat/hugo-site/-/blob/main/content/"
Text: "Suggest Changes" # edit text
appendFilePath: true # to append file path to Edit link
enableEmoji: true
outputs:
home:
- HTML

15
content/posts/a-feedback-loop,-adding-comments.md Normal file
View File

@ -0,0 +1,15 @@
---
title: "A Feedback Loop, Adding Comments"
date: 2022-09-01T18:56:01-06:00
draft: true
tags:
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: ""
relative: false
---

15
content/posts/ci-cd-and-why-its-cool.md Normal file
View File

@ -0,0 +1,15 @@
---
title: "Ci Cd and Why Its Cool"
date: 2022-09-01T18:54:34-06:00
draft: true
tags:
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: ""
relative: false
---

178
content/posts/how-i-made-this-site.md
View File

@ -4,26 +4,24 @@ date: 2022-08-31T20:38:09-06:00
draft: false
searchHidden: false
tags: ['self host', 'raspberry pi']
summary: 'This is the summary'
summary: 'I talk about how the "cloud" works, and show '
tocOpen: true
cover:
image: "/images/img.jpg"
# can also paste direct link from external site
# ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
image: "/images/ocean-aerial.jpg"
alt: ""
caption: "Ocean"
caption: "The ocean, like my mind, is really big"
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.
I've dreamed of this day but never imagined I'd actually think I've got ideas mature enough to do it. Turns out, kids can have good ideas too once in a while.
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.
# How do websites work?
Back in my senior year of highschool, my buddies and I 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 what I could even do with one. Did I pay $20 for a domain name? Splashthetown.com sat vacant for exactly one year under my command. 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.
## 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. Our goal is to add a node to the network, and tell it to send specific information to anyone who calls on it.
<!--
How did I get Here
---
Here is the process when you type in or click on a link in your web browser:
@ -32,70 +30,142 @@ Here is the process when you type in or click on a link in your web browser:
- 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_
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
- The _Address_ - a domain name, purchasing one lets you tell internet phone books where your computer is located in the web.
- 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). But it can get boring if you don't have to keep fixing things on your server.
- The _Code_ - Some call it a web server, I adhere to this practice.
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.
I will be walking you through the steps I took to get you here on this web page. There are hundreds of ways to get something on the internet, and my way is certainly one of them. For reference, I am running Arch Linux btw on my main computer.
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.
![image](/images/rpi-bookshelf.jpg#center)
My Rasperry Pi Zero w2 - How it is currently serving up the web
## Get a Domain
<img alt="imgage goes here" src="{{< baseurl >}}images/img.jpg">
Any self-respecting, domain-selling company online will happily take your money. I've used [Name](https://name.com) and [GoDaddy](https://godaddy.com) (but not really), but any google result will do. Purchase one, that is all for now. This probably didn't need a whole section...
![image](/images/img.jpg#center)
## Write some Internet Code
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.
2. Put the SD card 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)
``` s
nmap -sn 192.168.<insert third octet from device ip here, like 27>.0/24
```
This gives me output like
``` s {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
4. Use ssh to connect to the device `ssh user@<ip address of server>`. Do _not_ forget to include the user name in the ssh command.
Total in 756 ms
5. For this webserver, I'm using [Hugo](https://gohugo.io/), a static site generator written in [Go](https://go.dev/) to create the pages, and [nginx](https://www.nginx.com/resources/wiki/start/) to serve the files. Follow the instructions [here](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) to install it to your server / _node_ and set up a simple site with Hugo. Optionally, you can build your site locally and then share it to your server with git, but that is out of scope for this post.
- Once your site is built, run `hugo` in the base directory of your hugo site. This will generate all the static files for your website. It gave me this output:
``` s
user@pi:~/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
```
6. With your hugo pages built, install nginx and configure it to serve those pages. I found [Gideon Wolfe's guide](https://gideonwolfe.com/posts/sysadmin/hugonginx/) to be super useful. On my raspberry pi I ran
``` sh
sudo apt-get install nginx
sudo /etc/init.d/nginx start
```
Then `cd` into the `sites-available` config of nginx and create a new file, call it something creative like `<your-domain>`. In it, put this configuration, changing lines 5 and 7 to their proper names:
``` sh {linenos=true,hl_lines=[5,7]}
server {
listen 80;
listen [::]:80;
server_name mysite.com www.mysite.com; # Domain name you purchased
root /home/<my-username>/<my-hugo-site>/public/; # Absolute path to your hugo site
index index.html; # Hugo generates HTML
location / {
try_files $uri $uri/ =404;
}
}
```
Now, create a sym-link of the new file into the directory `sites-enabled`. Don't use relative paths, I got weird nginx errors :no_mouth: :
``` sh
sudo ln -s /etc/nginx/sites-available/<config_file> /etc/nginx/sites-enabled/<config_file>
```
With that complete, run `sudo systemctl restart nginx.service` and you should be able to visit the ip address of your machine and see your hugo site!
7. Add domain name records through your domain name provider. You probably just need two A records, one with and without "www". It should look something like this:
| Type | Host | Answer |
|------|----------------|--------------|
| A | www.<mydomain> | ip address |
| A | <mydomain> | ip address |
- If you are self-hosting like I am, you need to port-forward your device to make it visible on the world-wide-web. The steps to do this vary depending on your router. I fortunately and unfortunately have Google Fiber. So I can download Warzone in an hour but my resistance to an all-knowing data-collecting monolith feels futile. To port forward, you want to lock your raspberry pi's IP assigned by the router. This is done through DHCP. Then, open up your router's external port to the cooresponding internal raspberry pi port. For http you want your pi's port `80`. If you use SSL (which you should, its easy to setup), then use port `443`.
:exclamation: DISCLAIMER :exclamation:
Port-Forwarding was something I have always wanted to do but my loving father never let me do it as a kid because he said bad stuff could happen, i.e stranger danger. I don't think self-hosting is super safe or reasonable for most use-cases today, but I'm willing to do it because its awesome and I've always wanted to (see above). You should definitely lock down your local device with a good password and enforce SSH with trusted keys only. To do that, run this command on your regular machine (laptop) to your raspberry pi.
``` sh
ssh-copy-id <user>@<ip of pi>
```
SSH into the pi and go to the file `/etc/ssh/sshd_config` and modify line 58 to read:
``` sh {linenos=true,hl_lines=2,linenostart=57}
# To disable tunneled clear text passwords, change to no here!
PasswordAuthentication no
#PermitEmptyPasswords no
```
Exit and SSH back in to see if it works.
Now reboot your machine. Proceed with cautious optimism.
You've been warned.
8. Lastly, I used [certbot](https://certbot.eff.org/) to add SSL to my site, because its easy and it makes your site's sketchiness go from back-street alley to across-the-street mailman. On my Raspberry Pi I ran:
``` sh
sudo apt install snapd # I didn't want to install snap on such a resource-limited device, but it was the recommended way, and I didn't want to trailblaze any longer, especially with ssl configuration, a subject I know little about
sudo snap install core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot # Adds cert-bot to your PATH if /snap/bin isn't configured, you may need to restart / log-off log-in for the last line
sudo certbot --nginx
```
# Spread your Propaganda
If you followed this guide and got a working site, [send me an email](mailto:tom@fosscat.com). I would love to check it out. This is my very first blog post and my very first blog site. I spent a whole lot of time setting everything up just how I like it, and I'm pretty happy with how it all turned out. I think the actual setting up of the website probably only took a few hours, but writing this and getting all the styles and aesthetics to look the way I want took 10+ hours.
I also decided near the end that I would open-source my hugo pages, so if you find any mistakes, want to copy the styles, or just criticize my ideas, feel free to follow the `Suggest Changes` link above or click [here](https://gitlab.com/foss-cat/hugo-site/) to let me know how you feel.
'Til next time

33
content/posts/my-first-post.md
View File

@ -1,33 +0,0 @@
---
title: "My First Post"
date: 2022-08-31T12:33:24-06:00
draft: true
---
Does this look big?
==================
Another markdown header
----------
`This is code`
Italics are easy, just one `_` or `*` before and after like *this*
To do bold, just put two before and after, looks like **this**
Unoredered lists you just use `+` `-` or `*`
- they
- are
- interchangable
And numbered lists are with `numbers` lol
1. like
2. so
For links, you need to wrap the link text (clickable part) inside `[]`, then follow it with the actual url inside `()`
[click me](https://lmao.com)
Here is my first ever post :3 I hope it looks nice <3
Love,
Nate

0
static/images/img.jpg → static/images/ocean-aerial.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 504 KiB

After

Width:  |  Height:  |  Size: 504 KiB

BIN
static/images/rpi-bookshelf.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 KiB

2
themes/PaperMod/layouts/partials/footer.html
View File

@ -10,7 +10,7 @@
<a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
<a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
Hosted on
<a hfer="" rel="noopener" target="_blank">gitlab</a>
<a hfer="https://gitlab.com/foss-cat/hugo-site/" rel="noopener" target="_blank">Gitlab</a> because boo Github
</span>
</footer>
{{- end }}