Skip to content

creating projects (connecting to GitHub)

Nick Briz edited this page Feb 4, 2022 · 2 revisions

In netnet parlance a "project" is essentially a repository, a piece of Internet art being versioned on GitHub. Any seasoned web developer will tell you that it's important to version your code, and if you plan to work collaboratively (especially on open source projects) it's best to get your code up on GitHub. Of course there are other sites for sharing/hosting open source code repos, but there's no question that GitHub has become the most popular. A GitHub profile is a modern creative technologist's "portfolio" of sorts. GitHub, versioning and other related concepts are not exactly the easiest things for beginners to get a handle on, but in the interest of slowly easing you into the world of pro Internet art, we felt rather than saving projects on our own server and locking you into our system, we'd instead help get you started on your path towards becoming a respectable creative developer and slowly start building out your creative portfolio from netnet.

Besides creating an account on GitHub, you won't actually need to use git or GitHub directly, netnet will walk you through the process and take care of all the versioning steps behind the scenes. Assuming you have a GitHub account, you can connect netnet to your account by clicking login at the top of the Functions Menu. This will redirect you to a GitHub authentication page before returning you back to netnet, now connected to your GitHub.

GitHub Authentication

Once authenticated the login button in the Functions Menu becomes a logout button, and the my sketch section becomes my project. There you'll still find the codeReview() and tidyCode() options like before, but you'll also find a few new options:

  • uploadAssets() will launch the Project Files widget, this lets you upload images, sound and video files and any other assets you'd like to include in your project to embed in your HTML page. netnet takes care of uploading these files to your GitHub repo for you.
  • newProject(), unlike the newSketch() option which merely clears the current data in the editor to start with a new blank canvas, when you click newProject() netnet will walk you through creating a new repository on GitHub and handle all the versioning stuff behind the scenes.
  • openProject() can be used to open any project you've got saved on your GitHub account, whether or not it was initially created on netnet, assuming it's a web project (which means it must have an "index.html" file saved in the root directory)
  • saveProject() will not only backup your progress to GitHub, but it will do so by creating a new "commit" for you (that's more versioning lingo you don't need to worry about yet). When working on a project you can also use the CMD+S (or CTRL+S) shortcut key to save/commit your changes.
  • publishProject(), another reason for our decision to integrate GitHub into netnet was to take advantage of the free web hosting provided by GHPages. Getting works published on the Web can be another difficult hurdle for beginners. Traditionally you needed to create a paid account with a hosting provider, then you needed to download an FTP client and get that connected to your host, and there was plenty that can go wrong in that process. Even using a free service like GHPages can be intimidating for beginners (check out Mozilla's reference page "How do I use GitHub Pages?"). But on netnet all you need to do is click publishProject() and netnet takes care of the rest! (we'll save "how to roll out your own web server from home" for a more advanced set of tutorials, but if you're curious, you should check out the https://homebrewserver.club/)
  • shareProject(), even though you've got the option to publish a project on the web using GHPages, netnet can still create sharable links to your projects inside netnet.studio just like it does when you're working on sketches. This has the benefit of displaying your code alongside the output, should you want to share that with someone, as well as makes it easy for other artists to remix your project. To "remix" a project on netnet means that it will create a "fork" (more versinoing lingo) of that project on GitHub for you automatically.

❮❮ back to Sketching index page