Subscribe to my mailing list!

wiks.wiki

The public, practical, personal, and political journal of your favorite high IQ bitty.

© 2023. All rights reserved. rss feed

Don't know much about coding

20 Mar 2020

Most tech blogs are pretty intimidating and only give you a snippet of what you’re supposed to do. I love my handmade website, and while services using pre-built website templates and drag and drop elements have become increasingly popular, I think they’re boring and limiting. They slap their brand all over your own personal site, and if I were you, I wouldn’t be a fan of it. I think creating a website using your own CSS and HTML is a fun, expressive way to introduce somebody to coding, so here, I’m going to show you how to do it! Note that it’ll be static, so the pages won’t change between user visits, but that’s perfect for a blog or photo gallery because in most cases, you wouldn’t even want that to change! I’ll be linking websites to specific terms if you’d like to do further research. Honestly, a lot of coding is just knowing how to look up the right thing on the web to find the solution to your problem.

This is a basic introduction to creating a website using Github pages (which is what I use at the time of writing this), and while you can use their how-to, I’d like to think mine is a little bit more human.

  1. Make a Github account. This will let you create and host repositories of code using Github.
  2. In the upper right hand corner, next to your account circle, click the + symbol and click “New Repository”.
  3. Name your repository username.github.io, where "username" is your username for the Github account you just made. Make sure it’s set to public, and then hit “Create Repository”.
  4. Now, because I like a graphic interface out of ease of access, I suggest you download Github Desktop in order to start pushing, or adding, code to your repository on your account. The alternative is using the straight up Terminal but I don’t think that you or I are ready for a rundown of all the commands for that, especially to start.
  5. Sign into your Github account on Github Desktop.
  6. After you've logged in, click “Clone Repository”. Press the name of the repository you just made, take notice of (or change) the local path of where the repository (or "repo") will be located. I keep mine in the /Documents/GitHub folder, just because I’ve gotten used to it. Maybe you’ll want to keep yours on your desktop, or something. Dunno. Keep in mind the location of your folder for later use. This where everything will be located for your website on your computer.
  7. Create an index.html file by opening TextEdit, the code editing software that comes with your macOS, and saving the file in your aforementioned repository folder. You can use a different text-editing software if you want. I recommend Atom and TextMate, personally. By putting an index.html file in your repo, you'll create your homepage. You can put the following code in the file to put something on the page when you load it: 
    <!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
  8. Then, after saving your file with the above code, go back to Github Desktop, press "Commit" on the bottom left to add these changes to your local repo, and then press "Push Origin" to upload these changes to the repository hosted by Github on the web.
  9. Now all you need to do to see your website is to go to https://username.github.io, replacing username with your username! Isn't it cool? I remember being so delighted when I first got it working. Stay tuned for the next part of Don't know much about coding, where we begin to decorate your new site! xxx

Let me know of your website’s URL if you used this tutorial!

divider

Further reading