使用Hexo和Github快速搭建个人博客

前言

这篇文章为纯新手向,主要内容利用github平台快速建立并托管个人Hexo的Next网站,无论文科生和理科生,都能在一个小时左右完成部署,平台为windows。

为阅读本文章,你需要同时阅读:
Hexo官方文档
Next主题官方文档
Markdown语法参考

Hexo + Github模式优点

  • 节省购置服务器的费用
  • 快速搭建,快速部署
  • 学习成本低,学习价值高

    主要步骤

    一. 建立github仓库
    二. 建立本地Hexo博客
    三. 配置本地Hexo博客
    四. 连接本地Hexo与gitpages

开始搭建吧!

建立github仓库

开始之前确保已注册github帐号并下载gitbash。
如果还没有,请参考:极客学院github初识教程完成注册和下载。

点击创建仓库

github1

如图输入仓库名,其中方框部分应与github用户名一致

github2

强调:红色方框中的输入内容应为用户名,否则无法托管。

建立本地Hexo博客

请先自主阅读Hexo官方文档-概述,若按照官方文档已完成安装,可以跳过该步骤。

  1. 安装Node.js
    Node.js官网下载并安装Node.js环境,推荐LTS(Long-Term-Support)版本。

  2. 本地下载Hexo
    首先选择你要配置本地博客的目录,右击选择 Git Bash Here
    gitbahs
    从而进入如图gitbash环境
    gitbash2
    注意:明白这一步直很重要,之后所有命令都是在gitbash中完成!

  3. 安装hexo
    gitbash输入:npm install -g hexo-cli会开始安装Hexo,安装完成后会有如图所示目录文件。

各目录的作用请参考:Hexo官方文档-建站

配置本地Hexo博客

请先自主阅读Hexo官方文档-配置NexT官网文档-开始使用,若按照官方文档已完成部署,可以跳过该步骤。

  1. 下载并部署NexT主题
    前往NexT版本发布页面下载官方Source code.zip并解压,将解压后的文件名修改为next后置于你本地博客目录的themes文件夹。

  2. 本地预览
    在博客目录下的gitbash中输入
    hexo clean
    hexo g
    完成初始化,之后使用命令
    hexo s
    完成本地部署。
    本地部署后可,通过访问localhost:4000从而访问本地博客。至此,你已经可以看到你的博客首页了。
    预览

  1. 区别本地配置和主题配置
    两个配置文件均为_config.yml,但有本质区别,之后配置需注意不要混淆。
    本地配置:位于 本地博客根目录下_config.yml
    主题配置:位于 本地博客目录/themes/主题目录(如next)下的_config.yml

  2. 配置本地配置
    打开本地配置的_config.yml,找到如图Themes字段:
    theme
    将字段修改为theme: next从而应用布置好的NexT主题
    同样可以找到如图字段:
    site
    将language字段修改为language: zh-Hans即可应用主题为中文版,在其他字段中可以直接修改个人博客的标题、子标题、描述等信息。

  1. 配置主题配置
    打开主题配置中的_config.yml可以看到主题配置内容,此步骤只强调几个终点配置。

    • 配置菜单
      找到如图menu配置,修改menu中的字段对应博客主页菜单的变化
      menu
    • 配置NexT主题
      找到如图Schemes配置,修改scheme字段可以修改NexT子主题
      scheme

    • 配置博客头像
      在配置文件任意独立行输入avatar: /images/avatar.png,之后在本地博客目录下source文件夹下新建文件夹images,选择自己喜欢的博客头像改为avatar.png同名文件放置在该目录下即可。

    • 配置favicon图标
      所谓favicon如图,可以想images文件夹下添加名为favicon.ico的图标文件修改。

连接本地Hexo和gitpages

  1. 配置与Github Pages关联
    打开本地配置的_config.yml,找到如图deploy字段:
    deploy并如图配置,其中红框为你的github帐号,白框为github密码,灰框(最右)为你建立的仓库地址。

  2. 部署github托管
    很简单,本地博客目录打开gitbash,输入hexo d即完成在线部署。
    至此,你的个人博客线上部署已经完成!

接下来还有什么呢?

你接下来可能涉及到的问题可能会有:

如何让个人网站绑定个人域名?
如何利用markdown编写个人博客?
如何加入第三方样式和js文件?
……

这篇文章中我不做拓展。
但是!之后如果有时间,我会再写一份进阶版,大家可以先行Google/Baidu寻找解决方案。
如果有其它问题,可以通过留言或者直接联系QQ的方向和我讨论。