前言

作为计算机专业的学生，有个专属的个人博客是一件非常酷又难度不是很高的一项爱好。

  • 你是否希望将平时的随笔、技术探索、笔记记录下来分享给别人？
  • 你是否厌烦了CSDN、博客园这种博客网站千篇一律的固定样式？
  • 你是否想要自己魔改自己的博客网站，拥有自己运维的私人圈子？
    如果你也和我一样，那么快跟着我的教程一起来搭建自己的博客吧！

感谢在我博客搭建中提供参考和启发的教程

参考文档:

博客搭建-工具与环境配置: 本节完成个人博客搭建中工具和环境的安装和配置

设计思路

框架：- Hexo
主题：- Butterfly
在此基础上进一步美化，最终形成一个功能多样，外观美观的博客网站。

环境配置与工具准备

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

Node.js安装

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

安装步骤：

  1. 直接在Node.js官网下载安装文件

  2. 运行安装文件，安装路径可以自定义，默认路径在 C:\Program Files\nodejs\ ，使用时产生的缓冲数据就会在C盘，比较占空间，建议在其他盘选择安装位置，例如:D:\nodejs\。图省事的C盘战士可以直接一路默认选项点下去就好

  3. 安装完成后在cmd终端或VSCode终端使用下面命令验证是否安装成功或查看node.js和npm版本

    1
    2
    node -v
    npm -v

    npm是Node.js的包管理工具，在安装Node.js时会自动安装：

  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的安装

Hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js 开发。它允许用户使用 Markdown（或其他标记语言）编写文章，然后通过主题和模板生成静态网页。适合个人博客、技术文档、项目介绍等静态内容网站。

安装方式也很简单，在cmd或VSCode终端使用npm来安装：

1
npm install hexo-cli -g

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

Git的安装

Git是一个开源的分布式版本控制系统，结合Github等代码托管平台常用作项目的版本控制和管理，对经常写代码的编程者来说Git是个不可或缺的工具

Git的安装也比较简单，这里提供一个Git安装教程仅供参考

安装完成后可在终端中用命令 git --version 测试是否安装成功或查看Git版本

安装并配置好Git后，最好先简单学一点Git工具的使用方法，可以在本站页面右上角搜索Git教程。

创建挂载仓库

挂载仓库有两个目的:

  • 网站文件管理和代码托管
  • 使用挂在网站的Page服务，例如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上创建博客仓库

Gitee同理。

在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. 验证是否成功，在终端中用命令

    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用户名"

至此，恭喜你已经完成了nodejs环境搭建，hexo框架的安装，git安装配置，仓库挂载，远端仓库绑定！🎉🎉🎉