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

635 阅读3分钟

前言

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

换个角度讲:

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

整个过程分三部分:

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

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

  1. 注册GitHub账号
  2. 开启GitHub pages服务
    • 新建仓库(create a new repository) 仓库名字要注意:username.github.io
    • 在仓库下的setting中找到GitHub Pages部分 Choose a theme 选择一个主题样式
    • 保存之后即完成 打开: KyneMaster.github.io (username.github.io)

二、配置Hexo

  • 这一部分需要先配置两个环境: node.jsGit
  • 不同操作系统不同安装方法,自行查阅网上教程
  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 如下:

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

  5. 配置主题

    那么接下来就是更换主题。地址: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 购买域名,可以先查阅相关攻略
    • 购买完成之后需要进行解析
    • 然后在GitHub setting那找到GitHub pages
    • save 完成
  3. 写文章

    文章地址:

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

    hexo clean (清除掉编译出来的public文件)
    hexo g     (编译)
    hexo d     (部署到GitHub)
    
  4. 部署次数多了你会发现,每次都需要调整域名 在上图source文件下新建CNAME文件,文件内容为你的域名,这样每次不会被重置