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

文章目录
  1. 一、概述
  2. 具体过程
  3. 给出网址
  4. 二、准备安装环境
  5. 安装Node.js
  6. 安装Git
  7. 三、安装Hexo
  8. 四、开始搭建博客
  9. 初始化Hexo
  10. 修改全局配置文件
  11. 一次简单的同步
  12. 四、添加新文章
  13. 五、更换主题
  14. 六、总结

导语:

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_dir Include code 文件夹 downloads/code
    i18n_dir 国际化(i18n)文件夹 :lang
    skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

    文章

    参数 描述 我的配置
    new_post_name 新文章的文件名称 :title.md
    default_layout 预设布局 post
    auto_spacing 在中文和英文之间加入空格 false
    titlecase 把标题转换为 title case false
    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: [email protected]: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 主题,一句话:好看!

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

    六、总结

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

    这篇文章对你有帮助的话,欢迎打赏支持

    微信打赏 微信收款码
    支付宝打赏 支付宝收款码