Fork me on GitHub

Hexo博客搭建

Hexo简介

  • Hexo 是一个简单的、轻量的、基于Node.js的一个静态博客框架。
  • 通过Hexo我们可以快速创建自己的博客,仅需要几条命令就可以完成。
  • Hexo特性:
    • Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成。
    • 支持GitHub Flavored Markdown和所有Octopress的插件。
    • Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less。

Hexo:安装和配置

  • 在安装Hexo之前需要先安装一些它所依赖的环境配置,本文主要介绍Hexo如何安装、使用,以及配置文件。

运行环境准备

  • 本文以Hexo 3.0.0为例,操作系统为Windows 7 x64。
  • 首先需要安装以下程序:
    • Node.js
      下载最新版的 Node.js,一路next安装到C盘。
    • Git
      根据不同的平台相应选择下载版本,安装建议勾选Git Bash Here,方便以后的操作,然后一路next即可。
    • Notepad++(可选)
      文本编辑器,用于修改配置文件及写文章。

安装Hexo

  1. 新建一个文件夹,例如blog。
  2. 进入blog文件夹,右键点击Git Bash Here
  3. 安装Hexo。

    1
    npm install -g hexo
    • 输入hexo -v,检查hexo是否安装成功。
  4. 初始化blog文件夹。

    1
    hexo init
    • 看到”Start blogging with Hexo!”,则表示初始化完成。
  5. 安装依赖和插件。

    1
    npm install
  6. _config.yml,进行基础配置。

  7. 新建一篇博客。

    1
    hexo new post “博客名”
    • 这时候在文件夹_posts目录下将会看到已经创建的文件。
  8. 启动服务器进行本地预览。

    • clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
    • generate 生成静态文件。
    • server 启动本地服务器。
    1
    2
    3
    hexo clean
    hexo g
    hexo s
    • 终端结果显示: INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.时就说明已经搭建起本地的hexo博客了。
    • 在浏览器中打开 http://localhost:4000 , 成功的话即可看到博客页面,至此安装就完成了。
  9. 安装插件。

    • 在生成以及部署文章之前,需要安装一个扩展:
    1
    npm install hexo-deployer-git --save
    • 使用编辑器编好文章,就可以使用命令:hexo d -g,进行生成以及部署文章(下面会具体讲解如何将文章部署到github)。
  10. 安装主题(以next主题为例)。

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next
  11. 若要回到命令窗口,则输入命令: Ctrl+C 停止服务器。

将文章部署到Github

  1. 申请Github账号。
  2. 创建Github仓库。
    • new repository:Repository name 必须为Github用户名+Github.io这种格式,它将是我们个人博客的域名,即别人可以输入这个网址来访问我们的博客。
  3. 配置本地文件。

    • hexo init的文件夹里(即blog)找到_config.yml全局配置文件,通过配置里面的参数,来与我们的Github上的仓库进行关联。
    • 打开这个文件,找到最下面:

      1
      2
      3
      4
      # Deployment
      ## Docs: https://hexo.io/docs/deployment.html
      deploy:
      type:
    • 修改为:

      1
      2
      3
      4
      5
      deploy:
      type: git #部署类型,使用Github(key-value空格隔开)
      repository: git@github.com:chongtianHong/chongtianHong.github.io.git #部署的仓库的SSH(key-value空格隔开)
      branch: master #部署分支, 一般使用master主分支(key-value空格隔开)
      message: update #默认类型(key-value空格隔开)
  4. 安装hexo-deployer-git自动部署发布工具。

    1
    npm install hexo-deployer-git --save
  5. 将Hexo与Github page联系起来,设置Git的user name和email(如果是第一次的话)。

    • hexo init的文件夹(即blog)里面鼠标右键,点击Git Base Here,输入

      1
      2
      git config --global user.name "yourname"  //github用户名
      git config --global user.email "your_email@example.com" //github 注册邮箱
    • 输入cd ~/.ssh,检查是否有.ssh的文件夹(若存在则直接跳过第6步)。

  6. 生成新的SSH Key。

    • 输入以下代码

      1
      ssh-keygen -t rsa -C "450707109@qq.com"
    • 连续三个回车,SSH key就生成成功了。这时候可打开用户目录(默认存储路径是:C:\Users\Administrator.ssh),里面有一个“.ssh”文件夹,里面有“id_rsa” “id_rsa.pub” 这两个文件。其中“id_rsa”是私钥文件,“id_rsa.pub”是公钥文件。

    • 添加密钥到ssh-agent,输入

      1
      eval "$(ssh-agent -s)"
    • 再输入以下命令,添加生成的SSH key到ssh-agent。

      1
      ssh-add ~/.ssh/id_rsa
  7. 添加SSH Key到Github。

    • 登录Github,点击头像下的settings,添加ssh。
    • 新建一个new ssh key,将id_rsa.pub文件里的内容复制上去。
    • 输入ssh -T git@github.com,测试添加ssh是否成功。如果看到Hi后面是Github用户名,就说明成功了。
  8. 发布到Github。
    • 输入如下命令,则可以完成hexo项目在Github上的生成及部署。
      1
      2
      3
      hexo clean
      hexo g
      hexo d

注意事项

  • hexo配置文件_config.yml 里面的每个冒号后面都要有个空格,否则会报错。
  • 所有标点符号都是英文的,所以输入时要切换到英文状态。
  • 在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。其中:
    • 一份位于站点根目录下,主要包含 Hexo 本身的配置,称为站点配置文件;
    • 另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项,称为主题配置文件。
  • 在切换主题之后、验证之前,最好使用 hexo clean 来清除 Hexo 的缓存。
  • 在next/source/css/_custom目录下面专门提供了custom.styl供我们自定义样式,因此也可以在custom.styl里面添加样式代码。
  • 博客内容按照markdown的语法进行编写。
  • 所有文件(不管是以md为后缀的,还是以yml结尾的),都必须转换成UTF-8格式,可以在notepad++的格式里转换下,否则在本地查看(localhost:4000)中会出现乱码。
  • Hexo官方的安装教程
------ 本文结束 ------