Astro静态网站生成

html-网站的根基

开始之前科普下网站的构成，

简明来说就是三种：html，css和JavaScript，

HTML构成网站的框架，
CSS是网站美化包，
JavaScript为网站提供交互功能，

这些编程语言是为了使网站更加完美的存在，本文是在有过构建网站基础后进行的，算是我对构建网站进阶的认知日记吧。

Node.js和npm的应用

如果你听过Linux的包管理器可以了解到，

包管理器是像手机应用商店可以一键下载一些软件的工具，包管理器简化了安装、升级与解除安装软件的过程，

node背后还有Linux维护，两者都由JavaScript构成， npm会随着Node.js自动安装，

接下来会 “npm” 和构建网站息息相关, 先下载node.js软件就可以在命令行用“npm”了。

Node.js官网

Astro 是什么？

Astro的中文意思：天文，天文构建博客页很强。对网站构建有丰富的支持，后期主流的编程阵容可以集成兼容，详细设计理念,建议到官方文档的核心理念进行阅读，关键的一句话是1.以内容为中心的网站的用例最有意义。 Astro 是集多功能于一体的 Web 框架，用于构建快速、以内容为中心的网站，值得一提的是Astro能解析Markdown，发布发布博客.

astro 文件可以作为:

页面用户
界面组件
布局
图像

astro官网

插曲：

这里你可以先打开这个网站，看看未来可能的效果 stro博客模版效果一会将在浏览器模拟出从命令行安装一个简易的博客模版。

关于命令行Terminal也就是终端cmd

一个小黑窗口，复制粘贴就像黑客电影那样，很快你就会熟悉的。建议看一下我博客之前的

命令行教程

安装astro

安装最新版本的天文,是通过运行命令如下： ###

1	`npm create astro@latest`

在本地启动并运行一个新的 Astro 项目！本地启动意味着网站服务器在本地运行，像这种一段指令的，一般就是复制到命令行的，比如npm这种出现选择后，一路默认即可

npm install

意思就是npm来下载依赖，依赖很重要，就像齿轮一样，个人建议使用yarn安装：感觉会少许多奇怪的报错，yarn类似npm的升级版，yarn比npm稳定

通过

yarn -v

来测试是否成功安装yarn

安装yarn

1	`npm install -g yarn`

使用npm先下载到yarn

用yarn下载astro

1	`yarn create astro`

进入项目文件

1	`cd ./undefined`

下载依赖(如果报错，很有必要的)

1	`npm install`

相当与我们开始的时候下载依赖没有在项目文件那么需要在新建文件夹再次下载依赖

是时候运行一下网站了

1	`yarn dev`

打开浏览器输入域名： http://localhost:3000/

可喜可贺，现在你拥有一个可运行的本地网站！

用Markdown写一篇博客文章，

创建一个 “ .md “文件下 pages 文件夹。写一段

Hi~ o(￣▽￣)ブ

访问该路线将使Astro即时将其转换为HTML 比如blog.md,就是访问 http://localhost:3000/blog 就能看到了。

常见错误：

npm install模块时报错：not such file or directory。是何原因?

安装速度问题，还得是镜像快，

下面是引入淘宝镜像

1	`npm config set registry https://registry.npm.taobao.org`

Astro dev 错误

就是确实依赖了 npm i 或者 yarn install，注意在博客文件夹运行

彩蛋与挑战

一行指令就能下载到本地了

1	`yarn create astro --template satnaing/astro-paper`

vscode技巧
1
code .
可以直接运行vscode，来自Traversy Media。我觉的个人网站还是自定义的创作，才有意义，像一幅画作，是作品。
无js的html
vs code 官方对astro的入门介绍直播 (2023-1-20)
搭建astro博客的官方教程\EN 非常详细，一步一步那种
SEO满分的天文博客模版 SEO是搜索引擎对网站合理度的评分，SEO意味网站设计的完美优化模版是什么？模版意味着已经构建好了html，css和JavaScript，直接运行即可看到效果，对于专注内容的博客，写作为主，模版带来极大便利性，你自己可以更快的开始博客写作之路。
打包文件想要在本地构建并预览你的站点或在自有环境中排查潜在错误和警告。运行 npm run build 命令即可构建 Astro 站点。

后记

我想说快速建立一个网站树立信心，带来建网站的新鲜感，后续，感兴趣就可以直接自定义一个属于自己设计的网站。不必害怕说看不懂，看懂文件夹就可以大致了解你下载了个什么，当报错的时候，只需修正即可，不必气馁，而且修好错误的成就感也是很有满足感的，目前astro是稍有令我最新的技术，平时只是写写html，同时也在了解构建网站，那些一些只是见过的图标logo，我想借助astro未来熟悉一些框架，对于我来说是一次不错的挑战，当我做了一个博客页后我意识到自己已经入门前端了，接下来一个是微前端，尝试制作进阶版的网站，同时我比较注重的是静态网站astro就非常适合。

遇到问题和欢迎来webring群组交流。