使用GitHub Pages+Hexo 搭建个人网站详细教程

@[toc]

-GitHub Pages和Hexo的介绍

• GitHub ：GitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub
• GitHub Pages ：是用来托管 GitHub 上静态网页的免费站点
• Hexo : Hexo 是一个简单、快速、强大的静态博客框架

-安装Node.js

Node.js官网 点击自己需要的版本默认安装即可

在这里插入图片描述

-安装Git

Git 官网 点击自己需要的版本默认安装即可

在这里插入图片描述

-验证是否安装成功

-点击Git Bash

在这里插入图片描述

打开之后出现下图的情况，说明安装成功

在这里插入图片描述

-点击鼠标右键

出现红框里的东西，就说明已经安装成功

在这里插入图片描述

-安装Hexo

• Hexo就是我们的个人博客网站的框架， 这里需要自己在某个磁盘里创建一个文件夹，Hexo框架和以后你自己发布的网页都在这个文件夹中

我在E盘里创建了一个文件夹

在这里插入图片描述

• 在该文件夹下右键鼠标，点击 Git Bash Here，输入npm 命令即可安装
• 第一个命令表示安装 hexo，第二个命令表示安装 hexo 部署到 git page 的 deployer

$ npm install hexo-cli -g  
$ npm install hexo-deployer-git --save  

如图所示即为安装成功（安装比较慢，请耐心等待）

在这里插入图片描述

-Hexo 初始化配置

在刚才新建的文件夹里，再建一个文件夹Hexo，然后打开该文件夹，并打开Git Bash Here，输入下面的命令

$ hexo init

如图所示即安装成功

在这里插入图片描述

-查看网站初始效果

执行以下命令

$ hexo generate  
$ hexo server

如图所示即成功

在这里插入图片描述

然后登录 http://localhost:4000/ 查看效果：

在这里插入图片描述

- 将博客部署到 Github Pages 上

现在我们只能在本地连接里看到自己的博客网站，所以以下的操作是让其他人能够访问我们的网站

-注册git

点击git官网进行注册

在这里插入图片描述

-创建 repository

在这里插入图片描述

点击新建

在这里插入图片描述

按下面的图片进行操作

在这里插入图片描述

-配置GitHub账户信息

打开Git Bash 输入以下命令

 $ git config --global user.name "你的用户名"  
 $ git config --global user.email  "你的邮箱"

在这里插入图片描述

-配置SSH密钥

只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面点击Git Bash Here 输入以下命令：

$ ssh-keygen -t rsa -C "你的邮箱"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

• 这里的邮箱地址，输入注册 Github 的邮箱地址
• -C的是大写的C

然后系统会要你输入密码：

Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容（其实没有必要设置密码）

注意：输入密码的时候没有输入痕迹的，不要以为什么也没有输入。

最后看到这样的界面，就成功设置ssh key了：

在这里插入图片描述

-在 GitHub 账户中添加你的公钥

运行下面的命令，将公钥的内容复制到系统粘贴板上

$ clip < ~/.ssh/id_rsa.pub

打开GitHub

在这里插入图片描述

在这里插入图片描述

把$ clip < ~/.ssh/id_rsa.pub这个命令，在系统粘贴板上的内容粘贴上去就可以了

在这里插入图片描述

最后出现下面的画面

在这里插入图片描述

-测试

输入下面的命令（千万不要改动下面的命令，按照此模式直接输入就好了）

$ ssh -T [email protected]

输入命令后和下面一样，直接在后面输入yes即可

在这里插入图片描述

最后会出现如下情况即说明设置正确

在这里插入图片描述

到现在为止 SSH Key 配置成功，本机已成功连接到 Github！！！

-将本地的 Hexo 文件更新到 Github 的库中

• 登录GitHub打开项目

在这里插入图片描述

• 打开你创建的 Hexo 文件夹打开该文件夹下的 _config.yml 文件，用记事本打开就可以

找到下图所示的位置，并按照图片进行修改

在这里插入图片描述

• 在 Hexo 文件夹下分别执行以下命令

$ npm install hexo-deployer-git --save
 
 #该操作是安装deployer ，这样你才能将写好的文章部署到github上让别人浏览到

之后输入

$ hexo g -d

最后出现下图情况，说明博客部署到 Github 上了

在这里插入图片描述

• 访问博客

你的博客地址：https://你的用户名.github.io，比如我的是：https://aixiaorui.github.io ,现在每个人都可以通过此链接访问你的博客了

- 编写文章并发布到博客上

• 在Hexo目录下，带你家右键打开Git Bash，输入下面的命令，会创建一个后缀名为.md的文档

$ hexo n "文章标题"

• 也可以直接在 \Hexo\source_posts 目录下右键鼠标新建文本文档，改后缀为 .md 即可

只不过我们用第一种方法它会自动生成如下的内容

$ hexo n "my first blog"

在这里插入图片描述

一般完整格式如下：

在这里插入图片描述

当文章写好之后，在Hexo目录下输入下面的命令发表到博客上：

$ hexo d -g

- 更换Hexo的主题

打开这个链接进入到Hexo的官网更换主题

我使用的是下面框起来的主题

在这里插入图片描述

点开之后滑到网页的最下面，点击矩形框内的链接

在这里插入图片描述

找到图内的位置，按它的步骤操作即可（注意要在themes目录下，输入命令）

在这里插入图片描述

下载完成后在themes目录下会又出现一个themes文件夹，此文件夹里面就是我们下载的主题

在这里插入图片描述

themes文件夹里面的文件

在这里插入图片描述

我们先把material-x文件移出来，然后把themes文件夹删除

按照下面的图片打开文档

在这里插入图片描述

把主题改成我们下载的主题

在这里插入图片描述

返回 Hexo 目录，右键 Git Bash ，输入以下命令开始部署主题：

$ hexo g   
$ hexo s

此时访问 http://localhost:4000/ 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到Github上了

打开 Hexo 文件夹，右键 Git Bash，输入以下命令：

 $ hexo clean  
 //该命令的作用是清除缓存，若不输入此命令，服务器有可能更新不了主题
 $ hexo g -d

这样我们的主题就更换完毕了