github博客教程复现 | 1.0 Fork模仿 & 2.0 利用Hexo搭建

    **复现总结：**无论是1.0 简单fork仓库并修改配置；还是2.0 利用Hexo进行搭建，其原理都是1）**在先前预设网页布局文件基础上，2）简单修改对_config文件**，3）在github仓库里托管网页文件，4）并**利用github pages挂载功能**生成博客。过程都需要用到本地文件夹的Git远程管理。1.0教程简略但是利于快速了解网页整体生成过程；2.0教程在此基础进阶为精装房，并且更仔细地分块儿讲解了**_config文件**构成。以下是教程复现时的一些不完全心得和补充注释。

2.0进阶 利用Hexo搭载博客

    更新：发现小伙伴的cs61A学习博客的第一po就是通过GitHub搭建Hexo博客 | 3rr0r's Blog (github-3rr0r.github.io)， 这一相对美观的界面采用Hexo搭建，因而进行进阶学习。本教程同样强调了**Repository name**一定要用“**你的用户名**.github.io”，看来基础原理依然是**github pages网站挂载。**

** 同样也需要用到Git（好在它强调而没有跳过Git安装**这个步骤，对小白我友善）

    但好消息是可以在Powershell环境中进行代码书写，因为Git的书写环境有些山顶洞人

打开powershell，使用 软件 --version命令检验git装好了没；

git --version

  **  配置SSH Key**：复现后提问补充理论——SSH是什么？

    SSH（Secure Shell，**安全外壳**）是一种网络协议，用于安全远程登录。

** RSA秘钥： **在本科的信息系统课程当中，我层了解到RSA 是一种非对称加密算法，只有拥有私钥的用户才能解密。

    找到ssh文件，此时生成了

id_rsa

和

id_rsa.pub

，分别为私钥文件和公钥文件。复制公钥文件中内容到Github账号，这样就连接到了个人电脑

    ssh -T [email protected] 验证是否配置成功

    以上，SSH Key配置完成。这是为了方便Hexo的

安装博客软件Hexo

①首先，我们要先安装npm，通过npm来安装hexo；

首先我们使用依赖软件npm，默认安装LTS即长期支持版；

打开一个新Powershell以保证环境变量生效，同样，使用npm --version命令检验装好与否；

②使用依赖软件安装Hexo

npm install -g hexo 

这一步的操作可能不太顺利，具体来说是报错：cuid@2.1.8不再安全而被遗弃了，转而使用 @paralleldrive/cuid2 。

    (npm warn deprecated [email protected]: Cuid and other k-sortable and non-cryptographic ids (Ulid, ObjectId, KSUID, all UUIDs) are all insecure. Use @paralleldrive/cuid2 instead.)

教程显示可能原因有三。

这个略糙的旋转指针怪可爱的还

    由于不了解npm这一软件，我搜索了**通用的对策**，即升级npm版本。升级后执行hexo下载，依然报错相同内容。这就要求我们更为仔细地研究报错内容：1）**这里的[email protected] 遗弃是否对hexo安装造成关键影响？**以及，2）Use @paralleldrive/cuid2 instead是软件已经使用了替代包，还是需要我们自行手动安装？这就要求涉及到对npm下载原理更深层次的掌握了。

    js能正常跑起来，但是 wechaty 包依赖有警告 · Issue #2639 · wechaty/wechaty (github.com)

    检索到如上类似案例问题教程，我们得知1）**这里的[email protected] 遗弃并不会对hexo安装造成关键影响；**但是意味着部分包过时而被舍弃了，推荐使用@paralleldrive/cuid2这样的最新包

    在确认npm更新后仍有部分包须手动更新，但不影响我们今儿的主体需求——搭一个进阶Hexo博客后，我们继续主要教程下面的内容。

正题：利用Hexo部署网页

①初始化（挺成功）；

②然后介绍三条命令：

hexo s          
hexo g          
hexo d         

其中，s g d分别是server generate deploy（本地服务器预览、生成静态网页文件、部署博客网页）

• hexo s可以在本地查看初始的Hexo网页模板界面。（勾选防火墙提示）

接着，初始化_config.yml配置文件。用文本框打开_config.yml文件，然后配置网站信息。这篇教程更详尽地分模块讲解_config.yml文件结构内容，另外我还检索到了_config.yml文件其他的补充讲解↓，方便之后对于网页布局细节进行进一步地深入学习。

Hexo系列-配置文件详解 | 个人博客 (hzr0709.github.io)

Site是网站信息；URL是网址；Deployment是部署；

