使用Astro 最详细搭建网站以及部署方案

大家好，这里是芒果卢浮宫。

对于前端同学来说，最常用的Web框架非React/Vue/Angular莫属。在本文中，您将了解新的Web 框架Astro，并引导您构建自己的网站。每个用过Astro 的人都说它闻起来很香。

关于技术栈选择

如果现在有这样的需求，企业应该为自己的官方网站创建一个登陆页面。没有其他要求。我该如何介绍我的公司？

过去，你可能会选择熟悉的语言进行快速开发，但现在如果问你选择哪种技术栈，你可能会选择Astro。请听我说~

首先，如果您花时间在内部开发它，则需要构建整个网站布局，包括导航栏、徽标和页脚。您还需要考虑诸如与移动设备的兼容性和网站的SEO 优化等问题。

可能会觉得有点麻烦？无论如何，有点沮丧，而且我做出来的东西可能看起来不太好.

如果布局、适配和SEO 都已设置好，只需更改文本，那就太好了。

那么，依靠Astro强大的主题生态系统，您可以快速实现这些事情。例如豫园公司产品剪切助手（https://jianqiezhoushou.com）的官网是用Astro搭建的，如下：

它看起来很棒，适合移动设备且适合SEO，因此您可以用一块石头做多种事情。

接下来我们简单介绍一下Astro框架，并使用Astro快速生成自己的网站。

Astro框架介绍

关于Astro的介绍，官方文档（https://docs.astro.build/zh-cn/concepts/why-astro）提供了非常明确的立场。 “用于博客、营销网站和电子商务网站的网络框架。

它默认支持服务器端渲染，支持React、Preact、Svelte、Vue、Solid、Lit、HTMX 和Web 组件。所以这个特征被称为Astro“岛屿”。

立即获取Astro 应用程序

这里我不会向你展示如何从零到一编写Astro。如果您有兴趣，请参考官网的入门指南（https://docs.astro.build/zh-cn/getting-started）。使用Astro Powerful主题模板，您只需修改文本并编写Markdown即可轻松构建一个漂亮的博客网站。

1）选择主题模板

访问Astro的官方模板网站（https://astro.build/subject）并选择您喜欢的模板：

我选择的模板是https://astro.build/themes/details/astro-boilerplate/。当您进入该模板的详细信息页面时，您会注意到有两个按钮，如下所示。

第一个是源码，第二个是在线效果演示。

单击“开始”以获取项目的源代码。

2) 参考模板的README文档。

通过README文档你可以找到以下信息：

我如何开始这个项目？

如何构建版本？

如下所示：

然后按照自述文件中的说明进行操作。第一步是将项目拉到本地并运行以下命令：

git 克隆– 深度=1 https://github.com/ixartz/Astro-boilerplate

在编辑器中打开该项目并安装项目依赖项，如下所示：

安装依赖项后，启动项目。 项目启动后，访问http://localhost:4321，如下所示。

OK，现在我们有了最原始的模板，和之前的预览一致，像这样：

3）项目内个人信息的变更

现在您需要将里面的文本替换为您自己的信息。这里可以查看index.astro文件来了解整个网站的整体布局。您要调整的组件如下所示：

如果您不知道如何进行调整，还可以使用另一种简单的方法，直接搜索内容关键字来找到您要更改的内容：

调整后的效果如下：

它主打简单的风格，而且不难看。

4) 如何发帖

由于这是一个博客网站，因此找到posts 文件夹并在此文件夹中进行以下配置更改。

接下来尝试发布一篇文章，在posts文件夹下新建一个md格式的文件，并在里面写入内容，如下：

可以看到，我们写的markdown被解析成文章了~

至此，您的网站已经构建完毕，剩下的就是添加内容了。

现在您已经创建了网站，您需要使其可供其他人访问。此步骤通常需要您的服务器和域名等信息。如果你没有那个怎么办？

免费卖淫！将白嫖进行到底！

免费使用的第三方服务包括：

1) GitHub 页面

2) 网络化

3) 云耀

4）维塞尔

ETC.

这里我们以Netlify 为例。如果您有兴趣，请自行研究一下。

扩张

1）创建仓库

首先，您需要一个存储代码的地方。转到GitHub，创建代码存储库并上传代码：

2) 将您的仓库与Netlify 关联

进入Netlify登录页面（https://app.netlify.com/login）。由于代码位于GitHub上，因此选择使用GitHub登录，如下：

选择导入现有项目，如下：

从GitHub导入如下：

找到您的博客所在的代码存储库：

点击仓库将进入部署配置页面，如下所示。

列出了一些主要配置步骤。如果没有特殊步骤，此时无需采取任何预防措施。等待几分钟，部署完成，如下：

现在，当您访问https://codereshui.netlify.app 时，您可以看到您部署的网站，任何新内容更改（例如帖子）都会自动构建并发布您的网站。

完善的一站式服务！

好了，这就是本文的全部内容。您还可以启动自己的网站。

以上关于#Astro最详细的网站建设和部署规划的信息来自源网络，仅供参考。相关信息请参见官方公告。