创建基于GitHub和hexo的个人博客

发表于   |   分类于   |   阅读次数

写在前面

这两个星期一直在倒腾博客的事情，从一开始想自己搭建前后端，自己租赁服务器，自己买域名，到突然从网上惊喜的发现，GitHub 可以提供足以满足我需求的所有东西，包括拥有自己标签的域名、几百M的网络空间、自由的发布和修改等等。开始在网上找相关资料。下面总结下搭建的过程，希望对你有帮助！

首先想到的是，有没有什么工具可以帮忙做到，如果有，那这个工具在完成这件事情的过程中，充当了什么样的角色？先搞清楚这个，第二步就是花点时间学习一下这个工具的基本用法。

就搭建博客来说，需要用到两个工具，GitHub 和 hexo 。

GitHub 可以理解为一个放博客的服务器，它有两个用途，一个是存放你的博客文件，一个是提供地址给外部访问。

hexo 是针对博客本身的。想一想，你做的个人博客，是不是也由两个部分组成？第一个部分是你写的文章，第二个部分是你把这些文章通过某个固定的框架排列整合，比如提供一个博客目录，提供分享的功能、提供评论的功能、给博客加标签等。hexo 就是提供给你一个这样的框架，你把文章放进去，它就能某种方式生成一个具有固定样式框架的博客网站。

最后，将 hexo 生成好的博客网站发布到GitHub 上面去。

接下来，我们就按照上面说的思路开始完成我们的博客创建吧~

GitHub

  1. 登陆github网站，完成账号的注册和登录。

  2. 新建一个github仓库new repository，仓库名称是：username.github.io(username是你自定义的)，这个仓库存放 hexo 框架生成的博客文件。

  3. 通过本地客户端连接到 github 网站，下载一个叫git的客户端软件，登陆git官网，下载最新版本的git客户端，按照步骤安装完成。安装完成后，在你的电脑桌面鼠标右键，点击git bash，打开git的命令行。

  4. 通过git bash连接github，在git bash中运行下列命令：

检查计算机ssh密钥：

$ cd ~/.ssh

如果没有提示:No such file or directory 说明你不是第一次使用git,清理原有ssh密钥：

$ ls 
/config id_rsa id_rsa.pub known_hosts/
 $ mkdir key_backup
 $ cp id_rsa* key_backup
 $ rm id_rsa*

获得密钥： 

ssh-keygen -t rsa -C "defnngj@gmail.com"//填写email地址，然后一直“回车”ok

如果提示：Hi defnngj You've successfully authenticated, but GitHub does not provide shell access. 说明你连接成功了。

设置用户信息:

$ git config --global user.name "tisakong"//给自己起个用户名
$ git config --global user.email  "tisakong@163.com"//填写自己的邮箱

在用户目录下，找到id_rsa.pub这个文件,用文本方式打开，文本内容类似：

1
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDJPNg7CO71a9EksZC1Soevszec5YaYYmBwnRwHMSL5P2lcQfrMkBtF6y5rM5H95JGjueik4sTKIldLrAnyPOutfiy7ItURzXSirkrlitsBVX2Bp/tCqKHTFfJb9NFzzjL/IAr2sPkkQHwB94BC0ulk4l+GXrGXocWP+uhkK7l1yW5lsb0+kcJH2OvI07pjp4V/SIgIUf0QylBy/6ERTW6owUHSp1EXhUmWT4HmDfUtdgIB/gqOMEp4mWxCZlj1AusGmdyC14Rv8W/f0+Ofe+/wtqu+78zzNHg7+dmLp2t3DpdxxxxtH1onlL4Hk2Q/eU7LyJD6YbXE4hmmgqz1enN9 tisakong@163.com

登陆到github网站，打开个人设置页面，找到SSH and GPG keys选项，点击右上方New SSH key，粘贴上面的文本

测试一下能否连上，使用git clone 命令从github仓库拷贝一份项目到本地:

git clone https://github.com/spring-projects/spring-framework

如果可以连上，则会显示命令行工具会显示下载进度。

至此git环境搭建完成。

hexo

  1. 因为hexo是基于nodejs的一个框架，所以先安装nodejs的环境，登陆nodejs官网，下载最新版本的nodejs，按照提示安装，完成后，打开命令行工具，输入node -v 验证是否安装成功。如果显示版本号信息，说明安装成功。

  2. 在git bash命令行工具中安装hexo组件，输入

    npm install -g hexo

  3. 新建一个存放博客目录的文件夹，进入到该文件夹,运行hexo命令:

    1
    2
    3
    $ cd /blog
    $ hexo init 
    $ npm install

到这里，一个空的博客框架就生成了。注意，以后的所有操作都是在blog这个文件夹里面执行的。

  1. 写博客 

    1
    2
    $ hexo new [layout] <title>
    例如 hexo new 我的第一篇博客

  2. 生成静态页面

    1
    hexo generate   //可简写为 hexo g

至此，博客框架和第一个博客就完成了。

详细的教程，参见hexo官网。

将hexo部署到github中

  1. 在blog文件夹中找到_config.yml文件，在最下面一行找到deploy栏目，并修改成：

    1
    2
    3
    4
    5
    6
    7
    deploy:
    type: git
    repository: git@github.com:github_username/username.github.io.git
    branch: master
    //注意：	
    //1.github_username是你github网站的用户名，username是你仓库名保持一致。
    //2.冒号：后面要加空格

  2. 发布到github，执行： 

    1
    $ hexo deploy  //可简写为 hexo d

  3. 每次发布新文章，重新部署的时候，执行下面命令：

    1
    2
    3
    $ hexo clean
    $ hexo generate
    $ hexo deploy

  4. 至此，所有的基本步骤就都完成了，在浏览器访问username.github.io看看效果吧。

如何美化hexo主题

hexo 的博客美化，可以通过替换博客的主题完成，你可以到hexo的主题官网搜索你觉得好看的主题替换。当然熟悉编程的同学，可以自己设计一套主题。

hexo主题官网地址 https://hexo.io/themes/

替换主题也很简单，找到你的博客目录中的_config.yml文件，修改theme字段为你搜索到的主题名字即可。

1
2
theme: next
//next为主题名

hexo 博客还有很多值得探索的地方。有必要提醒大家，不要把时间花在花里胡哨的主题上面了。我觉得主题简单干净即可，高质量的博客内容才是建立博客的宗旨。

后记

总结下从学习搭建博客中体会到的快速学习法：

1.理清有哪些主体。
2.搞清楚每个主体之间有什么逻辑关联。
3.不断尝试。

------ 本文结束 ------
TisaKong wechat
启发思维个人微信公众号
0%