From d0595724cd13a2274e34a813119cf457a796af75 Mon Sep 17 00:00:00 2001 From: mjfernez Date: Wed, 22 Dec 2021 16:40:46 -0500 Subject: Table of Contents! Adds some works in progress This commit adds a table of contents generated in the panupdate script. It also changes some links on the homepage to conform with removing '/site' as the parent directory --- tutorials/www/how-to-make-this-site.html | 54 ++++++++++++++++++++++++++++++-- tutorials/www/quick-intro-html-css.html | 54 ++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 3 deletions(-) (limited to 'tutorials/www') diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index f84414e..c3290e9 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -1,3 +1,49 @@ + + + + + + + how-to-make-this-site + + + +

Background

TL;DR get to the point

I think it was roughly the end of high school when I first had the idea I wanted to make some kind of website. This would be around 2010 and I did what I thought would be a good idea and bought a book on the subject: "Web Sites for Dummies." I was dummy after all...

@@ -71,14 +117,14 @@ link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea

The device "enp7s0" is my Ethernet adapter (starts with an 'e') and my current local ip address for the device is shown. If you use wifi, it will likely start with a "wl." Set the forwarding rule according to this value.

Now get your public ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in the directory you launched the server!

-

How can make this server available on the Internet cheaply and independently

+

How can I make this server available on the Internet cheaply and independently

TL;DR Expense scales with independence. It's possible to become your own service provider, get IP addresses from ICANN, your own hardware to host it, to host your cat pics; but it's also a lot of time, work and money to do all that (this guy did it apparently, and so did Null)

Most likely you'll want to rent someone else's server, usually a VPS.

Once you understand the basic installation above, you can now populate your site with content just by adding HTML files to your web directory. You can use an HTML editor to write these, or you can download a full content management system to help you. Here are some options I know about:

-

This honestly is not that hard, it just takes long and takes away from the joy of writing in my opinion. I personally have set up my own little system where I write content in markdown and templates in the Jinja template language to render it automatically. But if your content is short and sweet, or you're mostly hosting files, writing a few basic HTML files in vim or notepad and adding some CSS goes a long way. I wrote my own view of the topic in the context of how I wrote this site here. And you can find a number of great guides on how to write files, copy them and manage them in the references.

+

This honestly is not that hard, it just takes long and takes away from the joy of writing in my opinion. I personally have set up my own little system where I write content in markdown and templates in the Jinja template language to render it automatically. But if your content is short and sweet, or you're mostly hosting files, writing a few basic HTML files in vim or notepad and adding some CSS goes a long way. I wrote my own view of the topic in the context of how I wrote this site here. And you can find a number of great guides on how to write files, copy them and manage them in the references.

One easy way to create HTML templates with these servers is through the use of "Server Side Includes," which essentially let you past one html document into another. This varies by server, for example, nginx has their own options and syntax detailed here.

+ + diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 33fba18..53073d3 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -1,3 +1,55 @@ + + + + + + + quick-intro-html-css + + + +

Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use an online HTML editor like this one

As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.

The building blocks are very simple, but there's a lot of blocks. The HTML5 specification, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the attributes--or styles--that can be applied to those elements in a format specified here. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I do like understanding how things work. And getting a unique custom HTML site is something anyone with a text editor and a web browser can get done in a weekend.

@@ -338,3 +390,5 @@ src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg"
  • https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b
  • https://stallman.org/common/stallman.css
  • + + -- cgit v1.2.3