个人博客的建立

Github pages + Hexo 进行博客网页建立

Github的注册及基础使用

Github注册非常方便，只需要一个可以使用的邮箱账号即可

1. 进入官网Github
2. 点击sign up，输入自己的用户名（可以有自己的特色）、邮箱、密码，点击注册
3. 完成人机验证，点击Next: select a plan，选择免费版
   • 注意免费版对于个人开发者来说是够用的，只不过仓库存在限制，你的大多数仓库是public，所以建仓库时注意保护隐私
   • 如果你足够有钱或者有建立大仓库的需求，可以购买企业版
4. 跳过问卷调查，打开填写的邮箱，会收到验证邮件，点进去完成验证即可
5. 注册完成后，点击sign in即可登录进入你的Github账号，这样你就拥有全球最大同性恋交友平台的账号了

可以进一步参考个人博客第1篇——注册GitHub - 知乎 (zhihu.com)

使用Github也是一门学问，这里我推荐B站上一个视频全世界最强的网站，但是你根本不会用？ 有几点需要注意的：

1. Github国内访问速度比较慢，有许多加速方法

   1. 最简单的就是打开你的梯子，爬梯子出国（这里我推荐使用小猫咪Clash for windows ），使用这个的好处是，你可以有多种机场的选择（市场竞争对于消费者还是有好处），关注相关的信息可以获取一些免费的机场作为备用
   2. 如果有用Steam打游戏的，可能有Steam++，这家伙也可以给Github加速
   3. 可以修改Hosts文件，但不是很建议

2. 推荐使用Edge, Chrome或者Firefox，这样下载Github桌面应用可以有更好的支持

3. 如何正确同性交友呢

   1. 善用搜索框（这是一个关键词（库名）导向的搜索）
   2. 根据需求选择正确的类别作为白嫖者，我们一般搜索仓库，在同类型的仓库里，star数目高的就是你的同好推荐给你的，例如这个freeCodeCamp就是非常优秀的编程语言学习库
   3. 使用前要仔细阅读作者留下的README说明文档如果我想要安装和使用Git，那么我先把这个说明文档过一遍，以免造成不必要的麻烦
   4. 遇到问题时，进入Issues和Discussions查找，一般来说，即使你对着教程操作也会遇到奇奇怪怪的问题，那么这里一般会聚集一批像你一样的怨种；当然，当你遇到新问题时，也可以把具体问题和解决方案在这里分享陈述问题时要客观详细，尤其注意礼貌，许多国人降低了我们在交友平台的国际形象。这是开源自由的平台，没人要你付费使用，也没人强迫你使用，别把自己当成上帝了。

Git安装及使用

Git是一个小巧精悍的源代码控制系统，世界上许多大型企业和大部分程序员都是Git的重度使用者，就搭建网页这一块，它起到本地-云端快捷部署的作用

• Git的安装

  • 上[Git官网下载页面](Git - Downloading Package (git-scm.com) )
  • 一般选择standalone 64-bit版本
  • 按照这篇知乎文章个人博客第2篇——Git 2.25.0详细安装步骤 - 知乎 (zhihu.com) 进行安装，其实就是一直保持默认即可，安装盘可以不设置在系统盘
  • 在指定位置唤出Git Bash
    • 在资源管理器打开文件夹
    • 右键->Open Git Bash Here
    • win11 用户可能需要点击显示更多选项

