创建自己的github pages-hexo博客

羡慕身边大神都有个炫酷的博客，所以花时间建立自己的博客。得益于网络教程，发现原来并不难。以下是这一过程的记录，顺便学习下markdown，积累更多的知识，并享受分享带来的连锁反应。

为什么要建立这个博客

为什么选择GitHub Pages

域名是github的二级域名，不用给空间付费，不用给域名付费
流行又简洁的MarkDown写作语法
支持本地编写、本地预览
seo优化上，github在google上权重高

准备步骤

安装node.js
安装git
注册github

配置SSH keys

生成SSH Keys

建立博客之前要先用SSH keys让我们的本地git项目与远程的github建立联系。
首先我们需要检查你电脑上现有的ssh key。右键打开Git Bash，输入：
（如果提示：No such file or directory 说明你是第一次使用git。）

1	$ cd ~/.ssh

生成新的SSH Key
（此处的邮箱地址请输入你自己的邮箱地址，与GitHub保持一致）

1	$ ssh-keygen -t rsa -C "邮件地址@youremail.com"

然后回车

然后系统会要你输入密码。这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。
（输入密码的时候没有*字样的，你直接输入就可以了）

1 2	Enter passphrase (empty for no passphrase):<输入加密串> Enter same passphrase again:<再次输入加密串>

看到这样的界面就成功设置ssh key了。

注意：如果你使用的是mac，需要在命令前加上sudo，详细可以看这篇文章Hexo部署时提示Fatal： Could not read from remote repository的问题处理

将SSH Key添加到Github上

打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件（注意id_rsa.pub文件名是在生产SSH是设置）。路径也有可能是C:\Users\Administrator.ssh，你可以直接在C盘中查找id_rsa.pub文件。此文件里面内容为刚才生成的密钥。如果看不到这个文件，你需要设置显示隐藏文件。打开，准确的复制这个文件的内容。
登陆github系统。点击右上角的图像—>Settings —> SSH and GPG keys。
点击右上角New SSH key，把你刚刚复制的本地生成的密钥文件内容黏贴到里面（Key文本框中），点击Add SSH key就ok了

测试一下

可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

1	$ ssh -T git@github.com

然后输入yes
然后就会看到

1	Hi Eline302! You've successfully authenticated, but GitHub does not provide shell access.

设置用户信息

现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。

1 2	$ git config --global user.name "Eline302"//用户名 $ git config --global user.email "may.air@qq.com"//填写自己的邮箱

完成以上步骤后本机就已成功连接到github

开始建立博客

与GitHub建立好链接之后，就可以方便的使用它提供的Pages服务，GitHub Pages分两种，一种是你的GitHub用户名建立的username.github.io这样的用户&组织页（站），另一种是依附项目的pages。
想建立个人博客是用的第一种，形如Eline302.github.io这样的可访问的站，每个用户名下面只能建立一个。

Github上建立仓库

建立一个GitHub账户
搭建博客

首先，我们需要新建一个Repositories,Repository就相当于一个库，存放我们的项目文件，然后给自己的Repository取一个名字，注意！Github Pages的Repository名字是特定的，比如我Github账号是Eline302，那么我Github Pages Repository名字就是Eline302.github.io。

然后点击create repository.

随后跳转到该库界面,由于我是搭建好的，所以会有项目文件，然后选择Settings

进入settings后，往下拉，找到GitHub pages设置界面

按如图所示选择，注意，选择source之后记得Save，然后点击Choose a theme选择一个博客主题。

然后点击Select theme到这一步呢，正常来说你就可以看到自己的博客了。在地址栏输入：https://Eline302.github.io你就可以访问页面了。

安装Hexo

Hexo是一个简单、快速、强大的博客发布工具，支持Markdown格式。
打开Git Bash

1	$ npm install -g hexo

安装完毕后，在我的电脑某个位置中建立一个名字叫hexo的文件夹，然后在此文件夹中右键打开Git Bash。

1	$ hexo init

Hexo随后会自动在目标文件夹建立网站所需要的所有文件,如下图所示：

现在我们已经搭建起本地的hexo博客了。
在hexo目录下输入

1 2	$ hexo g $ hexo s

然后到浏览器输入localhost:4000看看，可以看到默认主题下的博客，这就实现了本地预览了。

更换主题

打开终端窗口，输入一下命令，将目录切换到Hexo文件夹内的themes文件夹内

cd themes

通过git clone克隆主题，这里用的是next主题

1	$ git clone https://github.com/iissnan/hexo-theme-next.git

更多主题可以参考有哪些好看的 Hexo 主题? - GitHub - 知乎

每次更换主题前清空一下database

1
2
3

$ hexo clean
$ hexo g
$ hexo s

