基于 Hexo + GitHub Pages 搭建个人博客（一）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言：我的博客写作之路

15 年刚上大学，第一次接触公众号，就萌生了创建一个公众号写点东西，但最终不了了之。
很快到了 16 年，开始接触网上各大博客网站，接触最多的当属 CSDN，萌生了注册一个博客，写一点自己在学习上遇到的问题，分享一些自己的解决办法，但最终还是不了了之。
16 年暑假，自媒体横行在全国各地，自己眼里似乎看到很多机会有似乎异常模糊。一个偶然的机会让我意识到必须开始弄个博客写点东西了，当时的想法是，先注册个头条号，16年下半年开学再弄博客写东西，这种事情不着急，时间一天天过，但这两件事最终都没做，不了了之。
时间一分一秒地到了17年，上半年这种注册博客，写博客的心态依然萦绕耳边，但并没有什么实际行动。
终于到了17年6月份左右，去了一个地方回来后，我手忙脚乱，立刻在网上的平台注册了一个博客，而后开始写自己学习上的东西。而后有急忙地注册了一个微信公众号，第一次开始使用键盘记录自己的学生和生活，而我拖延了2年半的博客与写作之路，也就从此开始。
网上的某博客平台广告很多，开始时我无从适应，不知道如何排版，加之打字速度与龟速相差不大，夸张点说就是，写一篇几百字的文章要一两个小时，开不知道自己写了什么东西，但也第一次知道了写作的收获如此之大，具体可以说上个三天三夜，这里略。
慢慢地开始有了搭建一个属于自己的个人博客，于是急功近利，浅藏辄止各种编程语言，最终无功而返，一事无成。
带着那门基础不扎实的 Java 语言，开始学习框架，搭建博客，尽管各种异常报错，乱码问题，还有点想放弃，却又不甘，因此目前也还在学习。
慢慢开始了 WordPress ，cnblogs ，简书，掘金等五花八门的信息筛选之中，最终还是选择了搭建一个 Hexo + GitHub Pages 的博客框架。

基于 Hexo + GitHub Page 搭建个人博客

一、搭建前准备

1、安装 Git：Git 是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。

（1）下载 Git：官网下载地址（各大系统版本都有 Git，这里以 Windows 版本为例）

（2）双击下载的 Git 安装包开始安装

（3）一直点 Next，继续安装

（4）点击 Install ，完成安装

（5）打开 cmd 命令窗口，执行以下命令，结果显示 Git 版本，安装成功

git --version

（6）、推荐两个学习 Git 的网站：

官方文档：点击这里前往
廖雪峰网站教程：点击这里前往

2、安装 Node.js：是一个基于 Chrome V8 引擎的 JavaScript 运行环境，轻量高效，Node.js 的包管理器 npm 是全球最大的开源库生态系统。

（1）下载 Node.js：官网下载地址（各大系统版本都有，这里以 Windows 为例）

（2）双击下载的 Node.js 安装包开始安装

（3）一直点 Next ，选择安装路径，继续安装

（4）点击 Install ，完成安装

（5）打开 cmd 命令窗口，执行以下命令，显示 Node.js 版本，安装成功

node -v

二、搭建 Hexo 博客

1、安装 Hexo，在电脑中新建一个 compassblog 文件夹存放自己的博客，在文件夹内右键点击 Git Bash 进入命令窗口，执行以下代码：

npm install -g hexo-cli

结果如下图：

2、初始化 Hexo，得到 hexo 文件夹，用于存放 Hexo 博客所有的文件，包括下面会讲到的主题文件，Git Bash 窗口执行以下代码：（无特别提示，以下代码基本都在 Git Bash 命令窗口执行）

hexo init hexo

结果如下图：

3、配置 Hexo，进入 hexo 文件夹安装依赖，部署形成的文件，分别执行以下代码：

cd hexo npm install hexo generate

结果如下图：

4、启动服务器：执行以下代码，可以看到服务器端口号是 4000

hexo server

结果如下图：按 Ctrl + C 可以停止服务器

5、打开浏览器，地址栏输入http://localhost:4000/ ，结果如下图，可以看到，初始化的 Hexo 博客搭建成功，可以访问

三、将初始化的 Hexo 博客部署到 GitHub Pages

1、注册一个 Github 帐号，新建一个仓库，仓库名为：compassblog.github.io ，如下图所示：（由于我的仓库已经创建，所以会显示仓库已经存在，并且这个仓库的名称必须严格按照 username.github.io 的格式来命名）

2、进入已经建好的仓库，点击 settings ，找到 GitHub Pages 选项，点击 Choose a theme 选择一个主题，然后点击 select theme 选择主题，如下图所示：（到这一步其实已经可以在地址栏访问自己选择的主题了，选择主题这一步其实可以忽略，但我觉得 GitHub 提供的主题还是蛮酷的，所以就附上这一步吧）