Ubuntu日记——简单搭建酷炫博客

相信很多人都知道wordpress是什么吧，但hexo可能用得比较少，不过也有不少人的github主页是hexo弄的静态网页。hexo在github上搭建的文章比比皆是我就不介绍在github上部署了。我今天给大家讲讲如何在Ubuntu的服务器上搭载一个酷炫Hexo博客

开发前准备

安装node和npm
如何检查是否已经安装

node -v

npm -v

如果都能显示版本号就是安装好了
如果不是的话则要执行以下命令安装

sudo apt-get nodejs

sudo apt-get npm

然后就到安装hexo了
从安装到启动只需几行代码

npm install hexo-cli -ghexo init npm installhexo server

然后如果没什么问题的话就在浏览器输入http://localhost:4000/就可以看到hexo主页了
那想换一个主题怎么办
hexo官网上的主题总的来说比wordpress好看
最感动的是很多都有中文文档，对于英文不好的人来说简直就是福音啊

然后我选了一个比较好看的主题Random
从github克隆在theme文件夹里，最好能改一个易辨识的名字版本号那些就可以去掉了，等一下配置要用到这个名字

接下来就是项目配置了

在项目的主目录下有个_config.yml的文件，然后用编辑器打开
里面可以配置标题还有一些介绍，自己而已试着玩
然后把theme设为刚刚改的名字
如

theme: random

冒号后一定要空格

如果刚刚到http://localhost:4000/看不到hexo主页的话，十有八九是4000端口被占用了
在_config.yml文件里port改成

server:  port: 5000

如果没有这一项就加上去
现在就变成监听5000端口了

然后再到配置theme

进入 themes/你的主题
编辑器打开这里的_config.yml文件

头像设置

可以在 Hexo 主配置文件，或者主题的配置文件 theme/random/_config.yml ，增加一个 avatar 配置，如下：

avatar: http://7te9fe.com1.z0.glb.clouddn.com/default_avatar.jpg

菜单与导航链接的设置

显示在首页和导航的链接，可以在主题的配置文件（theme/random/_config.yml）中自定义。如果想链接到标签和分类的列表页，还需要自己手动创建对应页面。

链接

在主题的配置文件中，可以设置首页和导航菜单中的链接，配置如下：

menu:  首页: /  文章: /archives  标签: /tags  分类: /categories  关于: /about

在首页中，会自动隐藏指向首页的链接。但是，标签和分类的列表页，需要我们手动创建。

社交网站链接配置

在主页和点击头像弹出的个人信息卡片中，显示有社交网站的链接，需要在主题的配置文件 theme/random/_config.yml 中添加对应的配置，如下：

social:  GitHub: https://github.com/stiekel  Coding.NET: https://coding.net/u/Stiekel  Twitter: https://twitter.com/SidCN  Weibo: http://weibo.com/sidcn  DouBan: http://www.douban.com/people/Stiekel/

在显示的时候，会自动根据社交网站的 url ，来显示对应的图标。除了上述几个，另外还支持 Facebook / Google Plus / Dribbble / LinkedIn / NPMjs / Youtube / 知乎。

第三方服务的配置

本主题支持 Google Analytics / 百度统计 / Disqus / 多说 / 友言 / JiaThis，即可以在主题配置文件中设置，也可以在博客的主配置文件中设置，增加项目如下：

# Google analyticsgoogle_analytics:# Baidu tongjibaidu_analytics:# Duoshuoduoshuo_shortname:# Disqusdisqus_shortname:# Uyanuyan_id:# jiaThisjiaThis_uid: jiathisConfig:  data_track_clickback: true  summary: ""  showClose: true  shortUrl: false  hideMore: false

对应各个服务的 key 或者 code，直接添加在冒号之后即可。

背景图来源的配置

对于轮播的背景图片，有两种来源，一是使用指定的图片，二是使用 unsplash 提供的随机图片。

