Preface

Why use GitHub Issues?

It sucks to provide comment and reaction features. GitHub Issues is the only choice without third-party services. However, OAuth just on the client side is not so secure and you need to OAuth the blog before commenting! That will drive people away.

Besides, when writing issues, you can just drag your images to upload. That's surely more convenient than committing images to the git repo.

And with GitHub issue templates, it is very easy to draft a new post on a mobile device.

You even don't need an RSS, just watch the repo. (If you don't care about blog source code, you can subscribe to the issue's RSS, see the comment.)

Why not just GitHub Issue?

One benefit is that I can use my own theme and make the blog more interactive.

Besides, though GitHub does provide a "sort:updated-desc" feature, searching, navigating, issue numbering and filtering are not so friendly to a blog.

Aim of the new blog

I will provide 2 versions of the blog, the web version, and GitHub Issues version.

About Migrating

Migrating will cause problems. Neither the created time nor the modified time is the actual time. An extra field is needed.

Get Hands Dirty

Generate a Personal Access Token

Here (https://github.com/settings/tokens/new) to generate.

You can actually uncheck all scope, and this token will only have access to public resources.

For more info for the scope, refer to https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/

Let's play with vue-apollo !

:warning: Heads up!

Do not use vue-cli-plugin-apollo, it sucks: https://github.com/Akryum/vue-cli-plugin-apollo/issues/28

I want to manage production dependencies myself, not vue-cli-plugin-apollo!

As GitHub API v4 needs the Authorization header, the basic configuration is not enough. Use the full configuration install, and follow this apollo-client issue to setup.

If you import ApolloClient from 'apollo-boost', ApolloClient will not honor headers in fetchOption

Basically, src/plugins/vue-apollo.js will look like this:

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.github.com/graphql',
    headers: {
      Authorization: 'bearer <your token here>'
    }
  })
})

export default new VueApollo({
  defaultClient: apolloClient
})

And import it into src/main.js:

import Vue from 'vue'
import App from './App.vue'
import apolloProvider from './plugins/vue-apollo'

new Vue({
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

AllanChain commented 4 years ago

Hey! I am not using vue-apollo now. Gridsome and simple graphql requests meet my needs.

To be honest, gridsome is very friendly to blogger, but it's young and you must do things on your own.

Yixuan-Wang commented 4 years ago

You can use RSSHub route /github/issue/allanchain/blog/open/%40post to subscribe the RSS feed of all posts, or you can replace /%40post with /blog%3A%20someType /tag%3A%20someTag to subscribe a certain type of posts(programming, cheatsheet, moments, etc.) or a tag.