搭建博客教程(包含自动部署)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)

git的下载

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

1
git --version
git的下载

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
git的下载

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

1
npm -v
git的下载

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上,这样网友们就能访问你的博客了。

下面是博客文件夹中各个文件对应的用途。

git的下载

2.3 本地化预览 + 新建博客文章

下面4个命令是 hexo 博客框架常用的命令。

1
2
3
4
hexo cl
hexo g
hexo s
hexo d

hexo cl全称是hexo clean 清除缓存文件 db.json 和已生成的静态文件 public。网站显示异常时可以执行这条命令试试。

hexo g 全称是hexo generate 作用是把你写的markdown文件转换成html网页文件。

hexo s 全称是hexo server` 启动本地服务器,用于预览主题。默认地址: http://localhost:4000/

hexo dhexo deploy 的缩写。 把本地的博客部署(上传)到GitHub上面去

2.3.1 本地化预览博客

由于步骤2.2 建立好了一个本地的博客,因此我们在博客根目录运行cmd,依次运行

hexo cl

git的下载

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


三、使用Github提供的Action自动化部署更新博客