Hexo + GitPages + PicGo搭建你的第一个静态个人博客教程(踩坑实践)

写在最前

心血来潮,都二十多岁的人了还没有一个自己的博客,确实说不过去,最近因为疫情原因也确实有了有史以来最长的一个寒假,除了学习+玩耍,我发现我越来越想要留下些属于自己的印记,或是记录,或是分享。不管怎么样,这是真正动笔的第一篇blog,一个全新的开始,加油吧!

开始

为什么是Hexo

相信对博客或多或少了解的同学都知道WordPress,一款强大的也是普及率最高的个人博客平台,如今几乎各大云平台都提供一键部署功能,可以说在资金到位的情况下(服务器+域名的长期维护费用),WordPress很适合对blog刚刚入门的小白,是的,它简单、成熟且易用。

但作为学生党,本着能省则省外加多折腾的原则,拥有一款永久免费的blog当然是最吼的。那么Hexo便是这样一款博客框架。Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

部署环境

可能你现在并不知道什么叫做静态网页,不用着急,本教程完全带你从零开始搭建你的blog,你只需一步步根据教程往下走,直到你走完全程,你自然会明白这一切。

  • 使用平台:Windows。
  • 下载并安装Node.js,点击选择符合你电脑的直装版本即可。
  • 下载并安装Git,根据官方疯狂下一步即可。

使用Git Bash安装并初始化Hexo

安装好Git之后,它会创建Git Bash和Git GUI两个程序,分别是终端和可视化版本,我们这里只需要用到Git Bash这个程序。

  • 第一步给你的博客建立一个本地仓库,推荐这样创建文件夹:D/workspaces/

  • 进入到workspaces文件夹,鼠标点击右键,选择Git Bash Here,弹出一个黑色命令框,那么一切就从这里开始了。

  • 输入命令:node -v。顾名思义,这个命令用于检测刚刚你是否装好了node。

    如图所示,我这里已经装好了v12.16.1版本

  • 接下来安装Hexo,输入命令:npm install -g hexo-cli。这里可能提示你没有安装npm命令,通常是因为你的node没有正确安装,输入yum install -y nodejs重新安装即可。

  • 查看版本:输入hexo -v,见到如下场景,说明安装成功。

  • 初始化hexo:输入命令hexo init myblog。该命令会在当前目录下创建并初始化hexo的工作目录名为myblog

  • 首先使用命令cd myblog进入到该文件夹,然后输入命令npm install安装相关依赖。

构建你的本地Hexo博客

完成hexo初始化后,我们不妨尝试先看看我们的博客到底是怎么样子,继续在上面的GitBash窗口输入以下命令:

1
2
hexo g//构建hexo博客文件
hexo s//启动hexo本地服务器

如此,在浏览器输入localhost:4000,如果看到hexo的博客首页,说明你的博客已经可以在本地运行了。