type
status
date
slug
summary
tags
category
icon
学习进度
通过前面两章的教程,我们现在离成功搭建个人博客就差最后一步啦 👏👏👏但这一步也是最难的一步,但一步步跟住我做也是很快能懂的哦😎
目录
工具需要
- GitHub 👉全球最大的开源项目分享平台。
- notion 👉是一个比较全能的做笔记应用,支持多平台跨端使用。
- aliyun.com 👉阿里云就不过多赘述啦。
- vercel 👉是一个网站托管服务平台,开发者可以将自己的网络应用部署、托管在平台上运行。
- Next.js 👉是基于 React 的框架,具有服务器端渲染功能。 它非常快速且对 SEO 非常友好。
- 网络加速器。
查找资源
👉 那么我们第一步要做的就是找资源,这里肯定第一个想到的就是GitHub(上面介绍到了这是全球最大的分享开源项目最大的网站) 😜 来这找指定没错哈。先在搜索栏输入几个我们要查找资源的关键字:notion,blog。看能不能找到 😂
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd714fe9b-62f2-4b0c-89e1-667b743dcfdd%2FUntitled.png?table=block&id=72c4358a-4f56-47a2-bbf5-07fd44d03d8d)
👉运气真好,第一条就是我们想要的,还可以看到它的收藏人数还挺多的 🤩感觉很不错 😘最最最重要的他居然还是国人用中文写的,这对小白来说别提有多香了😂还等什么,还不点进去一探究竟。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fffc14077-97d0-4969-bedb-f0cf16b038ab%2FUntitled.png?table=block&id=0de1eaed-2044-415e-8cf8-8101fe00c3a2)
👉上面是一些源代码文件,拉到最下面就可以看到有中文文档的教程,还可以提前预览做出的模板效果。点击进入「部署教程」。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F095d3d32-b214-4add-88ca-86bfacc56837%2FUntitled.png?table=block&id=3104d1ca-7f5e-4f5f-a91c-9da4e56776a7)
创建notion模板
👉将教程提供的notion模板复制到自己的notion上,然后在自己的notion上点击分享 😃
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2247cd22-828a-481f-a8a2-fae73db41d6b%2FUntitled.png?table=block&id=c5c85fb6-038d-4748-b8e5-5c2daa532848)
👉选择分享之后就会有一段这个分享的链接弹出,我们需要按要求截取其中的一部分复制过来并记下来放好先,后面会用到的。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F14f3fd61-20bc-41be-9635-a701333a013b%2FUntitled.png?table=block&id=e89b8e9b-8bae-4562-818e-748c99f550a4)
👉点击该链接就可以一键复制到该项目的源代码了,点击之后会弹出一个fork的绿色按钮,上方也可以先改个自己喜欢的名字再fork到自己的用户上。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa8a758ff-933c-4e79-8f02-16c17315cb2d%2FUntitled.png?table=block&id=8ab6dc3f-7cd5-4222-8694-a0ce0949a77a)
👉成功frok的话就可以在自己的用户主要查看到该项目了,没有显示的话说明还没有添加成功哦 🤪
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd54bdd28-d8bf-48e5-9cf2-adf944d4256b%2FUntitled.png?table=block&id=ac693f2c-52a0-4717-b994-2c21ab891962)
Vercel部署
👉按步骤先注册账号,有了账号之后就可以通过下一步提供的链接进入,紧接着导入NotionNext。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb09b1ac6-5f43-445b-8518-c255b6d9f302%2FUntitled.png?table=block&id=3264620e-40c2-4b4b-af5e-c55dd3d506bd)
👉一定要按步骤细心填写,这里就用到了刚刚复制下来的notion id。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F145fc2f5-a4af-49bb-9a0a-79cad675589b%2FUntitled.png?table=block&id=8c2f610e-dd35-404e-8ce6-8216059dcb3e)
👉恭喜你 🎉🎉🎉这个页面弹出说明创建成功啦,点击右上角按钮查看创建博客的网址。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F055f8965-d775-4753-b2e3-bb59f8445f91%2FUntitled.png?table=block&id=6e72fbd2-fd94-4fa5-bc68-30048470dbd0)
👉接下来就可以通过浏览器访问你的个人博客啦,开心吧 🤩
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F81821553-a2b2-4210-8e94-69ce566e9a73%2FUntitled.png?table=block&id=6b95f866-e74a-40d2-a541-affa439e18bb)
域名指向博客
👆在上面Vercel成功搭建的这个页面右上角有个「Domains」域名点击进去就可以填写我们在阿里云购买的域名啦 😝
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa9388fe0-d953-4032-b518-4b4320cbe3b3%2FUntitled.png?table=block&id=1bdab2d2-e446-4da5-9744-078ab7926783)
👉点击添加之后就可以查看这个三个值,然后把它们依次复制到阿里云的控制台域名设置的对应位置上,最后点击「确认」。 🤪添加完之后回到vercel页面下滑还有一个www类型的需要添加,重复刚刚复制到阿里云的操作即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb8f1a303-5748-43db-b2b9-7ce3435436c9%2FUntitled.png?table=block&id=eea093ea-b6b7-4f58-b737-5260cec355c4)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0ed68a44-aadf-45a5-99e5-f04368bb9254%2FUntitled.png?table=block&id=b0968276-bc26-412e-8b1c-59cdcf6c908f)
🎉🎉🎉现在我们就可以通过域名来访问自己的博客啦。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc42defa8-4dc3-4b65-b460-8d8ccff79fa6%2FUntitled.png?table=block&id=e89a121d-60ed-4bf0-9cbe-978bfbd85004)
总结
对于我们这种小白想要从零搭起的话基本上是不可能的,所以我们要借助别人做好的框架去实现,最后我们把域名、服务器、博客都连接到了一起这也是一个搭建的过程,从该过程中可以学习到很多方面的知识,希望这篇文章能给同学们带来帮助。
- 作者:heliang
- 链接:https://heliang.fun/article/personal-blog
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。