如何使用github/hexo发布博客(新)

前言

这篇文章从hexo的介绍开始到真正通过自己的域名访问自己的博客网站,之后可能会逐渐把中心放到个人资源的积累上,现在网站刚开始搭建,之后可能会引用新的框架所以目前只是发展中,好处在于这篇教程对新手应该是很友好的,最后欢迎访问我的第一个域名lishinho.top,开始我们的网站部署吧!

目录

前言

一,什么是hexo

二,部署之前的准备

三,如何使用github/hexo发布博客


一,什么是hexo

首先介绍什么是hexo以及为什么现在使用这个框架。

Hexo是一款基于Node.js的静态博客框架,它的特点是基于node.js依赖少,部署快,易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上。同时支持mardown,支持pug,EJS等多种插件和工具,社区已经贡献了上百个博客主题可供选择。

                      

当然相比于Halo,hexo可能并不那么功能强大,不过部署一套下来觉得这个框架的确部署网站很快,而且易于学习,很适合于初学者和没那么多技术需求的博客网站开发。

二,部署之前的准备

1. github账号以及git

这里提基础以上的东西,如果你已经频繁使用git并且拥有自己的github,你要在github上创建名为“用户名+github.io”的个人仓库,点击GitHub中的New repository创建新仓库,仓库名应该为:用户名.http://github.io 这个用户名使用你的GitHub帐号名称代替,这是固定写法,比如我的仓库名为lishinho.github.io

2. 安装Node.js

个人很喜欢Node.js,在官网下载之后,会自动包含npm和环境变量的安装,可以通过-v查看版本指令检查npm和node.js是否安装成功

3. 安装hexo

踩了一些坑,后来感觉这种操作其实是安装官网的说明最好,首先需要选择hexo在你电脑上安装的位置,最好新建一个文件夹存放,然后进入你建好的workspace:

$  npm install hexo-cli -g    //安装hexo客户端,用于输入hexo指令

$  hexo init blog    //初始化生成你的blog文件workspace

$  cd blog       //进入你的blog文件夹

$  npm install     //通过npm依赖包管理

$  hexo server   //启动服务预览

hexo默认使用端口4000,所以如果你的shell提示你可以通过localhost:4000预览你的博客,恭喜你,说明很顺利。

接下来你只需要熟练地使用hexo客户端地指令即可:

hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

打开blog,其中_config.yml是站点的配置文件,找到deploy修改其中的repo,可以到我的仓库lishinho.github.io上看实例

deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,就是你git clong后面加的仓库名

保存之后,安装Git部署插件:

npm install hexo-deployer-git –save

之后执行御三套:

hexo clean
hexo g 
hexo d

完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io

如果你安装地时候遇到了一些坑,也不用慌张,整个过程速度很快,即使重新来一遍也不用花费很多时间,下边说说我遇到地一些坑:

1. 执行hexo server后出现了“Usage: hexo <command>”的提示

说明hexo没有正确地部署好导致hexo s指令找不到,你可以先单独安装hexo server

npm install hexo-server --save

如果没用,重新使用npm部署

hexo init 【workspace】
cd 【workspace】
npm install

2. hexo server,启动了服务,在浏览器输入本地地址访问,看到白板和Cannot GET / 几个字

这其实也是npm没有把以来部署好,由于hexo的客户端在更新无法保证下载的不定能正常work,所以建议把workspace清空,重新来一次。

3. hexo deploy 完了还是 404

这个可能和你的域名配置有关,需要检查一下你的配置,不过这里想说的是可以在hexo控制404.pug重定向。

三,如何使用github/hexo发布博客

1. 准备域名

首先你要准备一个域名,现在购买域名很方便,直接在阿里云腾讯云官网去购买就好,只用于自己学习的话。挑选域名应该没有什么讲究,com的可能贵一点,top的会便宜很多。网站有可能让你绑定邮箱,实名认证什么的不过流程比较快。

购买之后,有了自己的域名,打开自己的域名控制台去绑定域名,进入解析,我们需要添加的一般是A记录和CNAME,

A记录

主机记录:一般是指子域名的前缀(如需创建子域名为www.dns-example.com, 主机记录输入 www;如需实现dns-example.com,主机记录输入 @)。

解析线路:选择 默认 (默认为必选项,如未设置会导致部分用户无法访问 )。

记录值:记录值为 IP 地址,填写 IPv4 地址。

TTL:为缓存时间,数值越小,修改记录各地生效时间越快,默认为10分钟。

添加记录对话框

CNAME 记录
使用场景
当需要将域名指向另一个域名,再由另一个域名提供 IP 地址,就需要添加 CNAME 记录,最常用到 CNAME 的场景包括做 CDN、企业邮箱、全局流量管理等。

设置方法
记录类型:选择 CNAME

主机记录:一般是指子域名的前缀(如需创建子域名为www.dns-example.com的解析, 主机记录输入“ www”;如需实现dns-example.com的解析,主机记录输入“@”)

解析线路:默认为必填项,否则会导致部分用户无法解析。

记录值:记录值为 CNAME 指向的域名,只可以填写域名。

域名添加实时生效,修改因为会走DNS缓存所以会过一个TTL时间生效

2. 设置域名

登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名 ,用于绑定github.io

进入本地的blog/source目录下,touch创建一个文件,里面写入你的域名保存好命名为CNAME,也可以看我的仓库的例子

生成部署走一波,访问就可以看到自定义的域名生效,你的博客被挂到了网上。

这个时候我想新写一个博客,比如说就这篇,

执行hexo n “如何使用github/hexo发布博客” ,就会在blog/source/_posts路径下生成一个md文件,用markdown工具编辑好之后,御三套走一波就可以你写的内容啦。

(选择图床的时候踩坑了,知乎推荐的weibo和7牛都有弊端,打算最近先本地,之后有打算自己做服务器)

 

参考(推荐):

1. 知乎引路人:https://zhuanlan.zhihu.com/p/26625249

 


版权声明:本文为wannuoge4766原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。