专注于快乐的事情

使用hexo搭建我的博客

本文于2231天之前发表,文中内容可能已经过时。

hexo是由Node.js驱动的一款快速、简单且功能强大的博客框架。在网上有很多关于安装的问题, 本文简单阐述一下本网站的建设过程,以及在安装的过程中遇到的问题和一些有用的技巧。

安装主题

假设Hexo已经安装完成(Hexo 2.4.5 或以上版本)假设安装目录为klwork.github.io,记为根目录。以前我用的默认主题,也不错,很干净,后来发现一个主题跟适合我这种懒人。Pacman,比较喜欢它的界面和文档的自动目录结构。

Pacman安装

  1. 下载Pacman

    git clone https://github.com/A-limon/pacman.git pacman

  2. 复制pacman文件夹到根目录\themes

  3. 修改你的博客根目录下的config.yml配置文件中的theme属性,将其设置为pacman。

增加导航栏

打开根目录\themes\pacman的_config.yml文件,修改menu如下:

menu:
  首页: /
  存档: /archives
  项目: /project
  关于: /about

例如我们要建立一个关于的导航,只需在在根目录\source\about目录中新建一个index.md文件,即可成功完成导航。

加入第三方javascript文件

有时需要第三方的javascript,例如我需要一个返回顶部的按钮。官方的文档说放到根目录\themes\pacman\scripts,会自动加载。我试了一下不成功。最后是修改根目录\themes\pacman\layout\_partial目录下的after_footer.ejs,写在jquery文件下,如下所示:

<script src="<%- config.root %>js/jquery-2.0.3.min.js"></script>
<script src="<%- config.root %>js/scrolltopcontrol.js"></script>
...

最后放到$(document).ready的函数体中,进行初始化

scrolltotop.offset(350,120);
scrolltotop.init();

添加RSS

hexo提供了RSS的生成插件,需要手动安装和设置。步骤如下:

  1. 安装RSS插件到本地:npm install hexo-generator-feed –save
  2. 开启RSS功能:编辑hexo/_config.yml,在文件尾部添加如下代码:


    plugins:
    - hexo-generator-feed

  3. 修改根目录\themes\pacman的_config.yml中 rss: /atom.xml,这样当执行hexo g后,在根目录下\public下,发现atom.xml,这安装成功。

  4. 在站点添加链接,在themes\pacman\layout\_partial修改header.ejs中适当位置加入链接,如下:

     <% for (var i in theme.menu){ %>
        <li><a href="<%- theme.menu[i] %>"><%= i %></a></li>
    <% } %>
    <li> <a href="/atom.xml">RSS</a> </li>
    

则在头部菜单加入rss链接。

livereload

一旦修改了网站中的内容,livereload会立马检测到并且通知浏览器刷新页面,不需要自己手动按 F5 刷新,太爽了,边写文章边预览,下面是步骤:

  1. 安装 LiveReload 的 node.js 版本:
    $ npm install -g node-livereload
  2. 安装 livereload 的浏览器插件,以谷歌浏览器为例。
  3. 完成后,到你的 Hexo 博客根目录下执行:livereload -e ".md, .html, .png, .svg, .jpg, .gif, .css, .js, .json"
  4. 启动hexo。
  5. 打开浏览器,进入你要访问的页面,并点击浏览器上方的LiveReload插件小图标。
  6. 修改Markdown源文件,浏览器是不是立即刷新,如果是,大功告成。

Q&A

怎样使用摘要?

hexo的文章保存在source/_post目录下。在文档中插入<!--more-->就可以将文章分隔,<!--more-->以上的部分会已摘要的形式显示,当查看全文时more以下的部分才会显示出来。也可以在Markdown文件中定义description

怎样定义特殊字符?

有些字符,放在文件中,会出现编译错误,像,有一次我的文档出现了问题,找了老半天才查出原因。必须使用转义如下所示:

\{\{文档中\}\}

怎样显示图片?

同样放到source目中下。建议大家建立一个image文件夹,把文章中使用到的图片丢到这里来(当然可以按照你的习惯进行分类),之后在Markdown文件中按照这样的语法进行插入图片的操作,例如。

![hello]({{BASE_PATH}}image/hello.jpg) 

常用命令

hexo g == hexo generate

hexo d == hexo deploy

hexo s == hexo server

hexo n == hexo new

hexo clean

上传到github

如果一切都配置好了,发布上传很容易,执行hexo g && hexo d就可以,

首先,配置好ssh key
找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key: 将刚复制的内容粘贴到key那里。

使用ssh -T git@github.com进行测试,出现You've successfully authenticated, but GitHub does not provide shell access表示成功。

其次,配置_config.yml中有关deploy的部分:

正确写法:

deploy:
  type: git
  repository: git@github.com:klwork/klwork.github.io.git
  branch: master

参考文献

评论系统未开启,无法评论!