暑期夏令营项目:基于 GitHub 的博客网站

2023/07/12 项目总结 共 1645 字,约 5 分钟

我的总结与反思

1. 博客主题

这里选取了个人学习笔记分享,在这个博客里有我分享的实验报告以及在平时学习算法、数据库等知识时遇到的一些小问题,选取这个主题的原因是想要利用博客将平时学习心得以及体会记录下来,这样过一段时间便可以回顾这段时间学习了什么

除此之外还有一个小板块是关于自己的,就是简单地对自己的兴趣爱好做了一些介绍

2. 博客页面布局及其设计思路

这里选择的是一种常用的框架是 Jekyll 来部署的静态博客

首页

  • 博客首页的上面👆便展示的自己博客的名字以及地址以及github

  • 博客首页的右边👉有两个板块,分别是Search搜索和My Popular Repositories

    • search板块

      这里的search主要是针对标题,如果搜索内容在这篇文章的标题中出现过,那么则会返回这篇文章的链接

    • categories分类

      这里的分类标签🏷️是根据上传的学习笔记当中设置的标签来展示的,越大则表示该类下笔记越多

    • My Popular Repositories板块

      这里其实就是将github中前几的仓库做一个陈列

  • 博客首页的左边👈便成列着我的学习笔记

    • 学习笔记按顺序排列,有分页功能

    • 每一篇学习笔记都可设置为置顶🔝,标题下面写着发布时间

    • 每一篇的开头都进行了字数统计并且可以预估读取时间

    • 点标题进去之后就可以查看到内容

      在页面的左边则是具体内容,在右边也是拥有search分类列出了这篇文章的结构,点击则可实现跳转

分类

开源

这里是将我github中的仓库作了一个展示

链接

这个页面是自己开源项目的展示:点击链接则可看到此次的个人博客分析以及基于alibaba开源的github数据的大屏制作

关于自己

这个板块主要展示了关于的兴趣爱好、联系方式

3. 功能实现及其技术选择

置顶文章

在 Markdown 文件头部的元信息里指定 topmost: true

然后在index.html中设置网页样式

支持搜索

在_config.yml中添加以下板块

然后在search的json文件中判断site.simple_jekyll_search.fulltext获取的搜索结果是否在我们所有文档的key、categories、description里面找得到,然后对其进行展示,注意展示时根据该种类的文章个数来设置标签大小,文章个数越多,size越大

<a href="#"></a>
<span class="badge"></span>
实现分页

在index.html修改实现,如果页数大于1页,则需要一个button来实现翻页

外观修改

基于https://dongchuan.github.io/,修改,在其基础上进一步对搜索板块、种类分类展示等外观进行了修改,修改了_config.yml中添加以下组件components,便可实现分享、字数统计、图片灯箱效果功能等功能,并_layouts、_includes目录下对相应html页面进行修改

4. 制作问题及其解决方法

Q1:在开始fork了一个喜欢开源的静态网站之后一直报错,无法正常显示

解决方案:

因为不需要绑定自己的域名,那么删掉 CNAME 文件

Q2:在mac本地环境下搭建jekyll blog安装环境报错,输入gem install jekyll一直在报错
ERROR:  Error installing jekyll:
ERROR: Failed to build gem native extension.
......

解决方案:

xcode-select --install
Q3:在删除或者更新了文章之后,站点没有更新

解决方案:

每次在修改之后一定要注意commit之后编译成功没有,比如出下下面这样的情况,就说明自己的某一步操作导致编译出错,可能是自己的md文件有问题,或者其他的需要进一步排查

只有当成功编译后出现绿色的勾才说明编译成功了,这个时候再去网站刷新看一下会发现是自己新的网页

5. 实验心得

通过此次的作业学会了用 Jekyll 来部署自己的静态博客,觉得拥有自己的博客是一件很有意思和有趣的事情!

文档信息

Search

    Table of Contents