RSS Feed

Using Notion Write Blog and Publish Github Pages (part 3)

Sun, 10 Apr 2022 00:00:00 GMT

一. Notion配置

https://www.notion.so/

1. 下载Notion创建Blog页面

2. 创建Integration

https://www.notion.so/my-integrations

创建成功后得到 NOTION_TOKEN 保存下来

回到我们在notion创建的Blog页面, 点击页面右上角的共享按钮

点击选择一个刚创建的 Integration 点击邀请

二. Blog配置

1. 安装@notionhq/client 和 dotenv 库

npm install dotenv-cli --save-dev
npm install @notionhq/client --save-dev

2. 新建脚本文件 /bin/get-blog-posts.js

因为Notion的API也在更新, 下面的转换文件是有时效性的, github也有很多这样的专门转换的库, 下面这个文件是我站在@Arnaud Valensi 的肩膀上, 代码稍微改了一下基本文字和图片的转换能用, 可能视频也需要更新, 有更新我会在这个文件 https://github.com/zhalice2011/blog/blob/master/bin/get-blog-posts.js 进行更新

const { Client } = require("@notionhq/client")
const slugify = require("slugify")
const path = require("path")
const rimraf = require("rimraf")
const fs = require("fs")
const fetch = require("node-fetch")
const crypto = require("crypto")

const NOTION_TOKEN = process.env.NOTION_TOKEN
const NOTION_ROOT_PAGE_ID = process.env.NOTION_ROOT_PAGE_ID

console.log(
  "NOTION_ROOT_PAGE_ID: ",
  JSON.stringify(NOTION_ROOT_PAGE_ID, null, 2)
)

console.log(
  "NOTION_TOKEN: ",
  JSON.stringify(NOTION_TOKEN, null, 2)
)

const markdownPages = {}

// Initializing a client
const notion = new Client({
  auth: NOTION_TOKEN,
})

const regexMeta = /^== *(\w+) *:* (.+) *$/

const destPath = path.normalize(path.join(__dirname, "..", "content", "blog", "notion"))

async function downloadFile(url, destinationFolder) {
  console.log(`-> Downloading ${url}`)

  const response = await fetch(url)
  const contentType = response.headers.get("content-type").split("/")
  const ext = contentType[contentType.length - 1]
  const buffer = await response.buffer()
  const hash = crypto.createHash("sha1").update(buffer).digest("hex")
  const fileName = `${hash}.${ext}`
  const filePath = path.join(destinationFolder, fileName)
  await fs.promises.writeFile(filePath, buffer)

  return fileName
}

function toTextString(text) {
  return text.reduce((result, textItem) => {
    if (textItem.type !== "text") {
      console.log(`=================> not a 'text' type: ${textItem.type}`)
      process.exit(1)
    }

    if (textItem.text.link !== null) {
      return `${result}[${textItem.text.content}](${textItem.text.link.url})`
    }

    if (textItem.annotations.code === true) {
      return `${result}\`${textItem.text.content}\``
    }

    return `${result}${textItem.text.content}`
  }, "")
}