如果使用 unsplash 的图片，则可以在主题的配置文件 _config.yml 中进行配置，参数的具体意见，请参见 unsplash文档：

unsplashConfig:  # 关于这几个配置项的说明，请参见 https://unsplash.it/  # blur: true # 给图片增加模糊特效  gravity: 'north' # north, east, south, west, center # 图片翻转  # greyscale: true # 使用灰度图片

当然，也可以自己配置背景图片，也是在主题配置文件中进行，如下：

backgroundImages:- http://7te9fe.com1.z0.glb.clouddn.com/bgimg_1.jpg?imageView2/1/w/__width__/h/__height__- http://7te9fe.com1.z0.glb.clouddn.com/bgimg_2.jpg?imageView2/1/w/__width__/h/__height__- http://7te9fe.com1.z0.glb.clouddn.com/bgimg_3.jpg?imageView2/1/w/__width__/h/__height__- http://7te9fe.com1.z0.glb.clouddn.com/bgimg_4.jpg?imageView2/1/w/__width__/h/__height__- http://7te9fe.com1.z0.glb.clouddn.com/bgimg_5.jpg?imageView2/1/w/__width__/h/__height__

URL 中的 __width__ 和 __height__ ，在请求时，会替换为浏览器的宽度和高度值，如果你的图片服务器支持按分辨率裁剪，那就可以用得上。

背景图轮播的配置

背景图轮播，使用的是 vegas ，也是在主题的配置文件中进行自定义：

vegasConfig:  # animation: 'random'  preload­Image: true # 图片预加载配置  transition: # 图片的切换物资    - slideLeft2    - slideRight2    # - zoomIn    # - swirLeft    # - swirRight    # - flash    - flash2  # transition: 'swirlRight' # 可以只配置一个  timer: true # 是否显示时间进度条  delay: 5000 # 每张图片的显示时间  shuffle: true # 按顺序播放，还是随机播放  count: 10 #一共多少张图片

具体参数的意义，请参见 vegas 文档。

Hide 按钮

在每个页面的左下角，都有一个 Hide 按钮，点击这个按钮之后，按钮之外的东西都会被隐藏。如果不想显示这个按钮，可以在主题或者 Hexo 的主配置文件中修改 hideButtonVisibility，设置为 false：

hideButtonVisibility: false

忽略特定服务器的访问统计

当你在调试和写作的时候，可以不将这些访问发送到 Google Analytics 或百度统计，只需要将你的调试服务器地址加入到下面的配置变量即可：

isIgnoreSpecialHostVisitor: trueignoreHostList:  - localhost  - 127.0.0.1

然后就可以开始写文章了

创建文章

hexo new 文章名

会生成一个 /source/_posts/文章名.md 文件，编辑文件
然后可以设一个tag
他最终会帮你根据tag自动分类
然后在下面就可以用markdown进行写作了
如

---title: Ubuntu日记——简单搭建酷炫博客date: 2016-06-23 20:26:28tags: Ubuntu---# 开发前准备安装**node**和**npm**如何检查是否已经安装

创建分类列表页和标签列表页

hexo 默认是没有分类和标签列表页的，本主题已经提供了对这两个页面的支持，但需要手动生成对应的页面。

要生成标签列表页，在博客主目录中执行如下命令：

hexo new page tags

这样，会生成一个 source/tags/index.md 文件，编辑文件，修改文件的 type 项为 tags，如下：

title: 标签date: 2016-01-16 06:17:29type: "tags"comments: false

同样，创建分类列表页：

hexo new page categories

编辑 source/categories/index.md 如下：

title: 分类date: 2015-08-03 14:19:29type: "categories"comments: false

最后如果是有新增加文章或者项目的配置有修改都要用hexo生成静态网页
先停掉运行hexo再执行以下命令

hexo ghexo s

一个酷炫的hexo就这样搭建好啦

欢迎访问我的hexo