YULIU 2019-06-26
官方解释说Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
。也就是说Hexo是一款能够帮助我们快速构建博客的轻型框架。但是如何使用Hexo呢?
如标题所言,我们是结合GitHub来使用Hexo,因此在创建博客的过程中我们就可以分成两个部分,GitHub准备工作和Hexo搭建工作。
*注:实例运行环境为Windos,教程较为浅显,读者可根据个人实际情况选择性阅读该教程
Node.js(前往下载)、Git(前往下载)
要想使用GitHub,首先要有一个账号(前往GitHub),具体注册流程比较简单,就不多做赘述;
如下图所示,打开GitHub的Settings
设置项,找到SSH and GPG keys
菜单。点击New SSH key
添加SSH key。SSH key具体设置方式可参考如何设置SSH key。
github设置成功后我们就可以着手开始创建我们的项目。点击创建新项目new repository
跳转到项目创建界面。注意:这里我们的项目名必须以username(账户名).github.io这样的形式命名,勾选初始化选项,然后点击创建项目
*注:如果在后续步骤中博客页面出现404,请检查项目名称格式是否正确且项目分支是否为master
新建项目完成后我们在项目的Settings页面中的GitHub Pages部分可以看到
Your site is published at https://username.github.io/
字样,其中https://username.github.io
就是我们的博客访问地址,在浏览器地址栏访问该地址,如果页面正常显示出我们的项目名称等字样则表明我们的项目已经成功创建。至此我们的github准备工作就基本完成了。
如果读者的电脑中已经按照上述要求已经安装好NodeJs环境,那么我们可以直接利用其自带的npm完成全局安装,打开系统命令提示符,直接执行下列命令
$ npm install -g hexo-cli
完成上述步骤后我们便可以进行下一步,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。如果没有设置 <folder> ,Hexo 默认在目前的文件夹建立网站。
$ hexo init <folder>
执行下列命令,进入项目目录并安装依赖
$ cd <folder> $ npm install
完成上述步骤后执行$ hexo server
命令启动服务器,浏览器访问地址http://localhost:4000/
,如果可以看到浏览器显示出下图界面表明Hexo已经成功安装
完成上述步骤后我们便已经完成了Hexo的安装和本地项目构建。接下来我们只需项目目录下的_config.yml
做简单的配置修改便将完成我们的博客搭建工作。
打开我们刚刚通过github创建的新项目,拷贝项目地址然后再打开本地Hexo项目目录下的
_config.yml
文件,定位到deploy
,将repository
设置为github项目地址,修改配置为如下形式
执行下列命令,保存项目设置并同步上传到GitHub
$ hexo generate $ hexo deploy
如果出现错误,则只需按照执行下列命令,安装hexo-deployer-git模块。安装完成后按照提示继续进行操作。
npm install hexo-deployer-git hexo --save
完成上述步骤后,如果命令控制台出现表明我们已经成功将代码同步到GitHub上,此时之前新建的GitHub的项目目录结构应该是这样的
此时,用浏览器打开网址https://username.github.io
便可以惊喜的发现我们的博客已经部署成功。