add initial file

add to menus add intro add external resources area add first vscode extensions add another examlpe add try it in gitpod remove unneeded `(` talk about prebuilds Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]> Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]> Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]> Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]> Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]> Update src/docs/html_in_gitpod.md Co-Authored-By: Jan Keromnes <[email protected]>
gitpod-io · Jan 22, 2020 · 690d24f · 690d24f
1 parent ad66b76
commit 690d24f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/src/docs/html-in-gitpod.md b/src/docs/html-in-gitpod.md
@@ -0,0 +1,50 @@
+# HTML
+
+Looking to try web development in Gitpod? Well you're in luck: Gitpod was made with web development in mind. And, depending on your needs, you may want to customize this experience further!
+
+## Workspace Configuration
+
+### VSCode Extensions
+
+#### [HTML-Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
+This extension adds many useful snippets for productivity. See for yourself:
+![Example](images/HTML-Snippets-Example.gif)
+#### [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
+This will add great auto-completion for your project, including color-completion!
+![HTML-CSS-Support](images/HTML_CSS_Extension.png)
+
+### Pre-Builds
+With Gitpod you can have your project built before you open your repository, no more waiting for all of those Node/Yarn dependencies to be built! Let's get started with building your project: To do this we need a [`.gitpod.yml`](https://www.gitpod.io/docs/41_config_gitpod_file/) file. Here is an example of what your start tasks should look like for a typical NPM project:
+```YAML
+tasks:
+  - init: npm install
+    command: npm start
+```
+
+For Yarn
+```YAML
+tasks:
+  - init: yarn && yarn build
+    command: yarn run
+```
+These should prebuild your workspace whenever you push a change!
+
+Next let's talk about previewing your HTML pages without leaving the editor. To do this we must configure ports say your server listens on port 3000 in your [`.gitpod.yml`](https://www.gitpod.io/docs/41_config_gitpod_file/) file add this
+```YAML
+# Declare ports section
+ports:
+    # Expose port 3000
+  - port: 3000
+    # Open preview after port opens
+    onOpen: open-preview
+```
+### Try It!
+
+Want to try it out? And see a minimal example in action? Great, then you can open this in Gitpod:
+
+[![JesterOrNot/Gitpod-Web-Development-Example](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Gitpod-Web-Development-Example)
+## External Resources
+* [Start Tasks](https://www.gitpod.io/docs/44_config_start_tasks/)
+* [Exposing Ports](https://www.gitpod.io/docs/43_config_ports/)
+* [Theia](https://www.gitpod.io/docs/50_ide/)
+* [Prebuilds](https://www.gitpod.io/docs/46_prebuilds/)
diff --git a/src/docs/images/HTML-Snippets-Example.gif b/src/docs/images/HTML-Snippets-Example.gif
diff --git a/src/docs/images/HTML_CSS_Extension.png b/src/docs/images/HTML_CSS_Extension.png
diff --git a/src/docs/menu.ts b/src/docs/menu.ts
@@ -129,6 +129,10 @@ export const MENU: MenuEntry[] = [
             M(
                 "Go",
                 "go-in-gitpod"
+            ),
+            M(
+                "HTML",
+                "html-in-gitpod"
             )
         ]
     ),