搭建Hexo博客

写在前面

经过本教程指导,你可以在15分钟内搭建一个Hexo博客,完全免费,访问速度极佳。

基本原理:使用Hexo自带一键部署将静态页面上传到Github私人仓库,并通过Vercel部署到边缘节点。(速度比Cloudflare Pages更快)

初次搭建

安装

必要程序

前往Node.jsGit的官方网站下载对应操作系统的程序,这里以Windows为例。

开始部署

这里以在E盘的myblog文件夹部署Hexo博客为例:

首先,创建好对应的文件夹。

接着,打开cmd,进入E盘

E:

然后我们通过npm安装Hexo

npm install -g hexo-cli

我们把Hexo安装进myblog文件夹

hexo init myblog
cd myblog
npm install

此时Hexo程序已经部署进了myblog文件夹,我们可以打开_config.yml修改配置

配置如何修改,在Hexo官方文档中都说明了。

安装主题

下面,我们以argon主题为例,安装这款主题。

打开主题文件夹,Git这款主题。

cd theme
git clone https://github.com/solstice23/hexo-theme-argon.git
npm install hexo-renderer-ejs

重命名 Clone 后的文件夹为 argon

Hexo 根目录/_config.yml 中将 theme 项改为 argon

Hexo 根目录/themes/argon/_config.yml 复制到 Hexo 根目录/source/_data 文件夹中,并重命名为 argon.yml

修改复制后的配置文件(有中文提示)

Hexo 根目录/themes 目录下执行

npm install hexo-generator-search --save

Hexo 根目录/_config.yml 中添加选项

search:
path: search.xml
field: post
content: true

发布你的第一篇文章

在myblog文件夹内执行这个命令

hexo new 文章标题

系统会在source/_posts文件夹内生成对应的md文件,只需要打开文件,使用markdown语法编写文章即可。

文章头部可以编辑相关信息:

title: 文章标题
date: 2022-08-08 21:11:30
tags:
   - 标签1
   - 标签2
   - 标签3
categories: 分类名称

预览你的网站

打开cmd,启动Hexo服务器。

E:
cd myblog
hexo server

此时访问 http://localhost:4000/ 就可以查看你的博客了。

上传网站

如果对你的网站效果感到满意,你可以使用Hexo提供的一键部署服务把页面提交到Github。

首先,你需要在Github上创建一个私人的仓库。

接着,你需要安装Hexo一键部署服务。

npm install hexo-deployer-git --save

然后,打开_config.yml,更改deploy部分的配置,如下:

deploy:
type: git
repo: https://github.com/<username>/<project>
 # example, https://github.com/hexojs/hexojs.github.io
branch: gh-pages

最后,在myblog文件夹内执行一键部署命令。

hexo clean && hexo deploy

首次使用可能会唤起浏览器验证Github账号。

完成后,你可以在你的仓库内看到你的网站静态页面。

上线网站

打开 https://vercel.com/ ,使用Github账号登录

选择右上角新项目,在导入Git存储库页面连接到Github账户,这样就可以看到你账户内所有的仓库了,选择你存放博客的仓库,点击部署。

打开部署完成的项目,可以看到域名设置选项,在这里可以自定义域名,只需要根据指引在任意DNS平台添加一条记录就可以了。(不像Cloudflare一样强制更改nameserver)

在项目设置中,打开无服务器函数选项,可以将服务器改为香港节点,这样或许可以降低延迟。

更新博客

像第一次发布文章一样,你可以进一步新增文章;通过更改主题配置,你可以最大程度自定义你的主页。

像第一次启动Hexo服务器一样,你可以在本地预览网站。

同第一次一键部署一样,你可以执行相同的命令,网站会自动上传到Github存储库,Vercel发现存储库发生变化后,会自动重新部署,一切都是全自动的,你只需要执行一行命令。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