使用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自动化部署更新博客

使用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自动化部署更新博客

a啊实打实大苏打

如果你看到这个,说明自动部署成功了

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

title: 手动在github网页上传的文件 自动部署

a啊实打实大苏打

如果你看到这个,说明自动部署成功了


title: 手动在github网页上传的文件 自动部署

a啊实打实大苏打

如果你看到这个,说明自动部署成功了

46d3c9a8638d274fd80937570b35dffc2aaa328e

0%