- Published on
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