Github+hexo博客搭建教程

​

本次我会逐步演示如何在Github上搭建自己的静态博客，先看看我之前已经搭建好的博客效果：https://pidandoufu.github.io/，比如博客的风格，我自己比较喜欢Next主题的风格，Github上的项目地址是：https://github.com/iissnan/hexo-theme-next ，大家也可以根据自己喜欢的风格自行选择！

工具

Git工具

这个不用说，提交代码必备，直接使用它的命令行工具就很OK，说到命令行大家也不用担心，常用的就那么几个，Git的下载地址：https://git-scm.com/download/win 安装过程很简单在此不赘述，安装完成后鼠标右键菜单就会多出两个选项：Git GUI Here 、Git Bash Here，其中Git Bash Here就可以在当前目录下打开Git的命令行！

Node.js

Node.js是一个Javascript运行环境,是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。hexo正是需要这个环境，所以安装安装Node.js是必不可少的，下载链接：http://nodejs.cn/download/ 安装过程也是非常简单，不在赘述！

上述工具安装完成后，打开Windows的命令行，分别输入3个命令看看是否安装完成:
node -v 、npm -v 、git –version 出现版本号即说明安装完成！

Hexo

Hexo简介

hexo是个什么东西呢？总的来说就是把你的markdown文件转化为HTML静态页面的一种东西，浏览器是不会直接解析markdown文件的，所以我们需要把自己写的markdown文件先转化为HTML静态页面才能被浏览器解析，这个过程就需要Hexo来帮我们完成。更多内容请参考：http://coderunthings.com/2017/08/20/howhexoworks/ 这篇文章说的很详细！

安装过程

首先我们将本地的博客push到远程仓库中，本地博客得先有个存放位置，于是我们现在本地新建一个文件夹，名称随意(但是最好不要带中文和空格，对于一个程序员来讲，路径中包含中文或者空格简直是血的教训…)，我就在A盘下新建一个名称为hexo的文件夹

然后进入到刚刚新建的文件夹，右键Git Bash Here，输入npm install hexo -g，开始安装Hexo,安装完成后输入 hexo -v 查看版本，出现如图所示信息即使安装成功

完成上一步操作之后，我们需要初始化这个文件夹，输入hexo init 即可初始化该文件夹,可以看到初始化之后中文件夹中多出来了如此多的内容！

接着我们需要安装一些组件，输入命令npm install

忙活了这么一大堆，现在该生成HTML静态资源文件了，输入命令hexo g完成页面的生成
我们先在本地看看效果吧，输入hexo s开始服务器，地址是http://localhost:4000/ ,然后打开浏览器就会出现我们的页面：

出现上面的页面就意味着我们成功了一半！

Github博客仓库的建立

申请一个Github账号

https://github.com/github 打开网址申请账户

正式建立博客仓库

注意仓库名称一定是你的Github用户名.github.io才是可以的

我的用户名是pidandoufu，仓库名称就是pidandoufu.github.io

此时在浏览器输入https://pidandoufu.github.io/，应该就会看到你的Github主页。

关联Github远程和本地仓库

Git个人信息

还是在博客根目录打开Git Bash Here

• 设置Github的用户名和email:

git config --global user.name "Github用户名"
git config --global user.email "注册Github使用的邮箱"

• 生成ssh密钥

  ssh-keygen -t rsa -C "注册Github使用的邮箱"

找到刚才生成的ssh密匙文件，复制其中的全部内容

从Github页面右上角的用户头像中进入设置页面

点击左侧设置栏中的SSH and GPG keys 对SSH进行设置

Title随便填写，Key中粘贴刚才复制的密钥，然后点击Add SSH

会让你再次输入一遍Github的密码

配置Deploy

在博客根目录下找到_config.yml文件中，找到deploy，修改为

deploy:
  type: git
  repo: git@github.com:JoeyJoestar/JoeyJoestar.github.io.git
  branch: master

开始部署

当上述操作都完成之后，输入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github远程仓库，如果无法找到：

这个时候我们需要输入：

npm install --save hexo-deployer-git

出现上图则说明安装成功，接着我们就可以直接使用命令hexo d部署了，首次使用ssh密匙的时候，需要我们输入一个yes确认一下

接下来，看看我们部署的效果：https://你的Github用户名.github.io 由于我们还未安装自己的主题，所以看到的是hexo的默认主题，效果如下，如果暂时无法部署远程仓库的话就只能在本地使用hexo s开启服务器，然后访问http://localhost:4000/ 来查看效果!

安装主题

下载主题

这个主题大家可以自由选择，Github上的项目地址是：https://github.com/iissnan/hexo-theme-next ，大家也可以根据自己喜欢的风格自行选择！，选择Clone or download下载zip包即可，解压之后会获得一个叫做hexo-theme-next-master的文件夹，我们直接将文件夹重命名为next即可，然后将next文件夹copy到我们的博客根目录下

修改配置文件

博客根目录下，有一个_config.yml文件，修改其中的属性theme: next,注意”:”后面有一个空格，修改之后保存！

重新生成资源

使用命令 hexo g 生成静态资源，主要是指html文件

重新部署

使用命令 hexo d 重新部署到远程仓库，当然如果只是测试效果的话暂时其实没必要立马就部署到仓库，我们只需要 hexo s 开启本地服务器，然后访问http://localhost:4000/ 即可，然后就可以访问到修改过主题之后的效果

本地仓库配置文件与主题配置文件

本次仓库配置文件

博客根目录下，有一个_config.yml文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

#博客名称
title: pidandoufu
#副标题
subtitle: 
#简介
description: 
#博客作者
author: pidandpifu
#博客语言
language: zh-Hans
#时区
timezone: Asia/Shanghai

# URL
## 如果你的网站被放置在一个子目录中，将URL设置为“HTTP://YouSIT.COM/CHED”，并将根设置为“/CHOR/\”。
url: https://pidandoufu.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 日期时间格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss


# 分页，每页文章数量
per_page: 10
pagination_dir: page


# 主题配置
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:LiLiLiLaLa/LiLiLiLaLa.github.io.git
  branch: master

主题配置文件

 要显示的菜单：主页、关于、标签、分类、归档、日程、站内地图、公益404
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  # Schemes(选个自己喜欢的就行)
  #scheme: Muse
  scheme: Mist
  #scheme: Pisces
  #scheme: Gemini

额外说明

当上述步骤都完成之后，每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源，然后就可以在本地开启服务器进行预览

之后我们点击分别点击一下关于、标签、分类、日程，除了首页可以点击之外，其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等，这是由于我们没有在本地建立相关的静态文件导致的

还是在博客根目录下Git Bahs Here打开命令行，缺什么就新建什么，比如要新建关于、标签、分类、日程的页面

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

于是博客根目录下的source文件夹下就出现了about、tags、categories等文件夹，里分别有对应index.md文件

---