前言

    本篇文章主要会讲如何借用hexo框架来简单搭建一个属于自己的博客(基于Windows系统)，从前期准备到部署到github上一个时间并不长的流程。同时通过这种整理成册的方式来加深自己的印象(不希望还有重新搭建的回忆)，因为时间的问题，首次整理流程可能会有遗漏或者错误的地方，我会收集反馈和时不时检查来处理这些问题，下面就开始博客搭建之旅吧。

安装准备

首先我们要安装两个重要的东西，他们是Git和node

node下载地址：https://nodejs.org/zh-cn/ (下载LTS版本，即长期支持版本，hexo需要node.js来支持)

Git下载地址：https://git-scm.com/

安装就一直点下一步直到安装结束就行了

安装好了这两个东西后可以在桌面鼠标右键选择git bash here打开git控制台

$ node -v
$ npm -v

可以分别执行这两个操作来查看自己的node和npm的版本

查看版本

初次使用git控制台，会让你注册，就是填邮箱和你的名称(自定义就行)

git config --global user.email "你的邮箱"
git config --global user.name "名称"

他会出现这样上面这样的两行代码，你可以右键复制，一个个配置

配置Hexo

安装cnpm

在正式安装hexo框架前，还需要一个步骤，就是给我们的npm下载一个淘宝镜像源。因为我们的hexo是要npm这个包管理器来安装的，但是npm国内的镜像源速度很慢而且可能会漏东西。

$ npm install -g cnpm --registry=http://registry.npm.taobao.org	    #安装淘宝的cnpm 管理器

之后都可以用cnpm来代替npm了

安装Hexo框架

现在来安装我们的hexo框架

$ cnpm install -g hexo-cli  #安装hexo框架

等待一会，下载完毕，同样你也可以通过$ hexo -v 来查看hexo的版本

之后，选择你电脑中的一个位置新建一个文件夹，我的是在D盘下新建了一个blog文件夹，进入这个文件夹

在这个目录下git bash，我们要用hexo来生成我们的博客(==记住有关下面没有明确说的git命令都是在这个文件夹下执行的==)

$ hexo init    #初始化

命令完成之后，你的文件夹下面就会生成很多文件

可以不用和我的一样

到这里，hexo已经安装好了，我们可以来启动我们的博客

$ hexo s   # s就是start，启动我们的博客

我们会得到一个地址http://localhost:4000,这个就是你没部署前可以访问的端口，但是断开就看不到了，不过后期部署后可以在页面渲染后用这个地址来提前预览

我们的博客基本都是要使用markdown语法来写，你可以使用vscode或者typora来写你的md文件，不过相对来说改文件配置我倾向于vscode(体积小，打开快，就是一些语法环境需要在里面装插件和改配置)，写博客文章就用typora就好了。(不过要学习一下markdown的语法，没关系很简单)

在github部署

当然，首先你要去github注册一个用户名，直接百度第一个就是，这一步自行注册

生成ssh公钥

注册好后我们先来配置我们的ssh公钥

在桌面git bash，执行以下的命令(可以直接按三次回车生成密钥)

ssh-keygen -t rsa

生成的文件默认在~/.ssh目录中，看到有id_rsa，id_rsa.pub这些文件即可， Win10中就是 我的电脑/C盘/用户/你自己的用户名/.shh/ 就可以看到了,将id_rsa.pub这个文件在记事本中打开，复制里面的密钥。

进入设置

进入github，点击右上角头像进入setting

进入ssh配置

点击ssh and gpg keys

key

把你刚刚在那个文件里复制的密钥粘贴进这个key里面，直接确认

构建仓库

点击github头像左边的+号，选择New repository创建一个新的仓库

创建新仓库

Repository name里面的格式必须是你的github用户名.github.io，Description中你想填什么都可以，仓库必须是Public的，之后点创建仓库就OK了，这个仓库以后就是你存放博客的仓库，他会管理你的代码。

安装插件

仓库建好后，我们需要下载一个部署插件

$ cnpm install hexo-deployer-git --save

deploy配置

安装好后，在我们的博客根目录下，点击_config.yml来配置

配置文件

可以用记事本或者vscode打开，当然我更推荐vscode，因为可以搜关键字，打开文件后

配置deploy

翻到最下面，按照图中的格式来书写代码，注意冒号后面要有一个空格

关于repo

repo地址

可以选择HTTPS或者SSH，复制框中的内容，粘贴在repo里

关于branch(即分支)

最近github的默认分支换成了main，不过我觉得还是master更好一点，下面来换默认分支

点击仓库内的setting(注意是仓库内的)，点击Branchs，在default branch里点框后面的箭头按钮(switch)，把main换成master，然后update

_config.yml配置好后ctr+s保存一下

运行Hexo

这时候执行下面三个命令

$ hexo clean
$ hexo g
$ hexo d   #也可以把二三步换成 hexo d -g 一步到位，不过刚开始还是慢慢来

如果出现要你配置git按照前面的步骤去走

刷新github仓库，会多很多东西

现在可以按照刚刚的uername.github.io来进行访问啦，没出来可以等一下，因为github更新的可能会有点慢

页面出来后就部署完成了！

未完的话

主题

hexo有很多的主题可以去使用，hexo刚初始化时会默认使用landscape主题

可以去hexo主题官网里去选择下载，里面会有文档配置介绍https://hexo.io/themes/

我用的是butterfly主题，他的文档介绍也是非常详细，功能什么的也很齐全（https://butterfly.js.org/）

部署方案

除了部署在github上之外，其实还可以选择gitee(码云)，这两者各有优劣

github的速度是比不上gitee的，gitee每次更改完博客之后部署得很快，不用等多久

但是gitee每次都要在gitee pages里重新更新一下，而github不用，github pages是自动部署的

两者的步骤都差不太多

PS：我现在采用的方案是vercel+github，因为国内网络的问题，github部署的速度不尽如人意，后面考虑出一期怎么部署在vercel上

vercel部署

图片加载问题

因为要用markdown语法写文章，有时候遇到使用图片的问题

要么使用网络链接，要么本地链接，或者像我现在用的cdn外链，方法什么的都有

这里推荐一个网站：https://picx.xpoet.cn/

也是我一直在用的，里面的教程也很详细，照着一步步来就行，上传好图片到仓库后记得复制一下markdown格式的CDN外链，直接粘贴进文章里就行，方便快捷

目前主要就想到这么多，后面有想到的会再加，第一次写一写教程，关于未完的话里的内容后期看看有没有机会再整几篇