Setting up this Blog.

[preetjdp]

---

title: 'Setting up this Blog.'
slug: 'setting-up-this-blog'
excerpt: 'Short outlook onto how this blog is setup'
date: '2020-06-20'

Alright, Hey there I'm gonna tell you how to set up this blog powered by Github Issues.
But before that the backstory. Ah heck Skip it

So on the 20th of June, Viranchee shared that he's building his blog entirely powered by Github Issues and linked to this blog as a reference.

The Blog	My Reaction

And I really liked the idea, and immediately set out to get this working.

The Process.

Step 0 was to figure out what frontend to use, Gatbsy stood out because it favors GraphQL for data querying and I thought pairing it with the Github API should be seamless.

Arguably one of the best blogs out there is Overreacted By Dan Abramov. So step 1 was to just fork it out and figure it how it's working internally.

Overreacted uses The Remark Transformer Plugin to look for all the Markdown files in the project, process them and make them available to consume under GraphQL.

Well that's useless for us because we want to fetch markdown from Github, not from files on our computer.

Conveniently Gatsby has a Plugin to easily add external GrapqQL Datasources.

It was fairly simple to get data from the Github API. Pipe that with the Gatsby createPage Function, and that's basically the working of the blog.

Code that makes this work.

  // Fetch issues from GraphQL.
  const result = await graphql(
    `
      {
        github {
          viewer {
            repository(name: "Blog") {
              issues(first: 20) {
                nodes {
                  id
                  title
                  bodyHTML
                }
              }
            }
          }
        }
      }
    `
  )

  // Generate Pages for each Post.
  const posts = result.data.github.viewer.repository.issues.nodes
  posts.forEach((post, index) => {
    createPage({
      path: post.number.toString(),
      component: blogPost,
      context: {
        slug: post.number
      },
    })
  })

Steps for Setup.

1. Set up the project locally.

Clone the project and install the dependencies.

git clone https://github.com/preetjdp/Blog
cd Blog
npm install
# If you get a libpng error while running this
# run `npm rebuild`

2. Set up a Repo to host your Issues for the blog

Something like https://github.com/YOUR_NAME/Blog

3. Get a Github Personal Token

A token can be obtained from this URL. Here are the options that I used.

4. Running the Project.

Now that you've obtained your token just use it to run the app.

# If you're running Windows / Powershell
$env:GITHUB_TOKEN="GITHUB_TOKEN"
npm run develop

# If you're using Linux / MacOS
GITHUB_TOKEN="GITHUB_TOKEN" npm run develop

And that's it 🎉🎉. You should have a gatsby project running on http://localhost:8000

Wait How does this work?

The Environment Variable is sent as a `Bearer` Auth Header to the Github API.

Blog/gatsby-config.js

Line 79 in 530dfbb

Authorization: `Bearer ${process.env.GITHUB_TOKEN}`

5. Personalizing the Blog

Most of the configuration is done through the gatsby-config.js file.
You can change the fields here's as per your liking.

Blog/gatsby-config.js

Lines 2 to 12 in 530dfbb

	siteMetadata: {
	title: `Blog`,
	author: `Preet Parekh`,
	description: `Personal Blog`,
	siteUrl: `https://preet-blog.netlify.app/`,
	social: {
	twitter: `TmPreet`,
	mail: `preetjdpdev@gmail.com`
	},
	repoName: `Blog`
	},

Quirks of this Approach.

The data is not loaded at runtime.

Wait Whaaaat?? What does this mean?
When you change the content of an issue (In the pursuit of editing a blog post). It won't work unless you build it afterward and publish it.

This is a blessing in disguise, this allows the blog to be ridiculously fast.

References

• Github Markdown Spec