Hexo 是一个基于 Node.js 的开源静态博客平台,可以在数秒内渲染上千个页面,并且一键部署到 GitHub 等平台。
因为惶心的 Wordpress 博客数据库崩掉了,但是有有些东西实在很想写下来,于是就搭建了个临时博客。然而不能重蹈覆辙,所以就选择了不依赖数据库,文章全部以 Markdown 形式存储并且可以依赖 Git 的博客系统 - Hexo。
在惶心开始学习建站的时候,也在网上看到过 Hexo。不过那个时候能力不足,折腾了很久都不成功,后来就放弃了。但是到现在,我已经可以较为简单地搭建一个 Hexo 博客并且上线,所以在这里把我的主要步骤写出来。为了避免开发环境差异带来的问题,这篇文章内所有操作都是在一台船新的 Windows 10 1809 虚拟机上进行的。<!-- More -->
绝大部分人的 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"
安装完成了以后,关闭当前的 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 需要通过 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 readable-stream@2.3.6 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: fsevents@1.2.7 (node_modules\hexo-cli\node_modules\fsevents):
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 托管,所以你可以到 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 到本地。
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'
[32mINFO [39m 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_modules\fsevents):
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 的配置十分简单;在这之前,你需要一个代码编辑器。墙裂推荐 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。
# 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
即可看到更改。
配置好了主题,是时候发篇博文了。在打完这行字以后,我将会将这个 .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
),保存。
在 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'.
[32mINFO [39m Deploy done: [35mgit[39m
大功告成!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。