Hexo+GitHub Pages搭建个人博客

原创 GaoYang [我的技术篇](javascript:void(0);) 5月7日

Hexo+GitHub Pages搭建个人博客

image

前言

不知诸位都开始写博客了没有，不管如何奉劝想要从事这个行业小伙伴一定要坚持住，我感觉技术博客这东西真的是百利而无一害！如果你感觉博客园、CSDN等博客社区不够炫酷、太多限制、广告不断等诸多问题，那么接下来，我将为大家介绍Hexo这款博客框架，教你搭建属于自己的静态博客站点。

介绍Hexo这个博客框架是基于Node.js写的一款博客框架，与其说它是博客框架，不如说他是静态博客生成器，它是将Markdown文件渲染成网页，以实现展示的效果！你可以利用自己所学的HTML、CSS、JavaScript外加一点Node.js知识，就可以对其进行修改，这何尝不是一个练习的机会，如果你不会去修改，Hexo主题也可以满足你的那颗不敢平凡的[图片上传失败...(image-6e3705-1592526113904)]

。

准备

github

image

git

image

node.js

image

Node安装就像安装普通软件一样，在这里我就不再叙述，Git安装使用推荐一个博主的教程：https://blog.csdn.net/u013162035/article/details/78464161

可以通过链接去查看！

一、Git和GitHub配置

安装完成git后，当你单击右键，会出现git bash here这个选项，我们将使用它通过命令来安装和部署博客！

1、GitHub创建个人仓库

首先，你先要有一个GitHub账户，去注册一个吧。注册完登录后，在GitHub.com中看到一个New repository，创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。我这里是已经建过了。在这里就不再创建演示！

image

2、生成SSH添加到GitHub

** 2.1回到你的git bash中**

git config --global user.name "yourname"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

** 2.2可以用以下两条，检查一下你有没有输对**

git config user.name

** 2.3然后创建SSH,一路回车**

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹，一般会在C盘用户文件夹下。

3、去githu仓库配置密钥

** 3.1找到密钥并复制密钥**

image

** 3.2去github绑定密钥**

image

4、开启GitHub Pages

进入你创建的仓库，点击设置

image

然后下拉，找到github Pages将你地址填上就可以了

image

二、开始搭建Hexo

1、安装Hexo

使用npm安装Hexo，输入以下命令：

$ npm install hexo-cli -g

image

2. 创建一个叫blog文件夹

我是在D盘下新建一个blog的文件夹，然后进入blog文件夹，单击右键打开git bash。

$ hexo init

image

3. 初始化blog文件夹（导入博客目录）

$ npm install

image.gif

4. 安装部署使用到的git插件

在这里我们使用的是git源码管理工具，所以，我需要安装git包进行部署，安装这个插件才能使用git进行自动部署。

$ npm install hexo-deployer-git -save

image

5、清理缓存

$ hexo clean

6、进行生成网站

当我们部署网站前，需要先生成静态网站。它会自动在目录下创建public的目录, 并将新生成的网页存放在这个目录里。

$ hexo g或hexo generate

image

7、本地浏览器运行预览

$ hexo server

image

8、在浏览器查看是否成功

浏览器地址栏输入：http://localhost:4000/

image

**9、修改blog文件夹下config.yml **

type: git

image.gif

可以从你的github库中复制仓库repo

image

10、部署github

修改完成后输入以下命令进行部署！

hexo deploy （或 hexo d）

这样就可以啦！[图片上传失败...(image-d8472-1592526113904)]

[图片上传失败...(image-c7de06-1592526113904)]

[图片上传失败...(image-94bd21-1592526113904)]

三、Hexo的目录结构

image

四、主题更改

1、主题下载

网址：https://hexo.io/themes/

image.gif

2、更改主题

下载完成后将主题放入themes文件夹中，然后打开config.yml文件，进行设置.

theme: (这里是填写你主题文件下主题的文件夹名)

image

3、主题配置

进入你的主题文件夹，然后找到你的主题，打开主题文件夹，找到主题config.yml配置文件，进行配置

image

五、创建博文

进入你的博客根目录，鼠标右击，使用git bash here通过命令的形式创建。

hexo new '博文标题'

image

这样在这个目录下就创建了一个.md文件

D:\MyBlog\source\_posts\Hellword.md

你只需要在编写Hellword.md这个文件就可以了

总结

该教程准备仓促，有不足之处欢迎指出，如果在安装过程中遇到问题，尽管打扰！

image

[图片上传失败...(image-4835ae-1592526113906)]

微信扫一扫
关注该公众号