手把手教你搭建个人博客（第一期）

前言

首先必须感谢 三水大大 对本人搭建博客的帮助，真的避开了很多坑！

本人的个人博客使用的是Hexo这个静态博客框架，基于Node.js，可以将md文件（Markdown）生成为静态页面。使用这个框架最主要的原因就是：免费！免费！免费！（重要的事情说三遍.jpg）

除此之外，Hexo还支持很多新颖的主题风格，自定义程度还是不错的，但操作的难度很低，基本跟着文档操作即可。（什么？看不懂文档？）下面看我操作！

博客搭建环境

博客主要使用的环境有 Node.js、Git、Webstrom以及GitHub

这里推荐看b站的视频进行博客的初始化搭建：https://www.bilibili.com/video/BV1mU4y1j72n?t=2.5&vd_source=71e92a1364cbcaf80125baa05f89bc60

（up 很热心，手把手带你装GitHub仓库，墙裂推荐）

Node.js

可以在 Node.js 官网 下载一个 稳定版本的node.js，具体安装步骤看这篇：https://www.cnblogs.com/liuqiyun/p/8133904.html

Git

git 是一个很好用的版本控制工具，之后的本地博客内容上传到GitHub仓库上就要用到git。

首先也是在 官网 下载，具体的安装步骤看这篇： https://www.cnblogs.com/xueweisuoyong/p/11914045.html

webstrom

webstrom 和 idea 是一家人，是jetbrain全家桶的一员哈，主要用来写前端（java后端渣渣的个人理解）

也是到 官网 下载哦

GitHub

大名鼎鼎的代码仓库，不需要过多介绍了吧

  • 注册账号

    登陆 GitHub官网 （因为是国外网站可能会不稳定，需要自行了解一下加速GitHub的方法），注册一个账号

    加速GitHub的方法 仅仅作推荐，还有别的方法，请自行了解

  • 搭建新的仓库

    注册账号完成后，开始新建一个仓库，接下来看图说话：

    1. 点击new创建一个新的仓库
image-20220812162119173
  1. 仓库名称必须和你的账号名是一致的，而且后缀名必须是 .github.io，这里借用一下 三水大佬 的截图
image-20220812162318508
  1. 这里说明一下仓库名必须和账号名一致的原因：以后这个仓库名就是你的网站博客的 “访问域名”，所以有一定的规则限制。

搭建Hexo

  • 在电脑上你想创建博客的位置新建一个文件夹，用来存放自己的博客文件

  • 用webstrom打开这个文件夹创建一个空项目

  • 然后在webstrom页面点开终端（explore），能见到一个类似cmd 页面的窗口

  • 输入以下代码检查之前的Git、Node.js 和 npm 是否搭建成功

    1
    2
    3
    node -v
    git -v
    npm -v

  • 搭建 hexo 脚手架

    1
    2
    3
    4
    npm install hexo-cli -g

    #检查是否搭建成功
    hexo -v

如果能出现 hexo-cli 的版本号， 则说明hexo已经安装成功啦

连接GitHub

  1. 在任意文件夹中， 右键点击 Git Bash Here 输入 ssh 检查是否创建过ssh秘钥

  2. 如果没有，生成 ssh 密令

  3. 找到 id_rsa.pub 文件，并打开复制里面所有的代码，大致路径： c盘 –> 用户 –> 管理员名称 –> .ssh文件夹下

  4. 打开github，在头像下面点击 settings，在新出的导航栏，找到 ssh，点击后，在新的页面点击 ssh keys 的新建钥匙，新建钥匙的 title（名称）随意起名，将 id_rsa.pub 文件复制的公钥，粘贴到 key 里面(不用做任何改动，包括空格都不需要改），保存。

image-20220802152610379
  1. 在任意文件夹中， 右键点击 Git Bash Here， 输入后面的代码测试ssh是否绑定成功： ssh -T git@github.com（只要看到最后一段话有successfully就行）

本地博客生成

回到webstrom，继续在终端（explore）中输入命令，进行本地博客生成。依次进行以下操作：

1
2
#初始化博客
hexo init "博客名"
1
2
3
4
#开启本地博客
hexo s 
#或者
hexo server

或者打开webstrom中的 package.json文件，进行可视化操作，点击 server 的启动按钮运行程序

然后在运行窗口点击 http://localhost:4000/，就可以看到博客啦！具体效果如下：

image-20220801234836437

按ctrl+c关闭本地服务器，或者像idea那样点击关闭按钮 □ 也可关闭本地服务器

发布博客到互联网

本地博客运行成功啦，我们下一步应该考虑怎么在互联网上运行我们的博客，答案就是使用刚刚说的 GitHub 域名 去实现啦！

  1. 在webstrom中打开 _config.yml 文件，使用 ctrl + r 搜索 deploy ，完善deploy信息：
1
2
3
4
deploy:
  type: git
  repository: 你的github地址
  branch: main
image-20220812163127741
  1. 继续打开终端（explore），执行以下命令：
1
2
#安装自动部署发布工具
npm install hexo-deployer-git --save
  1. 如果已经连接好GitHub远程仓库，再执行以下命令：
1
2
3
4
5
6
7
#生成静态页面
hexo g

#上传到GitHub
hexo d
#或者
hexo deploy
  1. 之后要是还有笔记或md文件需要上传，重复第三步 hexo g 和 hexo d 即可。