async function processBlocks(pageContent, textPrefix = "") {
  let text = ""
  const metas = []
  let wasBulletedList = false

  for (const block of pageContent.results) {
    if (wasBulletedList === true && block.type !== "bulleted_list_item") {
      wasBulletedList = false
      text = `${text}\n`
    }

    if (block.object !== "block") {
      return
    }

    if (block.type === "child_page") {
      const subpageSlug = await toMarkdown(block.id, false)
      text = text + `[${block.child_page.title}](/blog/${subpageSlug})\n\n`
    } else if (block.type === "paragraph") {
      // Empty block.
      if (block.paragraph.rich_text.length === 0) {
        text = text + "\n\n"
        continue
      }

      // Meta.
      const match = block.paragraph.rich_text[0].text.content.match(regexMeta)
      if (match !== null) {
        metas.push(`${match[1]}: '${match[2]}'`)
        continue
      }

      // Simple text.
      text = `${text}${textPrefix}${toTextString(block.paragraph.rich_text)}\n\n`
    } else if (
      block.type === "heading_2" &&
      block.heading_2.rich_text.length !== 0
    ) {
      text = `${text}${textPrefix}## ${toTextString(block.heading_2.rich_text)}\n\n`
    } else if (
      block.type === "heading_3" &&
      block.heading_3.rich_text.length !== 0
    ) {
      text = `${text}${textPrefix}### ${toTextString(block.heading_3.rich_text)}\n\n`
    } else if (block.type === "bulleted_list_item") {
      wasBulletedList = true
      text = `${text}${textPrefix}* ${toTextString(
        block.bulleted_list_item.rich_text
      )}\n`
    } else if (block.type === "code") {
      text = `${text}${textPrefix}\`\`\`${block.code.language}\n${toTextString(
        block.code.rich_text
      )}\n\`\`\`\n\n`
    } else if (block.type === "video") {
      text = `${text}\`video: ${block.video.external.url}\`\n\n`
    } else if (block.type === "image") {
      image_name = await downloadFile(block.image.file.url, destPath)
      text = `${text}${textPrefix}![${image_name}](${image_name})\n\n`
    } else if (block.type === "divider") {
      text = `${text}---\n`
    } else {
      console.log("=====> Unhandled block: ", JSON.stringify(block, null, 2))
    }
  }

  return [text, metas]
}

