blog/build-blog.md at 5d7689c63ba5b187fcac5424468aea40c39bc228

6.9 KiB

Raw Blame History

title

date

什么是Hexo？

Hexo 是一个基于nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen。

官方网站：Hexo

特点：

不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 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 | 百度百科 JavaScript | MDN

下载｜ Node.js

建议下载长期支持版而非当前发布版（因为如果是最新版，容易出现一些奇妙的 bug）。

全部默认下一步进行安装。

Windows 打开命令提示符，macOS 打开终端。 Linux 用户右上角关闭本标签页。

后续如提到输入命令，均默认指打开终端进行输入。

输入 node --version，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。

Node.js 安装成功时也默认安装了 npm，在此后将会用到。 npm 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。

对了，国内使用 npm 可能很慢。

你可以考虑切换为 taobao 镜像源。

npm config set registry https://registry.npm.taobao.org

npm & yarn 常用包与命令

安装 Git

下载 Git 并安装（如果国内速度太慢，可以试试这里）

macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。

类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。

安装 Hexo

Hexo官方文档

GitHub: https://github.com/hexojs/hexo 官方文档（直接参考文档也是一个不错的选择）

在终端中输入以下命令：

npm install hexo-cli -g
# 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行
# sudo npm install hexo-cli -g

install 自然是安装。 hexo-cli 则是 hexo 的终端工具，可以帮助你生成一些模版文件，之后再用到。 -g 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。

此时，请先通过 cd 进入你本地电脑打算存储网站代码的文件夹目录。

cd | DOS 命令 cd （LINUXSHELL 命令）

譬如：

注意：这里是你自定义的目录，请不要复制粘贴

hexo init 你的博客项目名称

hexo 正是因为我们之前安装了 hexo-cli 这一个包，所以我们可以在终端中使用 hexo 这一命令。 init 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。

# 进入你的博客文件夹
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 主题。

默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。

当然也可以自己对博客样式进行编辑。

我们可以在官方博客主题找到很多主题。

下载之后可以安装到我们的hexo中进行使用。

主题安装

在主题列表中，选则一个喜欢的主题。然后找到他的git地址。

在我们的博客地址下面，找到themes路径，使用下面命令：

cd ./themes/
git clone 主题地址

主题使用

我们在 _config.yml 文件中找到themes配置，这里我们可以看到配置。

在themes目录下，安装好主题之后，把landscape改成你下载好的hexo主题即可。

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

主题配置

每一个主题中，都有一个 _config.yml 文件。这里配置的是主题内的内容。

具体的配置内容，需要大家看一下你选择的主题的配置。

Hexo部署

关于Hexo的部署，官方文档给我们准备了三个方法。

将 Hexo 部署到 GitHub Pages 将 Hexo 部署到 GitLab Pages 部署到服务器上

这里我们查看官方文档的方法即可。

6.9 KiB Raw Blame History Unescape Escape