加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 经验 > 正文

Hexo建站从入门到精通:本地环境配置、初始化、写作与部署

发布时间:2016-08-26 16:48:03 所属栏目:经验 来源:免费资源部落
导读:Hexo是一个基于node.js的静态博客生成系统,它使用markdown语法来写作,同时支持丰富的自定义标签系统。用户在本地安装Hexo系统并进行写作,通过一条命令,Hexo可以自动生成

三、Hexo精通一:Hexo建站初始化、配置、更换主题、写作、预览

3.1 初始化

首先建立一个文件夹:mkdir hexo_blog。执行hexo命令初始化文件夹:hexo init hexo_blog。你可以选择你喜欢的文件夹名称。注意,该步骤最好挂DL。

基本配置

PS:有关部署配置在部署一节中讲解。

用你喜欢的文本编辑器打开站点文件夹下的_config.yml文件,我用的是Sublime Text 3。本节内容以Hexo官方文档中的有关内容为主,想了解更多的话强烈建议阅读官方文档(纯中文!毫无障碍,有疑问可以到文章下方留言)

用一个对代码支持友好的文本编辑器打开文件后,可以看到标准的YAML文件内容,如下图所示,涉及到的语法我在图中有所提示:(点击放大)

Hexo语法内容

再次提醒,嵌套元件请注意缩进!注意空格!(敲黑板!重点!)对一个新站点来说,需要编辑的项目有:

如果你想了解更多自定义配置项(就个人安装体验来说,其实很多选项保持默认即可),请看上面的官方文档链接。

3.2 更换主题

PS:下文以home代指Hexo根目录

Hexo的主题存储在home/themes目录下(我使用unix的文件路径表示法,Git Bash可以兼容这种表示法)。我们只要将喜欢的主题下载到这个目录下,解压为文件夹,然后将_config.yml中的theme:配置项改为对应主题文件夹名称即可。

这里特别提醒,主题自身也有一个_config.yml配置文件,配置主题本身需要的一系列选项。语境中通常称为主题配置文件,请勿与站点配置文件混淆。

另外,强力推荐n4l.pw使用的Hexo主题:Next,功能极其强大,是目前github上star第一的Hexo主题:https://github.com/iissnan/hexo-theme-next。官方文档讲解非常详细,鉴于篇幅,这里只提一个小技巧,在文章中加入<!--more-->标签,主题会自动将标签之前的内容截取作为文章摘要输出在首页。(可见下图效果,点击放大)。

Hexo主题效果

顺便说一句,Hexo自带的主题颜值也是很不错的(秒杀WordPress几千倍),不妨用用~

3.3 写作

执行:

可以新建一篇文章。post参数可以省略,_config.yml中的default_layout:设置了默认类型,默认值是post,你可以改成draft来默认存储为草稿(PS:感觉并没有什么卵用,草稿也可以存为post,不生成部署即可)

然后用任意你喜欢的编辑器打开home/source/_post/标题.md文件就可以写作了。(PS:Windows下优雅的markdown编辑器实在是少之又少,OS X下我用的是MWeb,功能非常强大)

下面讲解一下写作中可能碰到的几个问题:

问题1:自定义链接格式太蠢。可能语言不是很严谨,不过给我的第一感觉就是这样。

由于链接最后没有带上.html后缀名,而且生成文件的MIME类型似乎不太对,导致用默认链接格式的话,nginx web server会直接进行文件下载。。。能不能像WordPress那样,为每篇文章自定义一个简短的英文名称作为链接呢?

答案是可以的。我们需要用到Hexo的permalinkFront-matter选项。先编辑模板文件home/scaffolds/post.md,在其Front-matter中加入permalink:即可。如下图所示:

记得在写一篇新文章时设置一下这个值。

问题2:分类和标签默认的主题菜单栏是没有标签和分类两个页面的。而且默认的模板中Front-matter也只有tags选项,没有分类选项。是不是Hexo没有这些功能呢?答案是否定的。

PS:这两个选项的值都是一个清单,注意缩进。编辑模板文件home/scaffolds/post.md,加入categories:然后执行:

创建标签和分类页面,如果你的主题支持,它们不需要填充任何内容,主题会自动生成这两个页面的内容,你只需要将它们加入菜单栏即可。(这并不意味着不用生成这两个页面)

默认主题菜单栏修改方法如下:编辑home/themes/landscape/_config.yml文件,在menu:项下加入显示名称: 路径即可,如下图所示:

问题3:评论功能。这个主要看主题是否支持。例如我使用的next主题,支持多说和disqus两套系统。特别提醒,由于本身是静态化的,所以必须依靠第三方服务提供评论功能。如果想让某篇文章禁用评论功能,next主题需要在Front-matter中加入:

一般来说页面都不需要评论功能,可以编辑home/scaffolds/page.md,在Front-matter中加入

问题4:搜索功能:仍然依靠主题支持。

Hexo搜索功能

3.4  OS X下优雅的写作方式

(对不起Windows读者,毕竟win下实在没有像OS X的MWeb这么优雅的Markdown编辑器,sublime text可以勉强顶上)强烈推荐OS X下的优雅的Markdown编辑器MWeb for OS X。点这里直达MAS下载免费试用版。(试用版功能同样强大,我正在考虑是否入正)

写作时最大的一个问题是如何优雅的插入图片。MWeb提供了高效解决方案。在home/source下新建一个images文件夹,然后打开MWeb,按command+E打开外部模式,然后如图设置:

Hexo配置软件

选择“引入文件夹”。定位到home下,点击source,并单击“选择”按钮(免费版外部模式只能引入一个文件夹。)如下图配置:(点击放大)

Hexo引入文件夹

在写作时,只要把图片文件拖入编辑器中,就能自动复制到iamges下并且在文档中插入markdown图片链接,简直coooooooooool有木有!而且还支持直接从剪贴板插入图片,截图后只需command+V,同样自动复制到images下并帮你加好markdown标记。

另外,OS X 10.11及以上可以使用Split Views功能来实现优雅的分屏。长按窗口左上角的绿色最大化按钮,即可启动,此时该app占据新虚拟桌面的一半,然后点击另一个桌面上的窗口,即可自动将两个app在同一桌面中分屏。你也可以启动mission control后,直接将一个窗口状态的app拖到任何一个space中,也可自动分屏。

我的写作界面如下图所示。

Hexo写作预览

预览

执行:hexo generate 命令,生成静态文件。执行:hexo server 命令,本地开启服务器,然后浏览器访问http://localhost:4000即可看到预览效果了。

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读