async function toMarkdown(pageId, ignore) {
  const pageProps = await notion.pages.retrieve({
    page_id: pageId,
  })
  const pageContent = await notion.blocks.children.list({
    block_id: pageId,
  })

  const pageTitle = pageProps.properties.title.title[0]?.plain_text
  if (!pageTitle) { // is untitled page 
    return false;
  }
  const slug = slugify(pageTitle, { lower: true, remove: /[*+~.,()'"!:@]/g })
  let text = ""
  const metas = []

  // Handle Frontmatter.
  metas.push(`title: '${pageTitle}'`)

  const date = pageProps.created_time.slice(0, 10)
  metas.push(`date: '${date}'`)

  const description = ''
  metas.push(`description: '${pageTitle}'`)

  // Download the cover and add it to the frontmatter.
  if (pageProps.cover !== null && pageProps.cover.type === "external") {
    const pageCoverUrl = pageProps.cover.external.url
    const coverImageName = await downloadFile(pageCoverUrl, destPath)
    metas.push(`featured: '${coverImageName}'`)
  }

  const [contentText, childMetas] = await processBlocks(pageContent)

  metas.push(...childMetas)
  metaText = "---\n" + metas.join("\n") + "\n---\n"
  text = metaText + contentText

  // Save the page data if it is not the root page.
  if (!ignore) {
    markdownPages[slug] = text
    console.log(`=> Imported "${pageTitle}"`)
  }

  return slug
}

;(async () => {
  // console.log(`-> Cleaning the '${destPath}' folder`)
  // rimraf.sync(destPath)
  fs.mkdirSync(destPath, { recursive: true })

  await toMarkdown(NOTION_ROOT_PAGE_ID, true)

  await Promise.all(
    Object.entries(markdownPages).map(async ([slug, markdown]) => {
      const filename = `${slug}.md`
      const filepath = path.join(destPath, filename)
      await fs.promises.writeFile(filepath, markdown)
    })
  )

  console.log(`Done: imported ${Object.entries(markdownPages).length} pages.`)
})().catch(console.error)

2. 新建环境配置文件 /.env

获取NOTION_ROOT_PAGE_ID

打开Blog页面, 后面那一串数组就是了

获取NOTION_TOKEN, 就是刚才创建 Integration 保存的那个密钥

NOTION_TOKEN=secret_xxxxxxxxxxxxx
NOTION_ROOT_PAGE_ID=94d3002182824088xxxxxxxxxxxx

创建好了两个文件

4. 修改package.json新增一个脚本命令执行上面的脚本

"import-notion-posts": "dotenv -- node ./bin/get-blog-posts.js",

5. 在Blog下编写一篇文章

6. 测试脚本运行, 自动拉取Notion的文章生成Markdown到目标目录下

npm run import-notion-posts

执行成功可以在 /content/blog/notion 文件夹看到我们转化的MD和下载的文件

执行 npm run develop 或者 gatsby develop在浏览器查看效果

npm run develop

发布到Github Page zhalice.com 上, 可以看到效果基本是一致的.

npm run deploy

三. 参考 (Reference)

https://medium.com/@tfaieta/how-i-use-notion-as-my-cms-for-my-gatsby-site-c449cc9a4687

https://arnaudvalensi.github.io/blog/making-a-blog-using-notion-gatsby-and-github-pages/

https://www.redgregory.com/notion/2020/6/15/9zuzav95gwzwewdu1dspweqbv481s5

How to Get Duration of Video

Sat, 09 Apr 2022 00:00:00 GMT

一.下载FFmpeg

去FFmpeg官网 https://ffmpeg.org/download.html 下载

二.添加到环境变量

将下载的ffmpeg和ffprobe都复制到/usr/local/bin文件夹下

cd ~/Downloads/
# 查看下载的文件
ls -a | grep "ffmprob"
ls -a | grep "ffmpeg"
# 复制ffmpeg
sudo cp ./ffmpeg /usr/local/bin
sudo chmod ugo+x /usr/local/bin/ffmpeg
# 复制ffprobe
sudo cp ./ffprobe /usr/local/bin
sudo chmod ugo+x /usr/local/bin/ffprobe

到这一步已经可以在任何路径下使用ffmpeg命令了

如果没有可能是你没有将/usr/local/bin添加到 $PATH

sudo vi ~/.bash_profile

在文件末尾添加以下内容即刻:

export PATH="/usr/local/bin:$PATH"

三.查看视频时长

ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 -i main-video.mp4

Configuring a custom domain for your GitHub Pages site (Part 2)

Tue, 05 Apr 2022 00:00:00 GMT

一.查看Github Page的地址

ping zhalice2011.github.io

二.添加解析记录

购买域名 (https://console.dnspod.cn/)

添加两条解析记录

三.设置Github Pages自定义域名

等一会儿解析完, 就可以通过域名访问你的博客啦~ https://zhalice.com

四.添加CNAME文件

其实可以从commit看到第三步就是在根目录下新建了一个CNAME文件, 但是我们每次发布其实会覆盖掉所有的文件, 要重复第三步才能使自定义域名生效

所以我们将CNAME放在static文件夹下自动复制过去, 这样每次发布新文章就不用重新设置了.

Make Your Own Blog For Free in 2022 (Part 1)

Mon, 04 Apr 2022 00:00:00 GMT

一.新建Github Page

先新建一个repository, 命名为 username.github.io (注意修改username为你自己的)

二.创建博客

安装gatsby脚手架

npm install -g gatsby-cli

使用该模板建立你的gatsby博客

gatsby new my-blog https://github.com/zhalice2011/blog

进入开发

cd my-blog
gatsby develop

打开 http://localhost:8000 查看页面, 然后本地进行博客的修改, 文章均放置在 content文件夹

三.发布博客

链接到远程仓库(注意修改username为你自己的)

git remote add origin git@github.com:username/username.github.io.git

发布

npm run deploy

此时可以看到你的 username.github.io 仓库多了一个 gh-pages 分支

设置 Github Pages 展示的分支为 gh-page (如果设置成master会很凌乱, 因为都是打包后的文件)

接下来就可以访问你的博客啦~ (注意修改username为你自己的) https://username.github.io

参考

Dan Blog An Tran Blog