华师大暑期夏令营实践项目 - 基于 GitHub 的博客网站

本次项目使用 Hexo 静态网站生成器和 Butterfly 主题来搭建网站。

项目的目标是创建一个个人博客网站，以展示和分享作者的文章和内容。

页面展示：

博客主题及其选取原因

Hexo 是一个基于 Node.js 的静态博客框架，它简单易用且高度可定制。而 Butterfly 主题是一个美观、响应式的 Hexo 主题，
最重要的是Butterfly 提供了丰富的自定义选项，包括颜色、字体、布局等，只需要在themes/butterflu/_config.yml中修改对应字段即可，作者还提供了一个帮助文档，使用户能够根据个人喜好定制博客外观。

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

博客页面主要分为：

主界面–设计简洁、现代化的主界面，快速浏览最新的文章和重要的页面

导航栏–在顶部或侧边显示导航栏，方便用户浏览不同的页面和文章分类

侧边栏–包括个人简介、标签云、分类目录等侧边栏元素

文章页–清晰的文章页面布局，包括文章标题、作者、发布日期、正文内容等

个人简介–展示个人信息

博客功能实现及其技术选择

搜索功能

安裝 ‘hexo-generator-searchdb’ 或者 ‘hexo-generator-search’，根据文档做相应匹配

修改’butterflu/_config.yml’主題配置文件

# Local search
local_search:
  enable: false
  # Preload the search data when the page loads.
  preload: false
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  CDN:

访问人数

修改’butterflu/_config.yml’配置文件

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

评论功能

采用valine

Valine 的特点：
-无后端实现
-高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
-开源，自定义程度高
-支持邮件通知
-支持验证码
-支持 Markdown

注册valine

修改’butterflu/_config.yml’主题配置文件

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

  valine:
  appId: xxxxxxxxx
  appKey: xxxxxxxxx
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option: