使用Hexo搭建博客步骤详解

简介

hexo —— 简单、快速、强大的Node.js静态博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

特性

  • 风一般的速度
    Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成。

  • 流畅的撰写
    支持GitHub Flavored Markdown和所有Octopress的插件。

  • 扩展性
    Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less.

基本配置和使用的工具

操作系统:Windows 7

使用的工具:GitNode.js

Git用于把部署在GitHub的内容获取至本地,Node.js用于安装Hexo。

基本步骤

安装Git

  • 安装 Git,目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行

安装Node.js

  • 下载安装文件,nodejs官网,我这里下载的是node-v6.11.2-x64.msi.
  • 安装nodejs

    双击”node-v6.11.2-x64.msi”,开始安装nodejs,自定义安装在D:\dev\nodejs下面。

    在cmd控制台输入:node -v,控制台将打印出:v6.11.2,出现版本提示表示安装成功。

    该引导步骤会将node.exe文件安装到D:\dev\nodejs\目录下,并将该目录添加进PATH环境变量。

  • 安装相关环境

    npm install express -g
    npm install jade -g
    npm install mysql -g
    npm install coffee-script -g
    

    所有命令都是-g进行全局安装的,这样安装的安装包都在当前用户下,在磁盘的所有其他地方都可以访问到,比较方面。否则安装在当前目录下,只能在当前目录下使用。

    默认情况下上述组件都是安装在D:\dev\nodejs\node_modules文件夹下,这也是nodejs相关组件的自动查找路径。确认安装的命令:coffee -v,出现版本号表示成功安装。

以上环境基本就配置完成

安装Hexo

  • 这一步的前提是必须先安装 Node.js和Git

    1
    npm install hexo -g
  • 升级,更新hexo到最新版(升级仅需一步就把 Hexo 本体和所有相依套件安装完毕)

    1
    npm update hexo -g
  • 安装hexo-deployer-git,用于将博客的内容部署到git上

    1
    npm install hexo-developer-git --save
  • 初始化如果指定 <folder>,便会在目前的资料夹建立一个名为<folder>的新资料夹;否则会在目前资料夹初始化。在Git命令行窗口中输入(指定 的方法是):

    cd [需要指定的文件夹路径]
    
  • 跳转到对应的文件夹目录下后,进行初始化:

    hexo init
    
  • 初始化后对应的资料夹中有一下文件(_config.yml, theme/, source/, scaffolds/, package.json, .gitignore);文件作用:

    _config.yml:整个站点的配置,包括基本介绍,所使用的主题,关联的仓库等;

    theme/:所用的主题以及主题的配置;

    source/:目前所写的所有文章以及404页面等;

    scaffolds/:Hexo所提供的模板文件;

    package.json:说明站点使用了哪些包;

    gitignore:放置在git端时忽略的文件;

安装Markdown编辑器

  • 简介:Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。git上上传的文本一般都是用Markdown编辑的,而且它的语法也很简单,所以这很实用。

  • 安装,下载地址,下载得到 markdownpad2-setup.exe,双击并完成安装。

  • 作用:由于使用Hexo写博客,其中博客文章的格式就是.md格式,需要使用Markdown编辑器完成编辑,将纯文本转化为html,在浏览器上显示出来。

  • Markdown语法说明

安装主题

可以到Hexo官网主题页去搜寻自己喜欢的theme。我安装的是hexo-theme-next

next主题使用文档:http://theme-next.iissnan.com/

hexo的next主题个性化教程:打造炫酷网站

发布文章

1) 新建文章

在对应的博客文件夹下的git-bash命令行中运行以下命令

$ hexo new "filename"        #新建文章

新建文章之后,在博客对应的文件夹source\_posts中找到对应的.md文件,然后用Markdown编辑器打开,对文章内容进行编辑。

2)本地服务器上测试

保存文章后,在git-bash命令行中输入以下命令

1
2
3
4
5
6
7
# 清除Hexo的缓存,包括 (db.json) 和已生成的静态文件 (public)
$ hexo clean

$ hexo new "Hello World" # 创建新博客

$ hexo generate # 生成静态网站,或者hexo g命令
$ hexo s # 打开本地服务器

伺服器会跑在 http://localhost:port (port 预设为 4000,可在 _config.yml 设定),可在本地访问:http://localhost:4000

