FirstBlood

用Hexo和Git在Ubuntu下搭建博客

名词释义

  • Hexo

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

  • GitHub

    GitHub是通过Git进行版本控制的软件源代码托管服务平台,面向开源及私有软件项目。因GitHub开源社群性别严重失衡，男性群体高达95%以上，故GitHub常被网民们戏称为“GayHub”、“全球最大同性交友网站。

  • Node.js

    Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。

  • apt 和 npm

    Linux安装软件一般是利用已被开发人员将软件打包后更易于安装的预编译包，apt 和 npm 都是包管理工具，在各平台都有相关的包管理工具，比如 Ubuntu 下面预装有 apt-get，CentOS 下面预装有 yum，Mac 下面预装有 brew 等，这些都是安装软件的利器，主要用于自动从互联网的软件仓库中搜索、安装、升级、卸载软件或操作系统。在本博客搭建过程中，使用的 npm 包管理工具来安装Node.js，但在Ubuntu下载并没有预装，所以首先需要利用 Ubuntu 下已有的包管理工具 apt 来安装 npm 。

  • SSH

    Secure Shell（安全外壳协议，简称SSH）是一种加密的网络传输协议，可在不安全的网络中为网络服务提供安全的传输环境。SSH通过在网络中创建安全隧道来实现SSH客户端与服务器之间的连接。

本地搭建


本地搭建部分

首先利用 apt 安装 Node.js、npm、git，再利用 npm 安装 hexo。

在使用命令的过程中如果出现权限不够而拒接操作的情况，可以在命令前面加上 sudo 以临时使用 root 权限，或者直接切换到 root 用户进行操作

  • Node.js安装

    $ apt-get install nodejs

    需要注意 Node.js 的安装版本，版本过低后面过程的安装容易报错，可用 node -v查询版本以及验证是否安装成功。

  • npm 安装

    $ apt-get install npm

    可用 npm -v 验证是否安装成功

  • Git 安装

    $ apt-get install git

    可用 git -v 验证是否安装成功

  • Hexo 安装

    $ npm install hexo-cli -g

    Hexo有服务端和客户端之分，仅需要安装客户端便可，安装成功后可用 hexo -v 查看版本信息

  • 在Ubuntu用户目录下创建一个文件夹

    $ mkdir filename

    也可创建在根目录或者其他目录，但需要记住路径，本例是创建在用户主目录 /home 目录下

  • 利用Hexo初始化 filename

    $ hexo init filename

  • 用hexo生成博客静态源码

    $ hexo g // hexo generate 命令的简写

    执行命令后会在filename文件夹看见多了一个放置静态源码的public文件夹

  • 启动hexo服务

    $ hexo s // hexo server 命令的简写

    启动服务后，在浏览器中打开http://localhost:4000 ，可以看到一个默认主题的博客，在此本地博客已成功搭建，下一步将其同步到GitHub，允许公共访问。

部署到GitHub


部署到GitHub原理

这一部分可以先注册GitHub，再将本地产生的SSH公钥添加到GitHub，接着修改博客配置文件 _config.yml 并安装部署插件，最后将本地文件部署到GitHub。

  • 注册GitHub账号，然后开始一个新的项目或者说创建新的代码仓库（repository）


    reposity

    ​ 在命名代码仓库的过程中，建议与用户名一致，即上图绿色涂鸦部分，同时注意将仓库名后面加上.github.io,这样利于创建成功后博客的访问。

  • 在本地生成SSH秘钥，并利用公钥在GitHub创建SSH keys

$ ssh-keygen -t rsa -C “GitHub注册邮箱”

​ 在命令执行过程中会让你输入密码，在此输入的是GitHub的登录密码，上条命令中所输入邮箱为个人GitHub注册邮箱，执行后会让你输入密码。在实际的操作过程中可以直接执行ssh-keygen -t rsa，命令执行后一直回车结束，命令执行后会在你所创建文件夹的上级目录下创建一个 .ssh 的隐藏 文件夹，即与filename同级目录，包含一个私钥文件 id_rsa 和一个公钥文件 id_rsa.pub ,注意此处千万不能用私钥来创建GitHub的 SSH key，也不能泄露自己的私钥。

$ cat ~/.ssh/id_rsa.pub

  • 将打印出来的全部内容复制，然后到GitHub个人主页，点击右上角头像的下拉菜单的设置选项，再找到SSH key选项,将内容复制到该处。

    key
  • 创建成功后测试ssh是否可以与GitHub通信

$ ssh -T git@github.com

​ 在此过程中会需要你输入GitHub登录密码,可以正常通信后便可以进行下一步

  • 修改本地博客配置文件

$ vi _config.yml

​ 执行此命令需要你将目录切换到你所创建的文件夹，此处如果没有安装 vi 编辑器，可以使用 gedit 编辑器，命令为gedit _config.yml。文件内容更改如下：

1
2
3
4
deploy：
   type： git
   repository： git@github.com:***/***.github.io.git
   branch： master

​ 在文件中找到上述代码位置后更改，如若没有相关代码块可在文末自行添加，代码仓库（repository）地址可以在GitHub中找到，如下图中紫圈所示部分，选中ssh（绿圈），而不要选中HTTPS（红圈）。注意在每个参数后面添加一个空格，编辑完成后确认保存了已修改的配置文件。


ssh

  • 安装部署插件

$ npm install hexo-deployer-git -save

  • 对git进行配置

    $ git config –global user.email “GitHub注册邮箱”
    $ git config –global user.name “GitHub用户名”

  • 用Hexo在新配置环境下生成新静态网页文件并将其部署到GitHub

$ hexo g // hexo generate 命令简写

​ 根据最新的配置生成静态网页文件到public文件夹，注意要进入所创建的文件夹（filename）下执行hexo相关命令

$ hexo d // hexo deploy 命令简写

​ 部署到GitHub，到这一步你就成功搭建好了自己的博客并将其部署到GitHub，但距离访问自己所创建的博客还差临门一脚。

  • 访问博客
    在GitHub代码页面找到代码仓库设置，注意并不是用户的设置，点击设置并向下滚动鼠标，找到GitHub Pages，在这一版块找到自己的博客地址，使用这个地址就可以直接访问你所搭建的博客啦！

​ 因个人所学有限，可能对整个过程理解有误，故以上流程、思路及建议仅代表个人观点，有写的不够清楚或者有问题的地方,欢迎交流指正.

此博客仅介绍搭建部分，博客的美化和发布等其他设置请参考Hexo官方网站