Thomas Wang's Blog

How to make a fully-featured dev blog in under 10 minutes ⚡️

June 01, 2019  •  3 min read

Do you want a personal website with a blog running at your-domain/blog? Do you like super fast websites with out-of-the-box performance, SEO, and best practices? Do you like automating your work with a simple-to-use CMS? Well you’re in luck 😉.

This tutorial will use gatsby-personal-starter-blog, a Gatsby starter that I made that is based on the very popular gatsby-starter-blog. The differences being that gatsby-personal-starter-blog is configured to run the blog on a subdirectory /blog, and comes pre-installed with Netlify CMS, and VS Code highlighting for code blocks.

4 Simple Steps:

Step 1

Open your Terminal and run the following command from the Gatsby CLI to create a new Gatsby site using gatsby-personal-starter-blog.

gatsby new [your-project-name] https://github.com/thomaswangio/gatsby-personal-starter-blog

Step 2

Once the Gatsby site is finished installing all the packages and dependencies, you can now go into the directory and run the site locally.

cd [your-project-name]
gatsby develop

You’ll notice now you can go to [localhost:8000](http://localhost:8000) to see your new site, but what’s cool is that Netlify CMS is pre-installed, and you can access it at localhost:8000/admin. A CMS, or content management, is useful because you can add content like blog posts from a dashboard on your site instead of having to add posts manually. However, we want to be able to access the CMS from a deployed website, not just locally. For that, we’ll need to deploy to Netlify, set up continuous deployment, and do a few configurations.

Step 3

Open github.com and create a new repository, with the same name as your project. Push your new Gatsby site’s code to GitHub using the following Terminal commands:

git init
git add .
git commit -m "init"
git remote add origin https://github.com/[your-username]/[your-repo-name].git
git push -u origin master

Then, open app.netlify.com and add a “New site from Git”. Choose your newly created repo and click on “Deploy site”.

Step 4

Open the project in your code editor and open static/admin/config.yml. Replace the following piece of code with these settings, replacing your-username/your-repo-name with your GitHub username and repo. Then push this code to GitHub.

// Replace this
backend: name: test - repo

// With this
backend: name: github
repo: your - username / your - repo - name

To make sure that Netlify CMS has access to your GitHub, you need to set up an OAuth application on GitHub. The instructions for that are here: https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider. Once you’ve configured an authentication provider then you’ll be able to use Netlify CMS at your deployed site to add new posts.

Customizing your site

Head into gatsby-config.js and you can edit your siteMedata, add a Google Analytics tracking ID, and your app icon/favicon.

To connect your Netlify site to your custom domain, see Netlify’s instructions on custom domains. If you want to learn more about Gatsby, you can head over to the Gatsby documentation and learn how to work with data and their API. To learn more about React to customize the look of your site, the React documentation has many useful references and guides.

Happy hacking and share with me your new blog if you want! 😁 Also, you can subscribe to my Youtube channel if you’d like to see more video tutorials 📹.


Join my newsletter

Subscribe and I'll send you my latest blog posts by email. Also, you'll be the first to hear about new things I'm working on.

Thomas Wang

Written by Thomas Wang who experiments on the web and occasionally has useful things to share. rss