前言

手把手搭建个人博客系列教程-一: 主要完成工具和环境的安装和配置
作为计算机专业的学生，一直想要有个专属于自己的个人博客，可以自定义博客样式和内容，但一直由于被各种琐事耽搁，曾经也尝试过CSDN、博客园等专门的博客书写网站，但曾经那个自定义博客的小梦想一直还埋藏在心里，最近趁着空闲，我决定实现我的这个小梦想，并一步步将我在搭建个人博客中所踩过的坑，总结出的经验分享出来，一方面是为了记录我对博客的理解，同时也希望这个浅薄的教程能给与我相似的爱好者一点帮助。
感谢在我个人博客搭建中提供参考和帮助的一些教程、网站

参考文档:

  • 个人博客的搭建不仅仅能产生独属于自己的博客这样一个成果，在搭建的过程中也能了解一个博客网站的架构，实现的思路，同时在自己动手修改配置的过程中对个人的文档阅读等能力也是一种提升
  • 本博客的设计思路是：以Hexo为框架，Butterfly为主题，在此基础上进一步美化，最终形成一个功能多样，外观美观的博客网站

环境配置与工具准备

  • 操作系统：Windows10
  • VSCode编辑器

Node.js安装

Node.js是一种JavaScript的运行环境，给JavaScript运行在服务端提供了平台，是搭建网站的基础环境，下面是安装步骤：

  1. 直接在Node.js官网下载安装文件
  2. 运行安装文件，安装路径可以自定义，默认路径在 C:\Program Files\nodejs\ ，使用时产生的缓冲数据就会在C盘，比较占空间，图省事的C盘战士可以直接一路默认选项点下去就好
  3. 安装完成后在cmd终端或VSCode终端使用下面命令验证是否安装成功或查看node.js和npm版本，npm是Node.js的包管理工具，在安装Node.js时会自动安装： 
    1
    2
    node -v
    npm -v
  4. 为节省C盘空间，更改npm的全局安装模块的存储路径和缓冲文件的存储路径，步骤如下：
    1. 在Node.js的安装目录创建两个文件夹node_global和node_cache
    2. 在VSCode终端或cmd终端中执行下面的命令来配置npm相关路径配置： 
      1
      2
      npm config set prefix "D:\nodejs\node_global"
      npm config set cache "D:\nodejs\node_cache"
    3. 修改环境变量
      • 在系统变量中添加变量NODE_PATH，变量内容为刚创建的node_global的路径+node_modules，例如D:\nodejs\node_global\node_modules
      • 修改用户变量中的PATH变量，将默认的C:\Users\Administrator\AppData\Roaming\npm修改为设置的全局安装路径D:\nodejs\node_global
    4. 测试
      安装常用的express模块来测试配置是否成功，-g参数是全局安装的意思，如果成功会安装在之前设置的node_global路径内 
      1
      npm install express -g
      注：2022年之前安装的nodejs直接运行上述命令会报出npm ERR! request to https://registry.npm.taobao.org/express failed, reason: certificate has expired错误，提示更新证书，执行下面命令来更改镜像源，更改后能正常安装了： 
      1
      npm config set registry https://registry.npmmirror.com

Hexo的安装

在cmd或VSCode终端使用npm来安装

1
npm install hexo-cli -g

安装完成后可以用hexo-cli -v来验证安装成功或查看版本

Git的安装

Git是一个开源的分布式版本控制系统，结合Github等代码托管平台常用作项目的版本控制和管理，对经常写代码的编程者来说Git是个不可或缺的工具
Git的安装也比较简单，网上能找到好多详细的安装教程，这里提供一个Git安装教程仅供参考
安装完成后可在cmd中用git --version测试是否安装成功或查看Git版本
安装并配置好Git后，最好先简单学一点Git工具的使用方法，这里给一个我曾经用过的Git使用教程

创建挂载仓库

使用挂载仓库有两个目的，一个是网站文件管理和代码托管，另一个是使用Github的Github Page服务
有两个推荐的：Github和Gitee，优缺点也很明显，Github国内访问较Gitee慢很多，但是Github比Gitee的生态环境更完善，是全球最大的代码托管平台，网站也更加稳定

由于国内访问GitHub时常会访问异常或者加载速度太慢，我使用gitee作为Github的替代方案，下面以gitee为例：
1. 新建博客的仓库，名字随便起，选择开源选项
2. 用git将博客仓库克隆到本地，例：git clone https://gitee.com/peakofmountains/blog.git，注：要正常使用git工具，需要提前完成git配置(在gitee中仓库界面点击克隆/下载会给出配置的命令)
3. 在下载下来的博客仓库文件夹中创建文件index.html作为博客主页(仓库中必须包含index.html文件才能启动Gitee Pages服务)，index.html中包含最基本的HTML结构即可
4. index.html用git上传后就可以在项目仓库的Settings选项处开启Gitee Page服务，这样挂载博客的网站就配置好了

注意Gitee目前不能挂载了，Gitee Pages服务已被下线 现在是 2024/5/7，还没有恢复

追求网站访问速度的可以等以后Gitee网站的Gitee Pages服务重新上线后改用Gitee的服务，不过重新上线时间我也说不上来

Github上创建博客仓库

在Github上创建一个仓库作为挂载博客和托管博客代码文件的地方，仓库名字应为 用户名+github.io

只有按照 用户名+github.io 的格式，Github才会对此仓库启动Github Page服务

启动Github Page服务后即可使用 用户名.github.io 作为自己博客的域名，此域名是免费的

配置Git连接Github

这里配置Git连接Github是为了之后在本地使用自动部署工具快速完成本地博客部署打基础，到时候在本地修改完博客后，只需要在VSCode或git bash终端使用简单的hexo d命令即可完成博客的上传和部署工作，下面是配置的具体操作：

  1. 打开git bash终端,输入

    1
    ssh-keygen -t rsa -C "example@example.com"

    最后一个参数填写自己的邮箱就好，一路敲回车，最终会提示你.ssh文件保存在C:\Users\你的用户名路径，进去后找到.ssh文件夹，右键->打开方式->记事本 打开里面的id_rsa.pub，复制里面的全部内容(上面命令生成的rsa密钥)
    注意：这个.ssh文件夹默认是隐藏的，如果没找到.ssh文件夹就点击上方的查看，选择显示隐藏项目选项

  2. 在Github账户个人设置的Settings里找到SSH keys，新建一个SSH key，在内容处粘贴步骤2中的密钥，创建

  3. 验证是否成功，在git bash中用

    1
    ssh -T git@github.com

    回车后输入yes回车，出现打招呼提示和账户信息就是成功了。

    注意:如果之前用过ssh连接其他主机，可能会和我一样出现 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!,提示这时候要用ssh连接github.com就需要重新指向

    解决办法：先在.ssh目录中删掉known_hosts中缓存信息，然后在git bash中执行 ssh-keygen -R github.com
    提示更新成功就可以继续用ssh -T git@github.com进行测试了*

  4. 初次使用git需要配置下面设置，不是初次使用git连接GitHub的请忽略此条：

    1
    2
    git config --global user.email "GitHub绑定的邮箱"
    git config --global user.name "GitHub用户名"