Giter Site home page Giter Site logo

oss101's Issues

第四讲课后作业(截至时间4月3日)

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

可能用到的技术以及概念:

  • 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
  • Github Actions
    • GitHub Actions 是一种在 GitHub 上自动化、定制和执行软件开发工作流程的功能。它可以帮助你在不同的事件(例如代码提交、拉取请求或标签创建)上触发不同的任务(例如构建、测试或部署)。
    • 在部署静态网页中,GitHub Actions 可以用来构建和发布 Jekyll 站点到 GitHub Pages。Jekyll 是一种简单、博客感知的静态网站生成器,它可以将 Markdown 或 AsciiDoc 等格式的文本转换为 HTML 页面,并提供各种主题和插件。
    • 使用 GitHub Actions 部署 Jekyll 站点有以下优点:
      • 控制 gemset 和 Jekyll 版本 — 你可以使用任何你想要的 Jekyll 版本,而不是受限于 GitHub Pages 默认支持的版本(目前是 3.9.0)。
      • 使用任意插件 — 你可以使用任何 Jekyll 插件,无论它们是否在 GitHub Pages 的白名单中,甚至是直接放在 _plugins 目录下的 *.rb 文件。
      • 自定义工作流管理 — 通过创建一个工作流文件来运行 Actions,你可以指定自定义的构建步骤,使用环境变量等。
  • Git
    • 分布式版本控制系统,用于管理你的代码和文件。你需要使用 Git 将你的静态网页上传到 GitHub 上,同步到 GitHub Pages。
  • Frontmatter
    • Frontmatter 是一种在 Markdown 文件中添加元数据的方法,它由三条虚线包围的有效的 YAML、JSON 或 TOML 格式的内容组成。
    • 在静态博客中,Frontmatter 可以用来指定一些页面的配置选项,例如标题、描述、布局、语言、标签、分类等。这些选项可以影响页面的生成和展示方式,也可以被其他组件或插件访问和使用。
  • Markdown
    • Markdown 语法的官方规范可以在 ruanyf/document-style-guide: 中文技术文档的写作规范 (github.com) 查看,其中包含了基本语法和扩展语法的说明和示例。
    • 检查 Markdown 的源代码是否规范排版正确,有以下几种方法:
      • 使用在线工具,如 Markdownlint,可以直接在网页上输入或粘贴 Markdown 源代码,然后查看是否有错误或警告提示,并按照建议进行修改。
      • 使用 VSCode 插件,如 Markdown All in One和 Markdownlin,可以在 VSCode 编辑器中实时检查和预览 Markdown 源代码,并提供一键修复的功能。

本次作业的具体内容和要求如下:

  • 作业内容:你需要选择一个自己感兴趣或擅长的主题来制作一个静态网页博客,比如个人介绍、爱好分享、技术总结等。你需要设计至少四个页面来展示博客内容,不限于首页、关于我、文章列表、文章详情等。
  • 作业要求:你需要遵循以下规范或标准来完成作业:
    • 代码风格:你需要使用合理的缩进和空格来格式化代码,并且使用有意义的变量名和函数名来提高代码可读性。
    • 注释规范:你需要在代码中添加必要的注释来说明代码逻辑和功能,并且使用统一的注释风格。
    • 文件命名:你需要使用有意义且符合规范的文件名来组织代码文件,并且使用小写字母和下划线分隔单词。
  • 作业提交:你需要在指定issue中给出博客链接,并附上自己对本次作业的总结或反思(可以把这部分内容放在博客页面中,给出对应链接即可)。总结或反思可以包括但不限于包括以下内容:
    • 博客主题及其选取原因
    • 博客页面布局及其设计思路
    • 博客功能实现及其技术选择
    • 博客样式设计及其美学考量
    • 博客制作过程中遇到的问题及其解决方法
  • 作业截止:本次作业将于3月20日开始,持续两周,请大家在截止日期(4月3日)上课之前完成并提交作业。请注意时间安排和进度控制,不要拖延到最后一刻。

本次作业将按照以下几个维度对总结报告网站内容给出评分:

  • 博客主题:评价学生选择了什么样的主题来展示自己的兴趣或专长,并且是否能够吸引读者关注,博客页面中存在实质性内容即可通过。
  • 页面数量:评价学生设计了什么样的页面结构来展示博客内容,并且是否有达到足够四个页面的内容,达标即可通过。
  • 技术汇报:评价学生利用了哪些技术或工具来实现博客功能,并且是否能够正常运行和并且足够了解相关技术。

[Labeled data] 第一讲线下班正式学员签到专用贴

本课程的学习过程将利用 OpenDigger 开源项目来辅助进行助教自动化统计工作,因此,需要所有参与学员把自己的 GitHub 账号标注到仓库中,因此你需要:

  1. 如果还没有 GitHub 账号,请注册一个;
  2. 到 OpenDigger 仓库下指定 Issue 上,登记你的姓名与 GitHub 账号
  3. 登记链接:X-lab2017/open-digger#1217

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.