This is my first attempt at making a blogging template for community! I really hope it can be useful to someone! Please be aware, I don't claim that this will have best practices. π I was essentially learning Next.js and a Chakra-UI as I went along.
Please hit me up on π Twitter if you have any questions!
Hey devs!
After a distraction here and there, a break and holiday, I finally built a nextjs blogging template for anyone to use!
It's very minimal and based on the 'masonry' layout. It has a darkmode, and a custom 'theme.' It also has a local 'template' .json file for you to easily change content in all of your components.
I would highly recommend you cruise through the Chakra-UI docs if you want to make any significant changes. There are ALL KINDS of pre-made components and UI elements ready to go in Chakra. It's very tailwind inspired, so rest assured it's a great looking UI library!
Resources
Setup
- Clone repo
- Install dependencies
- Create your Contentful account
- Set up your .env.local file and update the env variables
- You should be ready to roll!
- Don't hesitate AT ALL to DM me on twitter if any problems arise!
Step One
- First, clone the repo.
- Once you have your project locally, make sure to be at the root of your project, and install the dependencies
Step Two
- Create your Contentful Account
- Create your first content model. You'll need two. A 'Blog Post' model and a 'Project' model. You can think of a model as a simple schema, that's comprised of fields. So a 'Blog Post' model might have the fields, 'Title', 'Slug', and 'Caption.'
- Let's create the 'Blog Post' model. It should look like this:
Use this image to determine the field types. For example, you can see that the 'Blog Title' is of the Short Text type. - There are a few important additional details I need to cover for the 'Blog Post' model. In The 'Title' field, make sure you tick the 'This field represents the Entry title.' Also under the validation tab, make sure to tick required and unique.
- For your 'Slug' field, make sure to also make that field 'unique' under the validation tab. In addition, make sure to set its 'Appearance' to type 'Slug.'
- Lastly, for the 'Date' field, under the appearance tab, I selected, 'Date Only' format.
Step Three
- Create your 'Project' model. Again, use the image below to determine the types for all other fields. For example, you can see the 'Project Description' field is set to type 'Long Text.'
- Just like our 'Blog Post' Title field, let's make sure to tick the 'this field represents the 'Entry Title' for our 'Project Name.' Also, be sure to tick the 'required' field in the validation tab.
- The default set up for all other fields should be fine.
Step Four
- Create your
.env.localfile and be sure to update the values to your own.
Tips
If you ever forget the 'id' of your Content Models at our Contentful API, simply head back to Contentful, go to your Content Models, click your interested Model, and on the right panel towards the bottom, you will see the 'Content Type Id.'
Also, if you ever forget the field ID's for each other Content Model, again, simply go to your Content Models, click your concerned Model, and simply click on the JSON preview tab. It will show your entire Model Type in JSON format, and you can see the Field Name, along with the Field ID. For example, since I named our first Field, 'Blog Title,' it's actual ID that we'll use on the frontend is 'blogTitle.'
You can also find your ID's by simply clicking on 'settings' on each individual Content Model's field.
Wrapping up
That's the end to A No-Thrills Minimal Nextjs Blogging template With Contentful CMS! I really hope you guys dig the UI of this. It's meant to be very simple, minimalistic, but at the same time, gets the job done. You can take this template, and customize the h*ll out of it!
If anyone at all goes through this entire tutorial and makes use of it, please let me know on Twitter! βοΈ
Top comments (0)