利用Github和Hexo快速搭建个人博客

YULIU 2019-06-26

什么是 Hexo?

官方解释说Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。也就是说Hexo是一款能够帮助我们快速构建博客的轻型框架。但是如何使用Hexo呢?

如标题所言,我们是结合GitHub来使用Hexo,因此在创建博客的过程中我们就可以分成两个部分,GitHub准备工作和Hexo搭建工作。

*注:实例运行环境为Windos,教程较为浅显,读者可根据个人实际情况选择性阅读该教程

环境准备

Node.js(前往下载)、Git(前往下载

GitHub 准备工作

1、注册GitHub账号

要想使用GitHub,首先要有一个账号(前往GitHub),具体注册流程比较简单,就不多做赘述;

2、设置SSH

如下图所示,打开GitHub的Settings设置项,找到SSH and GPG keys菜单。点击New SSH key添加SSH key。SSH key具体设置方式可参考如何设置SSH key
利用Github和Hexo快速搭建个人博客
利用Github和Hexo快速搭建个人博客

3、新建项目

github设置成功后我们就可以着手开始创建我们的项目。点击创建新项目new repository跳转到项目创建界面。注意:这里我们的项目名必须以username(账户名).github.io这样的形式命名,勾选初始化选项,然后点击创建项目
*注:如果在后续步骤中博客页面出现404,请检查项目名称格式是否正确且项目分支是否为master
利用Github和Hexo快速搭建个人博客

新建项目完成后我们在项目的Settings页面中的GitHub Pages部分可以看到Your site is published at https://username.github.io/字样,其中https://username.github.io就是我们的博客访问地址,在浏览器地址栏访问该地址,如果页面正常显示出我们的项目名称等字样则表明我们的项目已经成功创建。至此我们的github准备工作就基本完成了。
利用Github和Hexo快速搭建个人博客

安装 Hexo

1、全局安装Hexo

如果读者的电脑中已经按照上述要求已经安装好NodeJs环境,那么我们可以直接利用其自带的npm完成全局安装,打开系统命令提示符,直接执行下列命令

$ npm install -g hexo-cli

2、克隆Hexo项目

完成上述步骤后我们便可以进行下一步,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。如果没有设置 <folder> ,Hexo 默认在目前的文件夹建立网站。

$ hexo init <folder>

执行下列命令,进入项目目录并安装依赖

$ cd <folder>
$ npm install

完成上述步骤后执行$ hexo server命令启动服务器,浏览器访问地址http://localhost:4000/,如果可以看到浏览器显示出下图界面表明Hexo已经成功安装
利用Github和Hexo快速搭建个人博客

3、修改配置项

完成上述步骤后我们便已经完成了Hexo的安装和本地项目构建。接下来我们只需项目目录下的_config.yml做简单的配置修改便将完成我们的博客搭建工作。

打开我们刚刚通过github创建的新项目,拷贝项目地址
利用Github和Hexo快速搭建个人博客

然后再打开本地Hexo项目目录下的_config.yml文件,定位到deploy,将repository设置为github项目地址,修改配置为如下形式
利用Github和Hexo快速搭建个人博客

4、上传GitHub

执行下列命令,保存项目设置并同步上传到GitHub

$ hexo generate
$ hexo deploy

如果出现错误利用Github和Hexo快速搭建个人博客,则只需按照执行下列命令,安装hexo-deployer-git模块。安装完成后按照提示继续进行操作。

npm install hexo-deployer-git hexo --save

完成上述步骤后,如果命令控制台出现利用Github和Hexo快速搭建个人博客表明我们已经成功将代码同步到GitHub上,此时之前新建的GitHub的项目目录结构应该是这样的

利用Github和Hexo快速搭建个人博客

此时,用浏览器打开网址https://username.github.io便可以惊喜的发现我们的博客已经部署成功。

相关推荐

JingLisen / 0评论 2020-01-06