3)关联远程GitHub

  • 修改_config.yml配置文科,终端cd到blog(这个是本地存放博客的文件夹,如beatriceblog)文件夹下,打开_config.yml,找到文件的最后两行,修改成下边的样子:

    1
    2
    3
    4
    deploy:
    type: git
    repository: https://github.com/jeasonstudio/jeasonstudio.github.io.git
    branch: master
> 非常重要:在配置所有的_config.yml文件时(包括theme中的),在所有的冒号:后边都要加一个空格,否则执行hexo命令会报错

> 出现下列错误的解决方案

1
2
3
4
5
# 生成网页时,出现错误:ERROR Local hexo not found in ~/blog   
npm install hexo --save

# 若执行命令hexo deploy仍然报错:无法连接git,则执行如下命令来安装hexo-deployer-git:
npm install hexo-developer-git --save
  • 关联GitHub账号及仓库

    • 根据已有的GitHub账号,配置本地Git(其实就是建立本地Git与服务器上GitHub账号的关联)

      • 在本地创建ssh key:在本地的git bash命令窗口输入下列命令,`your_email@youremail.com为你在github上注册的邮箱,如beatrice.qq.com`

        1
        $ ssh-keygen -t rsa -C [your_email@youremail.com]
      • 复制ssh key: ,输入上面的命令后,会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在C:\Users\[本机的用户名]下生成.ssh文件夹,进去,打开id_rsa.pub,所有的文件内容就是ssh key,复制下来。

      • 添加ssh key到Github:回到github网页上,进入 Account Settings(账户配置),左边选择SSH Keys,Add SSH Key,title随便填,粘贴电脑上生成的key,完成后就是下面的状态。

      • 验证是否成功,在git bash下输入:

        1
        $ ssh -T git@github.com
    > 如果是第一次生成ssh key的会提示是否continue,输入yes就会显示已成功连上github。

- 本地仓库关联github

- **设置username和email**,因为github每次commit都会记录他们
    
1
2
$ git config --global user.name [your name]
$ git config --global user.email [your_email@youremail.com]
- **关联远程GitHub仓库**,进入要上传的本地仓库所在目录,右键打开git bash窗口,添加远程地址:
1
2
3
4
$ git remote add origin git@github.com:yourName/yourRepo.git

# 例如,连接自己的博客远程仓库
git remote add origin git@github.com:dby124/dby124.github.io.git
> yourName和yourRepo表示你在github的用户名和刚才新建的仓库,加完之后进入.git,打开config,这里会多出一个remote "origin"内容,这就是刚才添加的远程地址,也可以直接修改config来配置远程地址。 - **创建新本地git仓库**:进入要上传的本地仓库所在目录,然后执行 `git init` 以创建新的 git 仓库。
1
$ git init

4)部署到对应的网站上去

本地测试没有问题后,执行下面命令

1
2
$ hexo g                     # 生成静态网页
$ hexo d #上传到GitHub对应的仓库中

自动备份Hexo博客源文件

  • 安装shelljs模块

    1
    npm install --save shelljs

    模块安装完成,在blog根目录的scripts文件夹(如果没有就新建一个)下新建一个js文件,文件名随意取

  • 修改脚本内容中,hexo的根目录路径

    1
    cd('D:/nodejs/beatriceblog');    //此处修改为Hexo根目录路径

这样,每次更新博文并deploy到服务器上之后,备份就会自动启动并完成备份。

参考:hexo个人博客搭建教程

【Hexo+Github】域名和github绑定的问题

  • 本地端

    /blog/themes/landscape/source目录下新建文件名为:CNAME文件,注意没有后缀名!直接将自己的域名如:jeasonstudio.com写入。

    终端cd到blog目录下执行如下命令重新部署:

    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo d
  • 域名解析

    • 如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录。
    • 登录你注册域名的网站,比如万网,在你购买的域名后边点击:解析 –> 添加解析
    • 记录类型:CNAME
    • 主机记录:将域名解析为example.com(不带www),填写@或者不填写
    • 记录值:yourname.github.io. (不要忘记最后的,yourname改为你自己的用户名),点击保存即可。

参考:【Hexo+Github】域名和github绑定的问题