使用 GitHub & Hexo & Next 搭建个人博客

发表于 Disqus：

该 Blog 始于购买了一个域名，本想租用 VPS 搭建网站，用来练手。思来想去却找不到一个适合的。后发现 GitHub 的 Pages：

You can put anything here you like.

前言

搭建博客，是为了记录我自己的学习、工作、生活，用于自己查阅、反思、总结，也用于分享与交流。至于为什么要选择这样的方式来搭建博客：

面对这样一个又免费，又简单，又轻量，一次配置，就只需要你专心于写作的方式，难道不好吗？

简介

GitHub

GitHub 是一个面向开源及私有软件项目的托管平台，Git 是其版本控制工具。作为开源代码库以及版本控制系统，GitHub 在全球拥有大量的开发者用户，创造、开发、分享了海量的开源代码。足以说其改变了整个软件行业。

Git

Git 是一个免费、开源的分布式版本控制系统，能够高效的处理任何项目的版本管理。最早是由 Linus Torvalds 为了管理 Linux 内核开发而开发的版本控制软件。目前最多的被应用于软件开发领域，由于其无线分支，本地提交等特性，还可适用于更多领域。只要你所做的事经常需要修改，需要后悔药，需要多人协作，也许 Git 会适合你。

GitHub Pages

GitHub Pages 是 GitHub 中的一个服务。GitHub 中，项目的 Web 页面会显示代码库中的所有文件，如果项目比较小，那么文件较少的情况下，还能较为迅速的了解和掌握整个项目。一旦项目大了，文件太多，往往让对该项目有兴趣的人摸不着头脑。故设计之初是为了让项目创建者或其主要成员，编写一个静态页面托管在 GitHub 服务器上，用于其他人了解项目的架构及适用领域、使用方法等与项目有关的介绍。

Hexo

Hexo 是一个依赖于 Node.Js 技术的快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。支持 Markdown、一键部署、强大的插件系统和丰富的插件。中文支持良好。

NexT

NexT 是一款 Hexo Theme，主旨在于简洁优雅且易于使用。

安装配置

Github Pages 的创建

  1. 注册 GitHub 账号，进入 GitHub，右上角点 Sign up 进入注册页面或在首页填写相应信息点击 Sign up for GitHub 注册。
  2. 注册成功后，进入你的 GitHub 个人主页 https://github.com/yourusername，点击 Repositories -> New，创建一个新的代码仓库：
    • Repository name: yourusername.github.io (必须)
    • 其余选项默认即可
    • yourusername 即是你的账号名字
  3. 可以通过 https://github.com/yourusername/yourusername.github.io 访问你的项目。
  4. 稍等片刻，即可以通过 yourusername.github.io 访问。

Git 的安装

macOS 自带 Git，若不习惯使用命令行，可单独安装客户端。

  1. 下载与安装
    • 通过 Git 官网下载 Git Download
    • 通过 GitHub 下载 GitHub Download
    • macOS 可使用 HomeBrew 安装：brew install git
    • Linux (Ubuntu, Debian)：sudo apt-get install git-core
    • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Node.Js 的安装

  1. 下载与安装

    • 通过 Node.js 官网下载安装

    • 使用 HomeBrew 安装： brew install node

    • 通过 nvm (Node Version Manager)

      • cURL:
      1
      $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
      • Wget:
      1
      $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
      • 通过 cURL 或 Wget 安装 nvm 后，即可安装 Node.Js
      1
      $ nvm install stable

Hexo 的安装与使用

Node.js 与 Git 是必要的安装条件，若命令执行过程中报错，通常是因为没有权限，加上 sudo 即可

  1. 以上程序安装完成后，即可安装 Hexo

    1
    $ npm install -g hexo-cli

  2. Hexo 初始化

    1
    2
    3
    $ hexo init <folder>
    $ cd <folder>
    $ npm install

    前两句中 <folder> 可以先通过 mkdir 创建文件夹后，cd 到新建的文件夹，直接输入 hexo init 即可初始化当前所在文件夹，从此处开始，往后的命令都建议在该文件夹下执行

  3. 此时打开 <folder> 中的 _config.yml 文件，进行简单配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # Site
    title: 网站标题
    subtitle: 网站副标题
    description: 描述，用于 SEO
    author: 作者
    language: 网站使用的语言
    timezone: 时区

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yourusername.github.io
    root: /	网站根目录
    permalink: :year/:month/:day/:title/ 文章的链接
    permalink_defaults:	设置 permalink 中参数的默认值

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/yourusername/yourusername.github.io.git
      branch: master

  4. 生成静态文件

    1
    2
    3
    $ hexo generate
    # or
    $ hexo g

  5. 启动服务器

    1
    $ hexo server

    默认情况下，访问网址为：http://localhost:4000/，按 ctrl + c 终止运行。

  6. 打开浏览器，访问即可看到属于你的博客。

  7. 部署到 GitHub，部署完成后，可访问 http://yourusername.github.io 查看

    1
    2
    3
    $ hexo deploy
    # or
    $ hexo d

    Hexo 提供了部署命令，可以直接部署到 GitHub。在第三步设置的 Deployment 即为需要部署到的地方。

Hexo Theme

到目前为止，博客已经创建完成，配置主题。

  1. 访问 NexT，clone or download 到本地

  2. 解压缩或复制到 <blog folder>/<themes folder>，修改文件夹名称 hexo-theme-next ==> next

  3. 打开 _config.yml，修改 theme 参数，如下

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
  4. 验证主题是否生效

    1
    $ hexo server

    当你看见的界面与之前的不同即说明，主题生效。当前 NexT 默认的 Scheme —— Muse。

  5. NexT 支持三种 Scheme，分别是：

    • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
    • Mist - Muse 的紧凑版本，整洁有序的单栏外观
    • Pisces - 双栏 Scheme，小家碧玉似的清新
    1
    2
    3
    4
    5
    6
    7
    8
    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------

    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces

  6. 再次部署到 GitHub，可访问 http://yourusername.github.io 查看

    1
    $ hexo d

域名绑定

假如你拥有一个属于你自己的域名，也可绑定到 http://yourusername.github.io。

  1. 在你的代码仓库中，https://github.com/yourusername/yourusername.github.io 创建一个没有后缀的文件，命名为 CNAME，文件里面只需要写你的域名，比如我的

    1
    yamdestiny.xyz

    也可在本地创建后提交到 GitHub

  2. 选择一个提供域名解析服务的域名商，设置以下解析。

  3. 等待解析生效后，就可以通过你自己的域名访问了。

  4. 153、154 二选一。先 ping 一下。

    主机记录 记录类型 记录值
    @ A 192.30.252.153
    @ A 192.30.252.154
    www CNAME yourusername.github.io.

结语

这只是我在搭建过程中的一些基本流程，记录下来以备自己查询或让有需要的朋友少走一些弯路。以上是最基本的一套流程，当你搭建完成后，若对目前的功能不太满意，可以参考 Hexo 的官网，以及 Next 的官网，来进行一些进阶配置。让你的博客更符合你的心意。后续我也会将我的配置，细数记录到我的博客以便查阅。

参考资料