Joke's Blog World

Hexo+Github 搭建自己的博客

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

一.准备工作

安装Hexo非常简单,但在安装Hexo之前,我们必须确保已经安装下列应用程序:

  • Node.js

  • Git

    1.1 安装Git客户端

    之所以首先安装 Git,是因为安装了 Git 客户端之后,我们就可以通过 git 命令的方式来安装 Node.js.

    Git官网下载了 Git 的 Windows 客户端之后,我们只需要按照提示就完成安装即可.

    1.2 安装Node.js

    安装 Node.js有两种方法,这两种方法分别是:

  • 下载安装程序安装

    Node.js官网下载 Node.js 的安装程序,下载完成之后,安装过程中,只需要一路next即可完成安装.

  • 使用 nvm 安装(推荐)

    在 Windows 桌面任意位置鼠标右键,在指定目录下选择 Git Bash Here,输入以下命令:

    $ curl https://raw.github.com/creationix/nvm/master/install.sh sh

    安装完成后,重启终端并执行下列命令即可安装 Node.js

    $ nvm install stable

    1.3 注册Github账号

    Github官网注册帐号,完成注册之后,进行下面的操作:

  • 给账号添加 SSH Key

    1. 生成 SSH Key

      在 Git Bash 上键入以下命令:
      ssh-keygen -t rsa -C "xxx@xx.com"

      其中xxx@xx.com是你注册github的邮箱

      在成功生成 SSH Key 之后,我们在系统->用户文件夹下,找到一个 .ssh的文件夹,将一个 id_rsa.pub 的文件中的内容拷贝;

    2. 添加 SSH Key 到Github 账号

      在Github任意页面,点击自己的头像,选择 Settings-> SSH keys->New SSH key ,为 SSH Key 添加合适的 Title,并把之前 id_rsa.pub 中的内容复制到 Key,点击 Add SSH key即完成添加.

  • 新建 repository (仓库)

    登录 Github, 点击 “New Repository”,新建一个版本库

    repository

    输入仓库名,yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)

    create

    接下来,我们打开刚才新建的版本库,点击右边的“Setting”菜单进入设置

    setting

    然后,找到并点击 “Launch automatic page generator”

    Launch

    新打开页面之后点击底部的”Continue to layouts”

    repository

    之后选择一个随意模版,点击”Publish page”,发布github默认生成的一个静态站点

    publish

    接着打开在 github 上的静态网址, http://yourname.github.io ,你会打开刚才选择静态站点模版的网页.

二.搭建博客

2.1 安装Hexo

在安装了所有必备的应用程序后,即可使用 npm 安装 Hexo.在任意目录下新建Blog文件夹,在文件夹下右键,选择 “Git Bash Here”,然后键下面的命令:

$ npm install -g hexo-cli

软件安装完成之后,我们可以通过命令的形式来验证软件是否安装成功.
打开 Windows 命令行,输入以下命令可以查看相应的软件是否安装成功:

git --version 查看 Git 客户端是否安装成功

node -v 查看 Node.js 是否安装成功

npm -v 查看 npm(即Node的包管理工具) 是否安装成功

等安装完毕,通过输入 hexo -v的命令来测试 Hexo 是否安装成功,成功如下图展示:

done

2.2 本地运行Hexo

  • 初始化Hexo

    hexo init

  • 安装依赖文件

    npm install

    如果上述命令长时间无法执行成功,可以考虑更换国内的 npm 镜像,具体可搜索 npm 换源

  • 部署形成文件

    hexo generate

    在之后,我们就可以通过下面命令

    hexo s -g

    server

    在浏览器里打开 http://localhost:4000, 就可以在本地预览自己的个人博客了

    2.3 修改Hexo配置文件

  • 修改hexo配置文件 _config.yml

    在Blog的hexo目录下,打开配置文件_config.yml

    config

    修改配置文件 _config.yml,编辑字段 deploy

    deploy

关于配置文件 _config.yml其他的修改,一般除了基本的设置,都是根据自己的主题来设置.这里我使用的是一款非常流行的主题next,该主题的配置文件修改可以到 next 的Github主页去参考配置.

2.4 安装 hexo git插件

npm install hexo-deployer-git --save

hexo-git

2.5 将本地Hexo主题部署到Github

  • 部署本地主题到Github,需要执行以下的命令:

    hexo clean

    hexo generator 可以简写成 hexo g

    hexo deploy 可以简写成 hexo d

    每次修改本地主题,都需要执行上述命令,只有这样主题才能在 Github 上生效

执行完命令之后,我们就可以输入自己的域名来查看部署到 Github 的博客了;
我的博客使用了 next 的主题

blog

三.发布自己的第一篇博客

要发布博客,首先需要在 hexo 的 source->_posts文件夹下新建一个 .md 格式的文档,该格式的文档是一种标记语言 Markdown来编辑.

3.1 使用 Atom(一款可以编辑 Markdown语言的编辑器)编辑博客

如下图所示,在 Atom上使用 Markdown编辑博客

hexo-git

3.2 发布博客

在指定目录下编辑好博文之后,在 hexo 目录下执行下面的命令就可以发布博客到 Github

hexo clean

hexo d -g

效果:
result