|
1 | | -<!-- AUTO-GENERATED-CONTENT:START (STARTER) --> |
2 | | -<p align="center"> |
3 | | - <a href="https://www.gatsbyjs.org"> |
4 | | - <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" /> |
5 | | - </a> |
6 | | -</p> |
7 | | -<h1 align="center"> |
8 | | - Gatsby's hello-world starter |
9 | | -</h1> |
| 1 | +# Yellowcake |
10 | 2 |
|
11 | | -Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. |
| 3 | +[](https://github.com/prettier/prettier) |
| 4 | +[](https://david-dm.org/jinksi/gatsbro) |
12 | 5 |
|
13 | | -_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ |
| 6 | +An opinionated starter project for creating lightning-fast websites with [Gatsby](https://gatsbyjs.org) v2 and [Netlify CMS](https://netlifycms.org) v2. |
14 | 7 |
|
15 | | -## 🚀 Quick start |
| 8 | +- **[Gatsby](https://gatsbyjs.org)** static site generator |
| 9 | +- **[Netlify CMS](https://github.com/netlify/netlify-cms)** for content management |
16 | 10 |
|
17 | | -1. **Create a Gatsby site.** |
| 11 | +## See also |
18 | 12 |
|
19 | | - Use the Gatsby CLI to create a new site, specifying the hello-world starter. |
| 13 | +[Netlify CMS Docs](https://www.netlifycms.org/docs/) |
| 14 | +[Netlify CMS Repo](https://github.com/netlify/netlify-cms) |
20 | 15 |
|
21 | | - ```sh |
22 | | - # create a new Gatsby site using the hello-world starter |
23 | | - gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world |
24 | | - ``` |
| 16 | +## Get going |
25 | 17 |
|
26 | | -1. **Start developing.** |
| 18 | +[](https://app.netlify.com/start/deploy?repository=https://github.com/thriveweb/yellowcake&stack=cms) |
27 | 19 |
|
28 | | - Navigate into your new site’s directory and start it up. |
| 20 | +1. Hit the **Deploy to Netlify** button. This will: |
29 | 21 |
|
30 | | - ```sh |
31 | | - cd my-hello-world-starter/ |
32 | | - gatsby develop |
33 | | - ``` |
| 22 | +- Clone the repo into your Github account |
| 23 | +- Create you a new project on Netlify, build & deploy |
34 | 24 |
|
35 | | -1. **Open the source code and start editing!** |
| 25 | +1. Once your Netlify project has been created, check a couple of settings: |
36 | 26 |
|
37 | | - Your site is now running at `http://localhost:8000`! |
| 27 | +- Enable **Identity** |
| 28 | +- Change **Registration Preferences** to **Invite Only** |
| 29 | +- Enable **Git Gateway** |
38 | 30 |
|
39 | | - _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ |
| 31 | +1. Invite users (probably yourself) to enable admin access |
40 | 32 |
|
41 | | - Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! |
| 33 | +- Open the **Identity** tab and hit **Invite Users** |
42 | 34 |
|
43 | | -## 🧐 What's inside? |
| 35 | +## Show me the CMS! |
44 | 36 |
|
45 | | -A quick look at the top-level files and directories you'll see in a Gatsby project. |
| 37 | +The CMS lives at [\_\_YOUR_SITE_NAME\_\_.netlify.com/admin](https://__YOUR_SITE_NAME__.netlify.com/admin). |
46 | 38 |
|
47 | | - . |
48 | | - ├── node_modules |
49 | | - ├── src |
50 | | - ├── .gitignore |
51 | | - ├── .prettierrc |
52 | | - ├── gatsby-browser.js |
53 | | - ├── gatsby-config.js |
54 | | - ├── gatsby-node.js |
55 | | - ├── gatsby-ssr.js |
56 | | - ├── LICENSE |
57 | | - ├── package-lock.json |
58 | | - ├── package.json |
59 | | - └── README.md |
| 39 | +## Developing |
60 | 40 |
|
61 | | -1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. |
| 41 | +1. Clone your repo to your local machine |
62 | 42 |
|
63 | | -2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. |
| 43 | +1. Install dependencies |
64 | 44 |
|
65 | | -3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. |
| 45 | +`yarn` or `npm install` |
66 | 46 |
|
67 | | -4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. |
| 47 | +1. Run the development server |
68 | 48 |
|
69 | | -5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. |
| 49 | +`yarn start` or `npm run start` |
70 | 50 |
|
71 | | -6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). |
| 51 | +If you are adding or editing content locally in the CMS, a couple of things to note: |
72 | 52 |
|
73 | | -7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. |
| 53 | +1. Changes will be pushed to the remote repo. |
74 | 54 |
|
75 | | -8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. |
| 55 | +1. You will be prompted to enter your site's url, this is necessary for Netlify Identity to manage user login. This is stored in `localStorage`, so you might have to empty your browser cache if you are switching projects but remaining on `localhost:8000`. |
76 | 56 |
|
77 | | -9. **`LICENSE`**: Gatsby is licensed under the MIT license. |
| 57 | +## Editing CMS fields |
78 | 58 |
|
79 | | -10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** |
| 59 | +The Netlify CMS configuration is located in `public/admin/config.yml`. This is where you will configure the pages, fields, posts and settings that are editable by the CMS. |
80 | 60 |
|
81 | | -11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. |
| 61 | +Find out more in the [Netlify CMS Docs](https://www.netlifycms.org/docs/#configuration). |
82 | 62 |
|
83 | | -12. **`README.md`**: A text file containing useful reference information about your project. |
| 63 | +## Uploadcare setup |
84 | 64 |
|
85 | | -## 🎓 Learning Gatsby |
| 65 | +Uploadcare is our file upload system. It hosts the files for us and delivers them trough their CDN network. |
| 66 | +Each site you'll create need its own Uploadcare API key's. See below how to set this up |
86 | 67 |
|
87 | | -Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: |
| 68 | +1. Create new project in Uploadcare and save API keys in project |
88 | 69 |
|
89 | | -- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. |
| 70 | +- Go to [Uploadcare.com](https://uploadcare.com/accounts/login/) and login |
| 71 | +- Once on the dashboard create a new project |
| 72 | +- Set the name and hit create |
| 73 | +- In the left menu click in API Keys and copy the public key |
| 74 | +- Now open your project and open the CMS congif.yml file |
| 75 | +- find the `media_library` settings and paste in the public key after `publicKey:` |
| 76 | +- Done!! |
90 | 77 |
|
91 | | -- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. |
| 78 | +For more details see the [Netlify CMS Docs](https://www.netlifycms.org/docs/uploadcare/) |
| 79 | + |
| 80 | +## Scheduled content |
| 81 | + |
| 82 | +Scheduled content allows you to schedule posts. Set the date / order field in a post to the feature. |
| 83 | +For the scheduled content to appear on the website we need to deploy our website daily. |
| 84 | + |
| 85 | +1. Setup a Netlify build hook |
| 86 | + |
| 87 | +- Go to https://app.netlify.com/sites/_YOUR_SITE_NAME/setings/deploys/#build-hooks |
| 88 | +- Hit build hook button in the build hooks section |
| 89 | +- Give it a name for example: "Automatic deploy Zapier" |
| 90 | +- Select branch, in most cases master will do. |
| 91 | +- Hit save and copy the generated url |
| 92 | + |
| 93 | +2. Zapier Setup |
| 94 | + |
| 95 | +- Go to [Zapier.com](https://zapier.com/) and login |
| 96 | +- Hit make a zap button in the right top corner |
| 97 | +- Search for Schedule in the search bar and select "Schedule by Zapier" |
| 98 | +- Check every day and hit continue |
| 99 | +- Select a time and make sure trigger on weekends is turned on |
| 100 | +- Double check your settings and hit continue |
| 101 | +- On the left hit add a step - and search for webhook by Zapier |
| 102 | +- Select post as action and continue |
| 103 | +- Past in the url of our recently generated webhook in the url field |
| 104 | +- Make sure "Payload Type" is set to form and hit continue |
| 105 | +- check settings and hit the test button |
| 106 | +- Check your Netlify site if there has been triggered a new deploy |
| 107 | +- If that worked hit finish |
| 108 | +- Give your zap a name, example: "Automatic deploy Yellowcake" and make sure your zap is turned on |
| 109 | + |
| 110 | +That's it, you'r now ready to use scheduled content!! |
| 111 | + |
| 112 | +## Mailchimp integration |
| 113 | + |
| 114 | +https://hooks.zapier.com/hooks/catch/2881617/ea5exg/ |
| 115 | + |
| 116 | +- Go to [Zapier.com](https://zapier.com/) and login |
| 117 | +- Hit make a zap button in the right top corner |
| 118 | +- Search for webhook by Zapier and select catch hook and continue to next step |
| 119 | +- In most cases leave this field empty and continue |
| 120 | +- Copy the generated url |
| 121 | +- Now go to the [form settings](https://app.netlify.com/sites/yellowcake/settings/forms#outgoing-notifications) in you Netlify project |
| 122 | +- Find the form notifications section click the add notification button |
| 123 | +- Select the option `outgoing webhook` |
| 124 | +- Set the event to listen for |
| 125 | +- Paste in our recent generated url in the URL to notify field |
| 126 | +- Select your form and save settings |
| 127 | +- Open your website navigate to your form, fill it out and send the data |
| 128 | +- Go back to Zaper and see if your form data has come trough. |
| 129 | +- Hit continue and add a new step on the left side of the screen |
| 130 | +- Search for MailChimp and select add/update subscriber |
| 131 | +- Select MailChimp account or add one and hit the test button |
| 132 | +- if succeeded hit continue button |
| 133 | +- Select your MailChimp list and select the subscriber email address |
| 134 | +- Fill in other settings for your needs and continue |
| 135 | +- Hit send test to MailChimp button and hit finish if succeeded |
| 136 | +- Give your Zap a name and make sure your zap is turned on |
| 137 | +- Submit your form one last time and see if all data is coming trough to MailChimp |
| 138 | +- Thats is! |
| 139 | + |
| 140 | +## Instagram Feed |
| 141 | + |
| 142 | +Get Your Instagram Access Token [here](https://generator.thrivex.io/). In order to display your Instagram photos on your own website, you are required to provide an Instagram Access Token. You can do this by clicking the generator button on this site you will first need to login to your account. |
92 | 143 |
|
93 | 144 | ## 💫 Deploy |
94 | 145 |
|
|
0 commit comments