用github pages + hexo搭建博客详细教程

最新推荐文章于 2024-08-17 09:00:00 发布

Simonhans

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量378

点赞数 1

分类专栏： hexo 文章标签： github hexo

本文链接：https://blog.csdn.net/weixin_43713105/article/details/109327796

版权

hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Github Pages

github pages 是github提供给用户用来展示个人或者项目主页的静态网页系统。每个用户都可以使用自己的github项目创建，上传静态页面的html文件，github会帮你自动更新你的页面。
操作如下：

注册 Github 账号，然后在 Github 中创建一个以 .github.io 结尾的 Repository。

1.1 Repository name: 自定义名字.github.io
1.2 勾选 Initialize this repository with a README
1.3 Create repository
简单地编辑一下 README.md 这个文档。比如添加：I am trying to create my own blog…
保存(Commit changes)。
打开网页：你自定义的名字.github.io 这里就可以看到 README.md 里的内容了。如果没有太多的要求，其实直接用
README.md 来写博客也是不错的。

这个生成好的 Repository 就是用来存放静态网页的地方，也只有这个仓库里的内容，才会被 simonhans.github.io 这个网页显示出来。

Hexo

官网：Hexo
Hexo 是一个博客框架。它把本地文件里的信息生成一个网页。如果不需要放在网上给别人看，就没 Github Pages 什么事了。

使用 Hexo 之前，需要先安装 Node.js 和 Git。

操作如下：

安装 Node.js
- 前往 https://nodejs.org/en/
- 点击 8.9.1 LTS 下载
- 安装
- 打开命令行终端，输入 node -v
- ```
 $ node -v
 v12.16.1
```
- 安装成功
安装 Git
- 前往 https://git-scm.com/
- 点击 Downloads
- 点击 Windows
- 一般情况，下载会自动开始。如果没有，就点击 click here to download manually
- 安装
- 打开命令行终端，输入 git --version
- ```
$ git --version
git version 2.27.0.windows.1
```
- 安装成功

额外说明：如果 Git –version 指令不管用，可能需要到 Environment Variable 那里添加 Path。

安装 Hexo

打开 Command Prompt
输入 npm install -g hexo-cli
回车开始安装
输入 hexo -v

$ hexo -v
hexo-cli: 4.2.0
os: Windows_NT 10.0.17134 win32 x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

安装成功

创建本地博客
- 在D盘下创建文件夹 blog
- 鼠标右键 blog，选择 Git Bash Here。如果没有安装 Git，就不会有这个选项。
- Git Bash 打开之后，所在的位置就是 blog 这个文件夹的位置。（/d/blog）
- 输入 hexo init 将 blog 文件夹初始化成一个博客文件夹，可能时间会有点长。
- 输入 npm install 安装依赖包。
- 输入 hexo g 生成（generate）网页。由于我们还没创建任何博客，生成的网页会展示 Hexo 里面自带了一个 Hello World 的博客。
- 输入 hexo s 将生成的网页放在了本地服务器（server）。
- ```
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
```
- 浏览器里输入 http://localhost:4000/ 。就可以看到刚才的成果了。
- 回到 Git Bash，按 Ctrl+C 结束，此时再看 http://localhost:4000/ 就是无法访问了。
发布一篇博客
- 继续在 Git Bash 里，所在路径还是 /d/blog。输入 hexo new “My First Post”
- 在 D:\blog\source_posts 路径下，会有一个 My-First-Post.md 的文件。编辑这个文件，然后保存。
- 回到 Git Bash，输入 hexo g
- 输入 hexo s
- 前往 http://localhost:4000/ 查看成果。
更换主题
嫌弃自带的主题，可以用官网的一些优秀主题模板，当然有能力也可以按官网文档来自定义
- 以hexo-theme-yilia主题为例
- 下载主题，在git bash中博客根目录
```
  $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
```
- 修改_config.yml中的theme: landscape改为theme: yilia，然后重新执行hexo g来重新生成
- 输入 hexo clean && hexo s 启动项目

将本地 Hexo 博客部署在 Github 上

前面两个部分，我们已经有了本地博客，和一个能托管这些资料的线上仓库。只要把本地博客部署（deploy）在我们的 Github 对应的 Repository 就可以了。

操作如下：

获取 Github 对应的 Repository 的链接。
登陆 Github，进入到 ryanluoxu.github.io
点击 Clone or download
复制 URL,我的是 https://github.com/Simonhans/simonhans.github.io.git
修改博客的配置文件
打开本地博客路径下blog/_config.yml （使用 bash 里的 vi 或者 notepad++）
找到 #Deployment，填入以下内容：
deploy:
type: git
repository: https://github.com/Simonhans/simonhans.github.io.git
branch: master
部署，回到 Git Bash，需要先安装hexo-deployer-git插件
回到 Git Bash
```
npm install hexo-deployer-git --save
```
输入 hexo d
得到 INFO Deploy done: git 即为部署成功
查看成果，https://simonhans.github.io

域名绑定

可以申请自己域名来绑定自己的博客地址https://simonhans.github.io，博主这里用的js.org免费二级域名
很多知名项目会把自己的文档托管在 .js.org 域名下面，作为开发者，拥有一个是一件很酷的事。
官网：jsorg
在这里插入图片描述

在你的github pages里的博客项目下新建CNAME文件，内容为你需要申请的js.org域名，例如：
```
simonhans.js.org
```
此时你再访问之前你的XXX.github.io已经无法访问并跳转到了CNAME文件里面的网址。使用过域名解析的都知道，目前只是单方面绑定了，js.org那边还没绑定你的地址
进入js.org官方仓库：https://github.com/js-org/js.org 点击右上角的fork，你会发现这个仓库被fork到自己名下了。
修改fork过来的仓库中cnames_active.js文件，注意他是按照字母排序的，请找到相应位置写入。例如：
```
"simonhans": "simonhans.github.io",
```
前部分表示你要申请的二级域名，也就是之前说的XXX，后部分表示你的GitHub仓库名
回到你fork的仓库，点击Pull Request，并提交它。然后就是等待审核
审核通过你会收到下图所示邮件：
7.通过后不要着急，人家只是通过了你的申请，但是还没给你解析呢，解析后会收到下图所示邮件：

8.现在就可以用你申请的域名访问你的博客了，我的博客
完结，撒花✿✿ヽ(°▽°)ノ✿