WebMaster 123 - 如何简单地搭建 Hexo 博客

2019-01-27 11:56:48 浏览数 (1)

Hexo 是一个基于 Node.js 的开源静态博客平台，可以在数秒内渲染上千个页面，并且一键部署到 GitHub 等平台。

前言

因为惶心的 Wordpress 博客数据库崩掉了，但是有有些东西实在很想写下来，于是就搭建了个临时博客。然而不能重蹈覆辙，所以就选择了不依赖数据库，文章全部以 Markdown 形式存储并且可以依赖 Git 的博客系统 - Hexo。

在惶心开始学习建站的时候，也在网上看到过 Hexo。不过那个时候能力不足，折腾了很久都不成功，后来就放弃了。但是到现在，我已经可以较为简单地搭建一个 Hexo 博客并且上线，所以在这里把我的主要步骤写出来。为了避免开发环境差异带来的问题，这篇文章内所有操作都是在一台船新的 Windows 10 1809 虚拟机上进行的。<!-- More -->

安装 npm 以及 git

绝大部分人的 Hexo 博客都是通过 GitHub 托管的，这样十分简单且稳定性高；并且之后安装主题也需要用到 git clone 功能。Hexo 基于 Node.js，所以我们首先需要安装 Node.js 的包管理器 npm 以及 git 本身。

这里我并不推荐到 nodejs 和 git 的官方去下载相应的安装包再去安装什么的，我使用 Windows 下一个非常好用的包管理器：Chocolatey。

Chocolatey - The package manager for Windows 安装引导：https://chocolatey.org/install

首先确保你的 Windows 能够正常访问海外网站，然后用管理员身份运行 cmd.exe，复制安装命令并且回车：

代码语言：txt复制
@"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin"

安装完成了以后，关闭当前的 cmd，再次使用管理员身份打开一个 cmd.exe，输入命令：choco install nodejs git。Chocolatey 首先会为你下载安装这些程序的脚本，下载完成以后会问你是否运行，输入 y 回车确认即可。

等两个脚本都安装完毕，重启 cmd，使用以下命令查看 npm 以及 git 是否能够正常运行：

代码语言：txt复制
npm -v
git --version

如果分别看到这样的输出，就意味着安装成功：

代码语言：txt复制
C:Usersimhx>npm -v
6.5.0

C:Usersimhx>git --version
git version 2.20.1.windows.1

安装 hexo-cli

Hexo 需要通过 hexo-cli 安装，所以我们需要先安装 hexo-cli。根据官网 https://hexo.io/zh-cn/ 上的命令，在 cmd 内输入（此时已经无需管理员权限）：

代码语言：txt复制
npm install hexo-cli -g

你大概会看到这样的输入：

代码语言：txt复制
C:Usersimhx>npm install hexo-cli -g
C:UsersimhxAppDataRoamingnpmhexo -> C:UsersimhxAppDataRoamingnpmnode_moduleshexo-clibinhexo
npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:UsersimhxAppDataRoamingnpmnode_moduleshexo-clinode_modulesfseventsnode_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_moduleshexo-clinode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

  hexo-cli@1.1.0
added 225 packages from 431 contributors in 26.354s

这就成功了。

创建 GitHub 仓库

最简单的方案就是使用 GitHub 托管，所以你可以到 https://github.com/new 新建一个代码仓库。值得注意的是，虽然 GitHub 目前已经支持让免费用户使用私密代码仓库（即公众不可见），但是免费用户的私密仓库是不支持 GitHub Pages 的，所以一般不建议使用私密仓库。

仓库的名字随意即可，不需要一定是 username.github.io （除非你没有域名希望使用 github.io 的子域名作为博客域名）。

克隆仓库到本地

大佬都是直接命令行一把梭的，但是我不是，所以我使用 GitHub Desktop。你可以通过 https://get.js.org/githubdesktop 快速地下载 GitHub Desktop。

安装完 GitHub Desktop 以后，在网页端打开你的空代码仓库，选择 Set up in desktop 然后在弹出来的弹窗里面选择 “打开 GitHub Desktop”。

因为还没有配置相关的账户，所以 GitHub Desktop 会首先让你登录 GitHub 以及 Configure Git，按照正常输入即可。输入完毕以后就可以选择 Clone 到本地。

安装 Hexo

Clone 完成以后打开本地目录，在文件资源管理器上方地址栏那里复制当前路径，然后打开 cmd.exe，按照如下步骤操作：

代码语言：txt复制
cd /path/to/your/repo
mkdir docs && cd docs && hexo init #这会创建一个 docs 的文件夹 其他的名字也可以（因为当前本地仓库已经有了隐藏的 .git 配置文件 但是 hexo init 无法在有文件的文件夹内执行）

如果成功，你将会看到大致如下的输出：

代码语言：txt复制
C:UsersimhxDocumentsGitHubhexo.justhx.com>mkdir docs && cd docs && hexo init
INFO  Cloning hexo-starter to ~DocumentsGitHubhexo.justhx.comdocs
Cloning into 'C:UsersimhxDocumentsGitHubhexo.justhx.comdocs'...
remote: Enumerating objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/Users/imhx/Documents/GitHub/hexo.justhx.com/docs/themes/landscape'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 867 (delta 0), reused 0 (delta 0), pack-reused 866
Receiving objects: 100% (867/867), 2.55 MiB | 1.40 MiB/s, done.
Resolving deltas: 100% (459/459), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 421 packages from 500 contributors and audited 4699 packages in 37.753s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

