Like this website? Make your own

Contents

How I made this website

I used this guide from the youtube channel Web Dev Simplified to create all of the html (hypertext markup language), css (cascading style sheets) and javascript files for this website, all of which can be found on this github repository. I use github pages to host this website for free.

I found this article written by Kris Koishigawa very helpfull for creating a reusable header and footer in javascript.

How to guide

  1. GitHub

  2. Go to github.com and create or login to an account which will be used to host your website. Create a repository and name it YOUR_GITHUB_USERNAME.github.io make sure it's public and hit create repository (remember to change the YOUR_GITHUB_USERNAME).

    Next download GitHub desktop, open it and login using the same github account you used earlier. Clone the repository you created as well, this will create a folder on your computer with all of the files from the repository (which should be empty if you just created it).

  3. Visual Studio Code

  4. Go to code.visualstudio.com and download visual studio code for your computer. I also recommend installing the extensions live server (reloads the webpage automatically when your editing it) and code spell checker. It is also useful to turn on auto save, go to file > auto save.

    You can now go to file > open and select your cloned github repository you made earlier in github desktop. Now create your websites html, css and javascript files. Right click a html file in the explorer side bar and click open with live server to view your website as you edit.

    Once your happy with your website, open github desktop and go to the YOUR_GITHUB_USERNAME.github.io, you should see some changes similar to below, add a summary (e.g update or new blog post) and hit commit to main then push to origin.

    Congratulations your website should now be live at https://YOUR_GITHUB_USERNAME.github.io

  5. Optional - use a custom domain

  6. I got my domain (satsuma.blog) from namecheap for about £5 a year. Setting up your domain name will differ slightly depending on where you got your domain, however the first step is to go to your websites github repository, go to settings > pages and type in your domain name under custom domain,

    next you need to create "A" records which point your domain to the IP addresses for github pages:

    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153

    here is a guide on how to do this if you used namecheap to buy your domain. For more information on setting up your custom domain, see the relevant github doc.

UPDATE

I'd skip step 3, it doesn't seem like it's worth the effort.


If you wanna view my blog, just go to Satsuma-LN.github.io instead. While it's not as catchy, it's easier, for me at least.