使用Hexo搭建个人博客

欢迎来到我的个人博客,那么第一篇文章就先简单介绍下关于本博客的搭建

技术的选择

本次搭建的过程中,预先选择了三种技术方案:

  1. 基于现有的平台,如简书、知乎
  2. 租VPS,使用wordpress或者自己搭建博客平台
  3. 使用Github Pages,加上Hexo、Jekyll等框架搭建

方案1逼格不够,2过于麻烦,最终确定在了方案3。Github可以保证文章存储的安全性,同时使用Hexo、Jekyll等框架搭建也相对简单,并且Github Pages支持绑定域名,满足了我所有要求。

方案3中,最终选择了Hexo框架。相比于Jekyll,Hexo有如下优势:

  1. 官方文档本地化做的十分出色
  2. 基于nodejs开发,环境易于搭建
  3. 官方提供的主题比较精美

Hexo环境搭建

由于官方提供了详细的文档,搭建过程也比较顺利。

  1. 安装nodejs

    可以在nodejs的官网上找到不同操作系统的安装方式

  2. 安装hexo

    完成nodejs的安装后,可以使用官网提供的命令很轻松的安装成功

    1
    npm install hexo-cli -g
  3. 初始化博客文件

    选择一个本地文件夹,作为博客源码存放的目录,使用init命令可以初始化一个目录

    1
    2
    3
    hexo init blog # 在当前目录下,新建一个名为blog的目录,并下载hexo所需文件
    cd blog # 进入新建的blog目录
    npm install # 初始化hexo博客
  4. 本地预览Hexo 博客

    到这里一个基本的Hexo博客已经搭建完成,可以在本地进行预览

    1
    2
    npm server # 启动hexo服务器,默认可以在浏览器中,访问 http://localhost:4000 进行预览
    # 使用 ctrl + c 可以退出预览
  5. 更换主题

    Hexo官网上提供了很多精美的主题,本Blog使用的是Next主题

    Hexo的主题都是以Github仓库的形式提供,大部分主题只需要两步操作即可使用

    1. 下载主题的源代码

      1
      2
      # pwd = blog 当前目录为Hexo博客的根目录(如上文中创建的blog目录)
      git clone ${GIT_REPO_URL} themes/${THEME_NAME}

      其中:

      • ${GIT_REPO_URL} 为所选主题Github代码库的名字
      • ${THEME_NAME}为主题在本地保存的名字
    2. 更换主题

      在Hexo博客的根目录下,有一个_config.yml文件,用于对Hexo博客进行配置,找到其中theme一行,修改其值为上一步中的${THEME_NAME},重新启动Hexo服务器后,可以看到主题已经发生了改变

    注:不同的主题可能使用不同的模板,可能需要下载一些其他插件才可使用;或者部分主题还提供了自定义的功能,具体可以参考该主题的文档

部署到Github Pages上

Github Pages是一个特殊的Github仓库,详情可以参考其官方文档

  1. 将Hexo博客部署到master分之上

    1. 安装Hexo Git插件

      1
      npm install hexo-deployer-git --save
    2. 修改_config.yml文件

      1
      2
      3
      4
      deploy:
      type: git
      repo: git@github.com:LoveOrange/LoveOrange.github.io.git # 请替换成自己的repo_name:)
      branch: master
    3. 部署

      1
      hexo deploy # 可以简写成 hexo d

      以我个人的博客为例,执行部署后,就可以在https://loveorange.github.io进行访问了

  2. 将Hexo源码部署到其他分支

    可能会有一部分人会面对在多台电脑上同时更新个人博客的问题,而Hexo部署时只会把编译后的网站文件push到master上,所以可以新建一个分支,将所有的源代码传到这个分支上

    大致过程如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # pwd = blog
    # 首先在github上建立一个分支,如source
    git init # 初始化本地git仓库
    git remote add origin ${GIT_REPO_URL} # 添加远程仓库
    git fetch origin # 获取远端分支信息
    git checkout source # 切换到source分支
    git add . # 添加本地文件
    git commit -m "comments for this commit"
    git push origin source

    执行以上操作后,可以去github上进行验证,是否有将本地文件push上去

绑定域名

到目前为止,我们已经可以根据Github Pages提供的默认域名访问新建的博客,但是一个酷酷的博客怎么能没有一个酷酷的域名?而且Github官方也为我们提供了如何绑定个人域名的教程

我的域名是在Godaddy上申请的,所以以Godaddy上的域名为例,简述以下如何把域名绑定到Github Pages

  1. 在Github中设置域名

    找到Github Pages所对应的仓库,在设置中直接添加想要绑定的域名

  2. 在Godaddy中设置域名

    找到新申请的域名,修改其DNS设置

    1. 新增/修改一条Type为A的记录,使其Name为@,value为192.30.252.153
    2. 新增/修改一条Type为CNAME的记录,使其Name为WWW,value为你的Github Pages的地址
  3. 等待域名生效后,则可以通过个人域名进行访问了

到此基于Hexo + Github Pages + Next主题的个人博客搭建完成,并且成功绑定了个人的域名

然而这只是博客的第一步,毕竟一个博客的价值,不在于它使用了什么技术,而在于它的内容

多一份关怀,多一份爱