仅为个人经验总结,应该有更好的搭建方式。建议:最好至少要具备一定的前端知识。

准备工具

在开始配置之前,需要下载以下几个程序:

1、Git

2、node

3、Typora (推荐,用来编辑博客,可用其他编辑器,也可搭建完成后再安装)建议直接到官网下载。

4、一个代码编辑器,推荐VScode,用于修改配置文件时使用。

开始配置

windows10使用控制终端操作,快捷键:win+R,搜索cmd打开

1、安装node后可以通过如下命令检查是否安装成功:

node -v #查看node版本
npm -v #查看npm版本

2、安装淘宝的cnpm

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

检查版本:

cnpm -v

3、安装hexo框架

cnpm install -g hexo-cli

检查版本:

hexo -v

4、在任意位置创建blog文件夹(名字也随意,不一定是blog),用来放本地博客的数据和文件。如我在H盘创建了blog,地址如:H:\blog。

创建完成后,打开Git CMD(Git正确安装的话,应该在开始菜单内)

使用命令进入创建的这个blog文件夹,例如:

C:\Users\cai'cheng>H:

H:\>cd blog\

无误后输入如下代码,进行配置(此步可能花费很长时间,如失败或退出,删除该这个blog文件夹,重来):

hexo init

待出现 “Start blogging with Hexo!”后,即代表成功。此时blog下会出现很多文件(大概八个),这就是以后操作博客的地方。

5、验证是否成功:

hexo s #启动服务

(1)待出现提示”Hexo is running at http://localhost:4000. Press Ctrl+C to stop”后即代表成功,其他提示则错。

(2)打开浏览器地址栏输入localhost:4000,出现hexo的页面则代表你的blog创建成功,但这一步是本地预览,还未托管成功,别人在网上看不到。如下:

20200313180932972.png

注:如第(1)步成功,第(2)步失败,代表4000端口被占用,返回Git CMD先按Ctrl+C退出服务,输入:

hexo s -p 5000 #以5000端口启动服务

再在浏览器输入localhost:5000,就能进入页面。

上传到Github Pages

1、首先安装插件:

npm install hexo-deployer-git –save

2、、在自己的Github主页创建一个新的repository。创建的repository的名字必须为 yourname.github.io注意替换yourname

3、设置Git的SSH。

回到博客根目录的git bash中,输入

git config --global user.name "yourname"
git config --global user.email "youremail"

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

成功生成后一般会在C盘user文件夹里找到.ssh这个文件夹,里面的id_rsa.pub文件就是SSH密钥。

将这个密钥复制下来,在Github的SSH设置里面填入这个密钥,保存后才能部署成功

4、在本地hexo目录下的config_yml里定位到deploy编辑成如下格式,注意冒号有一个空格,必须严格按照格式填写。

1
2
3
4
deploy:
type: git
repository: http://github.com/yourname/yourname.github.io.git
branch: master

5、需要部署时在博客根目录Git bush使用以下三件套命令:

1
2
3
4
5
hexo clean #清除缓存

hexo g #生成静态文件

hexo d #推送到远端仓库

6、本地测试时在博客根目录Git bush使用命令:

hexo s

出现Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.时则可以在浏览器打开http://localhost:4000进行测试。

如果在浏览器不能打开http://localhost:4000,则代表4000端口被占用,需要使用其他端口,以5000为例:

hexo s -p 5000 #以端口5000进行本地测试。

本地测试时可以改动博客的代码或文件,仅需在浏览器刷新就能看到改动,因此更新博客时最好在本地测试无误后再上传。

编写博客并上传

1、如果没安装,可以安装Typora了,这是一个常用的编辑器,具体功能自行探索。

2、安装好后,在blog根目录下打开Git Bush Here,(下文均默认此操作),输入新建文章命令:

hexo n "文章名" #生成一篇文章

此时,会在source文件夹里的_posts文件夹里生成 “第一篇文章.md”的文件,双击它可调用Typora进行编写。

其中,title是文章标题,time是生成时间,tags是标签(没有tags暂时不管),然后是正文。编写完后即保存。

注:当你编辑一个新文件完成后,必须将此文件保存到/blog/source/_posts/路径下,不然不能上传博客。

在Git Bush Here里面输入:

hexo d

即可更新到github。

使用Vercel部署并绑定域名

使用Vercel部署的好处一是快,二是每当push到github时,Vercel会自动同步,省去了手动部署的麻烦,部署完成还会发送邮件通知。

1、前往https://vercel.com/注册,注册时选择绑定github。

2、创建新项目,选择导入github的博客仓库。

3、在域名提供商处将域名解析到Vercel的DNS地址。

4、在setting里选择domain,填入自己的域名,确定。

5、过一会便能通过此域名访问博客。更新时只需要照常hexo d到github即可,Vercel会自动同步部署。

更改主题

由于建立博客后的初始主题很难看,所以应当换个主题。不同的主题配置方式都不太相同,需要自己修改主题配置文件,所以需要自己去动手了解。官方主题网站:https://hexo.io/themes/ , 选择好后跳转到github下载。好看的有butterfly,next等。以Jerry开发的主题butterfly为例:

image-20201129220151788.png

在GitHub下载ZIP文件后(或者本地clone仓库),解压。

将文件夹复制到/blog/themes下,然后回到blog\根目录下,用记事本打开_config.yml文件,在最后找到这三行代码:

1
2
3
4
5
6
7
Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: butterfly

image-20201129220401269.png

将上方theme后的代码改为下载主题的 文件夹的文件名,其他不改,注意空格,如改为Next主题:

1
2
3
4
5
6
7
Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: Next

完成后点击保存。回到Git Bush Here输入:

1
2
3
4
5
6
7
hexo g	#生成

hexo d

hexo clean #清理hexo缓存

hexo g --d #一键部署

转载:Butterfly主题的一些语法使用

详细参见:https://blog.ccknbc.cc/posts/introduction-of-plugin-tags-based-on-butterfly/

分栏

This is Tab 1.

This is Tab 2.

This is Tab 3.

note

simple

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

flat

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

disable

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

simple

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

{% note primary simple %}primary 提示块标签{% endnote %}

{% note success simple %}success 提示块标签{% endnote %}

{% note info simple %}info 提示块标签{% endnote %}

{% note warning simple %}warning 提示块标签{% endnote %}

{% note danger simple %}danger 提示块标签{% endnote %}

modern

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

{% note primary modern %}primary 提示块标签{% endnote %}

{% note success modern %}success 提示块标签{% endnote %}

{% note info modern %}info 提示块标签{% endnote %}

{% note warning modern %}warning 提示块标签{% endnote %}

{% note danger modern %}danger 提示块标签{% endnote %}

flat

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

{% note primary flat %}primary 提示块标签{% endnote %}

{% note success flat %}success 提示块标签{% endnote %}

{% note info flat %}info 提示块标签{% endnote %}

{% note warning flat %}warning 提示块标签{% endnote %}

{% note danger flat %}danger 提示块标签{% endnote %}

disable

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note disabled %}默认 提示块标签{% endnote %}

{% note default disabled %}default 提示块标签{% endnote %}

{% note primary disabled %}primary 提示块标签{% endnote %}

{% note success disabled %}success 提示块标签{% endnote %}

{% note info disabled %}info 提示块标签{% endnote %}

{% note warning disabled %}warning 提示块标签{% endnote %}

{% note danger disabled %}danger 提示块标签{% endnote %}

no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% endnote %}