基于 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 的网站：

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

二、安装 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
复制代码

2、搭建 Hexo 博客

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

npm install -g hexo-cli
复制代码

结果以下图： ​

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

hexo init hexo
复制代码

结果以下图： ​

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

cd hexo
npm install
hexo generate
复制代码

结果以下图： ​

四、启动服务器：执行如下代码，能够看到服务器端口号是 4000

hexo server
复制代码

结果以下图：按 Ctrl + C 能够中止服务器

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

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

一、注册一个 Github 账号，新建一个仓库，仓库名为：compassblog.github.io ，以下图所示：（因为个人仓库已经建立，因此会显示仓库已经存在，而且这个仓库的名称必须严格按照 username.github.io 的格式来命名）

二、进入已经建好的仓库，点击 settings ，找到 GitHub Pages 选项，点击 Choose a theme 选择一个主题，而后点击 select theme 选择主题，以下图所示：（到这一步其实已经能够在地址栏访问本身选择的主题了，选择主题这一步其实能够忽略，但我以为 GitHub 提供的主题仍是蛮酷的，因此就附上这一步吧）

三、配置 Git 我的信息：在 compassblog 目录打开一个 Git Bash 窗口，输入下面的命令

git config --global user.name " GitHub 用户名 "
git config --global user.email " GitHub 邮箱 "
复制代码

如个人是以下图这样输入：

四、生成 SSH KEY，其实就是生成一个公钥和密钥，由于 GitHub 须要一个密钥才能与本地相链接。执行如下命令，并连续按 3 次回车生成密钥：

ssh-keygen -t rsa -C " 邮箱地址 "
复制代码

我电脑是以下图这样：

五、SSH KEY 生成以后会默认保存在 C:/Users/电脑名用户名/.ssh 目录中，打开这个目录，打开 id_rsa.pub 文件，复制所有内容，即复制密钥。

六、打开 GitHub ，依次点击 头像-->Settings-->SSH and GPG keys-->New SSH key，将复制的密钥粘贴到 key 输入框，最后点击 Add Key ，SSH KEY 配置成功，以下图所示：

七、修改 hexo 文件夹下的 _config.yml 全局配置文件，修改 deploy 属性代码，将本地 hexo 项目托管到 GitHub 上，以下图所示：

deploy:
  type: git		#部署的类型
  repository: git@github.com:compassblog/compassblog.github.io.git # 仓库地址
  branch: master		#分支名称
  message: hexo deploy	#提交信息
复制代码

八、执行下面的命令，安装 hexo-deployer-git 插件，快速把代码托管到 GitHub 上

npm install hexo-deployer-git --sava
复制代码

结果如图所示：

九、执行下面的代码命令，将 hexo 项目托管到 GitHub 上

hexo clean && hexo generate && hexo deploy
复制代码

注：hexo generate 可缩写为 hexo g ， hexo deploy 可缩写为 hexo d

结果如图所示：

十、浏览器地址栏输入 https://username.github.io/ 访问，能够看到博客已经部署到 GitHub 上，正常访问，以下图所示：

最后写几句

我原本想一次把这个基于 Hexo + GitHub Pages 搭建我的博客流程发布在一篇文章上面发布出来的，但实在是太长了，很难一篇文章写完。关于博客如何更换主题，如何进行个性更换，具体的配置等等不少的配置，后面找时间再持续的发布出来，欢迎关注，Thanks 。

扫描二维码关注微信公众号，了解更多