2024 春季学期第一次作业（4.22提交） #303

wj23027 · 2024-04-08T03:35:46Z

作业内容：选择一个感兴趣或擅长的主题来制作一个静态网页博客，比如个人介绍、爱好分享、技术总结等。
作业要求：
- 设计至少四个页面来展示博客内容，不限于首页、关于我、文章列表、文章详情等。
- 博客排版清晰、内容合理，代码整洁优雅，可读性强。
- 附上自己对本次作业的总结及反思，包括但不限于以下内容：（可以放在博客中）
  - 博客主题及其选取原因
  - 博客页面布局及其设计思路
  - 博客功能实现及其技术选择
  - 博客制作过程中遇到的问题及其解决方法
本次作业将按照以下几个维度对总结报告和网站内容评分：
- 技术汇报：评价学生利用了哪些技术或工具来实现博客功能，是否能够正常运行和并且足够了解相关技术。
- 内容丰富度：评价学生设计了什么样的页面结构来展示博客内容，并且是否有达到足够四个页面的内容。
- 博客主题：评价学生选择了什么样的主题来展示自己的兴趣或专长，并且是否能够吸引读者关注，博客页面中存在实质性内容即可通过。
截止时间：本次作业将于4月8日开始，持续两周，请大家在截止日期（4月22日）上课之前完成并提交作业。
提交方式：在此 issue 下给出学号、姓名以及博客仓库链接、博客主页链接、总结报告，例如：

12345678 张三
仓库链接：
主页链接：
总结报告：

wj23027 · 2024-04-08T03:49:59Z

静态网页博客介绍

静态网页博客是一种不需要后端服务器和数据库支持的网站，只需要使用HTML、CSS和JavaScript等前端技术就可以实现。静态网页博客有很多优点，比如速度快、安全稳定、易于维护等。
可能用到的技术以及概念：

GitHub Pages
- GitHub Pages 是 GitHub 提供的一项静态网站托管服务，允许用户将他们的静态网页项目直接托管在 GitHub 上。
- 用户可以使用 GitHub 提供的域名（例如 yourusername.github.io）或者绑定自己的域名来访问他们的网站。
- GitHub Pages 支持 HTML、CSS、JavaScript 等前端技术，并且与 GitHub 仓库无缝集成，使得更新网站内容变得十分方便。
- GitHub Pages 也支持使用 Jekyll 和 Hexo 等静态网站生成器。这些生成器可以帮助用户更轻松地管理网站内容，提供了模板、主题、插件等功能，使得网站的构建和维护更加简单高效。
SSG框架
- 一种常用的框架是 Jekyll ，它是一个Ruby编写的、快速、简洁且高效的静态网站生成引擎，它使用一个模板目录作为网站布局的基础框架，支持 Markdown、Textile 等标记语言的解析，提供了模板、变量、插件等功能，最终生成一个完整的静态 Web 站点。你可以在 GitHub Pages 上直接使用 Jekyll 来搭建博客，并且选择不同的主题来美化你的博客界面。
- 另一种常用的框架是 Hexo，它也是一个快速、简洁且高效的静态网站生成引擎，它使用 Node.js 编写，并且提供了丰富的插件和主题来扩展和定制你的博客功能和外观。你可以在本地使用 Hexo 来编写和预览你的博客内容，并且通过简单的命令就能将生成的网页上传到 GitHub Pages 上。
- 如果你想要更多选择或灵感，你可以参考以下链接中收集或推荐了一些基于 GitHub Pages 的各类开源项目模板，比如程序员个性化简历、程序员酷炫博客等等。这些模板都有相应的项目地址和预览地址，你可以根据自己喜欢或需要来选择或修改。Static Site Generators - Top Open Source SSGs | Jamstack
Git
- 分布式版本控制系统，用于管理你的代码和文件。你需要使用 Git 将你的静态网页上传到 GitHub 上，同步到 GitHub Pages。
Markdown
- Markdown 语法的官方规范可以在 ruanyf/document-style-guide: 中文技术文档的写作规范 (github.com) 查看，其中包含了基本语法和扩展语法的说明和示例。
- 检查 Markdown 的源代码是否规范排版正确，有以下几种方法：
  - 使用在线工具，如 Markdownlint，可以直接在网页上输入或粘贴 Markdown 源代码，然后查看是否有错误或警告提示，并按照建议进行修改。
  - 使用 VSCode 插件，如 Markdown All in One和 Markdownlin，可以在 VSCode 编辑器中实时检查和预览 Markdown 源代码，并提供一键修复的功能。
Frontmatter
- Frontmatter 是一种在 Markdown 文件中添加元数据的方法，它由三条虚线包围的有效的 YAML、JSON 或 TOML 格式的内容组成。
- 在静态博客中，Frontmatter 可以用来指定一些页面的配置选项，例如标题、描述、布局、语言、标签、分类等。这些选项可以影响页面的生成和展示方式，也可以被其他组件或插件访问和使用。