Hello guys, I write this with a hurting head and grumbling stomach. Anyways, let me tell you a little about my day, I set out to customize my Dev.to blog but... I did a little of it anyway. So this tutorial is for beginners like me who have not experience using React like me but still wants that sweet blog made with Stackbit. Let's dive in.
1. First, click on your picture at the top of your screen, it should take you to a page that looks like this. Click on
Integrations
at the section at the left. For mobile, you should see it as a drop-down menu at the top of your page. Clicking on Integrations should take you to a page where you'd see
Create a new Stackbit site
at the bottom.
2. Now, you should be redirected to Stackbit dashboard, select a theme(I used Fjord), static site generator(I used Gatsby), automatically, your Headless CMS should be Dev.to and your repository should be from GitHub(or GitLab). Click on
Create Site
. Wait for Netlify to build and deploy the site.
3. Next click on
Edit in GitHub
, this should take you to your GitHub repository where your code was uploaded. I used Gatsby so it was written in Reactjs. I have "zero to nothing" experience with React so it was sort of hard working my way around it but I figured out a way to change the pictures at remove the broken links on the blog.
4. Go to the
src
folder, go to images, there's a
header-bg
.jpg file there, you can delete it and re-upload your image which you have renamed to
header-bg.jpg
or you can take this next step below.
5. Go back to the root directory of your repo and click on a JSON file named
site-metadata.json
. The objects are listed according to page hierarchy with site title at the top.
Here you can edit everything concerning the texts rendered on the page.
Edit the
description
attribute to change the site title.
If you didn't use step 4 to change your header background image, you can upload your image in the same
images
folder mentioned in step 4 but make sure the
background_img
attribute in the JSON file is pointing to that image.
Final step, comment out the broken links which are
about
and
style-guide
.
Commit it to your branch and check your blog. You can check out mine at https://samuel-orobosa-blog.netlify.app/. I'm not done editing the site but it looks pretty good for a start until I get around to learning React and customizing the blog to fit the design in my head😂.
You may also be wondering why I didn't clone to my local machine, well, I had my reasons too but you can decide to do that by following the guide on the readme file of the repo. Follow through to the end and then come back to my tutorial. I'll be dropping another tutorial after I've made changes to the blog.