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:
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
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.
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”.
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
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.
Written by Thomas Wang who experiments on the web and occasionally has useful things to share. rss