Starting with next.js

创建一个Next.js应用

1
2
3
4
5
6
7
8
yarn create next-app
# or
npx create-next-app
# or 
yarn create next-app --example with-chakra-ui mynextapp
yarn create next-app --example with-chakra-ui-typescript cui_ts

# 在cli提示中输入project name, 如nextdemo
1
2
3
# 开发启动
yarn dev
# 访问 http://localhost:3000/

清理代码

  • 删除styles目录
  • 清除
    • index.js 内容
    • _app.js中引用css

安装chakra相关

1
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

  • 修改_app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { ChakraProvider } from "@chakra-ui/react"

    function MyApp({ Component, pageProps }) {
      return (
        <ChakraProvider>
          <Component {...pageProps} />
        </ChakraProvider>
      )
    }

    export default MyApp

  • 添加chakra theme (optional)

1
2
# 添加字体
yarn add next-google-fonts

创建 styles/theme.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { extendTheme } from "@chakra-ui/react"
import { theme as chakraTheme } from '@chakra-ui/react'
import { createBreakpoints } from '@chakra-ui/theme-tools'

const fonts = {
    ...chakraTheme.fonts,
    body: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segei UI Emoji"`,
    heading: `Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segei UI Emoji"`
}
const overrides = {
    ...chakraTheme,
    fonts
}

const customTheme = extendTheme(overrides)

export default customTheme

创建pages/_document.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// google fonts 之类按需
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import GoogleFonts from 'next-google-fonts'
import { ColorModeScript } from '@chakra-ui/react'

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
          {/* <GoogleFonts href="https://.... /> */}
        <Head />
        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
  • 修改_app.js, 添加customTheme
    1
    2
    3
    4
    5
    ...
    import customTheme from "../styles/theme"
    ...
        <ChakraProvider resetCSS theme={customTheme} >
    ...

Use a new hexo theme

A hexo theme list from zhihu

  • 第一名：’iissnan/hexo-theme-next’, 470星 https://github.com/iissnan/hexo-theme-next 。预览：http://notes.iissnan.com/
  • 第二名：TryGhost/Casper, 439星 or kywk/hexo-theme-casper 44星。后面一个主题是基于前面一个主题。
  • 第三名：daleanthony/uno，352星 or someus/huno, 31星。
  • 第四名：orderedlist/modernist, 286星 or heroicyang/hexo-theme-modernist，98星
  • 第五名：litten/hexo-theme-yilia, 265星
  • 第六名：A-limon/pacman, 243星
  • 第七名：AlxMedia/hueman, 215星 ppoffice/hexo-theme-hueman, 71星
  • 第八名：kathyqian/crisp-ghost-theme, 214星，guolin/crisp-hexo-theme, 4星
  • 第九名：xiangming/landscape-plus, 147星，hexojs/hexo-theme-landscape, 34星，官方landscape主题及其优化
  • 第十名：wuchong/jacman, 136星，基于Pacman。

Use qiniu for static assets hosting

Qiniu is a good choice for static assets hosting

  • it’s free! (almost. 10G storage and bandwidth per month)

Qshell is a cli tool for qiniu

  • e.g. qshell qupload upload.conf
  • sample content of upload.conf
    1
    2
    3
    4
    5
    6
    {
    "src_dir" : "D:\\path\\to\\img",
    "bucket" : "bbpnblog",
    "key_prefix": "temp/",
    "skip_suffixes": ".conf,.txt"
    }

mpic is a gui tool for uploading files to qiniu

SDK

Q & A

一个视频床酷播云，没广告