Hugo博客迁移,使用Next.Js实现纯前端博客

选Next.Js的原因

一直想学点纯粹的前端,听朋友介绍Next.js是前端的集大成者.我听进去了,啃了新手村的文档将近一半的进度,有了点感觉,决定把博客迁移到Next.js续上这份感觉.
在学Next.Js期间,还用了下TailWindCss 和 DaisyUI,感觉很好用
找到了一个清爽的博客模板nextjs-blog-starter:因为它就是使用TailWindCss,就决定用它了

安装篇

初始化Next.js博客项目

拉取tailwind-nextjs-starter-blog 代码(你应该拉取fork到自己仓库后的代码)

git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git

本地运行检验

npm install
npm run dev

不出意外的话,你的博客应该已经跑起来了,访问 http://localhost:3000 就能看到效果

使用DaisyUI调整Next.js样式

如果只是想使用模板的原始样式,可以跳过这一步

安装配置DaisyUI

安装DaisyUI,具体看官方文档daisyui,这里做个简单的示例


npm install daisyui

在tailwind.config.js中添加

tailwind.config.js

plugins: [
    require('daisyui'),
]

在css/tailwind.css中添加

css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

使用DaisyUI调整样式

我使用DaisyUi最多组件是 button,menu,badge 配合TailWindCss 将大部分的样式调整成了我喜欢的黑白配色
还用daisyui接管了默认主题,目前黑夜模式还要再调一下

Next.js 部署到 CloudFlare Pages

CloudFlare Pages 它免费,支持自定义域名和自动部署.
我使用静态的方式部署,详细部署文档在 deploy-a-static-nextjs-site

Next.js 部署到CloudFlare Pages的步骤

登录CloudFlare,选择 Workers && Pages菜单
选择 Create an application->Pages
选择GitHub仓库,选择分支,点击部署
部署的 build command 和 output directory 一般是 npm run build 和 out,根据自己项目情况填写
部署完成后,可以选择自定义域名,CloudFlare Pages也会提供一个域名,类似于 https://your-project.pages.dev

Next.js 发布到CloudFlare Pages

上面的部署步骤完成之后,已经能用CloudFlare Pages的域名访问你的博客了
可以尝试更改mdx的内容,push你的git仓库,CloudFlare Pages会自动部署.
注意在CloudFlare Pages的后台看Deployment details情况,如果部署失败,会有错误信息提示,这个很重要

问: 为什么Next.js部署到CloudFlare Pages图片不展示

很可能是因为Next.js 的〈Image〉组件默认使用的是Next.js的图片优化服务,它的路径.next/** 我目前发现它在Cloudflare Pages 上不适用,所以用的原始图片路径,更改了 images的loader

在next.config.js中添加

module.exports = {
  images: {
    loader: './my-loader.ts',
    path: '',
  },
}

在项目根目录下添加 my-loader.ts,大概意思是图片使用原始路径

export default function cloudinaryLoader({
  src,
  width,
  quality = 'auto',
}: {
  src: string
  width: number
  quality?: number | string
}) {
  return `${src}`
}

迁移篇

Hugo 文档迁移到Next.js

Hugo 文档迁移到Next.js,我文章不多,使用了手动拷贝原有md文档到Next.js项目的blog目录,后缀调整成mdx,调整文件头部信息如下即可

---
date: '2024-05-21'
title: '博客标题'
summary: '博客摘要'
tags: ['标签']
draft: true
---

Hugo的md文件头部信息和Next.js的mdx文件头部信息大同小异,我只调整了日期格式

兼容Hugo路由

问: hugo迁移到next.js 路由变了,之前的路由能兼容吗

答:可以 Hugo的路由是/posts/xxxxx,Next.js的路由是/blog/xxxxx.原hugo博客在一些平台上有外链,我希望这些外链能跳转到新的Next.js博客依然可用,所以我在next.js添加了重写规则

在next.config.js中添加

async rewrites() {
      return [
        {
          source: '/posts/:path*',
          destination: '/blog/:path*', // 将所有 /posts/* 重写到 /blog/*
        },
      ]
    },

上面是需要依赖Node Next环境的重写规则,如果你是静态文件部署,需要在CloudFlare Pages的配置中添加路由重写规则

在根目录增加 _redirects文件,让CloudFlare Pages支持路由重写

/posts/* /blog/:splat 200