Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oslabs-beta/gatsbyhub

Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.
https://github.com/oslabs-beta/gatsbyhub

gatsby gatsby-cli gatsby-site gatsbyjs

Last synced: 4 months ago
JSON representation

Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.

Awesome Lists containing this project

README 

        
[Korean README 한국어](READMEKO.md) | [Japanese README 日本語](READMEJP.md)



[![GitHub link](https://img.shields.io/badge/GitHub-GatsbyHub-blueviolet)](https://github.com/oslabs-beta/GatsbyHub) [![GitHub license](https://img.shields.io/badge/license-MIT-blue)](https://github.com/oslabs-beta/GatsbyHub/blob/main/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/oslabs-beta/GatsbyHub/pulls) [![VSCode Dev Slack](https://img.shields.io/badge/vscode--dev--community-gatsbyhub-blueviolet.svg?logo=slack&labelColor=555555)](https://vscode-slack.amod.io)










# About



GatsbyHub is an [open-source](https://github.com/oslabs-beta/GatsbyHub) extension for [Visual Studio Code](https://code.visualstudio.com/) that offers an interactive GUI for [Gatsby-cli](https://www.gatsbyjs.com/tutorial/part-zero/#using-the-gatsby-cli).



GatsbyHub allows you to browse [Gatsby plugins](https://www.gatsbyjs.com/plugins/), starters, and themes without ever having to leave VS Code. Create a blazing fast, modern app with a single click or check out the many [Gatsby starter templates](https://www.gatsbyjs.com/starters/?) available. Start a hot-reloading development environment by simply clicking the status bar icon. Configure GraphQL queries using Gatsby's built-in instance of GraphiQL. For advanced customizations, please refer to the [Gatsby docs](https://www.gatsbyjs.com/docs/gatsby-cli/) and edit your [user settings](https://code.visualstudio.com/docs/getstarted/settings).



# Installation



⚠️ Warning: This is beta software, which means there may still be bugs. Please [report bugs and share your feedback](https://github.com/oslabs-beta/GatsbyHub/issues). Currently GatsbyHub is only compatible with npm which affects how plugins, themes, and gatsby-cli are installed.



GatsbyHub is available to install in [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GatsbyHub.gatsbyhub).













# Features



## Gatsby CLI GUI



Interact with [Gatsby](https://www.gatsbyjs.com/) without ever having to use the [command line interface](https://www.gatsbyjs.com/docs/gatsby-cli/). GatsbyHub provides buttons and options for all the most commonly used commands.



- Install Gatsby - Installs the gatsby-cli npm package

- Create New Site - Creates a new Gatsby site with the click of a button

- Develop Server - Starts and stops a hot-reloading development environment by either clicking the button or clicking the status bar item

- Build Site - Build and package your site so it's ready to deploy on Gatsby's cloud



Advanced [Develop](https://www.gatsbyjs.com/docs/gatsby-cli/#develop) and [Build](https://www.gatsbyjs.com/docs/gatsby-cli/#build) options are available in the [extension settings](https://code.visualstudio.com/docs/getstarted/settings) for things like setting up the host, port, toggling no-uglify, etc.



## Gatsby Plugins and Themes



Find and download [Gatsby plugins and themes](https://www.gatsbyjs.com/plugins/) without ever leaving VS Code.



Gatsby is known for it's active community and many plugins. You can find Gatsby's official plugins and all the documentation needed to implement them into your project. Selecting a plugin opens a webview within VS Code where you can read up on the plugin's README. Installing the plugin is as easy as clicking the download button in the sidebar.



## Gatsby Starters



Use one of Gatsby's many [Starter sites](https://www.gatsbyjs.com/starters/?) as a template for your site. Browse the starters and check out their READMEs. Creating a new Gatsby site is as easy as clicking a button in the sidebar and typing in a name for your site.





  


  

  





## GraphiQL



Access Gatsby's built-in instance of GraphiQL with a single click when running a development server. Writing GraphQL queries has never been this easy.



## Extension Settings



[Gatsby-Cli](https://www.gatsbyjs.com/docs/gatsby-cli/) has a lot of advanced options for generating a development server and packaging your project. GatsbyHub provides a way to toggle these options within the VS Code extension settings. That way the settings persist every time you want to develop a server or package your app. No more typing out the same commands or configuring a script everytime you start a new project.





  


  

  





# Release Notes



### GatsbyHub 1.0.8 - November 13,2020



See the [change log](https://github.com/oslabs-beta/GatsbyHub/blob/main/CHANGELOG.md) for the full set of changes



# Contributors



Brian 'B-Hash' Hayashi [@github](https://github.com/bhayashi) [@linkedin](https://www.linkedin.com/in/brianmakiohayashi/)



Dylan Hensel [@github](https://github.com/dylanrh) [@linkedin](https://www.linkedin.com/in/dylanhensel/)



Joonyoung Kim [@github](https://github.com/JoonyoungKim025) [@linkedin](https://www.linkedin.com/in/joonyoungkim025)



Lucy Chi [@github](https://github.com/lucycchi) [@linkedin](https://www.linkedin.com/in/chilucy/)



Miguel Michel [@github](https://github.com/mig824) [@linkedin](https://www.linkedin.com/in/miguel-michel/)



Risa Hiyama [@linkedin](https://www.linkedin.com/in/risa-hiyama-93898968/)