{"id":22039548,"url":"https://github.com/mpolinowski/firebase-gatsby-mdx","last_synced_at":"2026-05-05T04:36:32.979Z","repository":{"id":111483108,"uuid":"191195165","full_name":"mpolinowski/firebase-gatsby-mdx","owner":"mpolinowski","description":"Firebase Deploy for a Gatsby static PWA","archived":false,"fork":false,"pushed_at":"2023-06-10T00:56:43.000Z","size":3274,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-28T19:17:58.196Z","etag":null,"topics":["firebase","firebase-hosting","gatsbyjs","static-site"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpolinowski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-10T15:31:30.000Z","updated_at":"2020-12-24T11:21:31.000Z","dependencies_parsed_at":"2024-11-30T11:11:17.710Z","dependency_job_id":"ec77934d-9ce9-43d8-a0a5-f2eeb1582c9c","html_url":"https://github.com/mpolinowski/firebase-gatsby-mdx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpolinowski%2Ffirebase-gatsby-mdx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpolinowski%2Ffirebase-gatsby-mdx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpolinowski%2Ffirebase-gatsby-mdx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpolinowski%2Ffirebase-gatsby-mdx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpolinowski","download_url":"https://codeload.github.com/mpolinowski/firebase-gatsby-mdx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104529,"owners_count":20561380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","firebase-hosting","gatsbyjs","static-site"],"created_at":"2024-11-30T11:11:12.006Z","updated_at":"2026-05-05T04:36:27.954Z","avatar_url":"https://github.com/mpolinowski.png","language":"JavaScript","funding_links":["https://www.patreon.com/lekoarts"],"categories":[],"sub_categories":[],"readme":"# Gatsby \u0026 Firebase\n\n_This example firebase app uses the [Gatsby Starter Emma by LekoArts](https://github.com/LekoArts/gatsby-starter-portfolio-emma)_\n\n\n\u003c!-- TOC --\u003e\n\n- [Gatsby \u0026 Firebase](#gatsby--firebase)\n  - [Firebase Project Setup](#firebase-project-setup)\n  - [Preparing your Gatsby Website](#preparing-your-gatsby-website)\n  - [Testing and Deployment](#testing-and-deployment)\n\n\u003c!-- /TOC --\u003e\n\n\n## Firebase Project Setup\n\n1. Go to the [Firebase Website](https://firebase.google.com/products/hosting/) and sign in with your Gmail account.\n2. Click on [Visit Console](https://console.firebase.google.com/project/_/hosting?pli=1) to open your project console.\n3. Click on Add Project to create your new project and assign a name for it.\n4. Now go to __Hosting__ in your Project Overview and click the __Get Started__ button.\n5. Switch to your system console/terminal and run `npm install -g firebase-tools` (make sure that [Node.js is installed](https://nodejs.org/en/) on your system).\n\n\n![Firebase Static Hosting](./screenshots/firebase_01.png)\n\n\n6. Click continue on the Firebase setup wizard then go back to your console and type in `firebase login`. You will be given an URL to set up the necessary permissions for the Firebase CLI on your Gmail account.\n\n\n## Preparing your Gatsby Website\n\n1. Download a [Gatsby Starter](https://www.gatsbyjs.org/starters/?v=2).\n2. Run a `npm install` and `gatsby build` inside the Starter folder (make sure that you have the [Gatsby-Cli installed](https://www.gatsbyjs.org/docs/gatsby-cli/) on your system).\n3. And there run the command `firebase init` and go to __Hosting__ by using your ARROW keys and select it with SPACE and ENTER.\n\n\n![Firebase Static Hosting](./screenshots/firebase_02.png)\n\n\n4. You will now be asked which Firebase project this code belongs to. Select the project name that you have chosen in the [Firebase Project Setup](#firebase-project-setup).\n5. Gatsby created your static site content inside the `.\\public` folder - set the Firebase Project public directory to this folder.\n6. Since Gatsby generates routes for each page, choose __not to rewrite__ URLs to index.html.\n\n\n![Firebase Static Hosting](./screenshots/firebase_03.png)\n\n\n## Testing and Deployment\n\n1. You can test your website by running `firebase serve` - you site will be hosted on `http://localhost:5000`.\n2. If everything looks fine run `firebase deploy` to upload the content of your public folder to firebase.\n3. You will be able to access your website from the __Hosting URL__ or configure it from the __Project Console__.\n\n\n![Firebase Static Hosting](./screenshots/firebase_04.png)\n\n\n\n\n\nhttps://stackoverflow.com/questions/42591099/how-do-i-remove-a-hosted-site-from-firebase\n\n\n\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n---\n\nOriginal Starter README\n\n![](https://i.imgur.com/M0nwIVi.png)\n\nGatsby Starter Portfolio: Emma\n\nA portfolio starter for [Gatsby](https://www.gatsbyjs.org/). The target audience are designers and photographers.\n\n[Demo Website](https://emma.lekoarts.de)\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/LekoArts/gatsby-starter-portfolio-emma) [![Edit gatsby-starter-portfolio-emma](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/LekoArts/gatsby-starter-portfolio-emma/tree/master/)\n\n[![CircleCI](https://circleci.com/gh/LekoArts/gatsby-starter-portfolio-emma.svg?style=svg)](https://circleci.com/gh/LekoArts/gatsby-starter-portfolio-emma) [![Netlify Status](https://api.netlify.com/api/v1/badges/5a4f3e8c-82cb-411d-89f1-fcfde2d3cf80/deploy-status)](https://app.netlify.com/sites/portfolio-emma/deploys)\n\n- Full-width grid-layout\n- Large images\n- Light theme\n\nWhy?\n\nIf you want to quickly bootstrap a design/photography portfolio or use it as a foundation for your personal site the _gatsby-starter-portfolio_ are a perfect fit for you! The project's goal is to offer minimalistic and fast websites.\n\nI hope you like my starters and create something awesome! To see some of my work you can visit my [website](https://www.lekoarts.de) or support me on [Patreon](https://www.patreon.com/lekoarts) to get some neat rewards (4K images, project files, tutorial insights). Every pledge on Patreon helps me creating more free starters!\n\nAlso check out the other _gatsby-starter-portfolio_:\n\n- [gatsby-starter-portfolio-emilia](https://github.com/LekoArts/gatsby-starter-portfolio-emilia)\n- [gatsby-starter-portfolio-bella](https://github.com/LekoArts/gatsby-starter-portfolio-bella)\n- [gatsby-starter-portfolio-cara](https://github.com/LekoArts/gatsby-starter-portfolio-cara)\n- [gatsby-starter-portfolio-jodie](https://github.com/LekoArts/gatsby-starter-portfolio-jodie)\n\nCheck out the [Gatsby Starter Portfolio Overview](https://gatsby-starter-portfolio.netlify.com/)!\n\nFeatures\n\n- Configurable\n  - Use the website.js to easily change the most important information\n  - Easily change the font\n- Choose a color for your projects highlights\n- Create your subpages with MDX\n- Uses styled-components for styling\n- [react-spring](https://github.com/react-spring/react-spring) animations\n- Projects in MDX ([gatsby-mdx](https://github.com/ChristopherBiscardi/gatsby-mdx))\n- Cypress for End-to-End testing (+ CircleCI config)\n- Google Analytics Support\n- SEO\n  - Sitemap\n  - Schema.org JSONLD\n  - OpenGraph Tags\n  - Twitter Tags\n- Offline Support\n- WebApp Manifest Support\n- Responsive images\n  - The right image size for every screen size\n  - Traced SVG loading (lazy-loading)\n  - WebP support\n\nGetting Started\n\nCheck your development environment! You'll need [Node.js](https://nodejs.org/en/), the [Gatsby CLI](https://www.gatsbyjs.org/docs/) and [node-gyp](https://github.com/nodejs/node-gyp#installation) installed. The official Gatsby website also lists two articles regarding this topic:\n\n- [Gatsby on Windows](https://www.gatsbyjs.org/docs/gatsby-on-windows/)\n- [Check your development environment](https://www.gatsbyjs.org/tutorial/part-zero/)\n\nTo copy and install this starter run this command (with \"project-name\" being the name of your folder you wish to install it in):\n\n```\ngatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-emma\ncd project-name\nnpm run dev\n```\n\nAdding a new project\n\n- Create a new folder in `content/projects`\n- Create a new markdown/mdx file, add the frontmatter (use the date format \"YYYY-MM-DD\")\n- Add an image and reference it in your frontmatter as `cover`\n- Write your content below the frontmatter\n\nIf you're still unsure have a look at the already existing examples.\n\nAdding a new page\n\n- Create a new folder in `src/pages`\n- Create a new mdx file with the name `index.mdx` in it\n\nAdding new features/plugins\n\nYou can add other features by having a look at the official [plugins page](https://www.gatsbyjs.org/docs/plugins/)\n\nBuilding your site\n\n```\nnpm run build\n```\n\nCopy the content of the `public` folder to your webhost or use a website like Netlify which automates that for you.\n\nConfiguration\n\nYou can configure your setup in `config/website.js`:\n\n```JS\nmodule.exports = {\n  pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be \"portfolio\"\n  siteTitle: 'Emma', // Navigation and Site Title\n  siteTitleAlt: 'Emma - Gatsby Starter Portfolio', // Alternative Site title for SEO\n  siteHeadline: 'Creating marvelous art \u0026 blazginly fast websites', // Headline for schema.org JSONLD\n  siteTitleShort: 'Emma', // short_name for manifest\n  siteUrl: 'https://emma.lekoarts.de', // Domain of your site. No trailing slash!\n  siteLanguage: 'en', // Language Tag on \u003chtml\u003e element\n  siteLogo: '/logo.png', // Used for SEO and manifest\n  siteDescription: 'Minimalistic bright portfolio with full-width grid and large images',\n  author: 'LekoArts', // Author for schema.org JSONLD\n\n  // siteFBAppID: '123456789', // Facebook App ID - Optional\n  userTwitter: '@emma', // Twitter Username\n  ogSiteName: 'emma', // Facebook Site Name\n  ogLanguage: 'en_US',\n  googleAnalyticsID: 'UA-12345689-1',\n\n  // Manifest and Progress color\n  themeColor: '#3498DB',\n  backgroundColor: '#2b2e3c',\n}\n```\n\nYou can also configure the styling of the site by editing the theme variables in `config/theme.js`.\n\n```JS\nimport { darken } from 'polished'\n\nconst brand = {\n  primary: '#cf1993',\n  secondary: '#7b8acc',\n}\n\nconst colors = {\n  grey: '#6b6b6b',\n  black: '#000',\n  white: '#fff',\n  bg_color: '#f3f3f3',\n  body_color: '#444',\n  link_color: brand.primary,\n  link_color_hover: `${darken(0.15, brand.primary)}`,\n}\n\nconst theme = {\n  brand,\n  colors,\n  breakpoints: {\n    xs: '400px',\n    s: '600px',\n    m: '900px',\n    l: '1200px',\n  },\n  container: {\n    base: '100rem',\n    text: '55rem',\n  },\n  spacer: {\n    horizontal: '2rem',\n    vertical: '3rem',\n  },\n}\n\nexport default theme\n```\n\n**Attention:** You also need to edit `static/robots.txt` to include your domain!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpolinowski%2Ffirebase-gatsby-mdx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpolinowski%2Ffirebase-gatsby-mdx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpolinowski%2Ffirebase-gatsby-mdx/lists"}