loading...

Building a Dev.to Blog

samuelorobosa profile image Samuel Amagbakhen ・3 min read

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Posted on by:

samuelorobosa profile

Samuel Amagbakhen

@samuelorobosa

I am a developer with a passion for building things that live and breathe on the web. I love taking on new projects.

Discussion

markdown guide