从零开始免费搭建自己的博客(一)——本地搭建hexo框架

2020-12-31

字数统计: 5.1k | 阅读时长≈ 19 分钟

本文是博客搭建系列文章第一篇，其他文章链接：

从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架

从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站

从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站

从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora

从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床

从零开始免费搭建自己的博客(六)——三个站点一键发布博客

从零开始免费搭建自己的博客(七)——迁移 CSDN 博客到个人博客站点

从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化

效果预览

本文思路：使用 Hexo 框架搭建网站，发布到 GitHub pages 或者 Gitee pages .

首先先看一下最终效果：

GitHub pages 链接(国际站点)：杰克小麻雀的博客
Gitee pages 链接(国内站点)：杰克小麻雀的博客

myblog

一、Hexo 框架简介

首先，都 0202 年了，我们想搭建一个网站，当然不用自己从头开始写 html，因为有许多开源的代码可以供我们选择。Hexo 就是一个专门用于博客类网站的开源项目，使用 Node.js 语言开发，GitHub 上目前已经有 31.8k 的 star 了，现在网上大多数的个人博客都是使用这个框架搭建的。Hexo不仅搭建过程简单快捷，配置灵活，可定制型非常高，因此众多大佬开发者为它开发了丰富的主题库，而作为菜鸟我们只需要选择一个符合自己审美的主题直接用就行了，当然如果你懂前端和 js ，也可以自己修改定制，或者自己制作主题并分享到互联网上。

Hexo 中文官网：hexo.io ，GitHub 地址：hexojs/hexo 。

二、Hexo 依赖环境安装：Node.js

Hexo 是使用 Node.js 开发的，所以我们安装 Hexo 之前需要先安装 Node.js 环境。

Node.js 是什么？简单的说 Node.js 就是运行在服务端的 JavaScript 。安装了 Node.js 环境，就可以不用依赖浏览器就可以运行 js 代码，其实它也是基于 Chrome 引擎开发的一个开源项目。简单理解， Node.js 对于 js 代码的作用类似 Python 解释器对于 Python 代码的作用。

这里注意，不是说博客框架必须用 Node.js 来开发，博客框架本质上是一个网站，可以用任何语言开发，也有用 Python 的 Flask/Django 或者 Java 开发的博客框架，只是没有 Hexo 这么流行。

1. 官网下载 Node.js

Node.js 中文官网：nodejs.org

打开官网直接下载安装包就行了，左边是稳定版，右边是尝鲜版。任选一个点击下载，尝鲜版包含了比较新的特性，但是没有经过充分测试。我这里下载了 15.4.0 版本。

我这里是用浏览器自带下载器，下载速度还可以，如果没速度可以在下载按钮上右键，选择“复制链接地址”，然后粘贴到迅雷下载。

2. 安装 Node.js

下载完安装包后双击打开，一路点 Next 就行了。注意这一步是安装额外工具，没必要勾选。

3. 测试 Node.js 是否安装成功

安装完成后，Win + R 打开运行框，输入cmd打开命令行窗口，输入npm -v回车，如果出现版本号说明安装成功。就跟安装完 Python 解释器一样，npm 就类似 Python 中的 pip 工具。

三、Hexo 依赖环境安装：Git

作为程序员，Git 应该不陌生，如果你已经安装了 Git，那这一步可以跳过。

Git（读音/gɪt/）是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。简单理解就是下载代码的工具，因为 Hexo 是一个托管于 GitHub 上的开源项目，所以安装 Hexo 的时候需要使用 Git 来下载源码和依赖代码，而且后面要将自己的博客发布到 GitHub pages 或者 Gitee pages 上面也需要使用 Git。

1. 官网下载 Git

Git 官网：git

打开官网直接下载安装包就行了。由于网络环境原因，浏览器下载可能会非常慢，可以按照上面的方法，在下载按钮上右键，选择“复制链接地址”，然后粘贴到迅雷下载。

2. 安装 Git

下载完安装包后双击打开，没有特殊需要的话，一路点 Next 就行了。安装完毕，在桌面空白处右键，可以看到多了两个选项。

3. 测试 Git 是否安装成功

Git 安装完成后，自带了一个命令行窗口，通过上面新增的右键菜单Git Bash Here就可以打开，比 Windows自带的命令行要好用，后面都使用这个命令行窗口。在桌面空白处右键，选择Git Bash Here，输入git --version回车，如果出现版本号说明安装成功

四、安装 Hexo

下面开始正式安装 Hexo，有了前面的准备工作，安装 Hexo 就非常简单了，就跟使用 pip 安装一个 Python 第三方库一样方便。

1. 本地安装 hexo

