96 lines
8.9 KiB
HTML
96 lines
8.9 KiB
HTML
<!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>
|