How to Host a Hopscotch Website on GitHub

Here’s some Q and A – I’ll add to this as questions are asked

  • "When and why did you get into this?"
    • I was into website design for quite some time, and I have used website builders in the past to showcase my creations. I had videos, projects, a couple “articles”, and more on my Hopscotch Website (at the time on Google Sites).
    • Once the new guidelines came in early 2019, however, I had to remove all links and close all threads with links to the site, for Google Sites had been banned to better moderate user content on the forum. As you might imagine, I was a bit upset by this, but later took the time to learn how to share websites that were open-sourced (since that remained allowed).
    • I’ve always poked around the Developer Tools (Inspect Element) in browsers (some of you might have as well), so I knew a little bit about how HTML works. So I started with CodePen embeds/pages. Pretty soon, however, I felt the need for a file system like many websites have to better host my creations.
    • That’s when I began to use GitHub to store code that I wrote outside of Hopscotch. I had an idea of something I wanted to make in HTML (the language that creates web pages), and in the very beginning, I created three different pages: a Hopscotch Help Guide page which rendered blocks and some information about them, a help guide for my Hopscotch JSON Siri Shortcut which gaining traction, and a page for videos I wanted to share (this was before YouTube links were allowed again).
    • Ever since then, I’ve just been expanding on my creating, and that is what led to the formation of what you now know as HS Tools, which includes a suite of tools you can use for your Hopscotch projects. All of this – the filter checker, web explorer, project builder – all came into existence since after I started hosting my site on GitHub.
  • "I’ve literally never used GitHub before, and I’m still lost"
    • No worries. The first thing you can do is ask questions on what you find confusing in my guide. Is there a certain concept that confuses you? What about this step or that step?
    • It’s ok. That’s why I wrote this – both to explain the basics and to start a conversation in the community on how to get your site running
    • Don’t fret. once you rinse and repeat a few times, you’ll start to understand a little bit more about it. You’ll eventually dig into tracking changes in GitHub, how it’s a resource for you to share code, etc. etc. No one said it would be easy in the beginning, but it is totally worth it
    • We’re in the same boat. Before my site, I’ve never used GitHub before either, and I don’t remember receiving assistance with setting it up. I certainly do hope, however, that this guide helps you in getting that first step. After that, you’ll be making changes left and right, and making the next big tool that revolutionizes the way we think about Hopscotch!
  • "I have the website hosted. Now I just need to learn some HTML and CSS to make it look better. How can I do that?"
    • There are some more tutorials here by other Hopscotchers that will get you one step further
  • "Can I do this from my iPad?"
    • Yes, you can. However, it is harder to find the right tools to make the development easier. Typically the best ones are paid apps from the App Store, and their functionality is still less than that of desktop IDEs.
    • I haven’t tried it myself because I have access to a computer, but if anyone want to try it and add their own mini-guide on here, I’d be happy to link it in the FAQ
20 Likes