今年 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
第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學到了就要用到
有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯系起來。知識和實踐相互聯系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。
