Start Blogging Here:浅谈 Hexo 搭建个人博客
目录
- 开始之前
- 注:关于
终端
- 安装 Node.js
- 安装 Git
- 安装 Hexo
- GitHub 仓库
- 注:关于
- 开始
- 写文章
- 配置
- 安装
- 配置中文
- 配置分类
- 配置评论
- 配置 Hexo Admin 控制面板
- 写文章(使用控制面板)
- 部署你的网站
- 推送到 GitHub
- 部署到 Cloudflare Pages
- 如果你使用 Hexo Admin
开始之前
注:关于终端
在本文中,可在所有平台使用的命令使用 >
开头:
> Command
仅在 macOS 或 Linux 下的命令用 $
开头:
$ Command
在 Windows 下,终端指 Command Line
或 Powershell
,这样打开:
按下 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_id
与 app_key
注意:不要泄露你的应用凭据
在 TC 中添加:
comments:
use: Valine
Valine:
app_id: xxxxx
app_key: xxxxx
输入你的 app_id
和 app_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
-
登录 Cloudflare 控制台
访问
Cloudflare
,登录账号。 -
进入 Pages 管理页面
点击左侧菜单栏的
Compute (Workers)
-> 选择Pages
(旧版界面可能显示为Workers & Pages
) -
创建 Pages 项目
点击
Create application
->Pages
->Connect to Git
。授权访问你的 GitHub 仓库,选择博客源码仓库。
-
配置构建参数
Build settings 选项卡中填写:
-
Build command:
hexo g
-
Build output directory:
public
-
-
开始部署
其他选项保持默认,点击
Save and Deploy
。点击
Build and Deploy
,等待进度跑完,不要立即打开页面,因为 DNS 服务需要时间大概 2 分钟后就可以访问了,完成后默认域名为 <项目名>.pages.dev。
当你看到熟悉的页面时,恭喜!
之后更新文章时,仅需输入 > hexo d
即可一键发布
如果你使用 Hexo Admin
打开 Hexo 控制面板
,点击导航栏的 Deploy
,输入提交信息,点击 Deploy
即可
Enjoy!