作业概述
本次作业基于Github和Hexo技术，快速部署静态博客网页，博客在运行过程中，不需要后端服务器和数据库支持，仅通过Node.js配合Html、CSS、JS进行配置即可完成博客的部署。部署的难度相对传统C/S框架更简单、速度更快、并且相对稳定、易于扩展和维护。
该博客主要用于分享个人博客、日常分享、代码项目。下面将先展示博客结构，然后再按流程分析部署思路。
博客结构
1.博客封面
包含四个按钮，第一个为博客跳转，第二个为照片分享，第三个为个人Github主页，第四个为博客源码。
2.博客首页
在博客首页主要展示个人博客，个人信息框，以及站点统计。
3.博客页内容
博客页存在导航栏，以及评论区，用户可以在登录Github后进行评论。
详见博客: 如何基于giscus配置评论功能
4.分享页内容
分享页按时间排序，进行日常照片的分享。
部署思路
1. 为什么采用Github+Hexo
Github为我们提供了免费的域名，而Hexo生态又有丰富的主题，方便配置和拓展，因此，使用Github+Hexo的思路进行部署。本文采用了Volantis主题 ,其是中文社区比较流行的主题，可以参考的文档也相对较多。
2. 博客实现工作及使用技术
- 2.1 下载和配置Git: 为了在本地建站、便于push和部署，我们需要Git工具
- 2.2 下载Node.js和Hexo: 为了使用Hexo，我们还需要下载Node.js
- 在上述工具下载完毕后，可以通过一下命令，安装Hexo博客，
1
2
3
4
5
6
7
8
9
10
11# 在空文件夹中创建本地Repositiory
# 安装博客
$ npm install -g hexo-cli
# 当前文件夹下
$ hexo init .
# 博客生成
$ hexo g
# 开启本地服务 https://localhost:4000
$ hexo s
# 本地文件部署到Remote上
$ hexo d - 2.3 安装插件并配置_config.yml: 初始化后，博客还需要进一步配置，包括各种前端组件，还有一些拓展功能的插件，如博客计数器、路径转换器、评论系统…
3. 博客实现的功能
- 3.1 首页轮播图
- 3.2 sidebar组件、文章计数统计功能
- 3.3 按时间对文章进行排序
- 3.4 文章分享QQ、微博
- 3.5 照片分享页面
- 3.6 相关页面跳转
- 3.7 用户登录Github后，可以评论，标记表情🎄🎄🥰🥰
- 3.8 Typora渲染公式（评论区）
- 3.9 字体和光标设置
4.遇到的问题
4.1 本地Git配置SSH: 本地Git工具为了和Remote仓库交互，需要配置SSH，可以用下面的命令和Setting完成配置
1
2
3
4# 配置用户参数
$ git config --global user.name "xxx"
$ git config --global user.email "xxx@xxx.com"
$ ssh-keygen -t rsa -C "xxx@xxx.com"
4.2 文件夹权限问题: 在配置过程中会发现有些命令行会无法执行，可以通过对本地Repo修改权限来解决
- 4.3 版本问题: 在配置过程中会发现有些文件夹对不上，还有评论系统会显示插件不存在的问题，评论系统存在的问题可以参考 如何基于giscus配置评论功能
解决，volantis文件夹的主要功能如下所示，可在/layout/plugins中覆写插件，在source/css/_first/cover_first.styl中覆写css样式。
