目录
  1. 1. 为什么是GitHub+Hexo+NexT
  2. 2. Github如何快速上手
  3. 3. 使用Hexo博客框架
    1. 3.1. Node.js
    2. 3.2. NPM和CNPM
    3. 3.3. Hexo博客框架
  4. 4. NexT主题
  5. 5. 最后
如何用GitHub+Hexo+NexT搭建博客

对一般人来说,设立个人博客是一件挺geek的事情

对有想法的人,撰写博客可以记录自己的思路

这是一件值得做的事情

如果你无意间看到这篇文章,可以快速掌握搭建此博客的方法

也可以获得GitHub、Hexo、NexT初步的认识


为什么是GitHub+Hexo+NexT

选择 GitHub 的原因很简单: 免费

我相信,很多人更喜欢基于 WordPress 等框架搭建博客

但是一个现实的问题是,对大多数来言,服务器和域名是一笔不小的开销,域名备案更是繁琐的过程

而这笔开销,完全可以借助GitHub来规避

GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 git 作为唯一的版本库格式进行托管,故名GitHub

GitHub 为个人开发者提供了免费空间,用于存放项目源代码

为了便于开发者介绍宣传自己的项目, GitHub Pages 应运而生

每个项目都可以设置 GitHub Pages ,在线展示项目的情况介绍,提供静态网页展现的支持

而这,就被聪明(鸡贼的开发者用于搭建个人博客

免费的代价注定于搭建动态网站无缘

聪明(鸡贼的开发者创建了 HexoJekyllOctopress 等博客框架,实现了本地快速生成博客静态资源文件

Hexo最初是由Tommy Chen在2012年创建和维护的。自那时以来,它已经帮助成千上万的人建立了他们梦想的网站/博客。

更多聪明(鸡贼的开发者陆续为Hexo主题库添砖加瓦,开发了 NexT 等个性化主题,最终实现了 Github+hexo+NexT 一整套博客解决方案


Github如何快速上手

如果你是计算机的高手,自然不会看到这篇博文

对于纯计算机小白,【教程】学会Git玩转Github【全】是非常细致的入门视频

简单来说,每个存放在Github上的项目源代码,都会存入仓库(Repositories)中,为了便于版本控制,每个仓库(Repositories)中可以存放项目多个分支(Branch),默认分支为 master

仓库(Repositories)设置(setting)中可以找到 GitHub Pages 设置

聪明的你只需要创建一个名为 username.github.io 仓库(Repositories),上传 index.html 文件,配置 GitHub Pages ,就可以访问 https://username.github.io 查看个人主页

为了便于批量上传仓库的代码文件,自然要使用官方工具Git,支持Windows、Linux和Mac全平台

Git 的初始化可详见git的安装和配置,环境变量的配置非常重要

Git 的使用可以说是完全的傻瓜式,常用的命令如下:

1
2
3
4
git init //在工作目录初始化新仓库 
git add *.C //向暂存区添加文件
git commit //将暂存区的文件提交到仓库
git clone git://github.com/xxx/xxx.git //下载github代码库

想要直观了解Git项目的工作机制,必须了解三个工作区域的概念:工作目录暂存区域Git 仓库

当我们选择增加(add)或者删除(rm)时,操作对象是暂存区,只有执行 git commit ,才能真正改变远端Git 仓库的状态

其实GetHub不仅可以用于发布项目源码,应该说可以开源一切载体

理财(割韭菜)大佬李笑来会在GitHub上发布自己的新书,例如《自学是门手艺》


使用Hexo博客框架

介绍 Hexo 之前,先要了解 Node.js

Node.js

Node.js 从2009年诞生开始,到现在已有10岁了

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境

Node.js 还是得从 JavaScript 说起,作为运行在客户端的语言, JavaScript 可在浏览器中实现简单的动画、计算

Node.js虽然基于JavaScript,但的的确确是一项服务器技术,可以和Java、PHP、.NET等主流语言一样用于服务器端开发

Node.js 的实质就是用 Javascript 的代码规范通过 C++ 进行了实现和封装

在我个人粗浅的理解中,Node.js 就是借助 C++ 的功能,根据项目需求自动生成不同的 Javascript ,经解释执行,实现不同操作

Node.js 的安装可以概括为不断点击下一步,如果仍有困难可以点击Node.js 安装配置

NPM和CNPM

NPM 是随同 NodeJS 一起安装的包管理工具

如果你略懂一些Ubuntu系统的软件安装,应该非常属于 apt-get 的操作

如同 deb 包管理功能, NPM 就承担了Node.js 包的下载、安装、卸载等功能

1
2
npm install express <Module Name>     # 本地安装
npm install express -g <Module Name> # 全局安装

类比于国内使用 Ubuntu 建议更换软件源, npm 的远程下载速度也非常感人,阿里巴巴发挥了重要作用

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

如果你没有很好用的梯子,就老老实实的切换淘宝源,以后用 CNPM 命令

然后只需要一句简洁漂亮的语句,就可以顺利安装 Hexo

1
cnpm install hexo-cli -g

Hexo博客框架

快速、简洁且高效的博客框架,2012年由Tommy Chen创建

Hexo 的语句异常简单,常用的如下:

1
2
3
4
5
6
7
hexo init blog # 初始化创建blog
cd blog # 切换到blog目录
hexo generate # 生成静态博客文件
hexo clean # 清理生成的文件
hexo server # 启动本地服务器
hexo deploy # 将博客部署到GitHub
hexo new "文章名" # 创建新文章

是的,就是上面7条语句,就可以快速上手 Hexo 的所有操作

\blog\source_posts 目录,就可以编辑 *.md 格式的文章

如果你是一个着急上手的急性子,代码羊的手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo非常适合你

NexT主题

我选择 NexT 主题,纯碎是因为它有较为成熟的中文文档

NexT 主题也发布在 GitHub 网站,只需要在博客目录处执行简单的下载语句

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

搭配上一个简单的操作:

  • 编辑站点配置文件(\blog_config.yml),更改如下
    1
    theme: next

执行 hexo cleanhexo generate ,你的博客就获得了 NexT 主题

后续对主题信息的补充修改,全部依托于一个关键文件

  • 主题配置文件(\blog\themes\NexT_config.yml

你可以快速的在官方文档上看到所有你关心信息的配置方法

也可以继续轻松看视频[馨客栈分享]使用Hexo博客搭建的个人博客,使用Next主题来进行优化改造

最后

强烈推荐 Hexo 博客的专属编辑器 HexoEditor

非常好用!谁用谁知道!

文章作者: 西门吹风
文章链接: http://blog.fight365.cn/2019/10/14/如何用github+hexo+NexT搭建博客/
版权声明: 本博客所有文字除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 我的足迹 | 铁匠铺
本博客所有图片除特别声明外,均引用网络链接,如侵犯您的权益,请留言声明,我们将在第一时间删除

评论