建站指南与美化历程（一）

之前在北京广联达搬砖的时候，因为日子过的过于的清闲，所以就尝试着自己套用成熟的 Hexo 框架来制作自己的个人博客网站用作展示之用，中间也是各种折腾，前期先用了 icarus 主题，后期又被 Volantis 主题里的说说功能吸引了，所以就重新切换到了 Volantis 主题。转眼间已经过了大半年了，可这篇文章还没有写出来。。。所以决定近期好好填一下之前留下的文章坑。在这里推荐一个非常不错的 Hexo 介绍和教程网站：https://easyhexo.com/, 是在我建站完成后才发现的（囧）

准备工作&技能

在开始准备建站工作前首先先思考两个问题：

1. 我建站的目的是什么？
2. 我要在自己的网站上发什么内容？

就我而言，我建站的目的一个是正好作为学习 html 和 css 的重要实践方法，好记性不如烂笔头，自己通过学习和折腾完成一个网站的整体搭建是一个比较有成就感的事情，虽然现在 Hexo 配合 Github Pages 的网站框架已经有了很多很成熟的网上教程和 CSDN 上有很多前人踩坑记录，一路顺着前人的足迹一路走下来就好，这一过程的难度和门槛飞速降低，接触和学习代码的机会也在逐渐减少，但总归也可以作为了解入门网站等前端知识的绝佳途径了。

其实在日本读研究生的时候，因为充了 Adobe 全家桶的会员，所以可以免费使用 Adobe 旗下的 Adobe Portfolio 的快速建站工具，其实就是一系列高度集成的模版，直接套模版上传自己的作品和介绍即可。但自从我转行到互联网做产品之后，也就不需要一个纯作品展示的平台了，取而代之则需要一个个人博客文档总结的地方，所以综合考察下来 Hexo 配合 Github Pages 比较适合我，有一定可定制的元素且难度也不大，完全免费且无需单独的服务器做后台（虽然我可以部署在家里的 HTPC（家用影院电脑）上，等内容丰富起来之后作为下个阶段的目标才会考虑），所以我最终选择了 Hexo+Github Pages 的框架来搭建属于我自己的个人博客网站。

在明白自己的建站用途之后，下一步自然是弄清楚建站所需要的硬件条件和硬性技能。建站对电脑的要求并不高，随便一个最近几年生产的笔记本电脑就可以，电脑只是个传输的媒介，不会承担繁重的计算任务。因为博主之前一直使用的是 Windows 和 MacOS 系统，所以本篇博客重点介绍这两种系统下的折腾经历，Ubuntu（linux）系统和 MacOS 系统区别不大，可以作为参考。硬性技能方面虽然各种网站上总是说只需要最基本的 Markdown 知识就可以，但就我的个人建站经验来看，仅仅 Markdown 知识肯定是远远不够的，我认为应当具备以下技能：

1. 基本的 Git 和 Github 使用知识（本地网站源码文件夹需要部署在 GitHub 上作为一个独立的仓库才可以使用）
2. 基本的终端 linux 知识（涉及到要在终端中输入代码，执行代码并获知结果）
3. 基本的 Markdown 知识（博客内容的主体和排版就是 Markdown 格式）
4. Google 搜索问题和鉴别答案的能力（这一路注定不会很顺利，遇到问题 Google 搜索必不可少）

具体就不单独进行解释，可以在后续章节中看到实际的应用。

安装必备工具（Git，Nodejs，Hexo）

在安装 Hexo 之前，需要安装 Git 和 Nodejs 两个工具。查询 Google 可以很轻松查到 Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。通俗的讲就是取代了平时网页上的上传和下载的按钮，通过命令行可以控制代码的克隆（下载）和 push（上载）Github 等一系列代码托管平台（仓库）的作用（可能目前而言我所使用的功能如此，不排除还有更高阶的使用目的）。

安装 Git 和 Nodejs 都十分简单，Windows 系统和 MacOS 系统都可以去 git 官网上下载对应的稳定版本安装使用，其中 MacOS 系统如果搭载的是 Apple 芯片的 cpu，则强烈建议使用命令行brew install git的方式安装，这样安装完可以直接终端使用，后期也可以直接brew upgrade git正常升级，无需进行额外步骤（原理是 Apple 芯片的 Mac 会自带一个版本的 Git，从官网下载安装之后 Mac 上会存在两个 Git，brew upgrade却无法升级这两个 git，后期比较麻烦，可能我没有找到合适的办法，读者可以自行探索）。关于 homebrew 的介绍和用法，这里碍于篇幅不再赘述，可以去 Google 上自行搜索安装和使用教程。

MacOS 系统：

1
2
3

brew install git  // brew安装git
brew upgrade git  // brew升级git
git -v  // 查看git版本确认安装成功

安装 Nodejs 的方法很多，推荐使用 nvm。

cURL 方式：

1

curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh  // 安装nvm

Wget 方式：

1

wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh  // 安装nvm

安装完成后，重启终端并执行下列命令即可安装 Nodejs：

1

nvm install stable  // nvm安装nodejs

如果人在国内的话，在安装完 Nodejs 之后需要切换成国内的镜像源，这里推荐淘宝的镜像源：

1
2

npm config get registry  // 查看npm当前镜像源
npm config set registry https://registry.npm.taobao.org/  // 设置npm镜像源为淘宝镜像

在安装好 Git 和 Nodejs 并确认一切无误后，开始安装 Hexo：

1
2

npm install -g hexo-cli  // npm安装hexo
hexo -v. // 查看hexo的版本（同时下面会出现node以及一些比较重要的包的版本，确认安装成功）

安装主题&初始配置

在成功安装 Git，Nodejs 和 Hexo 之后，在想要放置本地网站文件的地方新建文件夹，修改名称为 myblog（或者其他的自己起名字），打开 myblog 文件夹，Windows 系统右键选择git bash here，MacOS 系统选择在终端中打开或者终端中使用ls和cd命令定位到 myblog 文件夹下，输入：

1

hexo init  // 初始化hexo，自动创建hexo所需文件

挑选所喜欢的主题，这里博主以自己用的 Volantis 为例，其余主题基本上大同小异，找到该主题的网站后按照操作一步一步来就可以了。还是在 myblog 文件夹下终端中输入：

1

npm i hexo-theme-volantis  // 下载和安装volantis主题，创建必要的文件夹

然后在 myblog 根目录下找到_config.yml文件用 vscode（推荐）打开，然后找到 theme 一项将 lanscape 改成：

1

theme: volantis  // 修改hexo配置文件为volantis，冒号后记得有个空格

还是在 myblog 文件夹内的终端上依次输入：

1

hexo s  // hexo sever 将网站在本地运行，默认port口是4000

如果在终端中出现以下报错：

1
2
3
4
5
6
7

ERROR
============================================================
配置文件检查失败！| Configuration check failed!
============================================================
description 未配置！
请在站点配置 _config.yml 中配置 description
description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。

则用 Vscode 打开_config.yml文件找到 description 项填入你的博客的介绍，比如博主填的是 Blog of Qiaozhi LI。之后继续运行hexo s命令，此时如果没有什么问题的话，应该能在浏览器的localhost:4000地址下看到初始状态的 Volantis 主题的 Hexo 博客了。此时进入下一章节进行 Github Pages 的配置。