零基础搭建免费Hexo个人博客并部署到Github(上)

原创 showmyself|民工 随笔 写给自己 1356阅读 2017-05-22 01:32:04 举报

前言

博客系统有很多,每一个的搭建方式也各有特色,也看了不少的教程和方法,但是总觉得或多或少都有些坑,因为每个人出的问题不一样,所以侧重点也不尽相同,也可能我写的也有很多坑,但是我根据我的实际情况记录下我的过程和我可能容易忽略的地方,针对的对象是0基础的小小白,不求一语道破天机,只愿过程无缝跟进,所以我话语说的比较啰嗦点,尽量多上图,有不足之处请各位看官多多提出宝贵意见为谢!好了,其他不多说,进入正题:
国际惯例,简单说下Hexo:

简介:

什么是 Hexo?

官方给的解释是:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo的好处?

在官方的文档中并没有说自己的博客系统多么多么牛XX,而是直接进入正题

Hexo官方文档

英文原版文档:
https://hexo.io/docs/index.html

中文文档:
https://hexo.io/zh-cn/docs/index.html

简单说下整体流程,做到心中有数:

node.js--->git--->Hexo--->部署到github

开始:

说明:因为我自己电脑是windows 10,所以一下所有内容都是在windows下操作。

1.安装环境(node.js环境和git环境)

两个环境,其实就是两个软件,从官方下载安装包,一路 “下一步”安装完成,这里不再过多赘述;
软件版本大同小异,不用太纠结(我现在node版本是V6.10.2),地址:

git官网:https://git-scm.com/
node.js官网:https://nodejs.org/

2.验证软件是否安装成功

键盘快捷键win+r(或者鼠标“开始菜单”点击“运行”),打开“运行”窗口,键入“cmd”

cmd

键盘“回车”(或者点击“确定”),会弹出命令行界面,然后依次分别键入 :
html 代码

注意:git空格之后是两个横杠

如图:

gitnodenpm版本

确认我们软件环境没有问题的话,我们就可以继续下一步了。

3.注册github账号

1.进入github官网(https://github.com/)进行注册账号,用户名,邮箱,密码,然后点击注册:

零基础搭建免费Hexo个人博客并部署到Github(上)

2.直接选择免费的就可以(因为我已经注册过了,为了截图,我就随便编了一个号,打个码,证明我不是故意的
):

零基础搭建免费Hexo个人博客并部署到Github(上)

3.下面其他内容,根据自己的情况,想填填,不想直接点击下面的按钮即可

零基础搭建免费Hexo个人博客并部署到Github(上)

4.你注册的邮箱会有收到一个邮件,然后按照提示,激活下就可以了
(此处图略)

4.Github新建项目

注册成功之后,你就可以新建项目了;

1.在导航条右上角,点击“+”,选择,”New repository”点击,新建一个版本库

零基础搭建免费Hexo个人博客并部署到Github(上)

2.在Repository name下面填写下yourname.github.io(yourname与你的注册用户名一致,这样yourname.github.io这个就是你博客的域名了),然后点击下面的绿色按钮,创建这个仓库

新建git仓库

3.你会看到下图这个界面,这里有你的github地址的Quick setup,你可以点击右边的按钮复制这个链接到剪切板

git仓库链接

到此,你github上的设置基本就结束了。

5.简历本地项目目录,修改镜像源

以上都搞定只有,回到你本地环境;
1.在电脑上人任意找个合适的位置新建一个文件夹(名字不要为中文就好,比如我在F盘新建文件夹,取名叫Git),用来存放你的博客系统:

git文件夹

2.然后进入这个文件夹,任意位置右键单击,选择 “Git bash here”,之后会弹出一个命令行的弹框

右键gitbash

3.之后就是我们用集成的npm安装Hexo了,但是npm在国内不是很文档,经常被“qiang”,保险起见,我把npm镜像修改为国内淘宝镜像(cnpm)
[quote]说明:npm和cnpm:npm原版的叫npm,用淘宝的镜像的话,换了一个马甲,叫cnpm,使用方法就是把之前的npm替换为cnpm而已,如果你用vpn后者其他条件,请忽略这一步;
cnpm官网:http://npm.taobao.org/[/quote]

具体命令:
html 代码

修改为淘宝cnpm

以后所有npm的命令,我们这里都可以用cnpm代替。

6.安装Hexo系统

1.我们就可以使用cnpm来安装Hexo了,命令:
html 代码

安装hexo

2.继续输入命令:
html 代码

保存hexo

到此为止我们就把Hexo安装完毕了;

卸载的话,在下篇最后有说明

3.为了确保我们安装成功,我们验证下(原理很简单,我们能看到 Hexo的版本号就说明安装成功了):
html 代码

检测hexo版本

好了,到此为止,我们安装Hexo的任务就算完成。

7.本地测试Hexo系统

Hexo的使用,是先在我们本地运行,运行没有问题d,然后再同步到我们的其他托管平台(比如github)
接下来我们来对Hexo具体操作:

1.因为是第一次使用,所以首先我们先初始化hexo,命令是:
html 代码

如果第一次初始化失败,可以多尝试几次,因为我已经安装过,所以截图我的可能和大家的有些许出入,但是最后的结果是一样的,初始化可能稍微慢几秒,请耐心等待下下。

hexo初始化

2.接下来,安装生成器,命令行:
html 代码

hexo生成器

到此为止,我们本地一安装hexo已经完毕;

3.我们可以运行hexo系统试下,命令是:
html 代码

运行hexo

4.然后打开我们的浏览器,在地址栏输入http://localhost:4000/,见证奇迹的时刻

第一次本地预览

如果想停止,只需在命令行界面中按住键盘上ctrl+c 即可

8.本地使用Hexo发布文章

Hexo系统能跑通了之后,接下来我们一起操作下hexo,首先,写一篇文章

1.输入创建文章命令,会生成一个md文件(具体生成的文件路径是:/blog/source/_posts/),具体操作命令是:
html 代码

写一篇文章

2.然后我们就可以编辑下我们的博客文章内容了,当然你如果会vim或者vi的话,可以直接进入编辑,我这里用比较直观的sublime软件进行编辑(当然用其他编辑器也可以,不要用记事本)

编辑第一篇文章

3.编辑完之后,我们需要生成我们的文章,回到我们的命令行,ctrl+c结束我hexo运行(不结束我们无法进行继续在当前命令行操作),当然我们也可以在Git的根目录下重新右键 Git bash here 开一个命令行,
在命令行,键入:
html 代码

由于系统限制最多20张图,无法继续上传图片,所以我重新开一个贴,继续

//notes/14464/5c9705f6721e0a1357fdf990eee64cbd.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复