GitHub Pages + Hexo 个人网页搭建过程

前言

首先不用购买服务器，小白可以搭建，只需要按照步骤配置，炒鸡简单。

• 了解GitHub pages 和 Hexo

换个角度讲：

我们通过github pages 搭建我们的主页服务，然后通过hexo挑一个博客框架嵌套进去。这样就完成了我们的个人主页。

• 我的博客：https://gitkyne.com

整个过程分三部分：

1. 启动GitHub pages的个人主页服务；
2. 配置Hexo；
3. github pages 和 Hexo 合二为一

一、启动GitHub pages的个人主页服务

1. 注册GitHub账号
   • 地址：https://github.com/
   • 看好自己的useranme
2. 开启GitHub pages服务
   • 新建仓库（create a new repository）
     仓库名字要注意：username.github.io
     image
   • 在仓库下的setting中找到GitHub Pages部分 Choose a theme 选择一个主题样式
     image
     image
   • 保存之后即完成 打开: https://KyneMaster.github.io （username.github.io）

二、配置Hexo

• 这一部分需要先配置两个环境： node.js 、 Git
• 不同操作系统不同安装方法，自行查阅网上教程

1. 安装node.js

   安装成功测试 终端输入node -v 输出版本及安装成功

2. 安装git

   安装成功测试 终端输入git version 输出版本及安装成功

3. 安装hexo

   npm install hexo-cli -g
   hexo init blog(生成的博客文件夹的名字，自定义,会自动在对应执行该语句的路径生成对应的文件)
   cd blog
   npm install
   

   新建完成后，指定文件夹的目录如下：

   .
   ├── _config.yml
   ├── package.json
   ├── scaffolds
   ├── source
   |   ├── _drafts
   |   └── _posts
   └── themes
   
   

   安装成功测试 终端输入hexo -v 输出版本及安装成功

4. 运行hexo

   hexo g (编译)
   hexo s（启动服务）
   

   然后会提示你打开 http://localhost:4000 如下：
   

   image
   到这里基本hexo已经配置完毕

5. 配置主题

   那么接下来就是更换主题。地址：https://hexo.io/themes/

   点击喜欢的主题名，跳转到GitHub代码，下载或者克隆代码。完成之后，找到刚才hexo安装完成文件目录中的themes文件夹，将主题文件粘贴到此处。

   此处注意两个配置文件，一个是hexo安装完成的目录中的_config.yml和下载主题中的_config.yml.

   在hexo的_config.yml找到themes，将后面代码改成下载主题的名称。

   然后编译启动，可以本地localhost:4000查看此主题。

   到此完成该部分。

三、合二为一

那么最后一步就是将GitHub的线上主页同我们下载配置的hexo博客主题合二为一。

• 找到hexo中的配置文件_config.yml ——> 打开 ——> 找到Deployment部分

  deploy:
      type: git
      repository: https://github.com/KyneMaster/KyneMaster.github.io.git (此链接改为自己的)
      branch: master
  

  然后执行：

  hexo clean （清除掉编译出来的public文件）
  hexo g     （编译）
  hexo d     （部署到GitHub）
  

  稍等片刻，打开线上username.github.io，即可见证奇迹。

PS.

1. _config.yml配置文件包含导航拦、链接、头像等各种配置，方便自定义。

2. 点击我的kynemaster.github.io可以发现，我跳转到了 gitkyne.com。这里我购买了域名。

   • 你可以在阿里云https://wanwang.aliyun.com/domain/searchresult#/?keyword=&suffix=com 购买域名，可以先查阅相关攻略

   • 购买完成之后需要进行解析

     
     image
     image

   • 然后在GitHub setting那找到GitHub pages

     
     image
   • save 完成

3. 写文章

   文章地址：
   

   image
   也可以通过cmd命令创建hexo new demo.md
   上传同样进行三步走

   hexo clean （清除掉编译出来的public文件）
   hexo g     （编译）
   hexo d     （部署到GitHub）
   

4. 部署次数多了你会发现，每次都需要调整域名
   在上图source文件下新建CNAME文件，文件内容为你的域名，这样每次不会被重置

   
   image