关于静态博客构建的总结汇报

本博客是根据《开源软件开发与社区治理》课程所布置的第一次作业的相关要求所构建的。本文是本次作业中所要求的“总结报告”，旨在对本次作业的完成过程进行总结与反思。

本文首先将介绍本博客的内容与组成部分，其次将分别介绍博客主题的选取、博客页面布局、博客技术选择以及制作过程中所遇到的问题。

博客内容与组成部分

本博客用于摘录一些人文社科领域中的新观点、新解释、新现象的探讨，希望能通过摘录和积累来扩展自身的知识面与思想的广度与深度。

本博客由以下四个部分组成：

首页
关于我
文章列表
文章详情，即博客内每一篇文章的详细内容

博客的主题

由于本博客的内容以长篇文章为主，在设计博客的主题时更加希望读者能专注内容本身而非附加功能，故本博客选择hexo-theme-melody
作为基本主题。

博客页面布局

总体而言，博客页面应遵循简洁的原则。以下

在首页，应在显眼位置显示本博客的名字、作者名，以及最近发表的文章。另外，还需要提供一些超链接来引导读者前往不同的页面（如归档页面和自我介绍页面）。在本博客中，首页约60%的内容用来显示博客名；在顶部拥有若干超链接，引导读者前往不同的页面。

在文章列表页面，使用了时间轴来列出文章列表，方便读者按照时间线线索来寻找往期文章。

在关于我页面中，使用简洁的页面来呈现自我介绍。

在文章详情页面中，顶部区域呈现文章的标题和创作时间，接下来直接呈现文章正文。页面左侧还对标题进行了索引，并添加了阅读进度功能，方便读者了解自己的阅读进度。

博客技术选择

本博客为静态博客，使用Hexo进行构建。Hexo 是一款基于 Node.js 的静态网站生成器，拥有丰富的插件生态和主题，可以用于快速创建博客和文档网站，并且通过简单的命令就能将生成的网页上传到 GitHub Pages 上。Hexo具有以下特点：

静态网站生成： Hexo 生成纯静态 HTML 文件，无需服务器端渲染，从而提高性能。
Markdown 支持：支持 Markdown 语法，允许用户轻松撰写内容。
主题系统：提供广泛的主题选择，用户可以自定义网站的外观和布局。
插件生态系统：拥有丰富的插件，可扩展 Hexo 的功能，添加各种特性，如社交分享、搜索功能等。
命令行界面：通过命令行界面管理网站，提供简洁高效的工作流程。

安装并初始化hexo

安装Node.js和npm，随后在工作目录输入命令：

1	npm install hexo-cli -g

随后进行初始化：

1 2	hexo init blog cd blog

此时项目结构如下：

├── _config.yml  
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中

_config.yml: 网站配置信息
package.json：应用程序版本信息
scaffolds：Hexo 会根据 scaffold 来创建文件
source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。

随后启动本地调试：

hexo s

撰写文章

输入以下命令

1	hexo new post new_post

于是在./source/_posts中创建了一个new_post.md文件。编写该.md文件，即可正常撰写文章。

部署至Github Pages

博客使用GitHub Actions自动构建博客内容，并将构建好的内容推送至ECNU-51265903094.github.io仓库以部署Github Pages。

简单来说，先将hexo工作目录中的相关内容推送至一个名为blog的私人仓库，每次blog仓库监听到push事件时，执行预先在blog仓库内设置好的Github Actions的相关内容，从而将推送到blog仓库的hexo工作目录相关内容生成并部署到ECNU-51265903094.github.io仓库。

首先，我们需在package.json中指出我们需要hexo-deploy-git包。随后，我们需要在./_config.yml文件中完成部署的相关配置。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://ECNU-51265903094:<token>@github.com/ECNU-51265903094/ECNU-51265903094.github.io.git
  branch: main

其中我们需要在Github的个人账户中一个申请<token>，这样才能在Github Actions中以不登录的状态将经hexo生成的静态博客代码推送至ECNU-51265903094.github.io仓库。

随后我们需要在./github/workflows文件夹中新建一个main.yml文件，用于构建自动部署脚本。具体的Github Actions配置文件如下所示。

name: Auto Deploy

on:
  push:
    branches:
      - main
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Check branch
      uses: actions/checkout@v2
      with:
        ref: main

    - name: Install Node
      uses: actions/setup-node@v1
      with:
        node-version: "14.x"

    - name: Install Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g

    - name: Cache Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: Generate
      run: |
        hexo clean
        hexo generate

    - name: Deploy
      run: |
        git config --global user.name "ECNU-51265903094"
        git config --global user.email "51265903094@stu.ecnu.edu.cn"
        git clone https://github.com/ECNU-51265903094/ECNU-51265903094.github.io.git .deploy_git
        hexo deploy

这样就能自动构建并部署博客了。