首先在本地新建一个空文件夹，用来存放 Hexo 的文件和以后要写的博客文件，注意不要有中文路径，避免可能出现的问题。我这里建立在 D 盘根目录，取名 MyBlog。

进入新建的文件夹，右键，选择Git Bash Here，依次输入下面的命令。

# 安装 hexo 框架
npm install -g hexo-cli
# 初始化文件夹
hexo init
# 安装 hexo 依赖包
npm install

命令很好理解，第一行安装 hexo 模块，-g表示安装全局模块；第二行是 hexo 初始化，会用 git clone命令去 GitHub 下载一个 hexo 默认模板代码库；第三行是安装依赖包，类似安装 pip 的 requirement 文件，会根据刚下载的代码库中的配置文件，下载并安装所需依赖包。安装成功结果，如下图。

2. 可能遇到的问题

npm install -g hexo-cli命令执行卡住，或者报错连接不上

可能是 npm 源速度太慢，可以尝试修改淘宝源解决，再重新执行安装命令。npm 源的概念就和 Python 中的 pip 源一样，默认源是https://registry.npmjs.org/。

# 查看 npm 源
npm config get registry
# 临时修改 npm 源安装 hexo (仅本条命令有效)
npm --registry=https://registry.npm.taobao.org install -g hexo-cli
# 或者永久修改 npm 源
npm config set registry https://registry.npm.taobao.org

如果是公司内网使用代理访问外网 (比如ping registry.npmjs.org ping registry.npm.taobao.org都不通)，可以尝试给 npm 配置代理解决，再重新执行安装命令。

# 设置代理
npm config set proxy http://serverip:port
npm confit set https-proxy http:/serverip:port
# 设置带用户名密码的代理
npm config set proxy http://username:password@serverip:port
npm confit set https-proxy http://username:password@serverip:port
# 取消代理
npm config delete proxy
npm config delete https-proxy

hexo init命令执行卡住，或者报错连接不上

如果是公司内网使用代理访问外网 (比如ping GitHub.com 不通)，可以尝试给 git 配置代理解决，再重新执行初始化命令。

# 设置代理
git config --global http.proxy http://serverip:port
git config --global https.proxy http:/serverip:port
# 设置带用户名密码的代理
# 注意：如果密码中带了特殊字符需要进行转义, 将特殊字符替换为下面对应的转义字符即可
#  !   #   $   &   '   (    )  *   +   ,   /   :   ;   =   ?   @   [   ]
# %21 %23 %24 %26 %27 %28 %29 %2A %2B %2C %2F %3A %3B %3D %3F %40 %5B %5D
npm config set proxy http://username:password@serverip:port
npm confit set https-proxy http://username:password@serverip:port
# 取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

3. 本地博客效果

前面三条命令执行成功，Hexo 框架在本地就已经搭建好了，下面看看效果。

还是在Git Bash命令行窗口里，依次执行下面的命令。

# 生成静态网站
hexo g
# 启动服务器
hexo s

或者直接执行hexo g && hexo s，其中hexo g是 hexo generate命令的简写，hexo s是 hexo server命令的简写。

此时，打开浏览器，输入网址http://localhost:4000/，就可以看到我们 Hexo 搭建的博客示例了。此时是默认主题，比较简洁，下一步我们换一个更精美的主题。

五、更换 Hexo 博客主题

1. 如何找主题

默认主题非常简洁，适合大佬使用，像我等菜鸟，自己不会做却又想使用花里胡哨的主题，就要学会找主题了。

下面是我寻找主题的三个方法。

官方网站

Hexo 官网收录了几百个第三方主题，其中有许多中文开发者开发的主题。

在 Hexo 官网点击“主题”，或者直接进入 Hexo 主题页：themes

通过上方的搜索框可以根据标签搜索。
Github 搜索

大多数流行的主题都在 GitHub 托管开源了，我们可以直接去 GitHub 下载。

在 Github 官网搜索hexo-theme，选择All GitHub，或者直接进入搜索页：search?q=hexo-theme

点击右上角Sort可以选择按Most stars数量排序，根据流行程度找到心仪的主题。
网上搜索

直接在搜索引擎搜索Hexo主题推荐，会有许多别人推荐的主题，不过大多数的推荐前面两种方法都能覆盖到，偶尔也能发现一些冷门却又戳中你的审美的宝藏，这就看耐心和运气了。

2. 主题推荐

我挑选了几个自己觉得简单美观而又不过分花哨的主题，其实都是 GitHub 热门的，很好发现。这些主题都太漂亮了，以至于我都不知道该选哪个，额。

下面几个主题切换时可能会遇到一些问题，多数是依赖包未安装完整的原因，解决办法见4. 出错解决办法。

