折腾git pages+hexo+NexT初识hexo开始本地试运行准备服务器准备上传工具先告一段落发表文章主题

首先写一点口水话,如果你面临类似的技术选项可能会有一定的参考作用。

最开始写长期坚持写博客是在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/

首页也不含糊,也不吹嘘,看看下面截图就好了:

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 本地服务启动

按照提示浏览器却打不开主页。

windows 查看占用端口

任务管理器一看,坑爹,原来是端口被占用了。

任务管理器看进程

指定端口重新运行:

hexo server -p 4001

指定端口运行

好吧输入新的地址端口,正常进入主页:

默认首页

准备服务器

我们发布BS系统当然要有一个服务器,而现在的做法应该是用hexo之类的系统编辑文章,生成静态内容,发布到git仓库,所谓服务器就是github的仓库。 我们注册一个github,然后界面上添加:

gihub 添加仓库

填写仓库名称的相关信息,点击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: <repository url>
  branch: [branch]
  message: [message]

上面说过,hexo支持多种服务器,这里我们使用git(github),repo就是github你建的仓库地址,分支一般是master,git提交时会需要编写提交消息,message这里hexo会有缺省的内容,so可以不填。

好了,测试一下:

$ hexo deploy

Paste_Image.png

上传过程中弹出了对话框,输入相应的帐号。

Paste_Image.png

命令行提示deploy done,但貌似有个错误。

Paste_Image.png

这是没有认真看首页,还是用户名问题:

Paste_Image.png

你的仓库名 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] <title>

hexo new 命令就是新建文章,layout是文章布局,应该就是,可以不填,缺省有三种布局(post、page、draft), title就是文章标题,由于文章将被保存为文件,默认这也是文件名。

知识点:我使用vs code来操作hexo,首先通过打开文件夹菜单打开hexo blog的目录:

Paste_Image.png

然后,可以看见整个工程就在界面中了:

Paste_Image.png

然后选择,查看=》集成终端菜单:

Paste_Image.png

这时打开了命令行窗口:

Paste_Image.png

在这个窗口中,我们可以输入hexo的命令,现在我们先新建一篇文章:

Paste_Image.png

接下来,我们在source/_posts目录下打开 使用Hexo搭建GitPage.md 文件,点击侧边预览,就可以边编辑边预览了。

编辑预览窗口

和传统的博客系统不一样,我们编辑的内容是保存在本地的,需要用部署命令更新一下:

hexo deploy

到Github一看,马丹,没有,需要生成一下静态文件,第一次分明是自动生成的,后面为什么不呢?反人类到底了:

hexo generate

好了,继续部署提交,这是github有了,但是访问网页没有,我的经验是要等一会,具体什么机理没有研究,现在不想写了,暂时到此为止吧。

主题

网上找了一番,发现主题很多,都在这里:https://github.com/hexojs/hexo/wiki/Themes,但是中意的没有几个,选中了两个:

整体来说,我更喜欢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,至此,全剧终!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据和云

数据库高可用和分区解决方案-MongoDB 篇

许春植(Luocs) (阿里巴巴高级数据库管理员,7年以上数据库运维管理经验,擅长MySQL、Oracle及MongoDB数据库,目前主要研究并建设Mongo...

9036
来自专栏杨建荣的学习笔记

MySQL 5.6, 5.7并行复制测试(r12笔记第9天)

对于主从延迟,其实一直以来就是一个颇有争议的话题,在MySQL阵营中,如果容忍一定的延迟的场景,通过主从来达到读写分离是个很不错的方案,但是延迟率到底有多...

4438
来自专栏ThoughtWorks

DocBook 让文档版本化

image.png #ThoughtWorkers好声音# 第十六期(图片:网络) 你们都知道ThoughtWorks曾经是扛敏捷的大旗的,你们也都知道敏捷是...

3296
来自专栏Java成神之路

Java程序员常用工具集

我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了。我想列下我能想到的一个Java程序员会用...

1463
来自专栏一名合格java开发的自我修养

kafka0.8--0.11各个版本特性预览介绍

kafka-0.8.2 新特性 producer不再区分同步(sync)和异步方式(async),所有的请求以异步方式发送,这样提升了客户端效率。produc...

822
来自专栏JAVA高级架构

微服务架构组件分析

服务描述:服务调用首先解决的问题就是服务如何对外描述。 常用的服务描述方式包括 RESTful API、XML 配置以及 IDL 文件三种。

1364
来自专栏進无尽的文章

基础篇-服务器工作实现的浅析

对于一个前端开发的人员来说,了解服务器的基础知识,个人觉得是非常必要的,于是就有一个这篇侧重于Java的服务器相关知识的文章,只是简单介绍对于我也是一个拓展。

1462
来自专栏IT大咖说

送给前端的你:可视化快速生成模拟数据服务——Easy Mock

? 内容来源:2017年11月18日,大搜车前端工程师高攀在“2017中国开源年会”进行《Easy Mock 接口数据模拟服务》演讲分享。IT 大咖说(微信i...

4916
来自专栏CSDN技术头条

Java 程序如何正确地打日志

我们 Java 程序员在开发项目时都是依赖 Eclipse/ Idea 等开发工具的 Debug 调试功能来跟踪解决 Bug,在开发环境可以这么做,但项目发布到...

1423
来自专栏恰童鞋骚年

NoSQL初探之人人都爱Redis:(1)Redis简介与简单安装

  随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经显得力不从心,暴露了...

1212

扫码关注云+社区

领取腾讯云代金券