利用Hexo搭建个人博客

Wangjie Lv2
  2024-11-03 23:35:28 2024-11-03 23:35:28 Created   2024-11-20 20:42:47 2024-11-20 20:42:47 Updated    2.4k Words  9 Mins  

预备工作

首先安装 Node.js、npm、git工具。

1
2
3
4
5
6
> node -v
v12.22.9
> npm -v
8.5.1
> git version
git version 2.34.1

安装 Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
> npm install -g hexo-cli

> hexo -v
hexo-cli: 4.3.2
os: darwin 22.6.0 13.6.7

node: 20.8.1
acorn: 8.10.0
ada: 2.6.0
ares: 1.19.1
base64: 0.5.0
brotli: 1.0.9
cjs_module_lexer: 1.2.2
cldr: 43.1
icu: 73.2
llhttp: 8.1.1
modules: 115
napi: 9
nghttp2: 1.57.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.10+quic
simdutf: 3.2.17
tz: 2023c
undici: 5.26.3
unicode: 15.0
uv: 1.46.0
uvwasi: 0.0.18
v8: 11.3.244.8-node.16
zlib: 1.2.13.1-motley

博客搭建

首先创建博客的根目录文件夹

1
2
> mkdir MyBlob
> cd MyBlob

之后，就可以初始化这个文件夹了，初始化的目的是，它会创建一个 helloword.md 文件，然后利用 node.js 等将这个 markdown 文件渲染成一个 html 文件，然后在本地开启一个网络服务器以供前端访问

由于网络问题（npm 的服务器位于国外下载慢）可以使用 cnpm（淘宝团队做的国内镜像）的获取镜像或者直接修改 npm 的资源获取地址为国内的。

1
2
3
4
5
# 安装cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 直接修改npm资源获取地址（推荐）
npm config set registry http://registry.npm.taobao.org
1
2
3
4
> hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

成功初始化后，会在当前文件夹下生成一些文件，目录结构如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── _config.landscape.yml：主题配置文件，如果

├── _config.yml：站点配置文件，对站点进行配置。

├── node_modules：用来存储已安装的各类依赖包。

├── package-lock.json：包版本依赖锁文件。

├── package.json：应用数据，Hexo的版本以及相关依赖包的版本等。

├── scaffolds：博客模版文件夹，包含page.md，post.md，draft.md三种。

├── source：资源文件夹，存放静态资源如博客md文件、图片等。

└── themes：主题文件夹，Hexo通过将网站内容与主题组合来生成静态网站。

初始化项目后，我们只需在根目录下本地执行下面命令即可在本地进行预览

1
2
3
4
> hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

然后我们访问http://localhost:4000/即可查看网站啦

Hexo基本命令介绍

  • 本地启动项目，s 表示 server

    1
    > hexo s

  • 创建一个新的文章

    1
    2
    > hexo new [layout] <title>
    如：hexo new "我的第一篇博客 Hexo Hello!"

    layout 表示文章布局，可选（post page draft），默认使用 _config.yml中的 default_layout 参数代替（post）。

    title 表示文章标题，如果标题包含空格的话，请使用引号括起来。

  • Front-matter

    参看官方文档 

    1
    2
    3
    4
    5
    6
    7
    categories:
      - Sports
      - Baseball
    tags:
      - Injury
      - Fight
      - Shocking

  • clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)

    1
    > hexo clean

  • 生成静态文件，g 表示 generate

    1
    > hexo g

  • 部署Hexo网站，d 表示 deploy

    1
    > hexo d

    更多相关指令可以前往官网查看：https://hexo.io/zh-cn/docs/commands

Hexo基本配置修改

【必改部分】 站点的基本设置，首页标题、子标题、简介、关键词（英文,隔开）、作者、语言和时区，都需要修改，这样才算自己的网站嘛。

打开_config.yml，修改以下部分

1
2
3
4
5
6
7
8
# Site
title: Wangjie's Blog
subtitle: '知识总结'
description: 'Hexo+Github'
keywords: java
author: Wangjie
language: zh-CN
timezone: 'Asia/Shanghai'

重启下 Hexo 服务，我们刷新页面，就会发现上面的修改生效啦～如果没有生效，你可以先运行下hexo clean先清除缓存，然后再执行hexo s启动服务器。

【选改部分】

访问路径相关设置

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

原主题太简陋了，我从官网主题地址：https://hexo.io/themes/ 中下载了Redefine主题，所以我们需要将配置中的主题改为redefine，大家也可以选择其他主题。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: redefine

Redefine主题使用文档

[!NOTE]

注意，该主题Hexo 版本需要大于 5.0.0

Hexo版本升级

Hexo版本升级可以通过npm实现，相关命令如下：
先全局升级hexo-cli：-g表示全局升级。hexo本身是一个静态博客生成工具，具备编译Markdown、拼接主题模板、生成 HTML、上传 Git 等基本功能。hexo-cli能够将这些功能封装为命令，提供给用户通过hexo server / hexo deploy等命令调用的模块。CLI = Command Line Interface命令行界面。

1
> npm i hexo-cli -g

然后直接输入：(其实这个命令应该不正确)，输入之后发现出现了一系列的warn。

1
> npm update

