手把手教你用神器nextjs一键导出你的github博客文章生成静态html！

yarn

yarn dev

yarn all

const path = require('path')

const mdDir = path.resolve(__dirname, './md')

module.exports = {
  mdDir,
  // 用于更改标题上的用户信息
  user: {
    name: 'ssh',
  },
  // 用于同步github的博客
  repo: {
    owner: 'sl1673495',
    name: 'blogs',
  },
  // 可选 如果申请了github Oauth app的话
  // 可以填写用于取消github请求限制
  client_id: '',
  client_secret: '',
}

/**
 * 同步github上的blogs
 */
const axios = require('axios')
const fs = require('fs')
const path = require('path')
const { rebuild } = require('./utils')
const {
  repo: { owner, name }, mdDir,
} = require('../config')

const GITHUB_BASE_URL = 'https://api.github.com'
module.exports = async () => {
  // 清空md文件夹
  rebuild(mdDir)

  try {
    // 请求github博客内容
    const { data: blogs } = await axios.get(
      `${GITHUB_BASE_URL}/repos/${owner}/${name}/issues`,
    )

    // 创建md文件
    blogs.forEach((blog) => {
      fs.writeFileSync(path.join(mdDir, `${blog.id}.md`), blog.body, 'utf8')
    })

    return blogs
  } catch (e) {
    console.error('仓库拉取失败，请检查您的用户名和仓库名')
    throw e
  }
}

/**
 * 生成nextjs识别的pages
 */
const fs = require('fs')
const path = require('path')
const MarkdownIt = require('markdown-it')
const axios = require('axios')
const {
  mdDir,
} = require('../config')
const { rebuild, copyFolder } = require('./utils')

const md = new MarkdownIt({
  html: true,
  linkify: true,
})

const handleMarkdownBody = (body) => {
  return encodeURIComponent(md.render(body))
}

const pageTemplateDir = path.resolve(__dirname, '../pages-template')
const pageDir = path.join(__dirname, './pages')

module.exports = async (blogs) => {
  // 清空pages文件夹
  rebuild(pageDir)
  // 把pages-template目录的模板拷贝到pages下
  await copyFolder(pageTemplateDir, pageDir)

  // 读取md文件夹下的所有md文件的名字（其实就是issue的id）
  const mdPaths = fs.readdirSync(mdDir)
  const convertMdToJSX = async (mdPath) => {
    const mdContent = fs.readFileSync(path.join(mdDir, mdPath)).toString()
    // pages下的页面根据id命名
    const mdId = Number(mdPath.replace('.md', ''))
    const blog = blogs.find(({ id }) => id === mdId)

    if (blog) {
      // body已经在md文件夹内了 不需要了
      const { body, ...restBlog } = blog
      const { comments_url } = restBlog

      // 获取评论信息
      const { data: comments } = await axios.get(comments_url)
        .catch((err) => {
          console.error('评论生成失败，', err)
        })

      // 处理评论的markdown文本 并且写入到html字段中
      comments.forEach(({ body: commentBody }, index) => {
        const commentHtml = handleMarkdownBody(commentBody)
        comments[index].html = commentHtml
      })

      // 页面的jsx
      const pageContent = `
      import Page from '../components/Page'

      const pageProps = {
        blog: ${JSON.stringify(restBlog)},
        comments: ${JSON.stringify(comments)},
        html: \`${handleMarkdownBody(mdContent)}\`,
      }

      export default () => <Page {...pageProps}/>
    `
      // 写入文件
      fs.writeFileSync(path.join(pageDir, `${mdId}.jsx`), pageContent, 'utf8')
    }
  }

  const tasks = mdPaths.map(convertMdToJSX)
  await Promise.all(tasks)
}

  // 把pages-template目录的模板拷贝到pages下
  await copyFolder(pageTemplateDir, pageDir)

`
      import Page from '../components/Page'

      const pageProps = {
        blog: ${JSON.stringify(restBlog)},
        comments: ${JSON.stringify(comments)},
        html: \`${handleMarkdownBody(mdContent)}\`,
      }

      export default () => <Page {...pageProps}/>
    `

/**
 * 生成博客首页
 */
const fs = require('fs')
const path = require('path')

const indexPath = path.resolve(__dirname, '../pages/index.jsx')

module.exports = (blogs) => {
  const injectBlogs = JSON.stringify(
    blogs.map(({ body, ...restBlog }) => restBlog),
  )

  // 把blog数据注入到首页中
  const indexJsx = `
    import React from 'react'
    import Link from 'next/link'
    import Layout from '../components/Layout'
    import Main from '../components/Main'
    
    const blogs = ${injectBlogs}
    const Home = () => (
      <Layout>
        <Main blogs={blogs} />
      </Layout>
    )
    
    export default Home
  `
  fs.writeFileSync(indexPath, indexJsx, 'utf8')
}

const { withOra, initAxios } = require('./utils')
const syncBlogs = require('./sync')
const pageBuilder = require('./page-builder')
const indexBuilder = require('./index-builder')

const start = async () => {
  initAxios()

  // 同步github上的blogs到md文件夹
  const blogs = await withOra(
    syncBlogs,
    '正在同步博客中...',
  )

  // 抓取评论，生成pages下的博客页面。
  await withOra(
    () => pageBuilder(blogs),
    '正在生成博客页面中...',
  )

  // 生成首页
  indexBuilder(blogs)
}
start()

function initAxios() {
  axios.default.interceptors.request.use((axiosConfig) => {
    if (client_id) {
      if (!axiosConfig.params) {
        axiosConfig.params = {}
      }
      axiosConfig.params.client_id = client_id
      axiosConfig.params.client_secret = client_secret
    }
    return axiosConfig
  })
}

async function withOra(fn, tip = 'loading...') {
  const spinner = ora(tip).start();

  try {
    const result = await fn()
    spinner.stop()
    return result
  } catch (error) {
    spinner.stop()
    throw error
  }
}

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "sync": "node builder/index.js",
    "all": "npm run sync && npm run build && npm run export"
},