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

尾调潮涌
• 阅读 3318

什么是 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便可以惊喜的发现我们的博客已经部署成功。



点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
Hexo博客主题安装和优化(二)
一、Hexo自定义晚枫博客(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwhitesirblog.top%2F)\
Stella981 Stella981
3年前
Hexo NexT 博客与Github page 关联指南
上篇文章 Hexo博客框架NexT主题搭建指南(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.cnblogs.com%2Fxingyunblog%2Fp%2F8675681.html)我们已经在本地搭建好了Hexo博客框架NexT 主题的博客程序,但是这感觉还是远远不够。
Stella981 Stella981
3年前
Hexo 博客Next 搭建与美化主题
\将页面部署到GitHub或者Coding\
Stella981 Stella981
3年前
Hexo,其实没有你想象的那么难
阅读目录:1.安装hexo所需环境nodejs下载软件解压添加环境变量配置生效2.安装hexo安装初始化生成静态页面安装Git插件配置hexo安装hexo后台
Stella981 Stella981
3年前
Hexo建站过程总结
Hexo是一个基于Node.js快速、简洁且高效的博客框架,可以将Markdown文件快速的生成静态网页,托管在GitHubPages上。由于原来博客的主机费用问题,我没有办法再在那个主机上面再进行博客的更新,实在是太贵了,对于我来说。所以就在GitHub上面开始建站,使用Hexo来搭载我的博客。Hexo和WordPress有很大的不
Stella981 Stella981
3年前
Hexo博客:部署与插件
同步自我的个人博客墨语的后花园(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.mosdev.xyz%2F),请多多指教。在我两年前写的博客的搭建博客的简单步骤的这篇博文中,我简单的介绍的如何搭建一个基于Github的Hexo博客,现在我来介绍一些其他的用法和部
Stella981 Stella981
3年前
Hexo的版本控制与持续集成
想必很多人会把Hexo生成出来的静态网站放到GitHubPages来进行托管。一般发布Hexo博客的流程是,首先在本地搭建Hexo的环境,编写新文章,然后利用hexodeploy来发布到Git。那么对于本地的Hexo的原始文件怎么管理呢?如果换电脑了怎么办?如果没有对原始文件进行备份,突然有一天你的本地环境挂了导致源文件丢失,那不就呵呵了。也许你会想
Wesley13 Wesley13
3年前
PHP 爬虫体验(二)
自从使用hexo在githubpage更新博客之后,我每次在cnblog上发布文章,需要手动再更新hexo。hexo使用markdown格式来写文章,手动更新需要对文章本身内容进行转化,做成md文件再进行上传,后来就想到,本身爬虫就可以对页面中的各种元素进行提取,同时markdown使用的是标记语法,那么使用爬虫分析文章元素,提取主要内容并且根据模板自动生
Stella981 Stella981
3年前
Linux下使用 github+hexo 搭建个人博客07
这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建。OK,话不多说,开始我们的收官之战。不知你想过没有,如果我们的文章少,一眼看完整个目录,那么还好。但是如果日积月累几年下来,我们的文章增加到100以上,那么不管是你博主,还是访问用户,如何去快速找到所需的文章呢。这时我们就需要用到搜索了。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(