• Git的使用在博客建立和部署过程中，我们用不到太多Git的命令，更多的是后面利用Hexo，所以这里简单介绍

  • 一些linux命令
    • 打开git bash，用过linux系统的会有种熟悉的感觉绿字是用户名，紫字是MINGW64，这是给windows设计的GCC，黄字是所在的文件夹
    • 现在介绍几个常用的命令
      • 切换目录至D盘cd d:/
      • 列(list)出D盘的文件ls d:/；ls可以直接展示所在目录的文件；可以使用ls查看该目录是否存在某文件
      • 创建(make)新目录(directory)，名为testmkdir test
      • 使用vim编辑器编辑_config.yml，若不在本目录需要加上完整地址vim e:/blog/_config.yml
        • 进入后是查看模式，不可以编辑
        • 按i键，可以看到末行出现–INSERT–，便进入了编辑模式
        • 编辑完后，按ESC键退出编辑模式，如果想要保存更改，输入:wq；不想保存，输入:q!
        • 注意，linux命令行的复制是‘ctrl+ins’，粘贴是’shift+ins’
  • 将本机的Git绑定自己的Github账号
    • 查看本机用户主目录内有没有公钥和私钥，在git bash中输入ls ~/.ssh，如果有id_rsa id_rsa.pub这两个文件，就不用再生成了
    • 如果没有，那么使用ssh-keygen -t rsa -C "[email protected]"，把youremail换成注册Github的邮箱账号，example改成github
    • 输入cat ~/.ssh/id_rsa.pub，复制全部内容（‘ctrl+ins’）
    • 进入GitHub的设置界面添加新的SSH key，把复制的内容粘贴到key值里面就行了
    • 若要检验是否成功，则键入ssh -T [email protected]
      • 若询问是否继续建立链接，输入yes再回车
      • 随后若出现successfully authenticated，则说明已经绑定成功
  • 工作区、暂存区、版本库和远程仓库的传送
    • 工作区是你自己电脑里面的文件夹（本地仓库），暂存区和版本库是用来初步管理你将要传送至远程仓库的文件的，远程仓库就是你Github里面的repository了
    • 创建版本库
      • 进入将要创建为版本库的目录cd <path/dir name>
      • 进行仓库初始化，把目录变成Git可以管理的版本库git init
      • 当仓库出现.git的目录时，说明版本库建立完成了（通常是隐藏的）
    • 工作区->暂存区
      • 传送/修改单个文件git add <filename>
      • 传送整个工作区git add .
    • 暂存区->版本库
      • 提交添加文件信息git commit -m "Commit message"
      • "Commit message"是用来说明本次修改的一些相关信息的
      • 如果是第一次提交，Git会提示你确认邮箱和用户名，键入git config --global user.name"yourusername"和`git config --global user.email"@.com"
    • 版本库->远程仓库
      • 使用git push命令，git push origin branch-name
      • 一般来说，branch-name是main或者master，当然如果你的仓库有其他分支，也可以
    • 远程仓库->工作区
      • 拉取并合并git pull origin branch-name
      • 拉取至版本库git fetch origin branch-name
      • 由版本库合并至工作区git merge branch-name
    • 将远程仓库克隆至本地文件夹
      • 利用https传输协议git clone https://github.com/geodynamics/aspect.git
      • 利用ssh传输协议git clone [email protected]:geodynamics/aspect.git

进一步可以参考远程仓库 - Git教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
创建版本库 - Git教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
Git 工作区、暂存区和版本库 | 菜鸟教程 (runoob.com)

Node.js的安装和配置

网站建设最通行的语言是JavaScript，而这种语言一般是基于浏览器编译运行的，而我们建站是在自己的服务器上的，这就需要建立一个简单的后端技术栈。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台，简单的说 Node.js 就是运行在服务端的 JavaScript。

• 下载并安装Node.js

  • 直接进入官网下载最新版Node.js — Run JavaScript Everywhere (nodejs.org) 点击会自动下载适配的windows安装包
  • 点开下载的.msi文件一路默认即可（安装路径可以改一下）
  • 操作过后，已经安装好了Node.js和它的包管理工具npm，我们可以打开cmd，运行node -v和npm -v查看安装的版本

• 配置Node.js

  • 更改全局模块安装位置和缓存文件位置
    • 在node.js安装目录下新建两个文件夹 node_global和node_cache
    • 打开cmd，键入命令行npm config set prefix "D:\nodejs\node_global"和npm config set cache "D:\Program Files\nodejs\node_cache"
    • 添加/更改环境变量
      • 在环境变量->系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\nodejs\node_modules”
      • 打开用户变量里面的Path，找到原来的npm的变量项，将其改为D:\nodejs\node_global
  • 配置npm
    • 安装镜像管理工具nrm，在cmd窗口输入npm install nrm -g
    • 查看目前使用的镜像源，一般默认是官方源（官方源很拉胯），键入nrm ls
    • 把官方源切换为淘宝源或cnpm源，nrm use taobao, nrm use cnpm

进一步可以参考
node.js 安装详细步骤教程_nodejs如何装-CSDN博客 【nvm】适合小白的 nvm 安装配置教程（Windows版） - 软柠柠吖 - 博客园 (cnblogs.com)
nrm的使用（安装、配置、查看、切换、增加、删除、测试）_nrm增加源-CSDN博客

npm的使用

npm全称node package manager，是node.js的包管理器，也是前端开发用得最广的包管理器之一。熟悉linux操作系统的应该知道，aptitude和rpm这两个debian系和redhat系的包管理器，极大便利了用户们获取应用的需求。

• 最常用的命令

  • 安装
    • 本地安装将包安装至该项目目录下npm install <package_name>
    • 全局安装加上’-g’表示global，npm install -g <package_name>
  • 移除
    • 从项目中移除npm uninstall <package_name>
    • 移除本地和全局npm uninstall --save <package_name>
  • 更新
    • 更新全部依赖npm update
    • 更新特定包的依赖npm update <package_name>
  • 列出
    • 列出本项目中安装的所有包npm list
    • 列出全局的所有包npm list --global
    • 列出安装的包的版本树npm ls
  • 搜索，在npm中搜索包名npm search <query>
  • 设置配置npm config
    • 更改配置npm config set <key> <value>
    • 查看配置npm config list
    • 获取配置项的值npm config get <key>

• 安装Hexo和webpack

  • 打开cmd，输入npm install -g hexo-cli和npm install -g webpack（最好使用淘宝源安装，这样速度快一些）
  • 安装hexo的git部署插件npm install -g hexo-deployer-git
  • 看看是否安装在了node_global文件夹下，如果没有则需返回查看环境变量是否设置正确

进一步可以参考【全网最全】npm常用命令详解_npm 命令-CSDN博客

Hexo的使用

Hexo是生成资源文件的博客框架，我们需要使用hexo将本地文件变成网页资源文件。

• 初始化

  • 右键点击open git bash here
  • 进入相应位置创建博客文件夹cd d:/, mkdir blog
  • 进入博客文件夹（空）cd blog，初始化hexo init（注意这里挂梯子更稳定）
  • 这时查看文件夹，发现文件夹多了许多文件
  • 初始化完毕后，已经具备了博客的基本框架、

• 生成静态网页文件至public，键入hexo g即hexo generate

• 在本地服务器运行hexo s即hexo server

  • ctrl加左键点击本地服务器域名，可以查看网页
  • 注意，我们在运行本地服务器的同时可以修改本地文件，然后再刷新即可看到更新后的网页

• 部署至Github

  • 我们可以看到blog文件夹下有一个_config.yml文件，这是掌管静态文件生成和部署方式的总纲，我们打开它（推荐使用Visual Studio Code并在拓展插件里安装好yaml支持插件）
  • 在文件末尾我们可以看到deploy项，这一项决定了部署方式和远程仓库
  • 打开Github并登录账号，创建一个新的仓库，命名为"xxx.github.io "，并且复制仓库地址
  • 将_config.yml文件的deploy项改成

    deploy:
      type: git
      repo: https://github.com/"owner"/"repo".github.io
      branch: master

    要注意yaml语言冒号":"后需要一个空格
  • 将更改保存后，可以在git bash运行hexo clean && hexo g，这样按顺序执行了清理public文件夹和生成新的public文件夹两个任务
  • 可以先在本地服务器上运行检查一下，也可以直接部署hexo d即hexo deploy，这时网页静态文件已经部署到了Github Pages
  • 点进Github Pages的网址"https://repo_name.github.io" ，便可以看到自己建立的博客啦