Next

Demo 示例：NexT | Dandy | Raincal

GitHub 主页：hexo-theme-next

这个是 Hexo 最流行的主题，GitHub 上 15.5k stars，在 Hexo 主题中排行第一。

这个主题跟默认主题一样简洁，但是却漂亮了很多，尤其是文章浏览界面，排版非常干净舒服，大佬必备。

stun

Demo 示例：Liuyib’s Blog

GitHub 主页：hexo-theme-stun

这是一个漂亮、简洁的 Hexo 主题，增加了首页图片，和白天黑夜模式，最重要的是文章浏览界面非常干净美观。我就是看到一篇博客使用的这个主题，特别漂亮，才有了想自己搭博客的强烈愿望。

文章浏览界面：

matery

Demo 示例：闪烁之狐

GitHub 主页：hexo-theme-matery

同样是一个很漂亮的主题，除了首页的图片，它会为每一篇文章添加一张非常漂亮的封面图，而且集成了很多强大的功能插件，比喻词云，访问统计，音乐播放，视频播放，在线聊天等等。

butterfly

Demo 示例： Butterfly | JerryC

GitHub 主页：hexo-theme-butterfly

这个主题和上面这个同样强大、漂亮，且色彩更加丰富。

![Butterfly - A Simple and Card UI Design theme for ](https://yushuaigee.gitee.io/myblog/img/Butterfly - A Simple and Card UI Design theme for .png)

ayer

Demo 示例：岛

GitHub 主页：hexo-theme-ayer

这个主题在这几个里面算是最小众的，但是功能却不少，界面比较简洁，我就选择了这一款主题。

3. 更换主题

以 ayer 主题为例。

在 Hexo 博客根目录(D:\MyBlog)下，右键，选择Git Bash Here，执行下面命令：

1 2	# 下载主题仓库到 themes 文件夹， git clone <仓库地址> themes/<主题名> git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

其中，<仓库地址>可以在每个主题的 GitHub 主页获取到。

此时打开博客根目录下的 themes 文件夹可以看到多了个 ayer 文件夹。

然后用记事本打开博客根目录下的 _config.yml (D:\MyBlog\_config.yml)，找到theme标签，默认值是landscape主题，把它改为要更换的主题名字ayer，然后执行启动命令。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: ayer

1 2	# 清理 && 生成 && 启动 hexo clean && hexo g && hexo s

此时再到浏览器打开网址http://localhost:4000，可以看到我们的博客已经换上一款非常精美的主题。

Hexo

4. 出错解决办法

Next

打开网页http://localhost:4000出现下面的错误，是因为没有安装依赖库hexo-renderer-swig

先 Ctrl + C 停止，执行下面命令安装swig，再执行hexo g && hexo s重新发布。
1
npm install hexo-renderer-swig
stun

打开网页http://localhost:4000出现下面的错误，是因为没有安装依赖库hexo-renderer-pug

先 Ctrl + C 停止，执行下面命令安装pug，再执行hexo g && hexo s重新发布。
1
npm install hexo-renderer-pug
5. 修改主题

更换主题后，我们需要修改一些基本属性，比如博客名字、首页图片等，或者增加一些个性化属性，比如鼠标指针样式，雪花特效，点击特效等。本篇文章先介绍一下如何修改基本属性，以便于接下来发布网站，在本系列文章第七篇再介绍高级的个性化设置。

Hexo 的配置大部分都保存在博客根目录下的_config.yml文件，我这里是D:\MyBlog\_config.yml，我们叫它根目录配置文件，直接修改这个文件就可以更改博客的一些设置，像前面更换主题就是修改这个文件的参数实现的。关于这个文件的每个参数的详细意义，可以在 Hexo官方文档里查看，每一个参数都有示例，讲解的非常详细。

此外，下载的第三方主题的根目录下也有一个_config.yml文件，比如 ayer 主题，我这里就是D:\MyBlog\themes\ayer\_config.yml文件，我们叫它主题配置文件。关于这个文件每个参数的详细意义，可以在每个主题的 GitHub 主页看到详细说明。

如果你使用的是自带的默认主题，那么所有配置都应该在根目录配置文件修改。如果是用的是第三方那个主题，需要两个文件配合修改。

以 ayer 主题为例。

首先，按上面第3步更换主题的方法，将根目录配置文件的 theme 属性设置为对应的主题名字 ayer。打开根目录配置文件(D:\MyBlog_config.yml)。

修改第6/10/11行，修改博客基本信息。

# 博客标题，冒号后面自定义
title: 半亩方塘
# 博客作者，冒号后面自定义
author: 杰克小麻雀
# 网站语言，zh-CN 表示中文，en表示英文。不改成 zh-CN，某些浏览器总会提示是否需要翻译网页
language: zh-CN

然后，参考 ayer 主题官方帮助文档 Ayer中文说明。打开 ayer 主题的主题配置文件(D:\MyBlog\themes\ayer_config.yml)。

修改第 2 ~ 10行，关掉不需要的侧边栏。

menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
#  旅行: /tags/旅行/
#  摄影: http://shenyu-vip.lofter.com
#  友链: /friends
  关于我: /2019/about

修改第 14 ~ 18行，自定义首页滚动显示的标题。

subtitle:
  enable: true # 是否开启动效
  text: 欢迎来到杰克小麻雀的博客
  text2: 临渊羡鱼，不如退而结网 
  text3: 问渠哪得清如许,为有源头活水来

修改第 26 ~ 27行，修改网站图标和侧边栏logo。只需要把自己的图标文件按覆盖原来的文件，完整目录为‪D:\MyBlog\themes\ayer\source\favicon.ico。关于图标，推荐一个可以下载各种尺寸图标的网站： easyicon，也可以把自己准备好的图片进行在线格式转换：在线ico转换

# 浏览器标签栏显示图标
favicon: /favicon.ico 
# 首页侧边栏图标
logo: /favicon.ico

修改第 31 ~ 34行，更换封面为自己的图片。先将自己准备好的封面图片 cover8.jpg 放到D:\MyBlog\themes\ayer\source\images目录下。

cover:
  enable: true
  path: /images/cover8.jpg
  logo: false

第 125 行，关闭右上角的 GitHub forkme。在这个背景下有点丑。

github:
  # (关闭请设置为false)
  enable: false
  url: https://github.com/Shen-Yu/hexo-theme-ayer

第 83 行，关闭打赏。如果不改下面的图片，你的打赏就直接给主题作者了哦，我没有改打赏图片，所以直接关了。

1	reward_type: 0

以上只修改了一些最最基本的配置，毕竟先发布网站要紧，其他配置可以慢慢来，建议看一下主题配置文件的每一行注释以及官方文档。

改完后，执行hexo g && hexo s，刷新网页看下效果：

六、本地发布文章

博客搭建好了，可是现在只有示例的Hello World一篇文章，怎么发布自己的文章呢？

1. 新建文章

在博客根目录下右键，选择Git Bash Here，输入下面命令

1	hexo new "我的第一篇博客"

此时进入博客根目录下的source\_posts(D:\MyBlog\source_posts)文件夹，可以看到多了一个我的第一篇博客.md文件，这便是新生成的博客文章，因为 Hexo 默认使用 Markdown 格式，所以文件后缀是md，可以使用记事本或者Typora打开并编辑。关于 Markdown 语法和Typora软件的使用，将在本系列文章第四篇中介绍。

此时先 Ctrl + C 停止服务器，执行hexo g && hexo s重新部署，刷新http://localhost:4000/，可以看到博客上多了一篇文章。

2. 修改模板

打开新建的文章我的第一篇博客.md，可以看到它并不是空的，可是页面上却显示为空，因为 Hexo 根据默认模板帮我们自动生成了一些参数，比如文章创建时间等。这个模板是可更改的。

这就需要修改根目录配置文件(‪D:\MyBlog_config.yml)的new_post_name参数了，其中year month day 分别表示创建文章的年月日，这样，再新建文章时，文件名将会自动加上年月日信息，便于通过日期来管理文章。当然，这个时间后面也是可以修改的。

1	new_post_name: :year-:month-:day-:title.md

编辑上面打开的文章我的第一篇博客.md，添加一些正文，并改一下自动生成三个参数。

此时先 Ctrl + C 停止服务器，执行hexo g && hexo s重新部署，刷新http://localhost:4000/，看看效果。

七、后续

至此，我们的博客已经基本可以用了，只是现在还部署在本地，其实本地的效果就是发布的效果，后面只把这一整套文件都部署到远程服务器上就可以了，针不戳。第一部分说了， 0202 年我们想搭建一个网站不用自己从头开始写 html，有 Hexo 这么优秀的框架供我们选择，而且还完全免费，那么部署网站怎么办呢？

毕竟马上就要 2021 年了，现在部署网站也不用买服务器啦，有 GitHub Page 和 Gitee Page 等免费服务可供我们选择，只需要注册一个帐号就可以了。虽然 GitHub 在程序员界是最流行的，但是由于网络环境原因访问速度很慢，再加上最近的形势变化，说不定哪天这网站甚至会打不开了，所以国内平台Gitee成了一个不错的选择。

网站部署步骤详情见本系列文章的第二篇和第三篇，这两个步骤只需任选其一即可。

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！