- make a copy of
webapp-config.example.jsand name itwebapp-config.js - fill in the
configobject's fields appropriately - create a firebase project on https://firebase.google.com/ and follow the steps to setting up a web app, select realtime database during
firebase init - copy the firebase config from the firebase setup steps into
webapp-config.jsinstead of into the codebase - run
yarn devto ensure your website is properly setup - make an imgur account at https://imgur.com/
- go to
/home/editto edit the homepage and use your password - go to
/blog/post/newto create a new blog entry - add
/editto an article's url to edit it - !!! keep in mind all these changes will take up to 60 seconds to go into effect !!!
- in the editor page click on authorize with imgur first if you plan on uploading a cover image or drag and drop into the body, otherwise it wont work, and clicking on this will remove any unsaved changes
- in the editor page, drag files into the input text area to upload, an image tag will be added to it automatically on upload success.
- in the editor page, the body is used as markup and HTML syntax can be used.
- push your changes from above to your forked repo on github
- go to https://vercel.com/
- link your github account and repo
- let it build
- voila.
- (BONUS: you can use a custom domain in settings. Instructions: https://vercel.com/docs/concepts/projects/custom-domains)
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
If you have a few hours to tighten the security by abstracting the webapp-config contents that would be ideal (hint: you can use the api routes pattern with Nextjs here https://nextjs.org/learn/basics/api-routes)