Github Hexo Yelee搭建个性化博客

前言

近几年Github Pages来搭建Hexo博客非常火,因为免服务器和完全免费,并且非常稳定得到大家的青睐,不过国内访问速度比较慢,后面会讲怎么解决。

虽然说搭建很麻烦,但是配置完,就可以安心写文章

首先

Github Pages和Hexo是什么?

GitHub Pages是什么?

About GitHub Pages - GitHub Docs

Github Pages通俗来讲就是Github官方免费托管的静态网页,给开发者提供或者个人提供一个静态网站

Hexo是啥?

Hexo官网

Hexo是基于Node.js的静态博客,依赖少。支持Markdown写文,开源免费

hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js. (github.com)Hexo GitHub开源项目链接

国内访问慢怎么办?

GitHub Pages 在国内的访问速度确实不太理想。以前很多人用 Gitee Pages 来做镜像加速,不过 Gitee Pages 现在已经停止服务了。

目前比较靠谱的方案是用 Cloudflare Pages。把仓库连到 Cloudflare,它会自动从 GitHub 拉取代码部署,自带 CDN 加速,而且支持自定义域名。

开始搭建

搭建环境

因为Hexo 基于Node.js,在搭建过程中一定需要Node.js,通过npm和git来搭建博客

Node.js官网:Node.js (nodejs.org)

Git官网:Git - Downloads (git-scm.com)

Node.js推荐选择长期维护版(LTS版)Node.js download.png

Git就直接选择对应的系统,我这演示的是Windows所以选Windows版本

Git downloads.png

下载安装默认路径下一步下一步然后完成

验证安装是否成功:

按住键盘的Win键+R键打开运行,输入cmd

运行.png

依次输入node -vnpm -vgit –version,如果出现版本则代表安装成功

cmd.png

安装 Hexo

工具准备好之后,就可以装 Hexo 了。

1
npm install -g hexo-cli

装完之后找个地方放博客,比如我放 E:\hexo:

1
2
3
hexo init hexo
cd hexo
npm install

这些命令会生成博客的基本目录结构:

1
2
3
4
5
6
├── _config.yml        # 博客配置文件
├── package.json
├── scaffolds/ # 文章模板
├── source/ # 放你的文章
│ └── _posts/
└── themes/ # 主题

先本地跑起来看看效果:

1
2
3
hexo clean
hexo generate
hexo server

浏览器打开 http://localhost:4000 ,看到 Hello World 页面就是成功了。

换个喜欢的主题

Hexo 默认的 landscape 主题比较朴素,可以去官方主题市场逛逛。

我个人用的是 Yelee 主题,风格比较简洁:

1
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

然后在 _config.yml 里改一下:

1
theme: yelee

每个主题都有自己的配置项,具体看主题的文档就行。

写文章

Hexo 新建文章:

1
hexo new "文章标题"

这会在 source/_posts/ 下生成一个 Markdown 文件,头部长这样:

1
2
3
4
5
---
title: 文章标题
date: 2022-01-20 13:23:24
tags:
---

在 — 下面直接写 Markdown 内容就行。写完了可以 hexo s 本地预览。

部署到 GitHub Pages

先在 GitHub 上建一个仓库,名字必须是 <你的用户名>.github.io。

然后安装部署插件:

1
npm install hexo-deployer-git --save

打开 _config.yml,找到 deploy 配置:

1
2
3
4
deploy:
type: git
repo: https://github.com/你的用户名/你的用户名.github.io.git
branch: master

然后一键部署:

1
hexo clean && hexo generate && hexo deploy

等几分钟,访问 https://你的用户名.github.io 就能看到了。

绑定自己的域名

不想用 xxx.github.io 这种地址的话,可以买个域名绑上去。

在 source/ 目录下新建一个 CNAME 文件,里面写你的域名,重新部署一次就可以了。

国内加速方案

开头说过国内访问 GitHub Pages 比较慢。现在推荐用 Cloudflare Pages 来解决。

配置很简单,把仓库连到 Cloudflare Pages,选择 master 分支,构建命令和输出目录都留空(因为 master 分支已经是编译好的静态文件),然后绑定自定义域名就行。Cloudflare 会自动处理 SSL 和 CDN 加速。

写在最后

博客搭好只是第一步,后面坚持写才是关键。环境配一次就不用再动了,剩下的就是安心写文章。

重新修建网站

网站重新修建

原因

网站之前遗弃以旧,主题作者也没有再次更新和本人学业问题

现在重新修建,有时间定期更新

网站还是原来的味道

根据yelee主题添加网易云,修复github图标错误

GitHub Pages and Cloudflare Pages

网站速度访问

国内

bash 国内访问 https://516700.xyz 现在走 Cloudflare Pages,国内速度比以前好多了 自带 CDN 加速,不用折腾

国内优点:
访问速度还行 免服务器 自动 CDN 稳定
缺点:
偶尔会慢一点,但比以前好

海外

bash 海外也走 https://516700.xyz Cloudflare Pages 全球节点都覆盖了 国内国外一个地址,省心

海外优点:
速度好 免服务器 自动部署
部署方式:
写完文章 hexo deploy 推到 master,Cloudflare 自动同步,不用手动操作

2020/8/27 原文

第一次用 hexo 发文章,不是很完美。以前国内走 Gitee Pages,现在 Gitee Pages 停了,换成了 Cloudflare Pages,反倒更省事了——不用两个地址分开维护,一个域名全搞定。

2022/1/19 12:20

网站重新修建完成,时隔2年
差点还忘记修建,陈旧的配置和停更以旧的主题

今日总访问量:加载中... | 本站总访问量:加载中...
载入天数...载入时分秒...
萌ICP备20220413号