搭建博客教程(包含自动部署)6666666666
使用Hexo和Github搭建个人博客
【目录】
[toc]
一、如何实现的?
二、搭建步骤
2.1 原料准备及配置环境
1.提前注册好Github账号
注册账号这个过程不难,需要注意的事项有
账号的用户名将来会用作网址的构成,因此要注意想清楚。
如果无法访问github或者访问过程中比较卡顿,可以下载这个GitHub加速器:https://steampp.net/
2.安装Git
[Git - Downloads (git-scm.com)] 官网:(https://git-scm.com/downloads)

文件大小约几十Mb,下载完成后,双击安装包开始安装,一路点击 Next
即可。
安装完毕后可以使用以下命令测试是否安装成功
1 | git --version |

3.安装node.js
[Node.js — 在任何地方运行 JavaScript (nodejs.org)] 官网: (https://nodejs.org/zh-cn/)
文件大小约几十Mb,下载完毕后,开始安装,勾选所有组件,并勾选 Add to Path 将其添加到系统环境变量。
安装 Node.js 会包含环境变量以及 npm 的安装,安装后,可以在命令行输入如下命令检测 Node.js 是否安装成功:
第一个命令,这个命令,在 nodejs 安装成功的情况下会显示 nodejs 的版本号。
1 | node -v |

第二个命令:这个命令,在 nodejs 安装成功的情况下会显示 npm 的版本号。
1 | npm -v |

4.安装hexo
我们采用Hexo
来创建我们的博客网站,Hexo
是一个基于NodeJS
的静态博客网站生成器,使用Hexo
不需开发,只要进行一些必要的配置即可生成一个个性化的博客网站,非常方便。Hexo 官网:https://hexo.io/zh-cn/
1 | npm install -g hexo-cli |
2.2 建立博客
下面这个命令会在 “cmd”命令窗口所在的工作目录中, 生成一个名称为 “hexo-blog” 博客文件夹,并自动从下载博客所必须的文件放入其中
1 | hexo init hexo-blog |
假设我使用这个默认名称 “hexo-blog”,那么这个“hexo-blog”文件夹就是我们博客的默认文件夹了。
在博客根文件夹(hexo-blog)中,启动cmd命令行窗口。
运行下面的命令,在hexo文件夹中安装npm。
1 | npm install |
至此,本地的博客已经搭建完毕,等确认本地博客没有问题后,就可以上传到GitHub上,这样网友们就能访问你的博客了。
下面是博客文件夹中各个文件对应的用途。

2.3 本地化预览 + 新建博客文章
下面4个命令是 hexo 博客框架常用的命令。
1 | hexo cl |
hexo cl
全称是hexo clean
清除缓存文件 db.json 和已生成的静态文件 public。网站显示异常时可以执行这条命令试试。
hexo g
全称是hexo generate
作用是把你写的markdown文件转换成html网页文件。
hexo s
全称是hexo server` 启动本地服务器,用于预览主题。默认地址: http://localhost:4000/
hexo d
是 hexo deploy
的缩写。 把本地的博客部署(上传)到GitHub上面去
2.3.1 本地化预览博客
由于步骤2.2 建立好了一个本地的博客,因此我们在博客根目录运行cmd,依次运行
hexo cl

hexo g

hexo s

复制http://localhost:4000
到浏览器,进行预览。

回到cmd窗口,按下 ctrl + c ,可以终止预览。
至此,可以确认本地化的博客已经建立完毕了。
2.3.2 新建博客文章
使用hexo n 我的周报
,注意它们之间有空格。即可新建一个名称为“我的周报.md”的文件,储存在\hexo-blog\source\_posts
。
当然,你也可以手动去\hexo-blog\source\_posts
文件夹中新建md文件,效果也是一样滴。
我们先打开这个文件夹,看到里面只有官方自带的一篇hello-world.md文件。

接下来,我们使用下面的命令,会在这个文件夹中生成一个 搭建博客教程.md 文件
hexo n 搭建博客教程

可以看到确实生成了。

打开看一下

接下来我手动新建一个md文件

安装一个hexo的上传插件deploy-git
npm install hexo-deployer-git --save