首先写一点口水话,如果你面临类似的技术选项可能会有一定的参考作用。
最开始写长期坚持写博客是在ITEye(原JavaEye),后来发现的写作体验不错,但心中一直有个独立博客的梦想,从我的博客中也可以发现蛛丝马迹,折腾过GAE,PHP,现在手上还有三个域名能(天工开物, 模友一家亲, 哎嗨哟,),只是从来没有找到一个适合自己或是自己喜欢的系统,从流派来说我是一个Java流,现在基本没有Java空间,虚拟机又比较贵,GAE墙了,Openshift慢,还有各种政策原因。
这次选择尝试git blog是受到现在很多独立博客的影响,用的人越来越多。对应的系统也比较多,主流的是jekyll、hexo、gitblog等。jekyll使用的是ruby;gitblog使用的是php。ruby现在热度减了很多,热的时候也没学过;php的构架一直不太喜欢感觉是上个世纪的东西,唯一的优势就是虚拟机便宜了;机器里面装的是node.js,所以自然选择了hexo,好了,进入正题,我们先来学习一下hexo。
初识hexo
了解一个东西最权威的还是官方信息,所以看看官网: https://hexo.io/
首页也不含糊,也不吹嘘,看看下面截图就好了:
开始
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
根据首页指示,顺序执行上面的代码。
npm install hexo-cli -g
首先,npm是node的包管理工具,现在都这么玩的,要安装的东西在远程(云啊),通过工具安装,这里安装一个hexo-cli,-g 表示这个工具包是全局使用的。
hexo init blog
上面安装了hexo-cli,也就是hexo的客户端工具,运行此语句会新建一个名为blog的目录,你也可以根据自己的情况修改为其他名称,在新建的目录下会初始化hexo系统,嗯,大概就是这个意思了。
cd blog
此关键语句不解释,需要解释的同学请下面打赏、打赏、打赏(重要的事情说三遍哈)。
npm install
又是现在流行的玩法,刚才init是把hexo的系统下载了,但是依赖的包没有下载,npm install就是干这个的,(貌似hexo init 时已经 npm install了,不过这个命令多运行几次也没关系),不必深究,如果你一定要就研究研究webpack什么的。
好吧,这几个命令就把本地环境搭好了,其实还要安装node.js,gis什么的掠过不说了,也许以后会补充,请关注哦。
本地试运行
hexo server
按照提示浏览器却打不开主页。
任务管理器一看,坑爹,原来是端口被占用了。
指定端口重新运行:
hexo server -p 4001
好吧输入新的地址端口,正常进入主页:
准备服务器
我们发布BS系统当然要有一个服务器,而现在的做法应该是用hexo之类的系统编辑文章,生成静态内容,发布到git仓库,所谓服务器就是github的仓库。
我们注册一个github,然后界面上添加:
填写仓库名称的相关信息,点击Create:
这个过程可以参考http://page.github.com,注意下面的仓库名称格式为yourname.github.io
准备上传工具
本节参考官方文档(https://hexo.io/docs/deployment.html);
如果你用过虚拟机,就知道需要通过Ftp等把系统上传到服务器,hexo除了git还支持好多不同的服务器,这里是通过git上传,因此先安装一个git上传的工具:
npm install hexo-deployer-git --save
在上传之前,先配置上传地址,只需一次即可:
修改_config.yml如下:
deploy:
type: git
repo:
branch: [branch]
message: [message]
上面说过,hexo支持多种服务器,这里我们使用git(github),repo就是github你建的仓库地址,分支一般是master,git提交时会需要编写提交消息,message这里hexo会有缺省的内容,so可以不填。
好了,测试一下:
$ hexo deploy
上传过程中弹出了对话框,输入相应的帐号。
命令行提示deploy done,但貌似有个错误。
这是没有认真看首页,还是用户名问题:
你的仓库名 username.github.io 中的username必须是你github的用户名或组织名。
好了,重新删除新建仓库,修改配置,上传。
再次访问,正常了。
先告一段落
我先把此篇发表出去。地址:https://tedeum.github.io/2017/07/28/%E4%BD%BF%E7%94%A8Hexo%E6%90%AD%E5%BB%BAGitPage/
后续请等待。
发表文章
好了说说怎么新建和发表文章,这个真是反人类的设计,因为我们又要使用命令行了:
参考这里:https://hexo.io/docs/writing.html
hexo new [layout]
hexo new 命令就是新建文章,layout是文章布局,应该就是,可以不填,缺省有三种布局(post、page、draft), title就是文章标题,由于文章将被保存为文件,默认这也是文件名。
知识点:我使用vs code来操作hexo,首先通过打开文件夹菜单打开hexo blog的目录:
然后,可以看见整个工程就在界面中了:
然后选择,查看=》集成终端菜单:
这时打开了命令行窗口:
在这个窗口中,我们可以输入hexo的命令,现在我们先新建一篇文章:
接下来,我们在source/_posts目录下打开 使用Hexo搭建GitPage.md 文件,点击侧边预览,就可以边编辑边预览了。
和传统的博客系统不一样,我们编辑的内容是保存在本地的,需要用部署命令更新一下:
hexo deploy
到Github一看,马丹,没有,需要生成一下静态文件,第一次分明是自动生成的,后面为什么不呢?反人类到底了:
hexo generate
好了,继续部署提交,这是github有了,但是访问网页没有,我的经验是要等一会,具体什么机理没有研究,现在不想写了,暂时到此为止吧。
主题
网上找了一番,发现主题很多,都在这里:https://github.com/hexojs/hexo/wiki/Themes,但是中意的没有几个,选中了两个:
NexT:https://github.com/iissnan/hexo-theme-next
maupassant: https://github.com/tufu9441/maupassant-hexo
整体来说,我更喜欢maupassant的样子,但NexT功能更多一些,说明文档也详细一点,我打算先搞NexT,然后再改Maupassant。
安装主题,就是把主题放到项目的theme目录下,具体安装方法有两种,参考:http://theme-next.iissnan.com/getting-started.html。我选择其中一种:
git clone https://github.com/iissnan/hexo-theme-next themes/next
安装完成后,在配置文件中_config.yml中修改启用主题:
···
theme: next
···
启动,即可看见生效,当然还有主题设置,请参考主题官方文档:http://theme-next.iissnan.com/theme-settings.html,至此,全剧终!