Running the GTN website online using GitPod
![orcid logo](/training-material/assets/images/orcid.png)
OverviewQuestions:
Objectives:
How can I get a preview of the GTN website using GitPod?
Preview the GTN website online via GitPod
Make changes to the GTN website and preview those changes
Time estimation: 15 minutesSupporting Materials:Published: Jun 24, 2021Last modification: Jun 14, 2024License: Tutorial Content is licensed under Creative Commons Attribution 4.0 International License. The GTN Framework is licensed under MITpurl PURL: https://gxy.io/GTN:T00066rating Rating: 3.0 (1 recent ratings, 6 all time)version Revision: 9
If you are working on your own training materials and want preview them online without installing anything on your computer, you can do this using GitPod!
AgendaIn this tutorial, you will learn how to run a local instance of the GTN website:
Setting up Gitpod
Hands-on: Setting up GitPod
- Create a fork of the GTN GitHub repository
- Go on the GitHub repository: github.com/galaxyproject/training-material
- Click on th Fork button (top-right corner of the page)
If you already have a fork, fantastic! But a common issue is that the
main
branch gets outdated, or your fork was from before we renamed themaster
branch tomain
.
- Start by browsing to your fork in GitHub
- Check the default branch that is shown? Does it say
master
? Then you need to update it. (Note - don’t just switch branches from “master” to “main”, follow the instructions below to reset the default branch to “main”.)
- Go to your fork’s settings (Click on the gear icon called “Settings”)
- Find “Branches” on the left
- If it says master you can click on the ⇆ icon to switch branches.
- Select
main
(it may not be present).- If it isn’t present, use the pencil icon to rename
master
tomain
.- Now you can update it in the next step
Is your fork using
main
? Fantastic, but you might need to update it. GitHub has a built in feature for this as shown below:- Open your browser and navigate to gitpod.io
- Log in with GitHub
- Copy the link to your fork of the GTN, e.g.
https://github.com/shiltemann/training-material
In the browser’s address bar, prefix the entire URL with
gitpod.io/#
and press Enter.For example,
gitpod.io/#https://github.com/<your username>/training-material
- Gitpod will now configure your environment. This may take some time
- Once the setup is finished, you should see a page something like this:
The GitPod Workspace
Let’s have a closer look at the GitPod workspace:
- Left: Here you see all the files in the GTN repository
- Top: This is the main window where you can view and edit files
- Bottom: Terminal window. Here you can type commands (e.g. to build the website preview) and read output and error messages.
Build and preview the GTN website
Before we start making any changes, let’s build the website and get a live preview.
Hands-on: Setting up GitPod
In the terminal window (bottom), type the following command:
make serve-gitpod
- The first time you run this command, it will install some dependencies, so it may take a little bit of time (a few minutes)
- Next times will be a lot faster! (~30 seconds)
When the build process is finished, the terminal will show you a link, and a window should popup with a preview on the right.
You may need to click ‘Try Again’ to load the GTN.
Click on the link in the terminal to see the GTN in full-screen:
Server address: http://127.0.0.1:4000/training-material/
Some browsers block popups by default, you may need to allow GitPod to show popups in order to click links.
- This will take you to a preview of the GTN website
- Note: It will take you the 404 page because GitPod doesn’t know the location of the GTN homepage, but from here you can just click the homepage button.
Editing Training Materials on GitPod
Now that you have the GitPod environment working and we have a live preview up, let’s make some changes to the GTN materials and get an instant preview.
Scenario: You have spotted a typo in one of the tutorials, and would like to fix this and see the resulting GTN webpage.
Hands-on: Make and view changes
- In the preview of the GTN website, open the following tutorial:
- Topic: “Introduction to Galaxy Analyses” topic
- Tutorial: “A Short Introduction to Galaxy””
- We will edit this tutorial and watch the live preview window for the effects
On the file browser on the left, open the following file:
topics/introduction/tutorials/galaxy-intro-short/tutorial.md
You can use the key combination ctrl-p to launch the file search dialog and simply enter the text
topics/introduction/tutorials/galaxy-intro-short/tutorial.md
- Change the title of the tutorial
- Move to the top right panel where the GTN is previewed and refresh the frame
- Firefox:
right-click -> This Frame -> Reload Frame
- Chrome:
right-click -> Reload frame
- You can also open the preview in it’s own brower tab, using the galaxy_instance button at the top-right corner of the preview window. Then you can reload the page the regular way (e.g. F5 or ctrl + r or the reload button in the browser)
- You should see the change you made:
In this way you can edit files in the text editor, and see the effects in the website preview.
Saving your changes back to GitHub
When you have finished your changes, it all looks good in the preview, you want to save your changes back to GitHub so that you can either continue later, or make a Pull Request to the GTN to contribute your changes.
Hands-on: Save changes
- Option 1: via the terminal
- Hit ctrl+c if your preview was still running to stop it
- Create a new branch, commit your changes, push changes:
git checkout -b fix-title git commit -m "update tutorial title" topics/introduction/tutorials/galaxy-intro-short/tutorial.md git push origin fix-title
- Option 2: via the web interface
- Your changes are now saved to your fork, and you can make a PR via the GitHub interface.
If this is your first time using GitPod, you may need to grant permissions to let GitPod push to your GitHub fork
This will take you through a process to authorize GitPod, and set permissions
If it doesn’t take you to GitPod’s permission page because your browser blocks popups, you can set them on this page.
Closing your GitPod Workspace
Everybody gets 50 hours per month for free on GitPod, so it is wise to close your GitPod workspace when you are finished with it, to conserve your quotum.
Hands-on: Shutting down your GitPod workspace