How to Host a Hopscotch Website on GitHub

@Rawrbear


I can’t seem to find where I can code…

3 Likes

Read threw the entire topic again. It’s very detailed.

5 Likes

huh, I wonder why not?

Thank you!

I use them on my HS Tools Site, and I don’t see the harm in linking a font (that’s appropriate of course)

6 Likes

As soon as I login it crashes on safari and on the app

You’re welcome

2 Likes

Hey E, is it possible to do it on an IPad?

3 Likes

Yeah it is…

2 Likes

Extra step: Adding CSS and a font by @Innerpanda

These steps are for your website to look better. First let’s add a CSS file name it style.css and put this code in it.


*{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

h1{
  font-size: 45px;
  font-weight: 600;
  text-align: center;
}

p{
  color: #777;
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  padding: 10px;
  text-align: center;
}

You can delete the color: #777; if you don’t like the color.

The CSS doesn’t affect the index.html file. What do we do?? Well go back to the index.html file and add this line of code bellow the <title> tag

<link rel=“stylesheet” href=“style.css”>

Now check your website and see if the CSS works.

Once you are done let’s go back to the index.html file and add this to it to add a font bellow the <title> tag


  <link rel="preconnect" href="https://fonts.googleapis.com"> 
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

Note I personally use the font (from google fonts) Roboto Sans-Serif and I’m using it in this mini tutorial

Again let’s go to the style.css file and add this line of code right bellow the third line


font-family: 'Roboto', sans-serif;

And check if it works.

If you did everything right your website should look something like this:
https://pandy-y.github.io/Test/

Github Repository link:


@Awesome_E hi!

6 Likes

You can, but it’s much harder to get the right tools to do so.

3 Likes

I should make a note of this as well, but this topic is mainly about getting started with the development process and hosting the site on GitHub, not necessarily how to code a website to making it look good. For further discussion on web development in general, I recommend going to a topic such as this one (in #random-stuff, restricted to members and above)

5 Likes

sure!

https://pandy-y.github.io

3 Likes

okay then! if you want you can merge it

1 Like

I think your post is still a great introduction to the topic/idea of CSS and styling pages, so I think it is perfectly fine where it is. I just want to make sure that future discussion doesn’t go to deep into talking about these topics, as that changes the environment from getting introduced to self-coding a website to delving into techniques.

So as a rule of thumb, I’d say anything related to introducing an element of hosting a website is great, but I would refrain from posting much more than the basics of any given element.

Hope that makes sense

5 Likes

nicee

4 Likes

Great video! I might do this if I have time

4 Likes

I would like to say that I literally started coding my website in GitHub less that an hour before you posted this lol. Crazy…

4 Likes

That’s really good! Wish there was something like this when I started on github. A good text editor to try might be https://apps.apple.com/au/app/code-master-source-code-editor/id502404926

4 Likes

Before I was coding my websites straight onto GitHub then had to wait five minutes until it updated :joy:

This will definitely help, thanks for the tutorial!

4 Likes

Thank you SO MUCH
I’ve been waiting for years on how to host something on Git Hub

4 Likes

Awesome topic, will definitely be helpful for sure!

2 Likes

This is an amazing tutorial, thanks for making it! It’s very detailed and introduces concepts like git as a bonus. Rawrbear already mentioned the amazing “Live server” plug-in for VS Code that I also use. I was about to mention it, but saw that it already has been done. The development server using Python works great too, of course.

I think this demonstrates amazing tutorial writing skills, awesome job awesome e!

5 Likes