Astro 练习 1

背景

从2013年开始接触建站，域名，服务器，VPS，虚拟空间，WordPress，Ghost，Nextjs，Gatsby等等，一众的产品和技术都接触过。但从未深入学习过一次，很多次开始又放下。一则是没有动力，二则是没有辅助教具，还有时常把学习编程当成不务正业。今天忽然想到，既然可以把书法、运动作为个人爱好，为什么不可以把编程也作为一个技术爱好呢？于是，计划从今天开始系统学习编程，不为别的，就当作一种爱好和闲暇的放松。起初，我决定从网页开发开始。

我选择了Astro作为我的开发工具，一方面因为其看起来很高大上，另一方面是因为官网有中文技术文档。还有一个原因是，我的个人网站目前也是使用Astro模块，我希望通过一段时间的实践，能够自己开发出一套可用的主题。

无论最后结果如何，我先给这个主题起了一个名字：Ornate，意为花里胡哨。

思路

大概会选用Astro+Tailwind进行开发，虽然现在还不完全明白为什么，但主要是因为看到很多人都在用这两个工具。我计划主要根据Astro的官方教程进行学习。

1. 第一步，给主题创建一个独立的展示站点，子域名为ornate-astro.vercel.app。
2. 第二步，在GitHub上创建一个名为ornate的仓库。
3. 第三步，在本地编写代码，并将其部署到GitHub上。
4. 第四步，进一步将代码部署到Vercel上。
5. 第五步，边学边做，边做边学。

资源推荐

• Astro官方文档
• FreeCodeCamp.org: 提供HTML、CSS、JS等方面的免费完整课程。
• Tailwindcss 官方文档
• 基于组件的设计
• 语义化的 HTML 标签]
• 移动优先设计：首先定义在较小屏幕尺寸上应该渲染的布局！较小的屏幕尺寸需要更简单的布局，然后，调整你的样式以适应较大的设备。如果你先设计复杂情况，那么接下来你反而要努力将其简化。

有用的技巧

使用Astro的astro add命令可以方便地添加集成。运行astro add后，自动集成向导将更新配置文件并安装任何必要的依赖。

移动优先设计：首先定义在较小屏幕尺寸上应该渲染的布局！较小的屏幕尺寸需要更简单的布局，然后，调整你的样式以适应较大的设备。如果你先设计复杂情况，那么接下来你反而要努力将其简化。

步骤

启动Astro设置向导

1. 本地配置：使用的机器是M1 Mac Sonoma。从官方教程开始，首先需要了解开发四件套：Node.js、Vscode、GitHub和Terminal。
2. 安装Nodejs: 最好（或者说必须）使用VPN，并在终端中设置代理。

   export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890
   

3. 启动Astro设置向导：选择官方推荐的初始文件，不使用TypeScript。
4. 编写首页代码：在src/pages/index.astro文件中加入基础HTML和Astro代码。
5. 部署到Vercel：将代码部署到Vercel平台。
6. 配置依赖更新提醒：在GitHub仓库的Insights选项卡下，进入Dependency graph并启用Dependabot。
7. 安装必要的集成：因为我们要使用Tailwind，所以先集成Tailwind。

   pnpm astro add tailwind