很早就想搞一个自己的博客,从头到尾,是时候展示复制粘贴的能力了!
- View: demo site
- Framework: Next.js
- Deployment: 自己的服务器
- Content: MDX
- Styling: Tailwind CSS
$ git clone https://github.com/alexcarpenter/nextjs-mdx-blog-theme
$ cd nextjs-mdx-blog-theme
$ npm install
$ npm run dev:watch
- 完全自定义主题,页面静态化渲染,SSG
- 标签页和归档页以及任何想定制的页面(当然需要用户自定义开发)
- 根据文档自动生成网站 tag
- 黑白主题切换 (借助 next-theme)
- md 文档中代码高亮,借助 prismjs
- md 文档中插入自定义组件
- 自动生成rss.xml,seo 相关
- 评论功能 gittalk
- 全局搜索,借助 docsearch
- 国际化(中英文,暂时放弃)
- 基础框架 Nextjs13.0
- 换肤 next-themes
- gray-matter:解析 md 文档成序列化数据, Smarter YAML front matter parser
- fast-glob: It's a very fast and efficient glob library for Node.js
- 渲染 md 文档 next-mdx-remote: Load mdx content from anywhere through getStaticProps in next.js
当时纠结了好久,用哪个 mdx 渲染器
- 每篇文章打包完之后体积超过 128kb,也不知道哪一步导致这么大?
- 全网字体需要更换下,如何更换?
- 图片尺寸不一,需要统一裁剪
- 自动生成 rss 文件 "build": "node ./scripts/gen-rss && next build"
- 当前宽度小于 400px 顶部导航部分样式调整
1.卡在了 docker-compose 那里,部署上去之后,服务器上访问 3002 端口,没有成功啊,退而求其次搞个本地服务也是各种问题,最后的 nginx 配置
server {
listen 80; #监听的端口
server_name bythewayer.com;
#修改反向代理地址
location / {
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://127.0.0.1:3001; #实际提供http内容服务的地址
proxy_redirect default;
# root html; # 默认的根目录
#index index.html index.htm; # 默认的首页页面
}
}
现在还有一个部署问题,每次提交都会打包新的镜像,希望打包的时候
1.删除老的,不然镜像累计的越来越多,内存空间不足
2.docker-compose 希望跑新的镜像,而不是沿用老的
3.子路由不能访问了,比如子路由是https://bythewayer.com/learn 这种就不能正常访问了,目前改成纯静态博客,直接上传打包后的静态资源