今年 5 月份的时候，Deno 1.0 发布了。Deno 是作者 Ryan Dahl 在 Node 之后的又一大作，它是一个新的运行时，用于在 Web 浏览器之外执行 JavaScript 和 TypeScript，其采用 Rust 编写而成（最初用的是 Golang）。
今天介绍的项目就是使用 Deno + React 驱动的静态网页生成器，那么它与我们更熟悉的 Hugo、Jekyll 等相比，有什么区别呢，一起来看看吧。
项目名称：Pagic
项目作者：xcatliu
开源许可协议：MIT
项目地址：https://gitee.com/xcatliu/pagic
项目简介
Pagic 是一个由 Deno + React 驱动的静态网站生成器。
它配置简单，支持将 md/tsx 文件渲染成静态页面，而且还有大量的官方或第三方主题和插件可供扩展。
项目特点
配置简单
Pagic 遵循约定优于配置的理念，尽可能的减少配置项，通过一些符合直觉的设计，降低用户的理解成本，而又不失灵活性。
支持 md 和 tsx
Pagic 不仅支持将 md/tsx 文件渲染成静态页面，而且还能运行 tsx 中的 Hooks，借助 React 组件的可编程性，极大的扩展了静态网站的能力。
值得注意的是，每一个由 Pagic 生成的页面都带有预渲染好的 HTML，也因此具有极致的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，React 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
主题和插件
Pagic 拥有官方的 default, docs, blog 等主题，我们可以使用官方主题轻松的生成一个网站，也可以创建个性化的主题，甚至还可以扩展某个主题——这些能力都得益于 Pagic 符合直觉的 _layout.tsx 设计。
插件是 Pagic 最核心的功能之一。Pagic 将整个构建过程拆分为一个个内置插件，使得其他插件可以插入到构建过程中的任意位置，甚至可以通过替换内置插件完全的更改 Pagic 的构建过程，这给 Pagic 提供了无与伦比的灵活性。
Pagic 参考了 Deno 的设计，要求用户通过一个完整的 URL 来引入第三方主题或插件。
部署示例
同类项目对比
如果你想了解更多的安装与配置相关信息，那么就点击下方了解更多去项目主页看看吧。
习网页编程，制作了几个网页，必须要服务器才能展示吗？
只要gitee或者github就可以了。
1. 注册账号
2. 新建仓库
这里创建仓库的名字叫 xbmc
3. 上传网页
4. 配置网页
5. 启动服务
6. 成功
7. 测试
https://pooorfoool.gitee.io/xbmc/
下一课讲一个简单免费的数据库，用起来就像本地变量一样简单。
两者结合就可以做自己的网站来了。
情介绍
文章目录
二、网站描述
网站介绍
四、网站演示
TML结构代码
如何让学习不再盲目
七、更多干货
题目
HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
一套优质的网页设计应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
<h
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
<h
<h
HTML结构代码
<!--
* @Author: your name
* @Date: 2022-02-16 22:58:33
* @LastEditTime: 2022-02-16 22:58:54
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置:
* @FilePath: 北京黎红学院 网页成品4页面\index.html
CSS样式代码
@charset "utf-8";body{ background:#fff;}.head{ width:100%; height:200px; margin:auto; background: url(../images/head_bj.png) top repeat-x #5d644a;}.head_in{ width:930px; height:200px; margin:auto; background: url(../images/head.png) top repeat-x #5d644a;}.head h1{ font-size:56px; line-height:158px; color:#900; text-align:center;}.nav{width:930px; height:40px; border:1px solid #646a52; margin:auto; background:#4c4d3d; }.nav ul{margin:auto;}.nav li{ height:30PX; float:left; padding:5px 20px;}.nav li a{ font-size:24px; color:#ccc; line-height:30px;}.nav li a:hover{ color:#362f2d;}.nav li:hover{ background:#fff}.nav li:hover a{ color:#362f2d;}.center{ text-align:center}.main{ width:100%; height:auto; min-height:500px; margin:auto;}.main_nav{width:940px; height:auto; margin:10px auto;}.main_nav li{ float:left; margin:10px; }.main_con{ width:100%; height:auto; min-height:300px; margin:auto;padding-top:20px; background:#006699;}.main_ad{ width:920px; height:260px; margin:auto; }.main_news{width:900px; height:auto; margin:auto; margin-top:10px; padding-bottom:20px;}.main_news h2{ font-size:26px; line-height:38px; color:#fff;}.main_news p{ font-size:14px; line-height:22px; color:#fff;}.main_news ul{padding-left:20px; }.main_news li{ padding-left:20px;}.main_news li a{ font-size:18px; line-height:32px; color:#fff; }.main_news li a:hover{ font-size:18px; line-height:32px; color:#ffd9b4; }.main_des{width:900px; height:auto; margin:auto; padding-bottom:50px; }.main_des h1{ font-size:28px; line-height:68px; color:#362f2d; text-align:center;}.main_des p{ font-size:16px; line-height:28px; color:#333; text-indent:2em;}.main_zhanshi{width:920px; height:auto; margin:auto;}.main_zhanshi li{ float:left; margin:10px;}.main_zhanshi img{ width:280px; height:200px;}.foot{ width:100%; height:90px; background:#600; margin:auto;text-align:center;}.foot_in{ width:960px; height:90px; padding-top:15px;margin:auto;text-align:center;}.foot_in p{ font-size:16px; line-height:26px; color:#fff; }*{ margin:0; padding:0; font-family:黑体; }.clear{ clear:both;}.fl{ float:left;}.fr{ float:right;}img{ border:none;}a{ text-decoration:none;}a:hover{ text-decoration:none;}li{ list-style-type:none;}.p10{ padding:10px;}.main .main_con .main_news h2 a {color: #FFF;}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<h
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