这些都和 1.0 直接Fork仓库并改_config.yml的做法类似。

③生成静态网页

hexo g

此处复现中可能出现报错YAMLException: bad indentation of a mapping entry，报错原因是_config.yml文件 1）冒号和文本间要空一格儿；2）须删去' '等，进行调试；YAMLException: bad indentation of a mapping entry at line 解决-CSDN博客

④部署

npm install hexo-deployer-git --save

此处需要补充安装插件hexo-deployer-git，意为通过git部署

那么成功复现结果如上↑

⑤细节修改调试

到这里，基本上点开链接就能看到修改后的个人blog主页，这时候你相较昨天拥有了一个精装小窝。但是在修改site并重新生成部署的时候出现了一些bug（部署hexo d时报错了，还在查程序调试中）

基本上，细节修改所用的代码为：

hexo clean        # 清理静态文件
hexo g            # 再次生成
hexo d            # 再次部署

博客生成1.0 模仿着Fork获得

事情是这样的，检索cs61A难点讨论的时候看见了其他小伙伴的github笔记，因此也想了解博客搭设环境。检索了小白copy教程，从零基础小白如何搭建自己的 github.io 个人网站 – Pianfan's blog这样的ver1.0新手教程开始入门，从Fork已有的仓库开始模仿最容易。

    但即使是最基础教程，也因为缺乏github经验而颇为波折。教程复现过程中需要补充的一些注释要点包括：

    第一步中，github博客的**搭设原理**是用仓库写网站。在Fork原博主仓库的时候，我图方便改用户名的时候没有和自己的github名一致，这造成了blog404的结果。**检索blog无法打开的原因**，在这个回答下 把博客托管在 github 无法访问 - SegmentFault 思否 我们可以知道**以上初级搭载过程是使用了github pages功能**，从而所有被提交到仓库**main分支**（注意，这里是main）的代码会被当做网站内容挂载起来。那么基于这一原理，如果你填写的博客仓库中昵称与github用户名不一致的话，就会导致404。这里涉及到仓库改名，最简单的做法是在最上方菜单的setting中重命名。

    其次，blog的post要求使用markdown进行写作，这个教程也po了语法链接

    接着，_config.yml 文件就是博客网站的核心配置文件，由于初涉相关知识，我们先跟着应用起来不了解原理。原blog主也说了“如果你不知道改了之后会有什么后果，**不要去动它**。”

• ** 删除仓库文件夹并重建**

    在这一步骤当中，github仓库是不能直接删除文件夹的。因此，我们需要补充学习远程操作教程如何删除GitHub仓库里的文件夹（配图详解）？_怎么删除github里的空文件夹-CSDN博客。这里检索了相关教程，发现需要本地文件夹右键open git bash here，前置补充基本操作为下载git（事后理论补充搜索：git是什么？史上最通俗易懂！ 一文明白Git是干嘛的_git作用通俗-CSDN博客 这篇文章认为git主要被用于版本库控制）。
  
    下载git后，在新文件夹中右键open git bash here，输入教程中命令：
  

git clone 复制来的仓库地址
cd  远程仓库名  //进入地址
git pull origin main //拉取仓库main分支
dir //查看仓库文件
git rm -r --cached _posts
git commit -m '删除了posts'
git rm -r --cached images
git commit -m '删除了images'
git push -u origin main //更新github远程仓库

由于是首次使用git环境而不懂原理，所以吃了一些苦头把上面的代码跑了三遍（得另外复制，git没有dofile会留存代码文档，有点搞心态）。一些debug注释如下：

cd dict 、dir 这一路径访问语法同stata；

生成仓库镜像并返回更新的操作分别是拉取和推，而如果粘贴文件夹删除教程中的major分支的话会报错，找错因后发现我们今天的博客案例当中分支名称是main；

不懂语法乱打rm _posts，会报错，并建议你尝试使用帮助命令（没能找到当时具体的提示语句了）. 使用帮助命令，我们得到remove默认的对象一般不包括文件夹，须加上-r这样option

注意到需要报告命令git commit -m '删除了posts'，否则改动无效（返工了的说）。这一命令将记录在仓库的修改提交记录当中，反馈如下：

最后将版本推到网页端仓库，需要登录从而更新仓库内容。

• git环境中ctrlV无效且粘贴有~200莫名乱码，后期看看怎么改善

通过以上综合教程，我们使用github pages挂载功能复现了一个其他博主做好的基础版本博客版面，那么下一步可以继续学习使用markdown语法的博客书写，并尝试复现更精美的博客页面排版。