Hello Hexo

  这是第一篇博文,起因是博主准备手动搭建一个静态页面的博客,选择了Hexo

选择

  在博主看来选择永远都可以成为一个话题,每一次选择就会决定你之后的体验和成长的方向,是伴随人一生的权利。所以每一次选择都应该认真的思考面对。
  大家好,这是第一篇博文,比较有纪念意义,整个博客是用Hexo搭建和生成的比较简单强大,选择Hexo也是我进过一整对比后的选择。目前在前端比较流行的选择可能就是JekyllHexo,其他的可以用来搭建博客的还有WordPress、Octopress、Joomla等等,这里不做一一介绍,有兴趣的博友,可以上Google、百度等搜索引擎查阅。
  我选择Hexo的原因主要有两个,一个Jekyll是用Ruby写的,而Hexo是基于Nodejs,也就是说他们的运行环境对我来讲,Hexo会更加熟悉一些,当然有博友说JeKyll的博文渲染生成速度相对来说比较慢,对于大博主来说后期可能就比较吃力,Hexo用JavaScript来跑,速度还是杠杆的。第二个就是文档,对于现目前的博主我来说看英文文档相比中文文档还是有点慢的,看一会儿可能就要查阅一个单词,真是英语不强的宝宝,说多了都是泪。Hexo是一个台湾同胞写的,毕竟要支持国产货嘛。其次再加上一些跟风心理的作用,国内用Hexo的工程师朋友还是大有人在,观看了他们的博客最下面都是by Hexo,博主就心动了。
  后来我发现还有个Hugo,号称是全世界构建最快的框架。主要是喜欢hexo的nexT主题和懒得再折腾了,可能我也心动的换了,不过还没搭建过的小伙伴,倒是可以试试。

开始

  接下来博主说说安装Hexo过程遇到的问题。
  Hexo需要的环境是Nodejs,所有你首先需要下载这个,博主是Windows8.1 64X的系统,之前有安装V4.2.4LTS的版本,Windows上面安装很简单,与桌面应用软件安装一样,万能的下一步、下一步就可以搞定,安装完成你需要用命令行来完成Hexo的下载和安装,以管理员的权利运行DOS命令框,博主用的是Atom编辑器,自己下载了一个快捷打开DOS命令的插件,Atom还是挺炫的,感兴趣的朋友也可以玩玩。我们要用到npm,一个JavaScript的包管理工具,很好用。我就需要用这管理工具来下载Hexo。

1
npm install Hexo-cli -g -d
  • 参数
  • -g 是代表全局目录下
  • -d 是代码详细显示运行状态

  博主有VPN还是有点慢,可能是网络问题,如果没有VPN的朋友可以试试淘宝团队提供的cnpm国内镜像,号称每10分钟会和npm同步一下,就墙内的朋友来说这个选择还是不错的。
  接着只需要安顺序运行下面命令就可以生成一个网站的博客网站。

1
2
3
4
hexo init 文件夹名字
cd 文件夹名字
npm install
hexo server
  • 生成的博客文件地址系统会默认一下,当然你也可以修改这个地址,这里就不一一讲解了,更多的可以查看Hexo中文文档

  运行完最后一行命令成功后,就说明本地博客服务器也运行好了,按照提示你只需要访问http://localhost:4000/ 就能看到他了
  好了,今天就到此结束,时间不早了,最近睡的都挺晚的。下面是Hexo自动生成的第一篇文件,还是保留吧。


Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

提示:若遇到超链接对应的网站打不开是,可能需要你用VPN进行翻墙,才能访问,毕竟你活在天朝的墙下面。

进阶小技巧

草稿

如果你希望强行预览草稿,更改配置文件:

===================

render_drafts: true

===================

或者,如下方式启动server:

======================

$ hexo server –drafts

标签插件

官方文档地址

引言

1
2
3
{% blockquote Hexo https://hexo.io/docs/tag-plugins.html#Block-Quote Block-Quote %}
content 引言
{% endblockquote %}

效果如下:

content 引言

HexoBlock-Quote

代码块

1
2
3
4
5
6
7
8
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

效果如下:

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

引文

1
2
3
{% pullquote [class] %}
content
{% endpullquote %}

效果如下:

content

我理解的可能和直接用> 是一样的效果

关联文章

1
2
{% post_path filename %}
{% post_link filename [optional text] %}

效果如下:

何为三原色

居中

HTML方式: 直接在 Markdown 文件中编写 HTML 来调用
其中class="blockquote-center"是必须的

1
<blockquote class="blockquote-center">blah blah blah</blockquote>

标签 方式,要求版本在0.4.5或以上

1
{% centerquote %}blah blah blah{% endcenterquote %}

效果如下:

blah blah blah

参考

hexo你的博客

0%