博客的开始————如何搭建Hexo

网站建设 · 2017-01-19

导语:

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

一、概述

首先,不论这篇文章主要是为了安装什么,第一步该做的是先说明一遍大致的过程,以使读者能够清楚,自己究竟在干什么、还有什么没有完成、为什么要这么做。当然,我会给出一些必要的网站,它们以官网为主,庆幸的是,这些官网都有简体中文的支持。最后,说明一下作者的系统为Mint Linux,它和Ubuntu是一样的,并且作者是一个大二菜鸟,如果有错的话,希望大家能够指出错误,我也会立即改正。

具体过程

  1. 准备安装环境

    • Node.js
    • Git
  2. 安装Hexo
  3. 开始搭建博客

    • 初始化Hexo
    • 修改全局配置文件
    • 一次简单的同步
  4. 添加新文章
  5. 更换主题

给出网址

二、准备安装环境

安装Node.js

很不幸运的是官方给出的 Node.js 安装方法并不是非常有效。因此我通过Baidu找到了一种简单的方法,在此给出过程。

  1. 下载

第一步很简单,就是从官网上下载二进制包。给出地址。

    1. 解压下载好的 node-v6.9.2-linux-x64.tar.xz 压缩包

      $ tar xvf node-v6.9.2-linux-x64.tar.xz 

    这样,你可以得到一个名为 node-v6.9.2-linux-x64 的文件夹。

    1. 验证 Node.js 的版本

    首先进入 node-v6.9.2-linux-x64 文件夹下的 bin 目录,你会发现有两个可执行文件。如下:

    $ cd node-v6.9.2-linux-x64/bin
    $ ls
    node  npm

    接着我们来看看 Node.js 的版本

    $ ./node -v
    v6.9.2

    很好,它是最新的6.9.2版本。

    1. 把二进制包放到较为规范的地方。

    什么叫较为规范的地方?举个例子,在Windows下,排除自己定义安装路径的软件,你所有的软件都会在这样一个地址下 C:\Program Files 。在Mint Linux上,我把它规定为 /opt ,这个路径包含了所有我手动安装的软件,毕竟虽然有 apt ,但是总有些软件不能通过apt安装。很好,下面让我们把它挪到那个规范的地方。

    $ sudo mv node-v6.9.2-linux-x64 /opt/
    $ cd /opt
    $ ls
    clion  eclipse  google  node-v6.9.2-linux-x64  pycharm  sublime_text

    由此你可以发现,我已经成功移动了文件。这里有个小问题,在执行第一句命令的时候,会提示需要密码,不要担心,直接输入root密码就行,它不是明文的,并不会显示字符。

    1. 建立软链接,设置全局

    怎么在shell中直接访问呢?就是通过软链接实现。

    $ sudo ln -s /opt/node-v6.9.2-linux-x64/bin/node /usr/local/bin/node
    $ sudo ln -s /opt/node-v6.9.2-linux-x64/bin/npm /usr/local/bin/npm
    $ cd /usr/local/bin/
    $ ls |grep '^[n]'
    node
    npm

    你会发现,在 /usr/local/bin这个目录下已经有 nodenpm 两个文件了。

    1. 验证成功

    打开terminal,输入node -vnpm -v 来检查是否成功。

    $ node -v
    v6.9.2
    $ npm -v
    3.10.9

    由此Node.js安装完成,看似很复杂,其实很简单。

    安装Git

    Git的安装是通过apt,极其便捷。

    sudo apt-get install git

    这样就安装完了。这就是包管理的好处。

    其次,ssh的配置安装则参考Git教程 - 廖雪峰的官方网站 ,这是非常好的git教程网站。

    三、安装Hexo

    所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。根据官方教程:

    $ npm install -g hexo-cli

    如果出现WARNING,那么你可以忽视它。如果出现ERROR,那么请你使用Baidu或者Bing来解决问题,作者病不能,开速有效的替你解决。

    四、开始搭建博客

    初始化Hexo

    首先,我打算把博客的根地址定在 ~/Document/ 。那么开始

    $ cd ~/Documents/
    $ hexo init Blog
    $ cd Blog
    $ npm install

    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

    注意,这里有一些问题。执行第二个命令时常常由于网络的问题卡住,那么建议你把npm的源改为淘宝源,具体教程查看npm设置淘宝镜像

    修改全局配置文件

    您可以在 _config.yml 中修改大部份的配置。当然参考官方文档以获得最好的支持

    当然你可以查看我的修改方法。

    网站

    参数描述我的配置
    title网站标题Francis'Blog
    subtitle网站副标题
    description网站描述
    author作者的名字Andy Francis
    language网站使用的语言zh-CN
    timezone网站时区Asia/Shanghai

    网址

    参数描述我的配置
    url网址https://dongfrancis.github.io/
    root网站根目录/
    permalink文章的 永久链接 格式:year/:month/:day/:title/
    permalink_default永久链接中各部分的默认值

    目录

    参数描述我的配置
    source_dir资源文件夹,这个文件夹用来存放内容。source
    public_dir公共文件夹,这个文件夹用于存放生成的站点文件。public
    tag_dir标签文件夹tags
    archive_dir归档文件夹archives
    category_dir分类文件夹categories
    code_dirInclude code 文件夹downloads/code
    i18n_dir国际化(i18n)文件夹:lang
    skip_render跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

    文章

    参数描述我的配置
    new_post_name新文章的文件名称:title.md
    default_layout预设布局post
    auto_spacing在中文和英文之间加入空格false
    titlecase把标题转换为 title casefalse
    external_link在新标签中打开链接true
    filename_case把文件名称转换为 (1) 小写或 (2) 大写0
    render_drafts显示草稿false
    post_asset_folder启动 Asset 文件夹false
    relative_link把链接改为与根目录的相对位址false
    future显示未来的文章true
    highlight代码块的设置

    分类 & 标签

    参数描述我的配置
    default_category默认分类uncategorized
    category_map分类别名
    tag_map标签别名

    日期 / 时间格式

    Hexo 使用 Moment.js 来解析和显示时间。

    参数描述我的配置
    date_format日期格式YYYY-MM-DD
    time_format时间格式H:mm:ss

    分页

    参数描述我的配置
    per_page每页显示的文章量 (0 = 关闭分页功能)10
    pagination_dir分页目录page

    扩展

    参数描述我的配置
    theme当前主题名称。值为false时禁用主题material

    此theme的配置默认为landscape,我这里的material为其它主题。

    Deployment

    deploy:
    ​ type: git
    ​ repo: git@github.com:DongFrancis/DongFrancis.github.io.git
    ​ branch: master

    一次简单的同步

    本地尝试

    如果以上内容你已经完成那么我们可以试着在本地测试一下,首先你必须进入博客的根目录,其次启动服务。想这样:

    $ cd ~/Documents/Blog
    $ hexo generate
    $ hexo server

    然后打开浏览器,进入地址 http://localhost:4000/ ,你会发现你的个人博客已经搭建完成!!!

    同步到Github Pages

    如果你想同步到Github Pages,确保你已经完成了 git的安装与配置git的ssh设置Github Pages的申请与建立Deployment的配置

    很好,现在我们可以继续了。

    安装插件

    进入Blog根目录,执行如下操作

    $ npm install hexo-deployer-git --save
    同步——deploy

    在Blog根目录,执行如下操作

    $ hexo deploy
    验证

    打开Github pages的个人主页,如 https://DongFrancis.github.io.git,你可以验证是否同步成功。

    四、添加新文章

    创建一篇新文章

    在Blog根目录下,你可以使用 new命令来新建文章。如

    $ hexo new "my-first-blog"

    执行完此命令后,在source/_posts/ 目录下会有一个新的文件 my-first-blog.md

    测试

    毫无疑问,对于自己些的文章,你总希望确认一下是否完美,这样你才可以展示给其它人看。

    具体这样来完成:

    $ hexo generate
    $ hexo server

    很熟悉的俩句话是么?没错,这就是本地测试的俩个命令,第一句的意思是生成文件,第二局的意思是打开本地服务器

    同步到Github Pages

    很简单使用 deploy 命令即可。

    $ hexo deploy

    执行完命令后,你便可以在Github Pages上查看了。

    五、更换主题

    我选择的是 Meterial 主题,一句话:好看!

    具体的过程和官网的教程一样这里就不详细讲了。

    六、总结

    搭建博客的作用对于不同的人有不同的作用。对于我来说,是希望将自己所学的知识进一步整理与归纳,以此逐步提升自己。希望这篇教程对大家有所帮助。

    hexo
    1. Jrotty 2017-03-07

      这种东西我一直觉得发布文章不是很方便@(哈哈),还是喜欢带后台的

      1. Feng (作者)  2017-03-08
        @Jrotty

        的确也是,有时想上去啰嗦一下,结果发现很多的不方便,虽然可以用U盘随身带着,感觉确实没有带后台的方便

    Theme Jasmine by Kent Liao