个人博客网站搭建教程分享

个人网站

这是我的个人网站，您觉得还行，再接着往下看教程，以便节省您的时间

Welcome

与其说是教程，不如说是过程记录和分享吧，目标是以最简单直白的语言，尽量帮助到遇到相同问题的盆友，顺带一提，不懂html和css也可以建站，比如我～

前置工作

基础知识

1.网站分为静态和动态网站

- 动态网站，顾名思义，网站每时每刻都在更新，是动态的，用户可以与这个网站实时互动，随时从这个网站获取或者上传资源，这些资源一般都存储到这个网站专门的服务器中，网站要做的就是每时每刻都从服务器拿资源，然后将这些资源显示到网页上，所以，动态网站一般需要购买相应的服务器，因此动态网站的搭建和维护成本较高，我们所见到的比较大的网站，基本上都是动态网站。

- 静态网站，不是时时刻刻更新的，是网站管理者将网站要显示到内容都提前写好，交给这个网站显示的，所以静态网站不用购买专门的服务器，不用每时每刻从服务器拉取资源再显示，速度也比较快，以上特性看来，静态网站挺适合个人博客搭建的，事实也是如此，静态网站成本几乎为0，很适合新手。本网站正是静态网站。

必要工具

1.netlify

netlify、vercel是目前比较流行的两个静态网站托管平台，如果你想让静态网站上线，让所有人都能访问，就要靠这些平台托管，本网站用的是netlify，前往创建netlify账号:Scale & Ship Faster with a Composable Web Architecture | Netlify

2.github

你都做网站了，不会连个github账号都没有吧？

GitHub · Build and ship software on a single, collaborative platform · GitHub

3.astro

这个是重头戏，astro是静态网站框架，做网站从0开始总归不太现实，astro帮我们把网站最基础的框架都准备好。

Getting started | Docs

4.cursor(可选)

cursor是内置ai的编辑器，简单来说，你的网站代码在这里面写，如果有错他能帮你改正，如果要实现某些功能，他能结合你目前的代码帮你实现这个功能。不用cursor，用vscode也是可以的。

https://www.cursor.com/

5.一台电脑

https://item.taobao.com/item.htm?abbucket=13&id=788122100822&ns=1&pisk=fZhjHd1Elchz2wJ2dNLzVWd1K6V_ccOFcNat-VCVWSFYXYgnfo8MnSk7f0n7Ds8DnREsmSei3lr4f5giAU-eTBumo5VvYHRF7tQK7SUYXPe9WzUQJItyUgumo5qOzGpEeqjsnoA5BPE9P7U_7rFTHodRyu4NHlnTD8I8RyVT65nT28UUlsIAM-d82u4hXGeYB8F8SPITWRntyUaaRUjFcz8bqqTrW-OcPOYjuu1O9w4bHU0lQs1b_r3Sbxq7zzl7l-ZQE2sccXgKkX4sseB_fVkx0zm6O3N-GmGYF5O1ZSuIemwShh17EY3n68MkA90nkmMLpjdWrci--vVxMhf4mA3-6ulv71ZKL2V7rf-lMlM-Bjy0siKbPjgI1AszX6rQBq61PJf_Pk8WPOXMmjiH9Q1wU1wYrzRwPU6ES-UuPWLWPOXgHz4rFUT5LVf..&priceTId=2147bfae17338315635935654e3b56&skuId=5549854551540&utparam=%7B%22aplus_abtest%22:%222a195f44576f822811fa1958d3cdf334%22%7D&xxc=taobaoSearch

6.AI

chatgpt或者其他什么ai都行，我总不能时时刻刻帮你，孩子。

流程图

基本流程

视频描述：（记得点赞👍）

cursor，astro，netlify部署个人博客网站_哔哩哔哩_bilibili

文字描述：

1.初始化astro项目

首先在你想要的地方创建空文件夹（这个文件夹后期会用来储存网站的所有资源），通过vscode或其他编辑器打开这个文件夹，然后在这个文件夹路径的终端上，输入如下命令行

npm create astro@latest

如果找不到命令npm，那是因为你没有安装nodejs，去搜索安装一下。输入后如果显示在加载，就基本成功了，详细的步骤请看视频。

2.创建github仓库

在github的个人页面那，选择新建repository，命名并创建（记住你的名字）

3.配置vscode

在vscode里完成第一步后，他可能会提示安装astro扩展，选择是，如果没有提示，自己去扩展商店里面下载。

然后是初始化git，git的作用之一是能将我们本地的代码提交到github云端，如果是第一次使用，可能要下载git，自行搜索安装配置教程。接着是在vscode的终端里面初始化git，设置username和email等，选择远程仓库（第二步创建的那个），然后选择提交并发布branch。

4.与netlify关联

创建账号并登陆netlify，选择deploy，add a new site，import an existing project，选择第三步里的远程仓库（与第二步是同一个），链接后按照相应提示操作即可。