前言

有很多原因让我搭起了这个博客,并写下这篇文章。

我一直觉得搭建个人网站是非常geek,非常cool的事情。互联网早期的博客年代互相挂友情链接之类的事也使我憧憬。上学期在创新实践课上听别的同学讲搭建了自己的博客,姚老师当时也感慨自己一直没去建自己的博客比较遗憾。或生或熟的几位学长也有自己的blog,我在网上查作业and在公众号上编辑他们的文章时也去参观过。在互联网上有自己的一片天地,这就好像拥有自己的房产,并将自己的花园展示给别人看。于是这个暑假我打算搭一个博客并且更新一些内容。

本文就记录一下我搭建博客的过程,或许可以当作一个Hexo博客搭建教程来看。

Hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,也可以非常方便地在中文互联网上找到相关的资料。对于我来说,从安装Hexo到成功部署不过三十分钟,这得益于丰富的中文教程和在电脑上已经预先配置好的Node.js和Git。

搭建流程

这部分内容展示了在Windows环境下博客的搭建流程,虽然我已经提前配置好了Node.js和Git,这里还是简单指个路吧。

安装并配置Git

大名鼎鼎的Git和Github应该都听说过吧?使用Git对于搭博客来说大概到成功登录就行了,对于不了解Git和GitHub的同学建议直接去看狂神说的视频,讲解比较详细,按我的思路就是看到哪够用就行。【狂神说Java】Git最新教程通俗易懂

安装Node.js和npm

简单的说 Node.js 就是运行在服务端的 JavaScript,而npm是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。Windows版本下安装Node.js直接集成了NPM,只需要去官网下载LTS(长期支持版)一路安装就好了,安装时记得勾选Add to PATH(默认勾选)。

安装Hexo

打开cmd或者git bash,进入到你的博客目录下,输入

1
npm install -g hexo-cli

Hexo的安装会自动完成。

接着初始化blog

1
hexo init blog

配置Hexo

Hexo的配置文件是_config.yml,遵照官网给出的文档可以自行修改需要的部分。

生成并运行

输入以下指令生成

1
hexo g

输入以下指令在本地运行

1
hexo s

服务器会自动运行在localhost:4000

确认配置无误后就可以进行下一步:部署。

部署Hexo

在GitHub上创建项目,项目名称应为”[用户名].github.io”,然后在_config.yml最下方输入

1
2
3
4
deploy:
type: 'git'
repo: https://github.com/[用户名]/[用户名].github.io.git
branch: master

然后安装hexo-deployer-git

1
npm install hexo-deployer-git --save

接着运行

1
hexo d

如果一切无误,打开”[用户名].github.io”这个网址就可以在外网访问博客了(可能需要等待几秒钟)。

写博客

Hexo支持使用包含markdown在内的多种语法来撰写博客。

使用hexo new [博客名]来新建博客,生成的[博客名].md文件默认保存在blog\source\_posts目录下

在博客分割线上方可以自定义这篇博客包括标题、标签等在内的各个属性,如果你使用的主题可以添加cover: 1.png添加封面1.png。注意这部分要遵守YAML语法,注意冒号后面要有一个空格。

注意

本教程仅对本人的搭建过程进行一个粗略的记录,如有疑惑请善用搜索引擎、Hexo官方文档及其Q&A,项目官方GitHub issue。

以下记录几点个人认为的要点

  • npm如果运行不畅可以安装使用淘宝镜像cnpm

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装成功后使用cnpm即可

  • 注意YAML语法严格,注意冒号后要有空格

  • Hexo可以自定义主题,互联网上有许多好看的主题,个人使用的是butterfly,注意使用部分主题如果没有对应渲染器会报错,具体操作在此不赘述,主要要对应说明文档修改主题下的_config.yml配置文件实现美化。

参考资料

手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

hexo史上最全搭建教程