折腾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 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

让“懒惰” Linux 运维工程师事半功倍的 10 个关键技巧!

好的Linux运维工程师区分在效率上。如果一位高效的Linux运维工程师能在 10 分钟内完成一件他人需要 2 个小时才能完成的任务,那么他应该受到奖励(得到更...

3866
来自专栏恰同学骚年

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

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

1072
来自专栏CSDN技术头条

Java 程序如何正确地打日志

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

1183
来自专栏JAVA高级架构

微服务架构组件分析

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

1214
来自专栏FreeBuf

反取证技术:内核模式下的进程隐蔽

介绍 本文是介绍恶意软件的持久性及传播性技术这一系列的第一次迭代,这些技术中大部分是研究人员几年前发现并披露的,在此介绍的目的是建立这些技术和取证方面的知识框架...

3238
来自专栏IT大咖说

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

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

4566
来自专栏SDNLAB

ONOS 实战分享(一):项目建立、调试到热部署

以上是ONOS的架构图,相信大家已经熟记于心了 本文将在Distributed Core Tier,以开发一个控制器内的模块为例,带领大家从项目的建立,导入I...

4387
来自专栏数据和云

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

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

7386
来自专栏Java后端技术栈

记一次解决业务系统生产环境宕机问题!

Zabbix告警生产环境应用shutdown,通过堡垒机登入生产环境,查看应用容器进程,并发现没有该业务应用的相应进程,第一感觉进程在某些条件下被系统杀死了,然...

821
来自专栏郭霖

Android Studio新功能解析,你真的了解Instant Run吗?

本篇文章首发于我的微信公众号,由于网上讲解Android Studio中Instant Run功能的文章实在是太少了,为了让更多人可以了解这个技术,我将这篇文...

2078

扫码关注云+社区