博客优化二

因为许久没有使用博客，于是重新整理一下博客的维护工作：

搭建流程如下

github + hexo
教程链接：(20 封私信 / 20 条消息) 从零开始搭建个人博客（超详细） - 知乎

1、拥有自己的github账号

2、安装git

3、绑定github并提交文件（利用ssh完成git与github的绑定，实现本地仓库与远程仓库的同步）

4、购买域名（阿里云：zyydgrbk.top）

5、安装node（加载chrome v8引擎的js运行环境，使得开发者可以使用同一种语言编写前端和后端环境）和hexo（基于node开发的静态个人博客网站框架，使用markdown解析文章）
node：

hexo：
github上的仓库名：YangZouy.github.io
D盘建立文件夹Blog

6、解析域名
别名记录：CNAME记录，将一个域名zyydgrbk.top指向另一个域名YangZouy.github.io
A记录：DNS记录，将一个域名zyydgrbk.top直接指向一个IP地址GitHub pages服务器的其中一个IP地址

7、设置主题优化主题
查看链接：博客优化一 | 邹阳の博客

8、图床设置
picGO：购买了阿里云OSS（类似于一个巨大的、在线存储空间），picGO就是上传到该存储空间的通道。所以需要配置阿里云账号创建的accessKey，picGO通过key来获取上传权限。这个accessKey对应每一个单独的用户，在此之前需要先确定自己是否有个用户，需要配置用户权限，然后bucket的读写权限需要设置为公共读，因为主要适用于博客，并且只有设置为公共读之后，picGo上面才可以看到小图。

ps：这里并不是所有的图片都需要放置到阿里云的oss存储上，有些博客自带的图片直接使用也可以，减少存储费用。

9、安全访问问题

github上的dns一直处于check状态中
解决：custom domain先remove一遍然后再填写save即可

之前安置的git calendar组件已经不再使用，需要去除

10、github仓库拉取推送
目前采用的远程地址是SSH格式

PS D:\Blog> git remote -v
origin git@github.com:YangZouy/Hexo.git (fetch)
origin git@github.com:YangZouy/Hexo.git (push)

SSH链接访问出了问题，经查看是github上的ssh失效了，重新将电脑的公钥保存到github上即可

博客项目原理

github+hexo架构搭建

在github上创建源码仓库Hexo，对应本地项目Blog文件夹，其中放置博客源文件、项目依赖、博客主题、各种项目配置等，另外在github上创建用户主网站YangZouy.github.io，主要放置源码仓库通过hexo渲染后的构建产物，该仓库中的内容通过github pages可以显示为上线的网站内容。

两个仓库之间的沟通桥梁可以有两种方式，第一种是个人在本地项目中通过hexo架构将生成的产物推送到用户主网站上，过程分为三步：

1）hexo g：将本地项目中的博客md文件和主题等渲染成为静态文件

2）hexo s：运行本地服务，进行本地预览

3）hexo d：将本地生成的public文件夹下构建的静态文件推送到用户主页网站上（需要在项目的config.yml文件中进行用户主页网站的配置）

第二种方式则是通过github actions工具在云端通过hexo g后再git push到主页网站上即可。

部分工具说明

github pages
github的静态网站托管功能，把指定仓库的某分支/目录中的静态文件当“网站”，对外提供访问。

github actions
github自动化流水线（CI/CD）功能，可以在特定事件发生时（push PR release等）自动跑脚本，适合自动测试、构建、部署等。它可以负责生成（hexo g）并把结果推送到仓库。配置时需要在项目创建.github文件夹，再创建autodeploy.yml配置文件。下面就是项目进行自动部署的文件内容：

# 当有改动推送到master分支时，启动Action
name: 自动部署

on:
  push:
    branches:
      - main #2020年10月后github新建仓库默认分支改为main，注意更改

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支(checkout)
      uses: actions/checkout@v4
      with:
        ref: main #2020年10月后github新建仓库默认分支改为main，注意更改

    - name: 安装 Node
      uses: actions/setup-node@v4
      with:
        node-version: "18.x" #action使用的node版本，建议大版本和本地保持一致。可以在本地用node -v查询版本号。

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

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

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate

    # 这里是在github的actions中进行，生成的public通常在actions的临时工作目录中，需要在初始化时显式指定分支名为main，在源码仓库的settings - secrets and variables - actions - repository recrets中添加GITHUBTOKEN GITHUBEMAIL GITHUBUSERNAME三个值，因此才能访问另外仓库的链接。这里GITHUBTOKE本质是github中用户的personal access token，在github的个人settings - developer settings - personal access token中设置，这里为了更加安全，使用了fine-grained tokens，使用期限设置的是1年。
    - name: 部署
      run: |
        cd ./public
        git init -b main
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git add .
        git commit -m "Deploy $(date +'%F %T')"
        git push --force --quiet "https://x-access-token:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main:main

hexo架构
可以将源码渲染成静态HTML/CSS/JS文件

博客图片管理

采用的方式是博客中使用到的图片保存在博客同名文件夹中，大的图片类似于高清封面等则放置在阿里云图床（将图片文件上传到互联网，并提供图片链接的工具）中，配置picgo，之后找机会看是否有更好地方式进行图片管理。

问题发现：将图片保存在博客同名文件夹（中文名）下时，构建部署后会找不到图片
解决：中文名称会进行编译，切换成英文或者数字的应该可以，但是这里觉得还是不方便，以后图片和文章越来越多，项目会变得越来越臃肿，同时也不采用之前的阿里云+picgo的方式，切换成gitee+picgo的方式。尽管阿里云OSS的存储年费并不高，对经常使用图床的用户来说，按照流量计费的话费用还是不小的，同时github图床在国内的访问速度会受到限制，因此gitee+picgo是不错的选择。