<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <link rel="shortcut icon" type="image/ico" href="./images/nuke.ico" /> <title>Web Development</title> </head> <body> <h1> This Page is Under Construction </h1> <h3 style="margin-bottom: 0px"> Tots Posts </h3> <div class="tots_post"> <h3 class="entry_heading">Online!</h3> <h5 class="tots_date_category"> 2022-06-06 - Web Development - Administration </h5> <p> Hopefully you can see this because that means that I didn't mess anything up when updating the site! I'll quickly recap what I did over the last week and clarify what's in the pipeline for this upcoming week.</p> <p>So I ended up destroying and remaking the <a href="https://www.vultr.com/" target="_blank" rel="noopener noreferrer">Vultr</a> VPS <strong>[Virtual Private Server if I didn't clarify that previously]</strong> so that I could have a fresh, clean environment to start messing around in. I decided to go with their smallest, and cheapest plan to start things off <strong>[I think it can handle the traffic that I expect to start "pouring" in]</strong>.</p> <img class="resize" src="./images/vultr_1.png" alt="Vultr Pricing" /> <figcaption>Vultr Cloud Pricing</figcaption> <p>I found this <a href="https://www.youtube.com/watch?v=-B-4RG8Q0aw" target="_blank" rel="noopener noreferrer">video</a> that explained how to calculate how much needed bandwidth I needed to budget for. Again I don't think I need much <strong>[something tells me I'm the only one checking in on this website 100 times a day]</strong>. I stuck with a <a href="https://www.debian.org/" target="_blank" rel="noopener noreferrer">Debian</a> distribution for no reason in particular other than it's what I used previously on other VPSs <strong>[if your unfamiliar with Linux and Linux distributions I'll make some intro to Linux guides in the future that'll explain all the common nerd jargon]</strong>.</p> <p>I grabbed the domain name from <a href="https://www.dynadot.com/" target="_blank" rel="noopener noreferrer">dynadot</a> and changed the DNS records to have it point to the IP of the VPS. I'll write up a full guide for this in a bit <strong>[honestly it's pretty easy]</strong>. I then installed nGinx, changed the config files to point to the html/css files, and started the service <strong>[kinda skipped the nitty gritty but again, guide incoming]</strong>. </p> <p>I was able to visit the site at this point from a client device but still had to set up <a href="https://www.ssl.com/faqs/what-is-https/" target="_blank" rel="noopener noreferrer">SSL</a> <strong>[Secure Sockets Layer]</strong> so that the connection was encrypted. Apparently it was pretty uncommon in the past to have encrypted connections on personal websites but that was changed with the help of the <a href="https://www.eff.org/" target="_blank" rel="noopener noreferrer">EFF</a> with <a href="https://letsencrypt.org/" target="_blank" rel="noopener noreferrer">let's encrypt</a> which offers free, open certificates <strong>[pretty cool of them honestly]</strong>. To make things even easier they also provide a python script(?) called <a href="https://certbot.eff.org/" target="_blank" rel="noopener noreferrer">certbot</a> which automates the process of obtaining one of these ssl certificates. After I ran it I got the cool green lock icon in the address bar and was feeling pretty cool myself! <strong>:)</strong></p> <p> Those were the major updates for this week. Next week I'll be looking into hosting a git server to upload my code <strong>[including anything that I create for this website ie. html/css/scripting stuff]</strong> and a git visualiser. Hosting a git server seems easy enough but finding the right visualiser might need a bit more research. Right now the most promising candidate is <a href="https://codemadness.org/stagit.html" target="_blank" rel="noopener noreferrer">stagit</a> which is a static git page generator. Hope that works out.</p> <p> The stretch goal for this week is the possibility to host videos with <strong>[maybe?]</strong> a <a href="https://joinpeertube.org/" target="_blank" rel="noopener noreferrer">peertube</a> instance. Not sure how much of a pain and/or the bandwidth limitations will throttle the experience too much but it sounds useful to post, even short, videos demonstrating processes explicitly <strong>[if a picture is 1000 words than what does that make a video]</strong>.</p> <p> That's the update for the week.</p> <p> Next <em>TODOS! <strong>[Can be updated throughout the week]</strong></em></p> <ul> <li> <input type="checkbox" class="todos"> Look into hosting git server</li> <li><input type="checkbox" class="todos"> Set up gitolite for git permissions</li> <li><input type="checkbox" class="todos"> Set up stagit for git visualization</li> <li><input type="checkbox" class="todos"> Possibly Peertube for embedded videos</li> </ul> </div> <div class="tots_post"> <h3 class="entry_heading">Bottom of the Stack</h3> <h5 class="tots_date_category"> 2022-06-02 - Web Development - html/css </h5> <p> I'll start things off with the <em>design goals</em> of this very website and what <em>I have done so far</em> to get things going. </p> <p> Unless things have changed drastically by the time you read this <strong>[which I doubt it has]</strong>, it should be a fairly vanilla 1995 World Wide Web experience. There are a couple reasons I chose to go this route. </p> <p>Aside from the glaring hurdle that is my complete lack of any formal or informal web development experience, I like keeping the <a href="https://homepage.cs.uri.edu/~thenry/resources/unix_art/ch01s06.html" target="_blank" rel="noopener noreferrer">UNIX philosophy</a> in mind when working on my projects <strong>[although manipulated to mean exactly what I want it to mean at any given time]</strong>. For those unfamiliar, the basic principle is to design programs to <em>do one thing and one thing well</em>. I want this website to be a place where I throw my ideas into the void and can reference them later <strong>[and maybe share some of that knowledge to the few that find themselves here]</strong>. Although fun, interactive, dynamic features would be cool to look at, I think it, ultimately, restricts my ability to complete this goal effectively.</p> <p> That isn't to say that I am completely against adding any scripting for the sake of learning or experimenting <strong>[this IS a hobby website after all]</strong>, but I do want to be able to quickly document my progress without too much thought on aesthetic <strong>[aside from some font colors]</strong>. </p> <p> But let me get down to brass tacks, what have I done so far. </p> <p> Well if I am being completely honest, we aren't even online yet. I bought a domain name from <a href="https://www.dynadot.com/" target="_blank" rel="noopener noreferrer">dynadot</a> and have a <a href="https://www.vultr.com/" target="_blank" rel="noopener noreferrer">Vultr</a> VPS <strong>[hosting some other things at the moment]</strong>, but haven't set anything else up. I'll look up some guides tomorrow <strong>[famous last words]</strong> to see how to get us up and running. </p> <p> So that's what I haven't done. <em>What I have done</em> is started getting comfortable with <em>HTML/CSS</em>. I have written in other markup languages like Markdown and LaTeX so it wasn't too painful to pick up but getting used to syntax is something you can't really rush <strong>[maybe you can but I can't]</strong>. </p> <p> So, a few of the things I've learned so far: <p> <ol> <li>Basic HTML structure ie. Defining a page with <em>"<!DOCTYPE html>"</em> as well as <em><head></em>, <em><body></em>, and <em><html></em> tags.</li> <li>Other Basic HTML tags ie. <em><p></em>, <em><strong></em>, <em><em></em>, etc.</li> <li> How to link to a style sheet <strong>[a cascading one to be exact]</strong> with <br/><em><link rel="stylesheet" type="text/css" href="$(LOCATION OF THE STYLE SHEET)" /></em></li> <li>Defining specific tags with <em>id</em>, ie. <em>id="name_of_tag"</em></li> <li> Basic CSS syntax </li> <li> Referencing specific tags by id with <em>#$(ID_NAME)</em> </li> </ol> <p> Next <em>TODOS! <strong>[Can be updated throughout the week]</strong></em></p> <ul> <li> <input type="checkbox" class="todos"> Link Domain Name to VPS</li> <li><input type="checkbox" class="todos"> nGinx, WHAT IS THAT?</li> <li> <input type="checkbox" class="todos"> Look into hosting git server</li> <li><input type="checkbox" class="todos"> Set up gitolite for git permissions</li> <li><input type="checkbox" class="todos"> Set up stagit for git visualization</li> <li><input type="checkbox" class="todos"> Possibly Peertube for embedded videos</li> </ul> </div> <footer> <a href="./index.html">Home</a> </footer> </body> </html>