再输入hexo vesion查看当前版本，发现版本已经更新成功了。

将 Hexo 博客部署到 GitHub

首先我们先需要新建在 GitHub 上新建一个项目：https://github.com/new ，项目名称格式需要注意，必须是用户名.github.io，如下图所示：

同时我们需要配置下 SSH 密钥，具体配置方法可以查看我的历史文章：Git设置多账号生成SSH公钥分别连接gitee和github

接着我们要修改下配置文件_config.yml，下滑到最后，将部署信息改为：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:  
	type: git  
	repo: git@github.com:你的用户名/你的用户名.github.io.git  
	branch: main

部署到 GitHub，需要安装相关工具 hexo-deployer-git。

1
> npm install hexo-deployer-git --save

接下来直接输入指令配置就行了，hexo clean清除缓存数据，hexo g生成相关静态文件。

1
2
> hexo clean
> hexo g

如果继续输入hexo d进行部署的时候，可能会报错，Deployer not found: git ，这个时候不要慌，这是因为在本地 Hexo 项目目录还没有初始化 git 造成的，我们运行下面命令进行初始化即可。如果没有报错则忽视。

1
> git init

我们再次输入hexo d进行部署即可，可能会要求输入 GitHub 账号和密码（配置了 ssh 公钥就不需要了，上面有说如何配置），直接输入即可，上传完成后，再刷新 GitHub 页面会发现多了一些文件，原来的 readme 也不见了，这是因为 Hexo 每次部署都会将hexo g生成的静态文件（在 blog/public 目录下）上传到 GitHub，并覆盖原先所有的内容。

这个时候，我们在浏览器内访问

1
2
https://<你的用户名>.github.io/
# 如：https://wj0410.github.io/

即可访问我们的博客首页啦，点击博客也可以进入对应的博客页面。

通过上面，我们已经得到了一个在线的、可以随时随地访问的个人博客，整个操作过程还是很简单的，麻烦的就是上传更新文章和部署项目了，每次部署都需要输入账号密码，另外由于 GitHub 服务器在国外，国内访问速度也很堪忧，不用担心，这个解决还比较简单，我们可以同时将项目部署到国内码云：https://gitee.com/ 或者 Coding：https://coding.net/ ，整个过程和将项目部署到 GitHub 差不多。

设置应用自己的域名

如果你有域名的话，还可以设置专属域名，比如我之前在阿里云买的域名点击查看 ，当然大家也可以买腾讯云的点击查看 ，国内比较靠谱的两个云服务器和域名服务公司了～

首先我们需要在阿里云域名管理后台，进行域名解析，我们直接从我们自己的域名解析到博客的 github 地址，谈及一条 CNAME 记录即可，主机记录就是我们后面通过什么链接访问，记录值就是 github 访问地址了。

然后我们需要到 GitHub 对应项目中设置项目的域名，进入项目-> Settings -> Pages -> Custom domain，将我们设置的 CNAME 域名写入即可（注意是在这个项目的设置里，并非 GitHub 的设置）。

最后我们还需要在本地项目中的 blog/source 文件夹下新建一个CNAME文件，编辑写入我们的域名，就是刚刚填入 GitHub 的，这样后面 GitHub 就能映射到我们的域名啦。

再执行下面命令，重新更新和部署项目

1
2
> hexo g
> hexo d

部署成功后，我们直接访问https://blog.python-brief.com/（我自定义的域名）来查看我们的博客啦～

参考文献

https://xie.infoq.cn/article/90dc08c57463df3a1b2ad960f

https://blog.csdn.net/m0_73651896/article/details/140237281

问题补充

接入Gitalk时遇到跨域问题

以前官方提供的demo代理 https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token 也因为滥用停用了，解决办法有一些，但是前提得有一台服务器，得自己搭建一个代理来访问，例如使用cors-anywhere、nginx代理服务器等，这样就对静态博客的部署方式不太适用了。最后在gitalk的issues中找到了能公开访问的代理地址 ，这里就不贴出来了，因为我要自己偷偷用😊

代理搭建参考

  • Title: 利用Hexo搭建个人博客
  • Author: Wangjie
  • Created at : 2024-11-03 23:35:28
  • Updated at : 2024-11-20 20:42:47
  • Link: https://wj0410.github.io/2024/11/03/利用Hexo搭建个人博客/
  • License: This work is licensed under CC BY-NC-SA 4.0.
推荐阅读
Git设置多账号生成SSH公钥分别连接gitee和github Git设置多账号生成SSH公钥分别连接gitee和github Mysql学习笔记 Mysql学习笔记 PicGo使用GitHub图床 PicGo使用GitHub图床
推荐阅读
Git设置多账号生成SSH公钥分别连接gitee和github Git设置多账号生成SSH公钥分别连接gitee和github Mysql学习笔记 Mysql学习笔记
Comments
On this page
利用Hexo搭建个人博客
  1. 预备工作
  2. 安装 Hexo
  3. 博客搭建
  4. Hexo基本命令介绍
  5. Hexo基本配置修改
  6. Redefine主题使用文档
  7. 将 Hexo 博客部署到 GitHub
  8. 设置应用自己的域名
  9. 参考文献
  10. 问题补充
    1. 接入Gitalk时遇到跨域问题