1. Leonn 的博客首页
  2. 建站

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


title: WebMaster 123 – 如何简单地搭建 Hexo 博客

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

前言

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

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

安装 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,复制安装命令并且回车:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

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

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

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

npm -v
git --version

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

C:\Users\imhx>npm -v
6.5.0

C:\Users\imhx>git --version
git version 2.20.1.windows.1

安装 hexo-cli

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

npm install hexo-cli -g

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

C:\Users\imhx>npm install hexo-cli -g
C:\Users\imhx\AppData\Roaming\npm\hexo -> C:\Users\imhx\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN rollback Rolling back readab[email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\Users\imhx\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 225 packages from 431 contributors in 26.354s

这就成功了。

创建 GitHub 仓库

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

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

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

克隆仓库到本地

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

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

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

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

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

安装 Hexo

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

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

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

如果成功,你将会看到大致如下的输出:

C:\Users\imhx\Documents\GitHub\hexo.justhx.com>mkdir docs && cd docs && hexo init
INFO  Cloning hexo-starter to ~\Documents\GitHub\hexo.justhx.com\docs
Cloning into 'C:\Users\imhx\Documents\GitHub\hexo.justhx.com\docs'...
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 [email protected]: no longer maintained
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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)。

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

配置 Hexo

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

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

# 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 主题

git clone https://github.com/theme-next/hexo-theme-next themes/next

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

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

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

重新 hexo serve 即可看到更改。
WebMaster 123 - 如何简单地搭建 Hexo 博客

发布你的第一篇博文

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

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

---
title: Hello World
---

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

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

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

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

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

上线!

是的,你(我)刚刚发表了第一篇博文,那么就赶紧把 Hexo 博客弄上线吧!

编辑站点配置文件 _config.yml

# 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),保存。

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

在 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。

 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

大功告成!

本文来自https://temp.justhx.com/build-your-own-hexo-blog.html,经授权后发布,本文观点不代表Leonn 的博客立场,转载请联系原作者。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

TG: PCCWGlobal
Mail: pccwbtn$gmail.com