Hexo 博客搭建

什么是Hexo?

Hexo 博客搭建_第1张图片

 

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

准备工作

GitHub账号

Git Windows版客户端

NodeJS环境

步骤一:创建你在GitHub上的Hexo项目仓库

Hexo 博客搭建_第2张图片

Hexo 博客搭建_第3张图片

Hexo 博客搭建_第4张图片

默认的域名是http://yourusername.github.io/,如果想要一个特别的域名,可以买一个域名,并在setting里面绑定就可以了。以上完成了第一步,我们有自己的代码仓库了,接下来我们要配置本机环境了!

步骤二:本机环境搭建

我们需要下载NodeJS与Git,安装基本上就是默认安装,没有什么技术难点。

Hexo 博客搭建_第5张图片

 

Hexo 博客搭建_第6张图片

 选择Windows64位版本,下载安装。

完成之后,打开命令窗口(Win+R,输入CMD,回车),分别输入node -v,  npm -v, git -version,  如果都能像下图一样返回版本号就说明安装好了。

Hexo 博客搭建_第7张图片

Hexo 博客搭建_第8张图片

 

 步骤三:SSH授权

打开git bash,输入ssh-keygen -t rsa, 接着回车三下

Hexo 博客搭建_第9张图片

这样就会在C盘用户目录下的.ssh下生成id_rsaid_rsa.pub这两个文件,前者是密钥,后者是公钥,用记事本打开id_rsa.pub,复制其中的全部内容,添加到GitHub上,这样本地的id_rsa密钥就可以和GitHub上的id_rsa.pub公钥进行配对,授权成功。

Hexo 博客搭建_第10张图片

复制这一串代码到下面这个地方

Hexo 博客搭建_第11张图片

 测试Git连通性

Hexo 博客搭建_第12张图片

步骤四:设置本地博客服务器(之后直接上GitHub托管后再摒弃这个本地的)的配置

在任意一个地方新建一个文件夹,在git bash中进入这个文件夹,比如cd /f/Hexo/(之后安装的服务器端代码会保存在这个文件夹内),输入npm install -g hexo安装hexo即可。

注意:这里我设置的Hexo文件夹是我是事先创建好的,用来存放Hexo服务器代码的文件夹,需要与后面创建Hexo博客项目的文件夹加以区分。

cd /f/Hexo
npm install -g hexo
npm install hexo --save

注意,在回车之后,可能会出现一行WARN的警告语句,不用管它,什么都不要按,等着。。。过一段时间如果出现hexo版本号之类的语句就代表差不多了。

然后输入npm install hexo --save这个时候你会看到命令行出现了一堆白字,紧接着输入hexo v查看是否安装成功

Hexo 博客搭建_第13张图片

服务器代码文件夹长这个样子的~

Hexo 博客搭建_第14张图片

 步骤五:初始化Hexo工程 名字你随便起

注意:在生成项目前,提前创建工程目录文件夹(我的项目目录Hexo_init)

/hexo/>>>> hexo init Hexo_init
## 等待。。。。
 
   

步骤六:启动Hexo服务器

hexo s

 Hexo 博客搭建_第15张图片

项目成功跑起来了!!!

步骤七:用你自己的域名绑定到xxx.github.io

没有域名的话先去申请一个域名

在仓库里添加CNAME文件并在文件中填写绑定的域名

Hexo 博客搭建_第16张图片

文件里填写的内容:要绑定的域名(不要包含Http://和www)

Hexo 博客搭建_第17张图片

进入设置

Hexo 博客搭建_第18张图片

找到 Custom domain添加域名后保存即可。

(添加CNAME文件并在文件中填写绑定的域名后应该会自动保存,看看有没有自动保存)

Hexo 博客搭建_第19张图片

阿里云添加域名解析

ping你的,得到一个IP;

Hexo 博客搭建_第20张图片

修改你的域名解析记录;

添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,

Hexo 博客搭建_第21张图片

 

注意!!!之后发现了一个bug,每次本地Hexo生成提交后,tingguoguo.cn无法继续正常访问,发现是GitHub的CustomDomain会被清空!

解决方案: 在本地Hexo项目source文件夹下放个CNAME文件(没有后缀名 文件类型:文件 啥后缀都没有)

Hexo 博客搭建_第22张图片

与仓库的CNAME文件完全一致即可!!!

步骤八:上传到GitHub

Hexo 博客搭建_第23张图片

 

cd Hexo_init/
npm install hexo-deployer-git --save
hexo g
# g 是生成的意思 hexo d
# d 是提交的意思

Hexo 博客搭建_第24张图片

Hexo 博客搭建_第25张图片

之后你就会发现你的GitHub仓库里面就有了这个项目!!!

转载于:https://www.cnblogs.com/tingguoguoyo/p/11178964.html

你可能感兴趣的:(Hexo 博客搭建)