Hexo框架(一):使用Hexo快速搭建个人博客

前言:

本篇设置基于NEXT主题7.7.2版本!!

平时自己也会做很多笔记,把一些学习和开发中的经验心得和踩过的一些坑及解决办法写下来,但是笔记都太多零散,不方便整理成册,而且因为电脑原因还丢失了很多笔记,所以就想写一个博客。

但是之前所使用的一些博客或者记录网站,都不太符合自己的心意,要么广告太多,要么太过繁琐。所以我觉得搭建一个属于自己的博客。

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持Markdown格式,有众多优秀插件和主题。本篇使用Hexo + GitHub Pages 在windows系统快速搭建一个免费个人博客。

前期准备工作

安装Git Bash

安装教程你可以看这里:Git安装教程

安装Node.js

安装教程你可以看这里:Node.js安装教程

配置Github仓库

关于GitHub注册相关这里就不赘述了。

新建仓库

  • 新建一个名为你的用户名.github.io的仓库,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了.

新建仓库

  • 仓库名字必须是:username.github.io,其中username是你的用户名,然后点击Create repository;

    创建仓库

  • 创建成功:

创建完成

配置SSH key

  • 回到GitBash中,配置GitHub账户信息(YourName和YourEail都替换成你自己的):

image-20200318210215347

  • 创建SSH。

    • 在GitBash中输入命令(替换成你GitHub绑定的邮箱),回车三次。

      1
      ssh-keygen -t rsa -C "youremail@example.com"

配置

  • 出现以下界面:

    成功

  • 找到红框中的路径,用记事本打开id_rsa.pub文件,复制里面的内容。

    路径

  • 返回GitHub,打开这个设置:

    设置

  • 选择SSH and GPG keys,然后点击New SSHkey

    新建SSH key

  • 把你复制的记事本的内容填到这里,然后点击Add SSH key:

    image-20200318211835432

  • 检查是否成功:

    在GitBash中输入命令:

    1
    ssh -T git@github.com

    如果提示:

    1
    Are you sure you want to continue connecting (yes/no)?

    输入:yes。

    如果看到这样。说明SSH配置成功!

    配置成功

代码编辑器

我选择使用VSCode,关于代码编辑器相关的东西,这里不再赘述。

使用Hexo搭建博客

安装Hexo

  • 1.创建一个文件夹,我们可以命名为Blog,将这个文件夹在VSCode中打开,并打开VSCode终端。

vscode

  • 2.在终端中输入npm install -g hexo 进行全局安装。

输入

image-20200318213600276

  • 3.初始化项目:在终端中输入hexo init,初始化完成后项目结构如图:

image-20200318214545681

  • 如果文件夹内没有node_modules文件夹,我们需要安装一下依赖,输入命令:npm install 进行安装。

image-20200318214841319

  • 安装完成后,我们可以运行hexo g

image-20200318214932858

  • 然后运行hexo s,即可本地预览博客。

image-20200318215039717

  • 浏览器输入http://localhost:4000/ ,查看效果。出现这个界面,表示成功!

image-20200318215136343

上传到GitHub

  • 首先打开Blog根目录下的_config.yml文件,翻到最后进行如下配置(替换你自己的GitHub名字):
1
2
3
4
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master

image-20200318215528546

  • 在终端执行命令安装一下插件:
1
npm install hexo-deployer-git --save

image-20200318215809920

(我使用了淘宝镜像,所以是cnpm。与npm没有什么区别。)

  • 然后我们依次执行一下这3个命令
    • hexo clean
    • hexo g
    • hexo d
  • 如果在过程中弹出提示要求你输入GitHub的账户和密码,输入即可,最后弹出:

image-20200318220305772

  • 打开浏览器,输入你的地址:https://YourName.github.io/,即可看到效果。至此博客搭建完毕。

image-20200318220503520

结语

使用Hexo + GitHub Pages搭建一个博客的基础工作到这里就完成了,后面将详细介绍如何使用及个性化设置。

------ 本文结束  感谢阅读 ------