博客搭建记录

技术选型

• astro
• theme
• daisyUI
• netlify
• tailwind
• sitemap

导入主题

我理想中的博客颜值是放在第一位的，最好留白要多，内容密度不要这么大，整体黑白色调走高级风。astro官网的主题商店选择并不是特别多，这一款比较对感觉。整体很简洁，左侧有一个边栏进行内容的划分，右侧是主要的内容展示，看了下源代码结构也很清晰，方便后续的更新迭代。

从作者的github主题中clone下来npm install npm run dev后即可跑起来，随后修改一下个人信息，将项目push到自己的github仓库

博客部署

在netlify上新建站点，选择从github上导入已有项目

导入后如图所示

域名配置

阿里云上购买域名，需要登记一些个人信息

在阿里云上配置域名解析，将我们买的域名解析到netlify上生成的域名中，类型为CNAME，配置好后要等个5分钟dns记录才能同步

配置好域名解析后在netlify上按照提示将我们购买的域名添加上去，这样可以利用netlify的dns服务器加速，国外访问的话会快速一点

在cloudflare上配置CDN加速

修改阿里云上默认的dns服务器为cloudflare提供的dns服务器

https配置

在完成之前的配置之后，可以看到netlify已经自动配置好了证书，完成了https的配置。如果没有自动完成的话，在这个界面跟着引导一路操作就好了

评论系统

评论系统使用Cusdis,主要原因是比较轻量、UI简洁.原本是想用CS自学指南同款的giscus,但是giscus只能登陆github账号评论,考虑到博客未来可能不只有技术主题的内容,并不是每个浏览者都有github账号,故放弃.

Cusdis 支持在自己服务器上部署,也可以使用托管平台例如railway进行部署,然而,难绷的是railway竟然说我的账号无法部署,也没有给出解决办法.好在虽然账户受限,railway允许我们创建一个数据库服务.

既然如此,那只好麻烦一点,将cusdis的后台部署在vercel上,数据库部署在railway上.railway支持一键部署postgres,根据流程创建完毕后记得将下图中的DATABASE_URL记好,后面有用.

接下来folk cusdis的官方仓库到自己的仓库中,在vercel中选择从现有仓库新建项目.

项目配置选择Next.js的默认配置即可,需要注意的是要填入四个环境变量,随后点击部署.

这里有一个坑,刚开始我按照默认配置死活build失败,然后在github issues里看到别人遇到类似问题将node版本降到16.*即可.更改vercel中node版本号后果然就build成功了.

但降node版本号并不是一劳永逸的方法,因为在2024年2月份开始,vercel就不支持node 16.x的环境了,治本之策还是要把一些依赖版本号更新.

部署成功后vercel会在项目首页给出url,这时要记得新建一个环境变量NEXTAUTH_URL,值即为项目的url.

此时我们即可进入评论系统的后台,将给出的embeded code粘贴到博客项目中放评论区的地方.注意修改div标签中花括号围起来的变量,这有助于我们在评论后台识别评论来自于哪条博客等信息.到这一步做完,我们博客的评论系统就大功告成啦! 后续可以根据cusdis的文档添加邮箱通知服务和web hook,帮助博主能尽快收到评论的通知.