前言:

本篇设置基于 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
    2

    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

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

image-20200318220503520

结语

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