hexo搭建个人博客并部署github

环境准备

首先要使用 hexo 搭建个人博客就要安装 hexo,安装 hexo 需要 “npm 包管理工具”。我们需要将博客部署到 github 上自然也需要安装 git

提示:本文在搭建博客过程中会频繁使用命令行,windows用户使用管理员身份打开终端,mac用户打开终端切换到root用户

安装 npm包管理工具

npm包管理工具是安装 node.js 时附带安装的,所以要安装 npm 只需要安装 node.js 即可。

安装 node.js:
去node.js的官网 https://nodejs.org,就可以看到如下画面
hexo搭建个人博客并部署github_第1张图片
点击第一个下载,安装一路next即可(安装位置看个人),windows 和 mac都是下载第一个。

安装好了之后,在终端中输入

npm -v

查看版本(实际上是为了查看是否安装成功),如果已经终端输出了对应的版本号,那么表示你这一步成功。

这里安装好 npm 之后还需要使用 npm 下载安装 cnpm,因为 npm 是国外的,下载可能会比较慢或者出现一些问题,所以一般使用国内淘宝镜像源的 cnpm,在终端中输入以下命令:

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

输入完命令按下回车自动安装,安装完毕使用

cnpm -v

查看版本验证安装成功

安装 git

git下载:https://git-scm.com/downloads,点击进去就是下载页面
hexo搭建个人博客并部署github_第2张图片
在图中圈中部分选择自己电脑的操作系统,然后找到对应的版本下载安装即可,如果git安装有问题可随意搜一篇git安装教程,都可以解决。

安装hexo

在终端输入命令

cnpm install -g hexo-cli

按下回车自动下载安装 hexo,安装完毕输入命令

hexo -v

查看版本验证安装成功

创建博客

在你想放博客文件的位置新建一个文件夹,在终端中先进入这个文件夹,然后输入以下命令,生成博客

hexo init

windows用户 :
输入 盘符加冒号 就可以进入相应的盘,比如要进入 D盘,在终端输入 D: 然后回车就可以进入 D盘
cd 加文件名,就可以进入某个文件,比如进入 blog文件,命令就是 cd blog,(cd 和 blog 中间有空格)
mac用户:
直接使用 cd 进入对应的位置可文件夹

然后在命令行输入

hexo s

按下回车就可以启动博客,并在本地4000端口看到博客预览,效果如下:
hexo搭建个人博客并部署github_第3张图片
里边还会自动生成一篇 hello world的博客,博客里写着四个基础的指令。

hexo的基础指令

hexo new "My New Post"   //生成一篇博客,博客名字是引号中的My New Post
hexo server    //启动博客 可简写为 hexo s
hexo generate  // 生成博客,可简写为 hexo g
hexo deploy    // 部署博客,可简写为 hexo d

部署github

在github上创建一个仓库,仓库名字一定要是 你的githun用户名.github.io 比如我的github用户名是 BETTERGXC,那么我创建的仓库名字就是 BETTERGXC.github.io,仓库的描述看个人咯

在终端执行命令

cnpm install --save hexo-deployer-git

在blog文件夹中找到 _config.yml 文件,windows用户使用记事本打开,mac用户使用 vim编辑器打开,到文件底部应该是 deployer,然后编辑成如下内容

deployer:
	type: git  //type 一定是git
    repo: 这里写自己仓库的url,在下边的图中说明了怎么找到
    branch: master

在如下的图中就可以看到自己仓库的 url,复制下来写到上边的 repo 后边
hexo搭建个人博客并部署github_第4张图片

开始写博客

首先使用上边介绍的 hexo n命令生成新博客
名字自己随意起,我这里以 test 为例,则命令就是

hexo n "test"

执行完就会在 /blog/source/_post 路径下看到你新生成的markdown文件,如果是windows用户就可以用记事本打开进行文档的编写,mac用户可以使用 vim编辑器进行编写,但是这里不推荐使用这种方式进行编写,可以下载一个 vs code,在vs code中下载markdown相关的插件,就可以达到一个边写边预览的效果就像CSDN一样。

编写完博客之后先执行

hexo clean //清除已经生成的静态文件
hexo g  //生成静态文件

然后执行

hexo s //启动博客,然后在本地4000端口看一下效果

最后执行

hexo d //将博客推到远端(比如github上)

请注意:第一次使用 hexo d 命令会要求输入自己github的用户名和密码,密码输入的时候不可见,不是没有输进去。

更换主题

首先去hexo主题官网挑选你喜欢的主题,然后下载下载到你本地的 blog/themes 目录下,最后配置 _config.yml 文件中的 theme即可,以下我以一个比较棒的主题做一个演示

首先进入themes目录中,执行命令

git clone https://github.com/litten/hexo-theme-yilia.git 

下载完毕就会在你的themes目录中多一个 hexo-theme-yilia

接着会到返回上一层目录,即博客的根目录,windows用户用记事本打开 _config.yml 文件,mac用户用 vim编辑器打开,找到 theme,大约在100行,修改原本的 landscape 为 hexo-theme-yilia,就像这样:
在这里插入图片描述
至此主题就修改成功了。

更换电脑或者原本的电脑出了问题博客怎么办

hexo搭建的博客,在使用 hexo d 部署的时候,推到github上的只是生成的静态网页文件,并不会将博客的源代码上传上去,所以如果更换电脑,或者磁盘出问题后,就可能会导致博客不能再用

所以我的解决办法是在放博客的仓库再新建一个分支 source,并将博客的默认分支更改为 source,这样做之后,hexo d往github上推的时候,是推到 master分支上,然后我们自己再使用 git add / git commit / git push 等操作将博客的源代码传到source上。

具体的操作流程请移步这个超链接细细察看,我也是看的这个大佬的操作,所以就不再复制粘贴了。

你可能感兴趣的:(hexo)