Start Blogging Here:浅谈 Hexo 搭建个人博客

· · 科技·工程

目录

开始之前

注:关于终端

在本文中,可在所有平台使用的命令使用 > 开头:

> Command

仅在 macOS 或 Linux 下的命令用 $ 开头:

$ Command

在 Windows 下,终端指 Command LinePowershell,这样打开:

按下 Windows,输入 cmd,打开 Command Line

在 macOS 下,终端 App 在您的启动台中,在启动台中搜索 终端 以启动

在大部分 Linux 发行版下,终端Terminal App 一般在应用程序视图中,点击来打开

在开始建站之前,请确保你的依赖已经安装:

名称 用途
Node.js 运行环境
Git 版本管理
Hexo 建站工具

安装 Node.js

Node.js 是一个 JavaScript 运行环境,很多命令行工具都需要使用它,点击下面的按钮进入官网:

Node.js

验证安装:

> node --version

注意:文中所有终端命令均不含提示符,开头的 > 仅用作提醒,无需输入

安装 Git

Git 是版本管理工具,不仅需要使用 Git 来安装插件,网站部署也需要使用,点击下面的按钮来下载:

Git Download

验证安装:

> git --version

特殊:对于 macOS:

macOS 的官方包已在 3 年前停止维护,如要下载,请使用 Homebrew:

在终端中,输入以下命令

$ curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh"

然后

$ brew install git

安装 Hexo

打开终端,输入:

> npm install hexo-cli

验证安装:

> hexo -v

GitHub 仓库

如果你没有账号,去 GitHub 注册一个。

点击右上角 + 号,选择 New repository

Repository name 中填写:你的 Github 用户名.github.io。 属性选择 Public(公开)。

注意:GitHub 的默认分支是 main,而 Git 的默认分支是 master,推荐将 Git 的默认分支改为 main 方便后续使用

配置 Github 的 SHH

打开终端,输入以下命令:

ssh-keygen -t rsa -C "Github 注册的邮箱地址"

按下回车,按四次,直到出现一个奇怪的图时,则完成。图可能会不同,属于正常现象。

接着打开用户目录下的 .ssh 目录(可能隐藏),打开id-rsa.pub,复制内容

进入 Github ,登录自己的账号,点击右上角头像 -> Settings

然后点击左侧的 SSH and GPG keys

点击 New SSH key

标题随便写,内容粘贴刚才的密钥,点击确定,密钥就配置完成啦!

开始

打开终端(Windows 下的 cmd 或其他系统下的 Terminal),输入:

> hexo init blog

这会在当前目录下创建一个网站模板,当你看到 Start blogging,就成功啦!

预览你的网站:

> hexo s

这会打开一个服务器,按下 Ctrl + C (macOS: Control + C,Linux: ^C) 停止服务

如果前面的操作没有异常,你应该会在网站中看见一个带有 Hexo 标题的页面,以及一篇文章 Hello World!,像这样

写文章

在终端中输入:

> hexo new 文章名

然后打开 source/_posts/文章名.md,编辑内容,模板如下:

---
title: 标题
categories: 分类(可选)
---

正文

Markdown 语法参见 洛谷 Markdown 格式手册

配置

我推荐 Anzhiyu 主题,可自定义程度高,兼容很多插件

预览站点:Jerry Zhou's Blog

安装

> npm install hexo-theme-anzhiyu

在网站目录下新建文件 _config.anzhiyu.yml (以下简称为主题配置或 TC),这是配置的基础

配置中文

打开 _config.yml (以下简称为全局配置或 GC),改变以下行:

关于 Git Diff 的提示:将减号后的内容(红色字)改为加号后的内容(绿色字),不要输入任何加号/减号

--- _config.yml
+++ _config.yml
- lang: en
+ lang: zh-CN

配置分类

> hexo new page categories

创建一个分类页,请在此页的源文件 (source/categories/index.md) 中输入以下代码:

---
title: Categories
...
type: "categories"
---

注意:分类页本身不能含有分类

此时回到首页,会发现无法进入分类,这样配置菜单栏:

在 TC 中写入以下内容:

menu:
  文章:
    分类: /categories/
    随便逛逛: javascript:toRandomPost()
  友链:
    johnCh的洛谷主页: https://luogu.com.cn/user/1366636
    # 添加其他想要显示在顶部菜单栏中的内容

注意,GC 和 TC 的更改需要关闭服务器再开启才能生效

此时的菜单栏应该会出现两个按钮

配置评论

这里推荐使用 Valine,它基于 LeanCloud 且方便构建

部署 Valine

注册一个 LeanCloud 账号,点击 新建应用,选择开发版(免费),标题随便起

打开应用,点击 设置 -> 应用凭证,复制 app_idapp_key

注意:不要泄露你的应用凭据

在 TC 中添加:

comments:
  use: Valine

Valine:
  app_id: xxxxx
  app_key: xxxxx

输入你的 app_idapp_key

现在打开网站,点击一篇文章,即可看到评论框

配置 Hexo Admin 控制面板

安装 Hexo Admin:

> npm install hexo-admin

这时打开 Hexo 控制面板,就可以看到后台

这个网页是没有密码的,点击 Settings -> Setup authentification here,设置账号密码,复制下面的代码,写进 GC 里

把上面的代码复制后还要再加一段,这是后面要设置一键部署脚本的路径,记得与上面保持代码缩进!!

Windows:

   deployCommand: './depoly.bat'

Linux/macOS:

   deployCommand: './depoly.sh'

新建 deploy.sh/bat,输入:

+++ deploy.sh/bat
+ hexo g
+ hexo d

如果你使用 Linux,那么还需要将文件标记为可执行:

$ chmod +x depoly.sh

写文章(使用控制面板)

打开 Hexo 控制面板,可以添加,修改或删除文章

部署你的网站

推送到 GitHub

在终端中安装部署工具:

> npm install hexo-deployer-git

在 GC 中找到 Deploy,输入

deploy:
  type: git
  repository: 你的仓库地址 (https://github.com/用户名/仓库名.git)
  branch: main
  url: 目标网址 (如果你选择在 Cloudflare 部署,那么其格式为 https://xxx.pages.dev,如我的博客 https://johnch.pages.dev)

保存文件,在终端输入:

> hexo d

即可推送到 GitHub

我推荐使用 Cloudflare 进行部署,每月有 100000 次访问

部署到 Cloudflare Pages

  1. 登录 Cloudflare 控制台

    访问 Cloudflare ,登录账号。

  2. 进入 Pages 管理页面

    点击左侧菜单栏的 Compute (Workers) -> 选择 Pages
    (旧版界面可能显示为 Workers & Pages

  3. 创建 Pages 项目

    点击 Create application -> Pages -> Connect to Git

    授权访问你的 GitHub 仓库,选择博客源码仓库。

  4. 配置构建参数

    Build settings 选项卡中填写:

    • Build command: hexo g

    • Build output directory: public

  5. 开始部署

    其他选项保持默认,点击 Save and Deploy

    点击 Build and Deploy,等待进度跑完,不要立即打开页面,因为 DNS 服务需要时间

    大概 2 分钟后就可以访问了,完成后默认域名为 <项目名>.pages.dev。

当你看到熟悉的页面时,恭喜!

之后更新文章时,仅需输入 > hexo d 即可一键发布

如果你使用 Hexo Admin

打开 Hexo 控制面板,点击导航栏的 Deploy,输入提交信息,点击 Deploy 即可

Enjoy!