打开终端窗口，输入一下命令，将目录切换到Hexo文件夹内的themes文件夹内

启用主题

1	theme: hexo-theme-next

修改hexo目录下的config.yml配置文件中的theme属性，将其设置为hexo-theme-next。
（注意：Hexo有两个config.yml文件，一个在根目录（站点配置文件），一个在theme（主题配置文件）下，此时修改的是在根目录下的。）

更新主题

1 2	$ cd themes/hexo-theme-next $ git pull

然后可以本地预览一下

1 2	$ hexo g #generate生成 $ hexo s #server测试环境，启动本地服务，进行文章预览调试

上传到Github仓库

打开hexo目录下的_config.yml，拉到最下面
配置为这样子,只需要把Eline302改为你自己的github用户名就可以了。（注意格式，冒号后要有空格，你可以直接复制以下代码再作修改）

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Eline302/Eline302.github.io.git
  branch: master

然后执行命令

1 2	$ hexo g #generate生成 $ hexo d #deploy开发环境

如果看到结果最后一行是INFO Deploy done:git则没有问题。否则，则可以把上面的配置改为下面这种使用SSH方式的提交，把用户名改为你自己的用户名

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:Eline302/Eline302.github.io.git
  branch: master

再次执行命令

1 2	$ hexo g #generate生成 $ hexo d #deploy开发环境

如果在执行 hexo deploy 后,出现 error deployer not found:github 的错误，网上说是hexo 更新到3.0之后的一个坑，则需要安装hexo-deployer-git

1	$ npm install hexo-deployer-git --save

再次执行命令之后，打开https://Eline302.github.io就能看到你建立好的博客了！

Next配置

可以对Next配置自己喜欢的风格

发布文章

创建好自己博客后，就可以发表文章了，那接下来看看具体怎么操作

新建一篇文章

（1）在hexo博客目录下，进入Git Bash命令窗口中，输入以下命令：

1	hexo new "文章名称"

（2）在博客目录下的/source/_posts/ 文件夹下，可以看到生成的.md文件和存放文章图片的文件夹（默认不会生成文件夹，需要进行配置，具体请看在博文中添加图片部分）

（3）在.md文件中编辑自己的博客文章即可

注意：Hexo 发布的文章是Markdown格式的文件，具体参考Markdown基本语法

给文章添加分类和标签

(1) 在.md文件中设置tags和categories属性：

---
title: 文章名称
date: 2020-04-26 15:47:39 
modified: 2020-05-26 15:47:39 //更新时间
categories：  //多个标签可以这样添加,或者数组形式
- 博客
- hexo
tags: web前端
---

## 文章内容部分

需要注意：添加更新时间，需要将them配置文件_config.yml中的updated_at更改为true

1 2	post_meta: updated_at: true

添加“阅读全文”按钮

方法一：只在本文章中有效果，在文章任意你想添加的位置添加即可

1	<!--more-->

方法二：对博客中所以文章都有效果，在主题的配置文件中更改，我使用的主题是hexo-theme-next，在them中找到_config.yml进行修改

其中length代表显示摘要的截取字符长度。
注：这两种方法，在博客首页显示的效果不一样，根据自己的需要，选择自己喜欢的方法

在博文中添加图片

方法一：
(1)在hexo目录下，安装插件：

1	npm install hexo-asset-image --save

(2)在hexo\source 目录下新建一个img文件夹，把图片放置在里面；
(3)在xxx.md文件中引用图片：

1	![header](img/header.jpg)

方法二：建议使用
(1)在全局配置文件hexo/_config.yml中将post_asset_folder设置为true
(2)创建文章（在创建的时候，会在hexo/source/_post目录下，生成一个XXX.md文件和一个XXX的文件夹）
(3)把XXX这个博文需要展示的图片放在XXX文件夹目录下
(4)在XXX.md文件中引入图片的方式如上

启动服务器，本地测试

注意：Hexo 会监视文件变动并自动更新，您无须重启服务器。

1	hexo s //hexo server #启动服务预览

服务器启动成功后，可以看到本地测试连接 http://localhost:4000

打开连接，可以看到自己发表的文章，如下所示

发布到Github上

（1）发表的文章在本地预览无误后，在 Git Bash 命令窗口执行以下命令：

1 2	hexo g //hexo generate #生成静态网页 hexo d //hexo deploy #开始部署

可以合并为

1	hexo g -d //生成并部署

部署到GitHub时，可能因为网速、翻墙等原因，需要多次运行 hexo deploy ；有时候可以运行 hexo clean 后在运行上述代码。

1	hexo clean //清除缓存网页正常情况下可以忽略此条命令

（2）在浏览器中，访问自己的博客域名，即可看到刚发布的文章

参考

# 博客