DaSE夏令营实践项目总结v1

DaSE夏令营实践项目总结&反思–基于GitHub的个人博客网站

姓名：张家宁    申请专业：大数据技术与工程    类别：专业型硕士

在本次实践项目中，我主要是基于GitHub和Hexo静态网站生成引擎部署了个人博客网站。

一、项目概述

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

你需要选择一个自己感兴趣或擅长的主题来制作一个静态网页博客，比如个人介绍、爱好分享、技术总结等。你需要设计至少四个页面来展示博客内容，不限于首页、关于我、文章列表、文章详情等。

二、项目概览

1.项目环境

hexo: 6.3.0
hexo-cli: 4.3.1
os: win32 10.0.19045
node: 16.17.0
v8: 9.4.146.26-node.22
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.7
openssl: 1.1.1q+quic
cldr: 41.0
icu: 71.1
tz: 2022a
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

2.代码结构

├─node_modules
├─public
├─scaffolds
├─source							# 存放页面、文章
│  ├─about							# 关于页面
│  └─_posts							# 文章
├─themes							# 主题
    └─fluid
└─_config.yml						# 全局配置

三、总结&反思

框架选取及其原因

选取Hexo作为博客网站框架。原因：Hexo是一个快速、简洁且高效的静态网站生成引擎，它的的工作原理非常简单，即通过生成静态网页，将博客内容存储在本地，从而避免了动态网站的维护成本和性能问题。还提供了丰富的插件和主题，以实现自由定制。

主题选取及其原因

选取Fluid作为博客网站主题。
原因：
1.设计简约，遵循简洁至上原则，同时具有轻快的体验，和优雅的颜值；
2.提供大量定制化配置项，使每个用户使用该主题都能具有独特的样式；
3.响应式页面，适配手机、平板等移动端设备。

页面布局

首页

归档

标签

友链

配置修改

Tab页与标题名称

# Site
title: 双子塔下吃火锅
subtitle: '双子塔下吃火锅'
description: '双子塔下吃火锅的个人博客'
keywords:
author: John Doe
language: zh-CN
timezone: ''

Slogan

slogan:
  enable: true
  # 为空则按 hexo config.subtitle 显示
  # If empty, text based on `subtitle` in hexo config
  text: "双子塔下吃火锅的个人博客"

功能实现及其技术选择

1.统计浏览量：选用Leancloud提供的服务。

• 在LeanCloud官网申请账号并创建应用
• 实名认证，验证邮箱
• 找到应用凭证，记录AppID 和 AppKey
• 修改Fluid配置：开启网页访问统计开关，配置leancloud的app_id和app_key，统计来源设置为leancloud

  leancloud:
      app_id: 4VoF1YJ3B4xTHNhCH2XOrh0b-gzGzoHsa
      app_key: nHdqHRZXHLAX71miwv89SCxL
      # REST API 服务器地址，国际版不填
      # Only the Chinese mainland users need to set
      server_url: 
      # 统计页面时获取路径的属性
      # Get the attribute of the page path during statistics
      path: window.location.pathname
      # 开启后不统计本地路径( localhost 与 127.0.0.1 )
      # If true, ignore localhost & 127.0.0.1
      ignore_local: false

2.显示网站访问次数
数据来源设置为leancloud，设置显示格式format

# 展示网站的 PV、UV 统计数
statistics:
    enable: true
    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
    # Options: busuanzi | leancloud
    source: "leancloud"

# Number of visits
    views:
      enable: true
      # 统计数据来源
      # Data Source
      # Options: busuanzi | leancloud
      source: "leancloud"
      format: "{}次"

3.评论功能

• 启用评论插件

  comments:
      enable: true
      # 指定的插件，需要同时设置对应插件的必要参数
      # The specified plugin needs to set the necessary parameters at the same time
      # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
      type: valine

• 配置LeanCloud的appId和appkey

  valine:
    appId: 4VoF1YJ3B4xTHNhCH2XOrh0b-gzGzoHsa
    appKey: nHdqHRZXHLAX71miwv89SCxL
    path: window.location.pathname
    placeholder:
    avatar: 'retro'
    meta: ['nick', 'mail', 'link']
    requiredFields: []
    pageSize: 10
    lang: 'zh-CN'
    highlight: false
    recordIP: false
    serverURLs: ''
    emojiCDN:
    emojiMaps:
    enableQQ: false

• 重新部署
  效果如下：

博客制作过程中遇到的问题及其解决方法

1.在实现过程中出现几次hexo g -d指令执行失败，提示为”ERROR Process failed: _posts/Jaccard距离.md”

• 解决办法：结合”YAMLException: incomplete explicit mapping pair; a key node is missed at…”，发现是md语法错误，修改md文件内容

2.部署方面

• 解决办法：使用部署插件，注意先创建一个GitHub的Personal access tokens

  npm install hexo-deployer-git --save

四、感悟–关于开源

开源软件和框架在软件开发领域中扮演着至关重要的角色。它们使得开发者可以自由地分享和协作，促进了技术的发展和创新。通过使用开源软件和框架，开发者可以减少重复的劳动，提高工作效率，并且能够更好地专注于解决业务问题。

以Github为例，它是一个非常流行的代码托管平台，它不仅提供了一个安全、可靠的存储空间，还允许用户与其他人共享他们的代码，并协作开发项目。其上的开源项目通常由全球各地的开发者共同维护和贡献，这种分布式开发模式能够确保代码的可靠性和可扩展性。同时，开源软件和框架通常具有强大的社区支持，使得我们开发者能够快速地解决问题和获得帮助。

总的来说，开源软件和框架为开发者提供了灵活、高效、可靠的工具和平台，促进了技术的进步和创新，对于软件行业的发展起到了积极的推动作用。