安装完以后，在当前目录输入命令 hexo serve 即可在 http://localhost:4000 预览到你的船新 Hexo 博客（使用默认主题 Landscape）。

配置 Hexo

Hexo 的配置十分简单；在这之前，你需要一个代码编辑器。墙裂推荐 Visual Studio Code，你可以通过 https://get.js.org/vscode 快速下载。

安装完以后，打开 path/to/your/repo/docs，你会看到若干个文件夹和文件。目前来说，你仅仅需要配置 _config.yml 文件 里面的 title, subtitle 以及 url 即可。其余的配置，可以参考官网文档 https://hexo.io/zh-cn/docs/configuration。

代码语言：txt复制
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo Demo
subtitle: A Simple Hexo Blog Demo Site
description:
keywords:
author: Huangxin
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://hexo.justhx.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

保存修改了的 _config.yml 文件，重新 hexo serve 即可预览你更新的内容。

装个主题

Hexo 拥有大量的主题，目前来说唯一想要推荐的就是 NexT 主题。我知道这个主题很多人用，同质化严重；然而我觉得只要内容与众不同，就无需担心是否同质化。推荐 Next 的主要原因是这个主题至今仍在积极维护，并且可配置选项非常多，非常适合像我这样的新手。

GitHub 项目地址：https://github.com/theme-next/hexo-theme-next

在 Hexo 目录下使用如下命令安装 NexT 主题

代码语言：txt复制
git clone https://github.com/theme-next/hexo-theme-next themes/next

关于主题的配置，请访问 http://theme-next.iissnan.com 了解更多。以后或许会继续写文章说明。

配置好以后，在站点配置文件 _config.yml 里面把主题改成 NexT：

代码语言：txt复制
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

重新 hexo serve 即可看到更改。

发布你的第一篇博文

配置好了主题，是时候发篇博文了。在打完这行字以后，我将会将这个 .md 文档存档，然后发到我的新 Hexo 博客上面去。

我们观察到 path/to/your/repo/docs/source/_posts 下面有一篇 Hello World 文章，除了是使用 markdown 语法写作的以外，在 markdown 的顶部还包含这样的一个部分：

代码语言：txt复制
---
title: Hello World
---

这是 Hexo 所使用的 Front-matter，用以说明文章的各项变量。

那么，目前我在写的这篇文章叫做 “WebMaster 123 - 如何简单地搭建 Hexo 博客”，所以我们在目前的 .md 文档的顶部加上 Front-Matter：

代码语言：txt复制
---
title: WebMaster 123 - 如何简单地搭建 Hexo 博客
---

并且重命名为 build-your-own-hexo-blog.md 然后复制到 path/to/your/repo/docs/source/_posts 目录下。

使用 hexo clean && hexo serve 命令重新预览站点。

上线！

是的，你（我）刚刚发表了第一篇博文，那么就赶紧把 Hexo 博客弄上线吧！

编辑站点配置文件 _config.yml：

代码语言：txt复制
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git #部署类型为 Git
  repo: https://github.com/hifocus/hexo.justhx.com # repo url

然后在 path/to/your/repo/docs/source 文件夹新建一个没有后缀的 CNAME 文件（可能需要手动启用 “文件扩展名” 选项），然后用代码编辑器打开，里面输入你的自定义域名（如 hexo.justhx.com），保存。

在 GitHub Desktop 内找到我们创建的 CNAME 文件，选择 Commit to master，然后选择 Push Origin 以推送到远程代码仓库。

前往你的域名 DNS 解析服务添加一条 CNAME 到 username.github.io（例如我的就是 hifocus.github.io）。

前往 https://github.com/user/repo/settings （你 GitHub 代码仓库的设置页面） 的 GitHub Pages 部分，选择 GitHub Pages 的 Source 为 master branch；保险起见，可以在下方再次填写你的自定义域名。可以刷新页面后选择 Enforce HTTPS 以强制使用 HTTPS 连接，这个证书大约需要 5 分钟以颁发。

在 Hexo 目录通过 npm install hexo-deployer-git --save 安装 hexo-deployer-git 插件。

在 cmd.exe 内输入命令 hexo clean && hexo generate && hexo deploy （可能需要登陆 GitHub 以获取 Personal Access Token） 即可一键生成静态页面并且部署到 GitHub Pages。

代码语言：txt复制
 delete mode 100644 placeholder
Enumerating objects: 78, done.
Counting objects: 100% (78/78), done.
Delta compression using up to 4 threads
Compressing objects: 100% (65/65), done.
Writing objects: 100% (78/78), 455.18 KiB | 4.29 MiB/s, done.
Total 78 (delta 10), reused 0 (delta 0)
remote: Resolving deltas: 100% (10/10), done.
To https://github.com/hifocus/hexo.justhx.com
   458b27d...7f3d1ea HEAD -> master (forced update)
Branch 'master' set up to track remote branch 'master' from 'https://github.com/hifocus/hexo.justhx.com'.
INFO  Deploy done: git

大功告成！

hexo github https git 开源

0 人点赞