enigmari - Tumblr blog

enigmari · 1 day

Text

hi. do you hate the way that social medias are all imploding on themselves and hate being here and being subjected to their whims and want to blast everyone responsible with psychic mind beams?

then take my hand... i can't help with the mind beams but I can guide you into the world of People Having Their Own Personal Websites Again

RSS/Atom Feed Reader

Whether you make your own website or not, if there's one thing you take away from this post it's that you should get a feed reader, which will allow you to subscribe to people's personal websites and even most social media and get updates in one location without needing any accounts! Even if you specifically don't make your own website, this will allow you to follow the people who do :)

There are all sorts of options for this out there, some feed readers are jam packed with a zillion features i couldn't begin to describe. Because I just use feedbro:

Which is extremely simple and free and does support different browsers if you're not using firefox for some reason, and I've never needed anything more complicated, so I don't really know what the more complicated ones do.

You just add the RSS feed to feedbro, and from then on any time that website updates (especially ideal for following webcomics fyi), you'll get a little notification for it!

HTML

Onto the actual making your own website part—HTML, which is really, really simple! If you're intimidated by coding, worry not, as it's not actually coding—it's essentially just written tags that mark blocks of text, describing what that text is. Here's a 5 minute video you can watch that explains exactly what it is and what it's used for:

youtube

Not a video guy, even for 5 minutes? Neocities has a very short and simple interactive introduction to HTML you can run through on this page (not very mobile friendly, however):

Once you're familiar with HTML, the best way to learn what to do with it is simply to just make something.

Open notepad, and just write out the basic html structure of a webpage with a header and a body with the body saying some funny phrase (or hello world if you can't think of one). save it as index.html, and open that up in your browser. Lo, a webpage!!

CSS

Kinda ugly though. Websites haven't looked that plain in a long time, and that's because we decided to make cascading style sheets to make websites look prettier.

Anyway I got another 5 minute video for you, this one explains what CSS is :)

youtube

Learning how to use them

Now that you are familiar with what HTML and CSS is, I recommend that you head on over to the Mozilla Developer Network and follow their completely free Getting Started With The Web course:

And make your own personal website as you follow along! Make that thing personal to you and not some generic tutorial thing and you'll have a lot more fun with it :)

Sharing your website with the internet

As you make your website, you're gonna want to show it off. There are two options I recommend for this, option one has already come up: Neocities

Pros:

On-site text editor and file creator allows you to just open up neocities and create and edit your webpages directly in your browser, no need to download an IDE to edit with.

Big community aspect, neocities is actually a social media! You can follow other websites, people can comment and like your site updates, etc... If that sounds fun to you, its a unique aspect of neocities!

Extremely beginner friendly, no set up required beyond writing the html itself. It even comes with some ready made example files to help you get started!

Cons:

Batch upload options are incredibly limited, and what there is (which is limited to subscribers and not well documented), is shockingly slow—like, taking an hour to move a few megabytes because it reauthenticates for every single file transfer and if youre moving a bunch of tiny 1-2kb files this process takes forever. The alternative is drag and drop uploads, which are very buggy for mass uploads and uploading multiple directories never works right

As a consequence, it is not possible to utilise a static site generator effectively with neocities, which means each page needs to be edited individually, and updating your layout is rather difficult to do as you'll have to edit every page one by one.

So, my general opinion of neocities is it's a wonderful place to begin! But it is entirely possible that your needs, or desire to simplify the editing process, may eventually outgrow it.

If you're not very familiar with HTML and CSS yet, I would start with neocities.

Hot Tip! If you want a url that reads website.neocities.org/about, rather than website.neocities.org/about.html, make a new folder named about, and inside of there make a file named index.html. that file's address is now /about!

ALSO!! You will need to code your own RSS feed, and manually update it. This isn't difficult to do the syntax is very similar to HTML, just google it :)

***

If you've a little familiarity with HTML & CSS and feel confident handling some more complicated initial setup to allow for more flexibility, automation, and not having to edit your navbar on every single page on your website every time you want to add a new link, then I recommend option two: Netlify

Pros

You can drag and drop the folder containing every webpage and file and directory on your website and upload that all at once, no issues with batch uploading like neocities :)

You can link your netlify account to a git respository, such as through github, and combine it with a static site generator, such as 11ty, and then it will automatically rebuild your website for you whenever you add, remove, or update a file in the repository. Using something like VSCode, you can edit your website files on your computer, hit save, then send those straight to your repository and automatically update your website.

