diff --git a/src/blog/dev-env-as-code.md b/src/blog/dev-env-as-code.md index 8075b62b0..58bd48285 100644 --- a/src/blog/dev-env-as-code.md +++ b/src/blog/dev-env-as-code.md @@ -52,7 +52,7 @@ Another pet peeve is when you need to fix something on a maintenance branch. Fix Tinkering with a six months old technology stack can be so annoying. You have to deal with all those old libraries and versions of them. However, you still have to make it work somehow. -![Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/10944/0*fni6JI11_OS6eJV7)*Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)* +![Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](/jeeshoots.jpeg)*Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)* All this suffering can end if we applied the ‘infrastructure as code’ idea to our dev environments, too. Why not make dev environment setups automated, reliably reproducible, and versioned by writing them down in an executable format and checking them into the project’s source code repository? @@ -72,7 +72,7 @@ Docker files are a pretty neat way to describe a development environment. Imagin Once you push the change to the repository and the docker image gets updated (automatically), all team members have the new tool in their development environment. We need to get to coding with a single click. -![Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*_7n4Htwk2Iz-r9qA)*Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)* +![Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](/clément-h.jpeg)*Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)* ### **Automated IDE Setup** diff --git a/src/blog/gitpodify.md b/src/blog/gitpodify.md index cf54bc278..d264a044f 100644 --- a/src/blog/gitpodify.md +++ b/src/blog/gitpodify.md @@ -265,7 +265,7 @@ FROM gitpod/workspace-full-vnc This will give you a virtual X server and a Remote Desktop client running on port `6080`: -![Virtual X server and Remote Desktop client running on port 6080](https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png) +![Virtual X server and Remote Desktop client running on port 6080](/virtual-x-sever-running-on-a-remote-desktop-client.png) This can be useful for example to run Electron apps graphically. For that, you'll just need a few extra dependencies in your `.gitpod.dockerfile`: diff --git a/src/blog/native-ui-with-vnc.md b/src/blog/native-ui-with-vnc.md index 3058af916..43edf3555 100644 --- a/src/blog/native-ui-with-vnc.md +++ b/src/blog/native-ui-with-vnc.md @@ -4,12 +4,12 @@ date: Thu Oct 04 2018 12:47:53 GMT+0000 (UTC) author: 32leaves subtitle: Cloud IDEs aren't limited to web apps title: Developing native UI applications in Gitpod -image: https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png +image: /virtual-x-sever-running-on-a-remote-desktop-client.png --- Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI. However, there’s still a plethora of native UI applications around and many of them are here to stay. In this article we’ll go through how to use Gitpod for developing native desktop UI applications. -![VSCode in Gitpod](https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png) +![VSCode in Gitpod](/virtual-x-sever-running-on-a-remote-desktop-client.png) A few days ago [Gero introduced Docker builds to Gitpod](/blog/docker-in-gitpod) with which you can bring your own Dockerfile (instead of a pre-built image), and Gitpod will build the image for you. We’ll use that feature to setup a cloud-based development environment for native UI applications. diff --git a/src/blog/node-js-development.md b/src/blog/node-js-development.md index ed2ce5dc1..4726df220 100644 --- a/src/blog/node-js-development.md +++ b/src/blog/node-js-development.md @@ -49,7 +49,7 @@ The first time, you will need to sign in Gitpod with your GitHub account. GitHub Gitpod starts a new workspace, which is a Linux-based cloud container, and provides access to it via a VS Code powered online IDE. Workspaces are started on demand and automatically shut-down if you don’t use them. They are continuously replicated and never deleted, so you always can restart a workspace later from [your Gitpod dashboard](https://gitpod.io/workspaces/). -![How to create a new project on GitHub and then open it in Gitpod](https://cdn-images-1.medium.com/max/2608/1*mXM-VDzzmpXCvlAVvQIjVw.gif) +![How to create a new project on GitHub and then open it in Gitpod](/create-a-new-project-on-gh-then-open-in-gp.gif) *If you don’t want to create a new project from scratch, click on [a snapshot link](https://gitpod.io/#snapshot/0d82ae08-c328-4cb5-96e5-7233d5de0c11) of my workspace to try Hello World application. I will cover later how one can make a workspace snapshot.* @@ -87,7 +87,7 @@ Next up, let’s see how we can debug the application: Our program should run, and when a breakpoint hits you can inspect call stack, variables and even use the debug console to evaluate expressions. -![How to debug a Node.js application in Gitpod](https://cdn-images-1.medium.com/max/2612/0*VHUqe81CKwdHq7uK) +![How to debug a Node.js application in Gitpod](/how-to-debug-a-nodejs-app-in-gitpod.gif) ### Working with Git @@ -115,7 +115,7 @@ In the terminal type gp init. 1. Now press enter until the tasks section. Type node app.js. The tasks are automatically started whenever a workspace gets started. You can have multiple tasks and use different lifecycles. Each task will be opened in a separate terminal. -![How to use "gp init" to generate the Gitpod config files](https://cdn-images-1.medium.com/max/2000/0*yVXQ8QGJEmCnNQ52) +![How to use "gp init" to generate the Gitpod config files](/gp-init-to-generate-the-gitpod-config.gif) The created files will be automatically opened in the editor. Let’s change the config so that it starts two tasks in separate terminals: @@ -153,7 +153,7 @@ Let’s open a new pull request from Gitpod: * after that, the Pull Request view will be updated and you can open a new pull request. -![How to make a PR in Gitpod](https://cdn-images-1.medium.com/max/2608/0*vHysVOgVJaH6-j1t) +![How to make a PR in Gitpod](/how-to-make-a-pr-in-gitpod.gif) ### Reviewing a Pull Request @@ -161,7 +161,7 @@ As I’ve mentioned at the beginning Gitpod treats each GitHub repository as a p Let’s go to the pull request page on GitHub and prefix its URL with gitpod.io/#, just like we did initially: -![How to open a Gitpod workspace from a PR page on GitHub](https://cdn-images-1.medium.com/max/2608/0*YXS_V_quV3Lg7Y-X)*Opening a PR with new workspace image can take some time since Gitpod needs to build the image. But it is only rebuilt when changed.* +![How to open a Gitpod workspace from a PR page on GitHub](/how-to-open-a-gitpod-workspace-from-a-pr.gif)*Opening a PR with new workspace image can take some time since Gitpod needs to build the image. But it is only rebuilt when changed.* As you can see, Gitpod opens with a branch for your pull request. PR file changes are presented on the left sidebar to review. Our init and command workspace tasks are executed in terminals, Node.js is 10.x now, and Hello World is printed. @@ -179,7 +179,7 @@ You can share your running workspaces with colleagues to collaborate on exactly In order to share a running workspace: click on your account avatar, select Share Running Workspace, enable sharing, copy a link and share the copied link with your colleagues. -![How to share a running Gitpod workspace](https://cdn-images-1.medium.com/max/2608/0*yp7USviOYhUm_P40)*Both users use exactly the same workspace and see the shared output in terminals.* +![How to share a running Gitpod workspace](/share-a-running-workspace-in-gitpod.gif)*Both users use exactly the same workspace and see the shared output in terminals.* ### Showcasing Node.js applications @@ -187,7 +187,7 @@ You can take a complete snapshot (clone) of your workspace, even including your In order to share a workspace snapshot: click on your account avatar, select Share Workspace Snapshot, copy a link and share the copied link where you want. -![How to share a Gitpod workspace Snapshot](https://cdn-images-1.medium.com/max/2608/0*-n2I6-4fPuKK70_5)*The [shared workspace snapshot](https://gitpod.io/#snapshot/14dc69f1-0e8c-4a36-b221-0ab16e91326e) preserves not only the development setup but the IDE layout and even selection in the editor.* +![How to share a Gitpod workspace Snapshot](/share-a-gitpod-workspace-snapshot.gif)*The [shared workspace snapshot](https://gitpod.io/#snapshot/14dc69f1-0e8c-4a36-b221-0ab16e91326e) preserves not only the development setup but the IDE layout and even selection in the editor.* ## Developing full-stack Node.js applications diff --git a/src/blog/october-2018-release.md b/src/blog/october-2018-release.md index 739e027e6..dc45ae9d5 100644 --- a/src/blog/october-2018-release.md +++ b/src/blog/october-2018-release.md @@ -55,7 +55,7 @@ We will add more features to the CLI. If you have ideas or demands please file t The [Gitpod Bot for Github](https://github.com/apps/gitpod-io) can automatically add Gitpod-links to issues and pull-requests. For instance, if you want to improve onboarding for new contributors you should configure the bot so it adds links to **good_first_issue** or **help_wanted **tagged issues. -![Gitpod Bot for Github](https://cdn-images-1.medium.com/max/6380/1*P6TPpSyXQp6SmmhHyVrmBw.png) +![Gitpod Bot for Github](/gitpod-bot-for-gh.png) We will shortly write a post dedicated to streamlining the contributor’s experience. diff --git a/src/docs/images/GoDebug.gif b/src/docs/images/GoDebug.gif index b4444bba3..eb23e877c 100644 Binary files a/src/docs/images/GoDebug.gif and b/src/docs/images/GoDebug.gif differ diff --git a/src/docs/images/JavaDebug.gif b/src/docs/images/JavaDebug.gif index b0d38e9b1..11f6bda46 100644 Binary files a/src/docs/images/JavaDebug.gif and b/src/docs/images/JavaDebug.gif differ diff --git a/src/docs/images/PythonDebug.gif b/src/docs/images/PythonDebug.gif index 32962e3ec..da3273443 100644 Binary files a/src/docs/images/PythonDebug.gif and b/src/docs/images/PythonDebug.gif differ diff --git a/src/docs/images/RustDebug.gif b/src/docs/images/RustDebug.gif index 1b0682dab..b30533090 100644 Binary files a/src/docs/images/RustDebug.gif and b/src/docs/images/RustDebug.gif differ diff --git a/src/docs/images/phpDebug.gif b/src/docs/images/phpDebug.gif index f70eb7eb8..63784a5f8 100644 Binary files a/src/docs/images/phpDebug.gif and b/src/docs/images/phpDebug.gif differ diff --git "a/static/cl\303\251ment-h.jpeg" "b/static/cl\303\251ment-h.jpeg" new file mode 100644 index 000000000..f058ab775 Binary files /dev/null and "b/static/cl\303\251ment-h.jpeg" differ diff --git a/static/create-a-new-project-on-gh-then-open-in-gp.gif b/static/create-a-new-project-on-gh-then-open-in-gp.gif new file mode 100644 index 000000000..a67e030a2 Binary files /dev/null and b/static/create-a-new-project-on-gh-then-open-in-gp.gif differ diff --git a/static/gitpod-bot-for-gh.png b/static/gitpod-bot-for-gh.png new file mode 100644 index 000000000..0073ebcaa Binary files /dev/null and b/static/gitpod-bot-for-gh.png differ diff --git a/static/gp-init-to-generate-the-gitpod-config.gif b/static/gp-init-to-generate-the-gitpod-config.gif new file mode 100644 index 000000000..79acc2d1c Binary files /dev/null and b/static/gp-init-to-generate-the-gitpod-config.gif differ diff --git a/static/how-to-debug-a-nodejs-app-in-gitpod.gif b/static/how-to-debug-a-nodejs-app-in-gitpod.gif new file mode 100644 index 000000000..afecf1749 Binary files /dev/null and b/static/how-to-debug-a-nodejs-app-in-gitpod.gif differ diff --git a/static/how-to-make-a-pr-in-gitpod.gif b/static/how-to-make-a-pr-in-gitpod.gif new file mode 100644 index 000000000..389b41af2 Binary files /dev/null and b/static/how-to-make-a-pr-in-gitpod.gif differ diff --git a/static/how-to-open-a-gitpod-workspace-from-a-pr.gif b/static/how-to-open-a-gitpod-workspace-from-a-pr.gif new file mode 100644 index 000000000..5c8d05a4e Binary files /dev/null and b/static/how-to-open-a-gitpod-workspace-from-a-pr.gif differ diff --git a/static/jeeshoots.jpeg b/static/jeeshoots.jpeg new file mode 100644 index 000000000..5918aef46 Binary files /dev/null and b/static/jeeshoots.jpeg differ diff --git a/static/share-a-gitpod-workspace-snapshot.gif b/static/share-a-gitpod-workspace-snapshot.gif new file mode 100644 index 000000000..415c9a8c4 Binary files /dev/null and b/static/share-a-gitpod-workspace-snapshot.gif differ diff --git a/static/share-a-running-workspace-in-gitpod.gif b/static/share-a-running-workspace-in-gitpod.gif new file mode 100644 index 000000000..796bcee33 Binary files /dev/null and b/static/share-a-running-workspace-in-gitpod.gif differ diff --git a/static/virtual-x-sever-running-on-a-remote-desktop-client.png b/static/virtual-x-sever-running-on-a-remote-desktop-client.png new file mode 100644 index 000000000..8ed732d14 Binary files /dev/null and b/static/virtual-x-sever-running-on-a-remote-desktop-client.png differ