Build a stupid simple Serverless Next.js blog
With a Netlify API image form database as the backend
Just show me the dang code!
The code: https://github.com/craigtockman/stupid-simple-blog
The demo: https://stupidsimple.blog/
- Continuous deployment with Netlify, React.js and Next.js.
- Super snappy fast page loads because its JAMStack, serverless and static!
- A Netlify blog post form with image file upload.
- Seo friendly dynamic meta-tag component.
- RSS and Sitemap xml generator.
- Infinite scroll homepage that queries the content posted to Netlify from the form.
- Material UI styles.
- Responsive styles and media queries.
- A simple pagination pager.
- Email notifications of new blog posts.
- React hooks only up in here.
- A sweet header that follow you down the screen.
- A contact form and about us page.
Let’s fork and get you a copy
Okay, let’s get down and dirty. Hopefully you are familiar with React.js, Next.js, Github and Netlify. If not, take their tutorials and come back here in a few minutes.
- For starters, make sure you have an account at Github, Netlify and Zapier.
- Go to https://github.com/craigtockman/stupid-simple-blog and fork my repo. Click the fork button and fork it to your Github account.
- Go to your Github account and clone the fork to your local machine and run npm install.
git clone https://github.com/<your_github_account>/stupid-simple-blog.git
Let’s start setting up Netlify
- Go to Netlify and click, “New site from Git”.
- Choose GitHub.
- Grant Netlify access and choose your newly created stupid-simple-blog repo.
- Under “Basic build settings” enter in “npm run export” under “Build command.”
- Enter “out” under Publish directory.( That’s some next.js magic )
- Click “Deploy site”. Don’t worry if your site doesn’t deploy just yet. There’s more work to do.
Let’s create an environmental variable in Netlify for some sweet API action
- Click on your Avatar in the top right corner of Netlify and select “User Settings”
- Click on “Applications” in the left menu.
- Under “Personal access tokens” click “New access tokens”.
- Describe your token then click “Generate token”.
- Copy and store the token in a safe place.
- Go to your code editor and create a file in your repo call “.env” at the root.
- Add your token to line 1 of the .env file like so:
- Go back to Netlify and click done.
- Now let’s add that same token to your deploy settings.
- Navigate back and click the deploy tab and then click “Deploy settings”
- Click Environment in the left menu and then click “Edit variables”.
- Under “Key” enter “NETLIFY_TOKEN” and enter the same token you created in the “Value” field.
- Click “Save”. Almost there.
Let’s get our local up and running and deploy
- Go to next.config.js in your code editor.
- Comment out lines 10 to 31carefully.
- Run the develop environment.
npm run dev
- When it comes up, rush over to your browser and check out my dog.
- At this point let’s make a commit and deploy.
git add *
git commit -m"Comment out some stuff"
- Go to Netlify to see if it worked. You should get a published message.
- Now let’s get our form id. Go to the “Forms” tab.
- Click the form called “blog”.
- Copy the form id. It’s the last string of numbers in the URL address bar after “/forms/”.
Enter in your form id into your new blog
- Go to next.config.js in your code editor.
- Un-comment lines 10 to 31carefully.
- On line 19, enter in your new form id you just snagged from Netlify.
- You also have to enter it on line 125 at pages/blog-post/[id].js
- Also on line 15 at components/InfiniteList.js
- Save both of those files and restart the dev server.
- Once that is up let’s make another commit and deploy. Hacks are now over.
git add *
git commit -m"Add form id in 3 places"
Let’s try it out
- Go back to Netlify.
- Click on “Deploys”
- Make sure your deploy has the little green “Published” badge.
- Then open your site. It’s the green link. Mine is https://vigorous-kalam-3a5563.netlify.com/ in this example.
- Once there try adding a new blog post with an image.
- Once you click submit, after a few seconds you will get re-directed to the homepage where you can see your post.
- You will need to “Trigger Deploy” once your done adding content, to build all the new paths. Otherwise, you will get a 404 when clicking an individual blog post. We’ll automate that next.
Let’s automate our deploy after form submission with Zapier
- This process is super easy. Just follow the instructions at Zapier here:
Start a deploy of your Netlify site after new Netlify form submissions
You don't need a server to add user-generated content like comments to your Netlify site! You can add a Netlify form…
SEO. Let’s add some RSS and Sitemap xml up in here to keep it real with our tricked out metatags.
- Once you have some content up, kill your terminal and run the included script that comes with your new blog.
npm run postexport
- Commit it and push it up every once in a while, so the googlebot and twitter know you got some new stuff.
This creates a valid rss.xml file and sitemap.xml in your next.js /public folder. You will need to update it’s config inside /scripts/postExport.js and on line 16 of next.config.js with your info.
Also, there is a component for metatags called MetaTags.js. Open it up, check it out, and update it with your personal info.
Some additional information about your new blog
- If you want to delete a post. Go to the forms tab in Netlify and delete the form submission you don’t like anymore.
- Netlify doesn’t currently let you edit form submissions. 😞
- This isn’t a full blown CMS like WordPress, so any old person and their mother can post to your blog. Just to be clear.
- All Netlify form submissions are filtered for spam using Akismet. Sometimes your post can get stuck in the spam filter. You can reverse this. You can also add a reCaptcha if you are really getting hammered with spam. Check the Netlify docs.
- You can get email, web-hook or slack notifications every time somebody posts to your form. Just go to Settings > Forms > Form notifications in Netlify and enter your info.
- Add a domain name with Netlify and get https for free to really trick out your blog. Just follow the steps in Netlify.
Add a comment below if you are having any issues, have any enhancement suggestions or want to show off your blog. There’s some additional comments in the code that will show you how to control some settings. Peace out and enjoy party people!