Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brianruizy/gatsby-medium-blog
📝 Gatsby.js starter blog template using a Medium theme; with features like Algolia Search, post claps, Prism highlighting, contact form, dark mode, +more.
https://github.com/brianruizy/gatsby-medium-blog
blog gatsby gatsby-blog gatsby-starter gatsbyjs material-ui mdx mui react starter template
Last synced: 3 months ago
JSON representation
📝 Gatsby.js starter blog template using a Medium theme; with features like Algolia Search, post claps, Prism highlighting, contact form, dark mode, +more.
- Host: GitHub
- URL: https://github.com/brianruizy/gatsby-medium-blog
- Owner: BrianRuizy
- License: 0bsd
- Created: 2022-06-15T00:31:13.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-10T17:53:48.000Z (about 2 years ago)
- Last Synced: 2024-10-11T10:53:08.229Z (3 months ago)
- Topics: blog, gatsby, gatsby-blog, gatsby-starter, gatsbyjs, material-ui, mdx, mui, react, starter, template
- Language: JavaScript
- Homepage: https://gatsby-medium.vercel.app
- Size: 35.4 MB
- Stars: 83
- Watchers: 2
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Gatsby.js Medium Blog
Don't forget to leave a star ⭐!
## Features
- 📲 PWA ready, installable on Android and iOS
- 🔎 Algolia Search, search by all attributes
- 📧 Getform.io contact form with easy setup.
- 📝 Blog ready, easily add your blog posts with MDX
- 🌗 Togglable dark mode
- 💻 SEO ready, option to Add meta description
## Getting Started
Before developing and working with the codebase on your IDE of choice, there are some services to set up to get the project running successfully.
### 1. Algolia Search
Algolia Search environment variables are required in the project's `.env` file.
You will need to provide some information that identifies your account to the Algolia plugin and authorizes it to write data to it. If you don’t already have an Algolia account, create one [here](https://www.algolia.com/users/sign_up). Then, go to the **API Keys** section of your Algolia profile.
There is already a file named `.env.example` in the project's root directory. You can rename this to `.env` and fill in the values or you can copy the contents of the file and paste them into your `.env` file as shown below.
```.env
GATSBY_ALGOLIA_APP_ID=
GATSBY_ALGOLIA_SEARCH_KEY=
ALGOLIA_ADMIN_KEY=
```
### 2. GetForm
contact form is super easy to set up with getform.io.
Simply add your API / endpoint URL to the action attribute of your form and you're good to go. See https://app.getform.io/forms for documentation. The location for this component is `src/components/ContactDrawer.js`.
```jsx
...
```
## Run the project
Not you must have already installed [Node.JS](https://www.gatsbyjs.com/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) and [Gatsby CLI](https://www.gatsbyjs.com/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). See Gatsby's [Development Environment Setup](https://www.gatsbyjs.com/docs/tutorial/part-zero/) documentation for more details or if you have issues with the CLI installation.
```bash
nvm install 18
nvm use 18
npm install -g gatsby-cli
```
1. Install project dependencies ```npm install```. If having problems installing try with legacy peer dependencies, ```npm install --legacy-peer-deps```.
2. Start Developing. Navigate into your new site’s directory and start up the local server ```gatsby develop``` 🎉.
See the [reference guide](https://www.gatsbyjs.com/docs/reference/gatsby-cli/) to read more on other commands you can use with the Gatsby CLI.
## Adding your blog posts
Adding your own content is super simple with the Jamstack design of the project. You won't need to write any HTML or CSS, just markdown (although you absolutely can if you wish to change the design or add your own features). The MDX posts are found in the `content/posts/` directory. With MDX you can even add react components to your posts as found below.
Visit [mdxjs.com](https://mdxjs.com) to see what other cool things you can implement.
```mdx
## Example header here
lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem quisquam.
Visit here for docs and examples.
```