This means you can edit and preview your website locally on your computer before you send those updates to the internet, and it also grants you access to all sorts of tools and extensions that make it easier to make websites than neocities little simple editor!

Cons

There is no on-site file editing or individual file management. If you drag and drop upload your website, I do believe you have to drag and drop the entire website every time you update. This is only a con if you do not set up git integration, if you do then this con is addressed and fixed!

The set up is much more involved and less intuitive. It's not difficult! But you will be downloading all sorts of different things to get the pieces into place, which might be a little overwhelming. Just remember this is a one time set up and once everything is in place you'll be set for the indefinite future, just take your time.

11ty/Eleventy

Now I've mentioned static site generators (SSGs) a couple times now and 11ty once, and you might be wondering what exactly that is.

Now a website, like tumblr for example, has some areas of dynamic content. This post is in one of those areas: the post feed and content area in general changes from page to page and scroll to scroll.

But around this area, we have the header, the sidebar, the footer, all your little navigation and GUI type parts of the website. Those don't, or minimally, change between pages. If you want to edit the content of the footer, on neocities you'd have to edit every individual page to do this which is a slog the bigger your website gets.

But what if, your footer was one single file that you add into a bigger layout file, and then when you make a new page, you assign it that layout? And then you just edited the footer file when you wanted to change the footer, and every page with a layout that uses the footer file gets automatically updated?

That's what a static site generator does babeyyy, there's quite a few different options out there—next.js, hugo, gatsby, jekyll, zola, and more... but I personally use 11ty/Eleventy, because it's very simple and doesn't require any javascript on the final pages that get output like some of the other options do, instead printing out plain html and css files.

To use 11ty effectively you will need installed on your computer: Python, Git, Node.js, and VSCode or another IDE but ill continue to assume you have VSCode in this post. You'll also want a repository for your website set up—I'm only familiar with github which has built in integration with VSCode, but if you want to you can explore alternatives, but again, I'll just assume you're using github! Which is to say, I won't personally be able to offer advice if you go a different route.

Anyway, install python, git, and node in that order, and then open up that link and follow their getting started guide :)

You'll still need to set up the RSS feed, but there are extensions for 11ty to do this automatically, and alternatively you can use the template system to make a semi-manual one.

Javascript

Simple HTML and CSS webpages is great and all, but what if. You click something on your webpage. And then, something happens? Or, you load a webpage, and it gets information from another website, and puts it onto yours? Like maybe pulling your recent tumblr posts and adding them to your website?

That would be fun :)

So to make your pages interactive and do things like that, you need javascript. If you follow the MDN web dev tutorials you'll get to javascript eventually anyway, but my personal recommendation for where to learn JS is here:

SASS/SCSS

Syntatically Awesome Style Sheets, or Sassy CSS, or just SASS, is basically to CSS what SSGs like 11ty are to HTML.

Macros in nunjucks and liquid (the templating languages used by 11ty), functions in javascript, these little blocks of repeatable code in these languages are made possible in CSS via mixins. There's a parent selector! And a bunch of other stuff I could talk forever about—point is, if you're well acquainted with CSS and would like access to some more advanced functionality, SASS is well worth a look into. There's a plugin for 11ty you can install to your project directory which will automatically build .sass files into .css files for you when your site gets built :)

Front-end Frameworks

Maybe web design isn't your greatest strength, maybe it is but you'd like to have some of the menial work automated for you, either way it might be worth having a little look into some frameworks to see if they'll make life easier for you. Now, I'm a toyhouse coding regular, so the framework I'm most familiar with and indeed use on my own websites and blogs is Bootstrap:

If you set up SASS, you can edit it to look however you want it to :)

Another framework that I'm loosely familiar with but haven't used a great deal that which is more CSS focused is tailwind:

It never really clicked with me but it might with you who knows!

***

And that's all I have I think, the various links I've shared will go into things in more depth and link to other resources and guides that you might need!

The only other thing I'll say is this:

Coding is not about knowing how to do something, but knowing how to look up how to do something.

I've given a mighty kick start here as best I could, but get familiar with googling things like "How to do champfered corners CSS," "how to execute an if statement inside a template literal JS stackoverflow," "how to install node packages reddit", "CSS grid generator," "CSS clip path generator," and so on and so forth! Stackoverflow, reddit, MDN, w3schools, and csstricks are your best friends for finding information. Good luck!!

2K notes · View notes