一、前言

博主一直以来在学习过程中总是会出现学了就忘,记忆不深等问题。所以为了改善这一问题,就萌生了搭建自己的博客来记录自己的学习过程、笔记与心得的想法。
作为一个小白,在实际的搭建过程中博主参阅了很多的视频或者图文教程,很多教程都很杂且不完整。所以接下来就给大家带来自己搭建的过程记录和其他比较好的教程。

二、大概流程

  • (1)安装配置Git工具
  • (2)安装配置Node.js
  • (3)安装Hexo
  • (4)生成博客
  • (5)将博客部署到Github

三、具体步骤

Step 1:安装配置Git工具

(1)下载安装Git

进入Git官网下载Win10对应的版本,如下图选择对应的版本安装。
示例图片
下载完成之后安装时不用管其他的配置问题,一路按照提示一直next即可。如果不放心的话可以点击这里,这篇博文介绍了安装过程中出现的各种选项的具体含义,可以根据自己的个人实际需要来选择。

安装完成之后在菜单中看见以下三样东西就表示安装成功。
示例图片

(2)创建和配置Github

进行配置Github之前我们要有自己的Github账户,如果没有Github账户,进入Github官网,注册一个新账户,一定要记住自己的用户名、密码和电子邮箱。
示例图片

当我们有了Github账户,登陆Github,进入下图界面后点击右上方的加号,然后点击New repository创建新仓库。
示例图片
当我们跳转到如下创建仓库页面之后,先输入仓库名。注意!!仓库名格式:Github用户名.github.io,(这里博主是已经建立了这个仓库所以显示已经存在,正常的话会有绿色的对勾)。然后接下来的描述随便写什么都行,然后就可以点击创建仓库了。
示例图片
如果可以如下图一样进入仓库代表创建成功,Github配置完成。
示例图片

(3)配置Git

配置Git实际上是连接Git和Github,在菜单栏打开Git Bash,设置user.name和user.email配置信息:
示例图片

在命令行中输入以下代码:

git config --global user.name "你的GitHub用户名" 
git config --global user.email "你的GitHub注册邮箱"

在这之后生成密钥SSH key,在命令行中输入以下代码:

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

例如我输入的信息如下:
示例图片

执行了生成密钥命令会提示存储路径和密码以及确认密码,可以不用管,直接按三次enter,然后就OK了,但不要关闭Git Bash。

最后再将生成的SSH key添加到Github上。首先找到密钥的文件,文件的路径在生成密钥的命令行中,如下:
示例图片
然后打开这个路径,打开下图所指的文件(我是用VScode打开的),复制其中的内容:
示例图片
示例图片
然后进入你的github主页点击右上角头像,点击setting -> SSH and GPG keys,或者点击这里,新建密钥SSH key。
示例图片
然后在Git Bash上执行下面的代码:

ssh -T git@github.com

输入之后,会出现以下提示:

The authenticity of host 'github.com (52.74.223.119)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

输入yes后,如果出现以下提示,代表配置成功!

Hi Sakagami-Tomoyo! You've successfully authenticated, but GitHub does not provide shell access.

Step 2:安装配置Node.js

进入Node.js官网,下载安装包:
示例图片
下载完之后安装时不用管其他选项,一路按照提示点next就行。安装完成之后打开命令提示符(win+R -> 输入cmd -> enter)输入指令node -v、npm -v,查看node和npm版本信息,如果出现对应的版本号则环境变量设置成功。如下图:
示例图片

Step 3:安装Hexo

打开Git Bash,输入如下代码安装淘宝的cnpm管理器(时间可能有点长,也有可能会安装失败,但是不用担心,重新输入代码安装就行)

npm install -g cnpm --registry=http://registry.npm.taobao.org

由于我之前安装过,所以出现的提示可能不一样,但是只要出现类似的提示就代表安装成功。
示例图片
安装成功之后,继续在Git Bash上输入cnpm -v查看cnpm版本,如果出现对应版本信息,也说明安装成功。
示例图片
这些工作完成之后正式安装Hexo,在Git Bash上输入以下代码:

cnpm install -g hexo-cli

之后在输入hexo -v查看Hexo信息,出现以下信息代表安装成功:
示例图片

Step4:生成博客

首先在本地创建blog文件夹,随便哪里都行,这里我放在了D盘:
示例图片
点击进入blog文件夹,进入后右击鼠标点击Git Bash here,输入:

hexo init

生成博客(可能有点慢),生成完毕后,输入:

hexo s

如下图:
示例图片
然后在浏览器打开http://localhost:4000,如果出现如下图所示界面代表博客生成成功!
示例图片

Step5:将博客部署到Github

首先在blog目录下安装git部署插件。在blog目录下的Git Bash中输入:

cnpm install --save hexo-deployer-git

安装完成后,打开自己的Github,进入到刚才新创建的仓库中,然后复制自己的仓库的地址(点击绿色的code按钮就会出现以下这个界面):
示例图片
然后打开blog目录下的配置文件_config.yml(我是用VScode打开的):
示例图片
在配置文件中找到如下代码:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

将它们改成:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/YourGithubName/YourGithubName.github.io.git
  branch: master

示例图片
注意!每一行冒号(英文冒号)后面都有空格,repo后面的地址是刚才复制的仓库地址,粘贴上去就可以(上面是我的仓库地址)

改正之后,保存文件并关闭,然后将改变部署到Github仓库里。在blog目录下的Git Bash中输入:

hexo d

可能在运行过程中会弹出下面的窗口:
示例图片
输入自己的Github用户名后,之后还会弹出一个窗口输入自己的Github密码就可以了。输入后有下图类似的提示就代表部署成功。
示例图片
之后你就可以直接用https://你的Github用户名.github.io/(比如我自己的https://sakagami-tomoyo.github.io/)访问自己的博客了!至此Hexo+Github个人博客的搭建完成!

四、参考

CodeSheep大佬的B站教学视频(可以看看,上面的步骤大部分都是按照视频上来的,只不过是基于MacOS搭建的)


恰逢其会,猝不及防。花开两朵,天各一方。