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

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

相关文章

  • Hexo中使用MathJax公式我的Hexo环境安装插件配置文章中需要打开公式公式效果存在问题参考资料

    孙亖
  • git page 绑定域名

    孙亖
  • 读书笔记:《算法图解》第三章 递归

    孙亖
  • hexo+github 搭建个人技术博客

    LinXunFeng
  • Mac下体验Hexo与Github Pages搭建

    很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑。再了解到还存在 JekyII 和 Hexo 这样的内容生成框架后,终...

    大江小浪
  • hexo常用命令

    Hexo 约有二十个命令,但普通用户经常使用的只有下列几个: hexo s hexo s是hexo server的缩写,命令效果一致;启动本地服务器,用于预览主...

    xiangzhihong
  • Hexo,添加标题翻译插件

      hexo生成的默认文章链接格式是这样的:https://blog.mariojd.cn/2013/07/14/<Markdown file name>/,这...

    happyJared
  • 教你如何快速打造个人专属博客(轻量、简易、高逼格)

    通常,一个技术点我们会使用,并不难,但是要做到让别人也能听懂我们讲得,还是需要一定的技巧和经验的。因此很多搞技术的工程师都喜欢写博客,一方面是给自己做笔...

    测试开发技术
  • hexo初始化

    caoayu
  • 使用hexo在GitHub上搭建个人博客

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

    没有故事的陈师傅

扫码关注云+社区

领取腾讯云代金券