Webification environment setup
Never done anything with git in your life? New to web development? Don't worry about it! Follow this step by step guide to get your environment set up and ready to make some puzzles.
Git is what we use to allow you to make changes to files locally and keep them in sync with our server. It also allows for easy collaboration with others. Github IS A COMPLETELY DIFFERENT THING than git. Github is the website you're currently on and reading this and serves as the shared source of truth for all our files. Git is a program you will download from this website. The default download should be fine, as well as all the default options during installation.
Unless you are already familiar with VIM, you should switch your editor to Notepad or Notepad++ when you encounter this option:
[The only time you'll ever need to use the editor from within Git is when dealing with merge PRs, but if you only plan on using Git for webification, then the way we use it means you won't need to do any merges and thus should never need to worry about this.]
This is technically optional, but is very highly recommended because it makes working with PuzzleJS much easier than the alternative, which is applying a command-line flag to your browser. Visual Studio Code, or VS Code, is available to download from the Microsoft Store, or from here. Again, the default download and install options should be fine, including any agreements you may need to accept the first time you open VS Code.
- Opened VS Code --> click the boxes icon in the sidebar to open up the Extensions pane:
- Search for "Live Preview", and then on its page, click the blue Install button. Once it's installed, it'll change to say Uninstall:
- Set the extension to open pages in your browser. Next to the install button, click the gear icon, then extension settings:
- On the settings page, change the "Open Preview Target" option to "External Browser":
- If you're new to GitHub, set up an account at https://github.com.
- Our Puzzleday 2025 webification repo is located at https://github.com/tabascq/pd2025-webification. You'll first need Kenny (aka tabascq) to add you as a contributor. Once you're added as a contributor, you'll either get an email or you can just go directly to that repo in your browser, and it will ask you to confirm that you want to be a contributor.
- Once you're a contributor, you'll be allowed to clone the repo. To do that, look for the green Code button, and click it to open the dropdown. In the dropdown, the default clone method of HTTPS should already be selected, so look for a button to the right of the URL that says "Copy url to clipboard" when you hover over it. Click it to copy the URL, which you'll need in the next step.
- Launch Visual Studio Code, and choose "Clone Git Repository..." on the Welcome screen. Paste the URL you previously copied into the box at the top, press Enter, and continue the clone process by choosing a destination folder. During the clone, a pd2025-webification folder will be added to the destination folder. The pd2025-webification folder will have all our files in it, and those files can be viewed/edited with all standard software programs.
- At this point or any of the future git steps, git may ask you to log into Github. The easiest way to do this is by choosing the option to log in using the browser, as that will open a regular webpage you can type your Github credentials into. If you've got 2-factor authentication set up on your Github account, it may be a little trickier, as you might need to use a Personal Access Token instead. If that's the case, follow the instructions in this article.