199 lines
6.9 KiB
Markdown
199 lines
6.9 KiB
Markdown
---
|
||
title: Hexo博客搭建
|
||
date: 2020-07-08 14:33:48
|
||
tags: [博客搭建]
|
||
categories: [博客搭建]
|
||
keywords: [博客搭建]
|
||
author: Anges黎梦
|
||
---
|
||
> 写给想要搭建个人博客，但是没有方法的同学们。
|
||
|
||
## 什么是Hexo？
|
||
|
||
Hexo 是一个基于nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen。
|
||
|
||
官方网站：[Hexo](https://hexo.io/)
|
||
|
||
特点：
|
||
|
||
- 不可思议的快速 ─ 只要一眨眼静态文件即生成完成
|
||
|
||
- 支持 Markdown
|
||
|
||
- 仅需一道指令即可部署到 GitHub Pages 和 Heroku
|
||
|
||
- 已移植 Octopress 插件
|
||
|
||
- 高扩展性、自订性
|
||
|
||
- 兼容于 Windows, Mac & Linux
|
||
|
||
## 搭建步骤
|
||
|
||
### 安装 Node.js
|
||
|
||
> 什么是 Node.js ？
|
||
这得从什么是 JS 说起，JS 也就是 JavaScript。
|
||
>JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。
|
||
JavaScript 语法简单，易学易用。
|
||
在 Node.js 诞生前，JavaScript 都运行于浏览器端。也就是说，它是鱼，浏览器是装满了水的水缸。
|
||
2008 年，Chrome V8 诞生。2009 年，Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解，后续再说。
|
||
Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
|
||
>按照我的理解，JavaScript 是鱼，Chrome V8 就是抽水机，Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸，也可以在里面运行 JavaScript 了！
|
||
当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的，不再展开。
|
||
|
||
[Node.js | 百度百科](https://baike.baidu.com/item/node.js/7567977)
|
||
[JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
|
||
|
||
[下载｜ Node.js](https://nodejs.org/zh-cn/)
|
||
|
||
建议下载**长期支持版**而非**当前发布版**（因为如果是最新版，容易出现一些奇妙的 bug）。
|
||
|
||
全部默认下一步进行安装。
|
||
|
||
Windows 打开命令提示符，macOS 打开终端。
|
||
Linux 用户右上角关闭本标签页。
|
||
|
||
后续如提到输入命令，均默认指打开终端进行输入。
|
||
|
||
输入 **node --version**，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。
|
||
|
||
> Node.js 安装成功时也默认安装了 npm，在此后将会用到。
|
||
npm 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。
|
||
|
||
对了，国内使用 npm 可能很慢。
|
||
|
||
你可以考虑切换为 taobao 镜像源。
|
||
|
||
```shell script
|
||
npm config set registry https://registry.npm.taobao.org
|
||
```
|
||
|
||
>[npm & yarn 常用包与命令](https://www.yuque.com/yunyoujun/notes/npm-and-yarn#nrm)
|
||
|
||
### 安装 Git
|
||
|
||
> 下载 [Git](https://git-scm.com/) 并安装（如果国内速度太慢，可以试试[这里](https://pc.qq.com/detail/13/detail_22693.html)）
|
||
|
||
macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。
|
||
|
||
类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。
|
||
|
||
### 安装 Hexo
|
||
|
||
[Hexo官方文档](https://hexo.io/)
|
||
|
||
GitHub: [https://github.com/hexojs/hexo](https://github.com/hexojs/hexo)
|
||
[官方文档](https://hexo.io/zh-cn/docs/index.html)（直接参考文档也是一个不错的选择）
|
||
|
||
在终端中输入以下命令：
|
||
|
||
```shell script
|
||
npm install hexo-cli -g
|
||
# 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行
|
||
# sudo npm install hexo-cli -g
|
||
```
|
||
|
||
> install 自然是安装。
|
||
hexo-cli 则是 hexo 的终端工具，可以帮助你生成一些模版文件，之后再用到。
|
||
-g 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。
|
||
|
||
此时，请先通过 cd 进入你本地电脑打算存储网站代码的文件夹目录。
|
||
|
||
[cd | DOS 命令](https://baike.baidu.com/item/cd/3516393)
|
||
[cd （LINUXSHELL 命令）](https://baike.baidu.com/item/cd/3516411)
|
||
|
||
譬如：
|
||
|
||
> 注意：这里是你自定义的目录，请不要复制粘贴
|
||
|
||
```shell script
|
||
hexo init 你的博客项目名称
|
||
```
|
||
|
||
> hexo 正是因为我们之前安装了 hexo-cli 这一个包，所以我们可以在终端中使用 hexo 这一命令。
|
||
init 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。
|
||
|
||
```shell script
|
||
# 进入你的博客文件夹
|
||
cd 你的博客项目名称
|
||
# 默认安装所有 `package.json` 文件中提到的包
|
||
npm install
|
||
# 你也可以缩写成 hexo s
|
||
hexo server
|
||
```
|
||
|
||
出现如下图的情况，就已经初始化好了一个初始化的博客。
|
||
|
||
|
||
|
||
**server** 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 **localhost:4000** 就可以看到本地的网页了。
|
||
|
||
按 **Ctrl + C** 中断服务器的运行。
|
||
|
||
至此，基础的模版页面便已经搭建好了。
|
||
|
||
|
||
|
||
我们可以看到启动成功。复制地址： **http://localhost:4000** 在浏览器打开，即可看到博客的页面。
|
||
|
||
|
||
|
||
### Hexo项目
|
||
|
||
博客内所有的项目配置都在 **_config.yml** 这个文件中。
|
||
|
||
|
||
|
||
### 使用 Hexo 主题
|
||
|
||
Hexo 默认提供的是 **hexo-theme-landscape** 主题。
|
||
|
||
默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。
|
||
|
||
当然也可以自己对博客样式进行编辑。
|
||
|
||
我们可以在 [官方博客主题](https://hexo.io/themes/) 找到很多主题。
|
||
|
||
下载之后可以安装到我们的hexo中进行使用。
|
||
|
||
#### 主题安装
|
||
|
||
在主题列表中，选则一个喜欢的主题。然后找到他的git地址。
|
||
|
||
在我们的博客地址下面，找到**themes**路径，使用下面命令：
|
||
|
||
```shell script
|
||
cd ./themes/
|
||
git clone 主题地址
|
||
```
|
||
|
||
#### 主题使用
|
||
|
||
我们在 **_config.yml** 文件中找到**themes**配置，这里我们可以看到配置。
|
||
|
||
在**themes**目录下，安装好主题之后，把landscape改成你下载好的hexo主题即可。
|
||
|
||
```shell script
|
||
# Extensions
|
||
## Plugins: https://hexo.io/plugins/
|
||
## Themes: https://hexo.io/themes/
|
||
theme: landscape
|
||
```
|
||
|
||
#### 主题配置
|
||
|
||
每一个主题中，都有一个 **_config.yml** 文件。这里配置的是主题内的内容。
|
||
|
||
具体的配置内容，需要大家看一下你选择的主题的配置。
|
||
|
||
### Hexo部署
|
||
|
||
关于Hexo的部署，官方文档给我们准备了三个方法。
|
||
|
||
[将 Hexo 部署到 GitHub Pages](https://hexo.io/zh-cn/docs/github-pages)
|
||
[将 Hexo 部署到 GitLab Pages](https://hexo.io/zh-cn/docs/gitlab-pages)
|
||
[部署到服务器上](https://hexo.io/zh-cn/docs/one-command-deployment)
|
||
|
||
这里我们查看官方文档的方法即可。
|